H5BP4J - Joomla responsive template based on HTML5 Boilerplate
Most of web designers should know about an awesome project HTML5 Boilerplate, which thanks to Paul Irish and other contributors puts a lot of wisdom into a package which is a very good starting point for any web project. At least those designers who prefer to hand-code their HTML and CSS. I noticed on H5BP Wiki that it was used in a few other projects or CMSes, and was converted into a Wordpress theme as well, but there was no Joomla template based on it. Also, since BestJoomlaHosting website required an update (from Joomla 1.0 to 2.5) it also needed its template to be upgraded, so it seemed like a good practice.
Keep in mind that our H5BP4J template is very basic, and should be treated as a starting point for someone who knows CSS, HTML and a little bit of PHP and is trying to create his own template. And it was written for Joomla 2.5 only.
Download the template from GitHub: H5BP4J version 0.1 or browse the code.
The template consists of the following files:
The basis is of course index.html, which became index.php in the template.
I added a few template parameters (defined in templateDetails.xml), which can be modified via Extensions/templates/ in Joomla Administrator back-end:
- logo - an image from main /images folder can be selected (max 200x80px)
- site name and tagline, displayed in the header
- Google Analytics ID - if entered here then there is no need of using additional plugin or module
- modernizr - should the modernizr.js library be loaded? It is included by default in HTML5 Boilerplate, but in case of Joomla template the default is OFF
- JS framework - as you should know Joomla by default loads Mootools Core and Mootools More libraries, what is not needed in most cases for guest visitors (unless the template uses some Javascript functions), also many components or plugins loads jQuery, which became the most popular library some time ago; This parameter lets you decide what is loaded. Remember that if a visitor is logged in (in the front-end) then Mootools will always be loaded.
- jQ version - select which jQuery version should be loaded; most recent is the default (1.7.1 as of Feb 2012)
- plugins.js - should plugins.js file be loaded? It is recommended to keep custom Javascript functions in this one file.
- jQ bottom - HTML5 Boilerplate recommends loading JS files at the bottom of HTML page, but in Joomla you can decide to have it loaded in the head - in such case you can take the advantage of using plugins which combine multiple JS and CSS files, like CssJsCompress
- hide URL adress bar on iPhone - it adds a line of Javascript which hides the address bar on an iPhone; it works only if the page content is long enough (or if forced with min-height in CSS)
- viewport - a setting defining how the website is displayed on mobiles and tablets
- device debug - showing additional div with information about screen resolution and which media query is used
CSS folder contains just 2 files:
- style.css - original from H5BP
- template.css - main file, defining layout, overriding some Joomla classes, containing media queries at the end, and slightly modified print query
Apple-touch-icon files: great overview by http://mathiasbynens.be/notes/touch-icons
Latest H5BP suggests to just copy favicon.ico and apple-touch-icon.png to the root directory, but I included here a snippet from previous version, 2.0, listing 4 possible icons via link rel.
Language folder - it contains only English files.
Enjoy!
Check out also other nice Joomla! templates.
