Joomla 1.5 – HTML5 Template Starting Point
August 28, 2010After staring in awe at Paul Irish’s HTML5 boilerplate, I quickly decided it was genius and wanted to get a starting point for any future Joomla projects where we at XID deem html5 ok to use (which from this point on should be most). I took a few minutes and redid / added some Joomla-esque requirements (such as the head jdoc, correct paths to the files for a J! template, etc.).
Remember, this is a J! 1.5 starting point for your template, just as Paul’s boilerplate is a starting point. There’s no fancy template framework, grid system, or anything that isn’t present in Paul’s template. It’s the same thing with some Joomla! goodness attached.
For those that are interested, someone is working on HTML5 overrides for Joomla templates. I briefly looked at it but didn’t implement them here as I have some questions on the semantic implementation of the ‘header’ and ‘section’ use in the overrides. The overrides use them for the different J! articles, blogs, etc. Everything I’ve read indicates ‘header’ and ‘sections’ elements should be used differently but I’m not 100% convinced either…so I’m going to make that your decision to implement. For more information on the ‘section’ element, read here, information on the ‘header’ element read here.
I took an hour and converted my old test template “Usability” using the boilerplate. It was easy, quick, and works flawlessly in IE (though I haven’t tested in IE6 yet). I didn’t take the time to strip out the old CSS overrides from the Blueprint framework but the boilerplates’ are still used.
Download the Joomla 1.5 optimized version of Paul Irish’s Boilerplate here
Download the HTML5 version of Usability here.
Thanks to:
- Paul Irish’s HTML5 Boilerplate (of course)
- Brian Teeman (The first time I heard of the setGenerator() method was from his blog)
Happy to talk about the choices in the overrides. I haven’t edited them for a while, and the spec has evolved a bit since the last time I used them. And, as in everything, there’s always the distinct possibility that I’m wrong.
I posted them on the forge site precisely to get feedback from everyone else, in an attempt to figure out what *is* the best idea.
My current thinking about the semantics of the elements is shaped by boblet’s flowchart (http://html5doctor.com/happy-1st-birthday-us/) and I extended it just a little (as indicated in this presentation to the local user group:http://www.slideshare.net/paladinwebservices/html5-update-4755023).
I’m interested in hearing where you think I went wrong with what I’m doing, and how you think it would be better.
@Arlen – Hey man, thanks again for starting the html5 override project. I wasn’t saying necessarily that you “went wrong” in them…just more I’m unsure if it’s 100% semantically correct (unsure being the key word). For instance, the HEADER tag, from what I’ve read, should only be used once on a page and define the header part of a document.
Again, there’s a lot of information running around about html5 semantics and I’m still going through and assimilating what is correct and what isn’t (Especially since HTML5 isn’t a complete spec yet).
Cool! Thanks for the update. I need to look into HTML 5 overrides as well. I also have heard the HEADER tag should only be used once.
Anyways, thanks for the template. It will come in handy :)
No prob Tim! Let me know if you have any ideas to enhance it.
Hey Rick, thanks for this. Great work. I added Arlen’s overrides to it and am also HTML5izing (yeah I made that up) K2 and Tienda overrides. Still debating whether I want to add LESSCSS since there are a few other good options out like Turbine and SASS.
Regarding the semantic use of the element – from looking here: http://dev.w3.org/html5/spec/Overview.html#the-header-element it seems pretty vague one way or the other. It can be used as a header for a section so assuming that you might have more than one section on a single page – the assumption would be that you could use more than one element on the page.
Yeh I’ve been reading a lot about html5 this past week and it is vague. Some say it’s a one time only and others interpret it to be used all the time. Sections are equally confusing as they give the impression sections shouldn’t be used in conjunction with the article tag. It’s all a little too ambiguous for me…but welcome to progress! Thanks for the complements. I’ve used Arno’s overrides in two templates recently.
Thanks for your input on HTML 5 and Joomla.
I am still looking for any commercially available Joomla Templates that use HTML 5.
Cool! Thanks for the update. I need to look into HTML 5 overrides as well. I also have heard the HEADER tag should only be used once.Anyways, thanks for the template. It will come in handy :)
[...] http://beautyindesign.com/blog/joomla-1-5-html5-template-starting-point/ [...]
Thank you for this! I was going to do this, but I’m glad that you thought about it first and saved me the work. I just updated the code to get latest jquery library.
j
[...] There are however, HTML5 options for Joomla. You should see the following resources for these…http://beautyindesign.com/blog/j…http://joomlacode.org/gf/project…Joomla! as standard does not come boxed with HTML5 features but [...]