Drupal Base Theme ReviewPosted: June 24, 2012 under Drupal
Lately it seems there has been a lot of activity with Drupal base themes. Old favorites are being overhauled to adapt to changing techniques and standards. New options are popping up as well, looking to solve old problems in new ways.
For those that aren't familiar with base themes, the idea is pretty simple.
A base theme takes care of many of the common tasks - page layouts and CSS resets, for example - that are involved in creating a Drupal theme. Theme developers and designers can then create a sub-theme that builds on top of the base theme, thus saving a whole lot of work.
To put this review together, I set up a test site on my local machine and installed a sub-theme for each of the seven base themes I decided to include. I didn't tweak any settings or add styles. However, I did add a bit of dummy content using the Devel module to provide a better look at the styles that had been included in the theme by default. I then took two screenshots for each base theme, the settings page and the default front page, so you could get an idea of what you have to work with after installation.
I hope to update this resource from time to time, so if you know of a base theme or an important point regarding one of these themes that I've left out, please leave me a note in the comments.
OK, let's get started by taking a look at the table below which compares the seven themes in this review on a few key features.
As far as base themes go, Zen is the Big Kahuna. It is downloaded more than any other theme and is very well supported and very well documented. Some of the things that Zen provides are:
- HTML5 markup
- HTML shiv/Modernizr (browser capability detection)
- Responsive design
- Zen Grids
- Normalize CSS (a CSS reset)
- Respond.js (helps with responsive layouts)
- IE conditional classes
And of course, there's a lot more. As a bit of an aside, does this list make anybody else's head hurt? There is so much going on with web design right now it can be tough to keep up with.
It seems most Drupal base themes have responsive design included and I think the next big area of emphasis is likely to be Sass, and as you'll note from the list above, Zen has you covered. Let's take a look at the screenshot below to see the theme settings for a Zen sub-theme.
You'll notice that the theme settings are pretty much standard, although there are a few options at the bottom of the page that aren't visible in this image that deal with responsive settings and rebuilding of the theme cache. What this tells you is that Zen is a base theme aimed at developers. There aren't any nifty theme settings or layout tools available, so you'll have to do that stuff in code.
For some of you, that's absolutely perfect. But some designers and do-it-yourself types may want to look at some of the base themes that provide more theme configuration options in the browser.
Above is a screenshot of a default front page using a Zen sub-theme. You can see that minimal styling has been applied, although the main menu is included and the links for that menu are displayed inline, but that's pretty much it. But for those of you that have built a theme from scratch, you'll see a lot of geat stuff here that will save you loads of time.
Another of the most popular base themes is AdaptiveTheme by Jeff Burnz, a guy who has made huge contributions to the Drupal community. One of the things that really sets his themes apart is a strong focus on accessibility. Now, I know we're all trying to pay attention to such things, but Jeff takes it quite seriously. That makes AdaptiveTheme a very attractive option for government and non-profit sites that need to validate for more stringent accessibility standards.
- Responsive design
- Pluggable layout system
- WCAG 2.0 level AA compliance - "110% committed to accessibility"
- Backwards compatibility with older browsers
- SEO optimized
And if you choose to add the extensions you'll get...
- Fonts - web safe fonts, Google fonts, custom fonts and integration with @font-your-face
- Title and heading styles
- Mobile friendly meta tags
- Apple touch icons
- Image field alignment and image captions
- Breadcrumb settings.
- Mobile regions - unset any region or move a regions blocks to another region when in mobile browsers
- Unset CSS
- Custom CSS input - for those minor overrides, no need to build a sub-theme, just enter some CSS in the text box provided.
And there's more, of course, but you get the idea. AdaptiveTheme is loaded. Let's take a look at the theme settings page:
Here we see something quite different from what Zen has to offer on the theme settings. The first thing we notice is the ability to configure page layouts in the browser. Pretty nice. You'll also notice that these layouts can be configured for tablet and mobile devices as well.
I've read discussion threads that talk about the pros and cons of having a GUI for these sorts of things and I know there are some hardcore coders out there that feel it's just bloat. I personally love it because it usually ends up being a great time saver and is particularly helpful to those who aren't as comfortable coding. This latter point can end up empowering your clients and reduce those support emails. That's a win-win in my book.
The default front page is more or less the same as Zen, although the site name is handled a bit differently and the navigation menu has been moved under the main menu. When we look at the next theme, however, you'll see why I'm including screenshots of the default front page layout.
For those of you that have been following me for a while, you'll know I'm a big fan of Omega theme. It was one of the first responsive HTML5 base themes and this helped it gain traction against some of the more established competitors. Omega includes:
- Responsive grid layouts based on 960.gs standards.
- 12, 16, 24 column layouts built in.
- Performance enhancements making Omega the best performing base theme to date.
- HTML5 and XHTML starter kits.
- Content first layouts with push/pull classes.
- Quickly disable groups of and individual regions and zones.
- Every region/zone size and placement configurable.
- Apply custom CSS classes to any region/zone.
- Enable/Disable CSS from both Omega, Drupal core and contributed modules.
- Create contextual layouts with the Delta module.
The above list comes from Jake Strawn, the author of Omega theme, but I'd like to note that the last point about contextual layouts is the subject of my next blog post. It's a killer add-on feature that can eliminate the need for Panels and makes Omega templating very easy and very fast. Let's take a look at the settings page:
There is a lot going on here, most of it having to do with layouts and toggling stylesheets. Again, I'll emphasize that the zone and region configuration options that you'll find here are very easy to configure and have saved me lots of time on projects.
The Omega project page also notes that some big sites - including Acquia - have jumped on the Omega bandwagon. Here's a few of the more notable:
- Maxim Magazine - maxim.com
- Fox News Magazine
- Drupal Commerce
- Acquia - acquia.com
- Mac|Life - maclife.com
- MaximumPC - maximumpc.com
- GuitarWorld - guitarworld.com
I'm working on a redesign of this site using Omega theme, as well, that will hopefully roll out around September 1. Now let's take a look at the default front page for an Omega sub-theme:
This is really why I included screenshots of the default front pages for the base themes. Omega includes both a grid and a block overlay to help you configure layouts. Changing the width of the various blocks and regions is as simple as a few mouse clicks. This is an awesome feature that makes adjusting layouts really easy and intuitive.
If you're interested in setting up your own Omega base theme, I wrote a post that walks you through the process. My bottom line on Omega is that, all things considered, it's the best base theme available.
To be honest, I've always had a bit of resistance to using Fusion. This is entirely down to its dependence on the Skinr module. Yes, I know, Skinr and its replacement Fusion Accelerator are really useful and cool, but investing in a theme with a module dependency can be a tricky thing, as any who used Fusion and wanted to upgrade to Drupal 7 found out. It ended up being quite a wait.
Here's a look at the settings page for Fusion:
We see some nice configuration options, including the ability to tweak fonts on the 'Typography' tab. But now we get to the question of whether Fusion is a responsive base theme. You may not be able to read it very well in the image, but there is a note right above the settings that says, "Pro tip: Download and enable the Fusion Accelerator module to support responsive layouts."
So whether you call Fusion responsive or not depends on how you want to define things, but I don't care for this approach. On the other hand, Acquia Marina, one of the most popular free themes of all time is built on Fusion. If the module dependency doesn't bother you, Fusion really does have some great things to offer.
Pretty much the typical default front page, except you'll note the main menu isn't displayed.
The Genesis theme is also by Jeff Burnz. I'm not that familiar with Genesis, but the primary differences between it and AdaptiveTheme seem to be that Genesis is more stripped down and doesn't support responsive layouts. The features of Genesis include:
- Standards compliant
- Modular CSS
- Flexible layout options
- Built in support for theming site sections
- Gpanels - multi-column, fluid grid micro-panels
- Content source ordered for SEO
- No complex logic in templates
- Advanced dynamic CSS classes
- Conditional Styles module included
Again, you'll notice that one thing that really sets Jeff Burnz' themes apart is a strong focus on accessibility. If you're a government or non-profit that has to pay special attention to compliance with WCAG AA, Genesis is another good option to check out.
Let's take a look at the settings page:
Nothing to see here folks. It's the default theme settings which tells you the theme configuration is going to be done in code. That's not a bad thing, but if you're not comfortable working with theme code, AdaptiveTheme may be a better choice for you.
The default front page looks similar to most of the other base themes we've seen except that a bit of extra styling has been given to the menus.
The Arctica base theme is from SooperThemes and it provides a nice responsive option that can be extended by using the Tundra base theme extender. You'll notice from the screenshot it also comes with some nice layout configuration options.
When you add Tundra into the mix, you get some jQuery goodies, including a font kit and slideshow support, which can be a big time saver. This makes a lot of sense considering SooperThemes sells premium themes and these type of features are very helpful in that market, if not required.
Arctica has the least default styling applied of any of the themes in this review. I know there are a lot of people that this suits just fine, but it does add a bit of extra work.
All in all, Arctica is a good choice, though at this time there are a couple small drawbacks. The first quibble I have is that the author, Jurriaan Roelofs, who I think is top notch, by the way, has branded Arctica with the SooperThemes logo. The problem I think this presents is that it likely hurts adoption of a pretty kick ass base theme. Think about it, if you're a consultant looking for a theme to work from, would you want to select one that has another company's logo on it?
The second issue is that it is very light on documentation, more so than the other themes listed here. If you're experienced with Drupal themes, this won't present much of a problem, but it might be an issue for newbies. I'm very sympathetic with how tough it can be to keep side projects going, believe me. It has taken me forever to finish the redesign of this site, so I don't mean this as a criticism so much as a heads up. But that said, Arctica plus Tundra can save you loads of time and is definitely worth checking out.
Update: Jurriaan provided a link to some testing he has done on the performance of the varioius base themes. You can find the link to his tests here. You'll need to scroll down a bit and click the link under the "Performance" heading. Jurriaan notes that the results were not intended for publication, no rights can be derived, etc. He is just sharing some data he produced doing his own performance testing.
The final base theme we're going to look at is TB Nucleus. I haven't spent a lot of time with this base theme, either, but it has some nice features which include:
- Flexible and visual layout settings
- Control display of grid system
- Assign blocks with drag & drop to a region in the layout setting (requires jQuery Update)
- Typography options using default fonts, Google web fonts or custom fonts
- Support multiple colours with multi-skins
- Advanced block styling
- Supporting custom styles for SuperFish and QuickTabs
- Installation profile
Above we see the settings page and we notice something a bit different. TB Nucleus includes a drop and drag interface for creating layouts (you'll need the jQuery Update module for this to work). This is a pretty nice feature and is an example of why I think this base theme deserves some attention. It has a lot of potential in the the do-it-yourself market, which makes sense as ThemeBrain is a premium theme provider.
There are two things that make me hesitant to recommend TB Nucleus, however. The first is that it isn't a responsive theme, which for me is a deal breaker. The second is that it doesn't use HTML5. The good news is that the guys at ThemeBrain are hard at work addressing these issues, so this is definitely a theme to keep an eye on because it is loaded with a ton of nice features.
Choosing a base theme is mostly a matter of preference. All of the themes listed here have a lot to offer and save designers a great deal of time when building sites. As I mentioned, I love Omega and have used it on many projects and can wholeheartedly recommend it. If I had to pick a runner up, I would have a tough choice in front of me. Depending on the client, Zen or AdaptiveTheme would probably win out, but I would also consider going with Arctica.
Again, if you have any suggestions or corrections, please feel free to leave them in the comments below. I'll try to do an update to this post in a few months and put all the suggestions in at that time. I've written a related post on responsive Drupal themes that you may like as well, particularly if you're not quite sure what all the fuss is about.