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
| Sky | Omega | Framework | Genesis | Boron | Panels 960gs | |||
| HTML5 |
 |
|
|
|
|
|
|
|
| Tableless Modular CSS |
|
|
|
|
|
|
|
|
| 960 Grid System |
|
|
|
|
||||
| Color module support |
|
|
||||||
| Skinr |
|
|
||||||
| Responsive |
|
|
|
|||||
| 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.
Images: Drupal HTML5 Logo by Jen Simmons, Checkmark by Yusuke Kamiyamane
MONTHLY MARKETING INSIGHTS.
Get thought-provoking and actionable insights to improve how your firm makes a connection with your customers.
LEAVE A COMMENT
[...] Original post: HTML5 Blog on: HTML5 Base Starter Themes in Drupal 7 [...]
[...] Original post: HTML5 Blog on: HTML5 Base Starter Themes in Drupal 7 [...]
Adaptivetheme does have Panels and Content First HTML.
I'm uncertain of the value of this article. Some themes have more features than others. Most people won't (and shouldn't) base a decision on that.
The Layout Studio theme has Drush support too. Please take a look on http://drupal.org/project/layoutstudio_extras
Vasily & James, thank you for the additional info. I've updated the table based on your knowledge. As I said in the article...if it wasn't listed on the project page, then it's not in the article, but I'll try to correct inaccuracies in the table for the near future.
Dalin, thanks for commenting, but I have to disagree. I think people do (and should) base their theming decision on the feature sets of base themes. For instance if you want a responsive HTML5 theme then Omega is currently your best choice. If you want support for the color module then Sky is your only option. Some people might even choose Genesis or Boron because they Do NOT have certain features. I'm not sure what other criteria outside of feature sets we could use to make this decision.
[...] http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7. Posted by admin Filed in Drupal, Reading Leave a Comment » [...]
Agree with. Dalin's purpose is surprising so, it may be interesting, if he could develop.
Nice report Art.. but it's hard to keep up with some of these guys.
Sky is an AdaptiveThemes sub-theme.
AdaptiveTheme was updated Sep 19th (a few days ago) and now is responsive (@media queries) and supports the color module.
The Corolla theme was indended to be Drupal 7s new theme but couldn't get completed on time. It is now also a AdaptiveTheme sub-theme.
The main players in the responsive Drupal theme design seem to be AdaptiveThemes and Omega.
Kent,
Thanks for the info! I've updated the comparison chart to reflect the changes.
I completely agree that they two big players for D7 Themes are AT and Omega. Although, for smaller D7 projects I prefer Genesis because it's not so complicated.
Art
Drupal is a marvelous piece of machinery, transforming from what started as a messaging application into the most powerful CMS on the net.
It was built on the hardware that was available at the time... server-client, when most of the work was done on the server.
The whole topology of the net is changing.. a new generation is being born, and templates for existing systems are not in big demand.
If you are looking for a way to manage mobile devices (and you should be!), maybe looking at another approach than a Drupal Extension should be considered.
What I am finding is that these systems are cranking out extensive amounts of code.
- Kent
[...] Kendall’s favorite is Omega which she recommends using with the Delta module. Here’s comparison from Digett.com: [...]
Do you have any guidance for those of us who are still working on Drupal 6.x? Is Omega still the best choice? I thought I remember reading that Omega D6.x functionality was not comparable to that of Omega 7.x.
Any help would be appreciated!
-Chris
I always used Zen when I was developing on D6. I'm still a big fan. You aren't going to get responsive or HTML5, but I don't know that those are really an option with D6.
Mobile compatibility might be another feature.
I would REALLY like to see Zen in that list. It is really not complete without it, IMHO. But, as of this date, "responsive" and "mobile first" is only available in the Dev branch.
We like Zen as well, Thomas. Everything has limitations, though, and for Zen, "responsive" is a big one. We're hoping the theme catches up soon.
[...] HTML5 Base Starter Themes in Drupal 7 [...]
Nicely done article! Thank you.
Great table. I'll be trying out Omega for my next project. :)
Glad you found it helpful, Katin! Omega's a good theme to try out.
[...] HTML5 Base Starter Themes in Drupal 7 [...]
As a themer myself, I'm not totally agree with this article.
Personnaly, the simplest is the best and I largely prefer to edit some .tpl.php file and some CSS than having plethora theme options to manage all pixels in the browser. I feel to have more control like that.
And with that philosophy, I would put Boron or Framework as winner, maybe Boron first because more supported.
I would love to see the Tao theme HTML5 ready !
[...] Read at source [...]