Going through the theme section of Drupal can be a pain just to find the right starter theme especially if you are not familiar with the more popular choices. We here at Lyemium want to take the guess work out in decided which theme is good for a base theme. Starter themes are a class of themes that seek to provide best-practices starting points for themers to build a unique design, as a result we shouldn't expect a lot out-of-the-box, looks wise, its up the designer to transform any of these starter themes into well organized and customizable Drupal integration.

The advantage of having a starter theme is that you get a good idea at the common set of features necessary for most drupal sites, which in turn helps reduce the repetition of a designer recreating similar files, markup and code for each project.

The following are a few of the more popular starter themes:

 

Zen

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.

 

Basic

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.

 

Added to the theme is the conditional classes that pick up on the end-users browser. This data then gets inputted into the "body" class which will allow the themer to specifically target browsers more correctly (gone are the days of conditional ie stylesheets!). We have support for the following browsers:

• Firefox 2 and 3 (each version outputs their own class name)

• Opera

• Safari

• Internet Explorer 6, 7, and 8

 

Beginning

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.

 

Blueprint

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.

 

Framework

Framework, a personal favourite, is a 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.

 

Genesis

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.

 

Fusion

Fusion is a powerful base theme, with layout and style configuration options built in that you can control through Drupal's UI. It's based on a simplified 960px or fluid 16-column grid.

 

Your layout is completely taken care of with lots of regions and cross-browser compliant configuration of layout through the GUI -- set block width, alignment, and position with a few clicks!

 

• Includes commented "starter" subtheme for easy CSS theming

• Includes theme settings for fonts, page width, sidebar widths and layout, sub-styles, and developer options

• Default block styles mean you don't have to re-code the same common features for menus, lists, footers, callout text, etc.

• Also includes plenty of helper classes for easier theming