HTML5 Base Starter Themes in Drupal 7
With the emergence of the semantic web and the proliferation of mobile browsing devices, HTML5 is all the rage in front-end web development. We can better explain to search engines the context surrounding a piece of content by using HTML5. Along with CSS3, HTML5 allows us to make active exciting website designs without the overhead and compatibility issues of Adobe Flash — especially on mobile devices. In the Drupal community numerous HTML5 themes have begun to crop up. If you plan to leverage these advantages in your next website, the question is which HTML5 base theme should you use as a starter theme.
Finding the Best HTML5 Base Themes
Out of 174 Drupal 7 themes on Drupal.org, 16 of them claim to use HTML5 markup. From here we can pare down a little further:
- We are only interested in the base themes that can be used as a starting point to create our own custom themes.
- We want to stick with themes that are under active development, have a recommended release version, and have more than 100 reported installs.
- This leaves us with a total of eight HTML5 base themes for Drupal 7.
Since I only have experience with one or two of these themes and it would take me weeks to build a theme using each of the eight candidates, I will compare and contrast the themes based on their Drupal project sites; if a particular feature isn't listed on the theme project page, then it won't be here. (If you are a maintainer or user of one of these themes and you have some firsthand knowledge, leave a comment and I will update the table.)
HTML5 Drupal 7 Base Themes Comparison
|Tableless Modular CSS|
|960 Grid System|
|Color module support|
|Drush support (may require other modules)|
|Panels or Context Integration|
|Content First HTML|
The table above is sorted by the popularity (number of downloads) for each theme. Sky, Omega, AdaptiveTheme, Framework, & Genesis show reported installs in the multiple 1000s, while the remaining three report less than 1000 installs.
Summary of Findings
As you can see, Omega has the most features of any of these HTML5 base themes and is one of the most popular. My experience with Omega is that it is an extremely well put together theme. There is a bit of a learning curve due to the vast number of configuration options, but once you have figured out how all of the settings relate to each other, most of the layout can be configured in the browser. It is my opinion that Omega is great for new themers, design shops that can systematize their process based on it, and anyone who would rather configure in the browser instead of writing CSS & PHP code.
Some of the other themes in the table tend to be more "minimal." They are designed to bring Drupal html up to HTML5 standards, include CSS resets & content first HTML, and add some "preferred" feature that the particular developer likes. Since I am used to theming with Zen on D6, some of these minimal base themes appeal to me. I haven't had the chance to take them for a spin, but I would suggest that you try them out if you prefer a clean slate for a base theme and like adding your own CSS & PHP layout logic directly to the files.
Conclusion and Predictions
As these themes develop I think Omega will likely become the dominant player in Drupal 7 HTML5 base themes. It is in active development and has its own microsite with detailed documentation. The unique features that really set it apart are the Context integration, Responsive layout (can adapt to different size displays), and Drush support. On top of that there is a UI sub-module in development that will allow drag & drop configuration of Omega layouts.
There will likely be a second theme that is minimal in it's approach that will be competitive with Omega in reported installs, but it isn't clear which theme that will end up being; Sky or an HTML5 port of Zen are likely candidates.
I hope this analysis is helpful in weighing your options for a starter theme. Researching & writing this article has definitely helped me understand the climate better. Please share your experiences and opinions in the comments below.