Evaluating Base Themes

It’s rare in Drupal that you need to truly build a theme from scratch. It’s also rare that you should use Bartik as the base theme for your site (unless you want to — which is okay too). My three favourite base themes are NineSixty, Zen and Fusion. I like them for different reasons and each of the three themes only when it’s appropriate. Zen for its documentation, NineSixty for the speed of banging out a design as a theme, Fusion for client-controlled, future-proofed themes.

Even though I have my favourites I still like to stay up-to-date with what other base themes are doing. This blog post (and the video at the very bottom) cover how I evaluate base / starter themes. Note: I evaluate for themer experience first. The quality of the markup (semantic, valid, accessible) is not my priority at this stage because I'm usually adding my own markup to the mix as well. When you evaluate your base themes it may, however, be the first thing you want to evaluate. To each their own ... this is how I roll though.

This is not meant to be a how-to-use a base theme, nor is it meant to judge whether AT is better than Omega or better than this or better than that. All base themes have value to the team who created them. Most are also relevant to a larger community of themers. If you include different criteria when you are evaluating base themes, I'd love to hear from you.

1. Download the base theme (usually with Drush) and look for a README file. If there is one—read it.
2. Poke at the theme files but do not read comprehensively yet.
3. Install the base theme and set it as your site’s default. Check it out. Repeat for any starter kits or alternate options that ship with the theme.
4. Examine the default state of the theme applied to your Web site and look for helper info—for example region names printed out or wireframe borders. Omega ranks high on this test, Adaptive Theme ranks low. That doesn’t mean the themes you can build from this base theme will be better or worse, I just like to *see* how a theme will render and this is a quick no-code test.
5. Check the theme settings page for what can be controlled from the UI—and more importantly what the theme expects you to control from the UI. For example: the width of a region may be controlled from a theme setting, or you may hard code it in your page template file. In NineSixty, for example, it’s hard coded. I’m cool with that when I just want to bang out a theme (or prototype a design). In Omega there are zones and regions and configurable widths in the administrative UI. This is also good, but different.
6. How does the default theme behave with content? Often I skip this stage on a quick review, but Drush + Devel Generate makes it so easy to do that you might as well chuck some content into the site and see what happens.
7. Finally I look at the code. You can definitely use validation checks, but I usually skip validation and assume things will be okay-ish out of the box. You may want to stop and make sure the code is going to be compliant with various standards and your personal moral code.
8. What CSS is provided, and how is it structured? Is there one big CSS file, or lots of little files? Is there rtl support? (Do you even need right-to-left language support? Are you sure?)
9. What tpl.php files are provided? What custom variables are used? Are the custom variables documented in the header of each template file, or do you need to know the core variables off-by-heart and guess at what’s provided by the theme? You may need to dig around in the file template.php to figure out how the variables are built, how core variables have been manipulated, and what each of the variables in the template files is actually doing.
10. Now that you have an overview of how things fit together: think about how you build/receive your designs. If you use 17-column designs you will not be happy with a 12-column CSS grid framework. If you care about lean, semantic markup, mothership might be better than Zen for your workflow. Remember you are trying to save yourself work—if the base theme assumes “unnatural”-for-you workflow, choose a different base theme. Keep looking until you find something that “clicks” with how you work (you may even need to create your own).
11. Rough out your last three designs with the base theme. Mentally (or on paper) sketch out how you would have built the design using the base theme you are evaluating. Remember you can add, or remove, (almost) any region, variable or markup you don’t like…but if you have to change a lot, ask yourself if this is the right base theme for you.

And there you have it: the steps I go through when evaluating a new base theme for Drupal.

In the video (below) I take a peek at currently popular responsive base themes AdaptiveTheme and Omega using my "from a themer's perspective" criteria that I outlined above.

Can't see the video in your reader? Click here to view the video.

If you're interested in finding out more on how to create a mobile-friendly, responsive web site faster by using base themes, sign up for my new workshop Responsive Web Design for Drupal.