html5 Joomla modules

A new html5 module chrome for OneWeb, my responsive boilerplate template, brings html5 elements to Joomla! modules.

OneWeb, my responsive Joomla! boilerplate was originally conceived and built to be 100% html5, making use of the new semantic elements wherever possible. However, Joomla’s treament of module positions meant that all modules were being output with only meaningless divs; not cool.

Fast forward 🔗

To remedy this I have created a new module chrome, style=“html5”, which gives all module positions the full html treatment wrapping each module in an article tag and creating a header and content section for the modules output.

The html5 module chrome adds the familiar class .moduletable to the module article to clearly differentiate modules from the output of com_content. OneWeb’s com_content overrides add the class .article to Joomla! articles. This may seem a little confusing, but it is important to remember that the html5 element article does not equate to the Joomla article, it is merely a discrete html5 element.

I use this how? 🔗

If you want to target a Joomla! article in your css you should use article.article, but if you are targetting a module use article.moduletable. Simple eh? To make things easier still, the module chrome outputs the Joomla module id to the article element, so you can even target inidividual modules in your css.

In stores now 🔗

These changes are already integrated into OneWeb so are available on Github now: https://github.com/nternetinspired/OneWeb 🔗 and you can see the code in action at http://joomlafuture.com 🔗 . If you are updating from a previous version you need to add the file /html/modules.php and update /index.php to make use of the html module chrome.