A Review of Drupal 6 Starter Themes

Perusing the themes available on drupal.org reveals that there are over seven starter themes for Drupal 6 in addition to Zen, the original "starter" theme for Drupal. Starter or "base" themes are a class of themes that seek to provide best-practices starting points for themers to build unique designs. Most include a common set of features necessary for most sites, helping to minimize the repetition of a themer recreating many similar files, markup and code for each project. Also, using the same starting point and similar methods helps with forward maintainability and makes it easier to collaborate within a team.

There are a number of factors that weight ones preferences in a starter theme, such as layout techniques, SEO optimization, accessibility, code/file simplicity, and good documentation and code comments. The fact that there are this many starter themes suggests that many recognize their utility. It also reflects different preferences on what to include in a starter theme. You might also take a look at this Drupal 6.x Starter Theme Comparison table.

It's a daunting task to review this number of themes, and so it would be great to hear from anyone who has had more experience with any of these, as I have relied on Zen for clients projects. All of the themes I review here have table-less layouts, provide IE-specific CSS files, have valid XHTML markup, and run on Drupal 6.

Zen

Created by Jeff Robbins and currently maintained by John Wilkins

Most Drupal heavies are already familiar with the Zen theme. There are many resources that explain the logic behind Zen and how to use it. I will highlight some of Zen's features in order to contrast it with the themes I am reviewing.

Zen is geared toward allowing themers to do nearly all their customization via CSS in a subtheme without having to edit (much) PHP or HTML. Prior to Drupal 6, all sub themes needed to be placed inside the Zen theme folder, but now you can place your subthemes on the same level as the Zen theme folder, a nice new feature. It uses a negative margin technique to achieve a content first source order, which is useful for SEO optimization and accessibility. Advancing the designer-friendly goal further, it offers configurable options in the theme settings for fixed-width or fluid-width layouts and options for the display of the breadcrumb links. In particular, I like its tabs, which utilize the sliding door technique with background images. It also renders edit links in blocks, a great usability feature.

Zen is flexible and feature-rich in order to fit most any scenario. There are a lot of files and code involved, and it can be overwhelming to fully learn how it works inside and out. But with everything Zen provides, many find it much easier to start with it rather than starting from scratch or building on top of an another theme.

Highlights:

• fixed-width or fluid layout
• subtheme framework
• content first source order
• graphical tabs
• block edit links
• accessibility features: skip navigation link
• plenty of CSS selectors and divs for endless theming possibilities 
• theme setting options: fixed-width or fluid-width; formatting for breadcrumb links
• graphical styles for status, warning and error messages
• “blank canvas” appearance

Basic

Created by Steve Krueger

Basic is described as a striped-down version of Zen. It features extensible
CSS classes and IDs, and content-first source order with fixed or fluid width.
Its code and CSS are well documented. It also includes some of Zen's
indispensable features, like tabs and block editing/admin links. The most notable difference is that Basic does not include the subtheme framework of Zen, which not everyone needs for their particular purposes. It also does not offer any special configurable options in the theme settings, as Zen does. One unique and very cool feature to Basic is that it detects the end user's browser and provides different body classes depending on the browser.

Also notable is that it provides reusable CSS classes for handling floating and clearing elements in the style.css file, including .clearleft, .clearright, .clearboth, .floatleft, .floatright and .clearfix. The rest of the css files are neatly placed within a /css sub directory which includes most of the same CSS files as Zen: tabs.css, print.css, layout-fixed.css, layout-liquid.css, ie6.css, ie7.css, plus a main.css intended for more design specific styling. Another feature of the CSS is that there are background colors for each part of the layout so that they stand out during the design process.

In terms of template scaffolding, the node.tpl.php it makes it easy for designers to handle their teaser differently by providing clearly marked area for markup sent to the teaser along side HTML sent to a full page. This can cut down on the number of template files necessary to theme teasers separately, while also not requiring a themer to code any PHP.

Highlights:

• fixed-width or fluid layout
• content first source order
• graphical tabs
• block edit links
• accessibility features: skip navigation link
• plenty of CSS selectors and divs for endless theming possibilities
• reusable classes for floating and clearing boxes

Beginning

Created by Robin of biboo.net

Beginning has a centered fixed width layout supporting one, two and no sidebars. It uses negative margins for a content-first source order. It boasts 10 regions, with all the usual suspects, plus three additional 300px wide footer regions that sit three in a row. It also duplicates the display of primary links at the bottom of the page. It has nicely themed status, error and warning messages, with graphics for each, similar to the Zen theme.

A few marks against it: in page.tpl.php there is some HTML inside of PHP,
which is not usually recommended as it makes it more difficult to read the HTML. Also it's missing "skip navigation" links in page.tpl.php, necessary for accessibility. Also, it does not allow for the logo and site name and/or site slogan to appear simultaneously.

Highlights:

• fixed-width centered layout
• content first source order
• accessibility features: skip navigation link
• graphical styles for status, warning and error messages
• three additional parallel 300px wide footer regions

Blueprint

Created by Theodore Serbinski

Blueprint uses the Blueprint CSS framework, which offers a CSS based grid system, a starting point for styling where pre-defined selectors make layout and box elements line up, including font and blocks of text. Many prefer and highly recommend the use of a CSS framework.

I like the light styling on form elements. One unusual thing I noticed is that the names of CSS selectors for all the layout elements are defined inside template.php. So in page.tpl.php the sidebar div will have a print $left_classes variable where the exact names of the classes will be defined in template.php. I do not see any improvements for this arrangement and would make this theme more difficult for designers to use. It would be nice if this theme had skip navigation links for accessibility.

Highlights:

• fixed-width centered layout
• utilizes Blueprint CSS framework
• block edit links
• “blank canvas” appearance

Framework

Created by Andre Griffin

Framework is a solid theme that has a simple code, file structure and layout techniques. It's a fixed width theme that supports one, two and three columns. It also has good documentation through out the code. The CSS is contained it a single well organized and commented style.css file, which includes an proximate pixel font size to em font size table. What a useful resource to in the CSS file! Unlike Zen, it does not use the negative margins to accomplish a content first source order, which may appeal to anyone who finds that the added complexity of the negative margin technique is not always worth its benefits.

There is a bit of color in this theme, and it includes special styling of admin pages, which I find easy on the eyes. There is a function to apply even/odd classes to menu lists. The layout and content has a bare minimum of divs. So if, for example, you wanted to add rounded corners to the design, there are not quite enough divs available for that.  A couple marks against it are that in the page.tpl.php it has a bit of HTML inside of PHP and it does not have the "skip navigation" link in the source for accessibility.

Highlights:

• centered fixed-width layout
• content first source order
• basic floats for multi-column layout
• graphical styles for status, warning and error messages
• three additional parallel 300px wide footer regions

Flexible

Created by Steve Lockwood

This theme has minimal CSS styling, but offers a flexible-width or liquid layout and features configurable accessibility options. It hooks into the theme settings API to enable the theme to offer users the option to switch the page layout from two or three column layout to a linear layout, increase the font sizes and switch between color schemes. It also gives you the option to move these font, color scheme and layout switchers to any block region.

Flexible also provides configurable rounded corner styles through the theme settings for most elements of the page. This feature does complicates the page.tpl.php with a bit more PHP code and adds a separate folder for each rounded corner style with its own images and CSS file. Depending on one's preferences this may or may not be desirable. The theme's settings options also allows you to add classes to specific blocks, specify additional style sheets and add inline styles that will apply to all pages. All in all, an impressive amount of customization that can be made through configuration. Themers looking to explore the settings API should start here for a good example.

Highlights:

• fixed-width or liquid layout
• accessibility features: skip content and skip navigation links; configurable options for providing users with the ability to adjust font size and color scheme
• graphical styled status, warning and error messages
• lots of options via the theme settings API

Foundation

Created by Rowan Kerr

This is a really simple "blank canvas" starter theme with clean code and CSS that is well commented. It's similar to Framework, but without the even/odd selectors on menu lists and with less colorized styles. The only thing that I would say is missing is a "skip navigation" link.

Highlights:

• liquid layout
• "blank canvas" appearance
• basic floats for multi-column layout
• clean easy to read code/markup

Genesis

Created by Jeff Burnz

Genesis is most comparable to Zen. It uses negative margin for the content first layout and has a sub theming framework. It also has Zen'z tabs, and admin block editing links. The sub themes have many empty CSS selectors setup. The project page provides video tutorials on how to get a sub theme up and running as well as how to use Firebug for fast prototyping of styles. It offers the easy ability to select from seven different layouts by changing the ID selector on the body tag in page.tpl.php.

The main differences I can find from Zen is that Genesis does not offer configurable options in the theme settings. It also organizes it's 10 CSS files into a /css sub-folder with instructions on how to select which CSS files to use. Alternatively it is possible to minimize the number of CSS files used in the theme by selecting all-in-one.css file, which aggregates the CSS of all the other files (which is useful when dealing with the 31 CSS file limit with Internet Explorer). It also places the code for IE specific CSS in page.tpl.php. One thing missing is a skip navigation link.

Highlights:

• fixed-width or fluid layout
• subtheme framework
• content first source order
• graphical tabs
• block edit links
• nice amount of CSS selectors and divs for many theming possibilities
• "blank canvas" appearance
• clean easy to read code/markup