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
- jQ version - select which jQuery version should be loaded; most recent is the default (1.7.1 as of Feb 2012)
- 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
- 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.
Check out also other nice Joomla! templates.