fromMarch 2012
Article:

Drupal 7 Starter Themes

A Feature Comparison of the Leading Foundational Themes
3

There are many ways to create a Drupal theme, but probably the most common general approach is to modify an existing theme -- instead of building one from scratch. In the Drupal world, the phrase starter theme refers to any theme that is intended to be used as a starting point for developing a custom theme. Such starter themes tend to be simple and stripped-down, with no aesthetic styling.

Theoretically, any Drupal theme, even the most complex, could be used as a foundation upon which to build a new theme. But beginning with an existing complex theme would be counterproductive in most cases, because time and effort would be required to remove all of the complexity and styling not desired for the intended final theme -- which could be much of the HTML and CSS code, and would defeat the purpose of choosing that theme in the first place.

Sometimes the phrase base theme is conflated with the idea of a starter theme, but they are not synonymous. Instead, a base theme is one from which your new theme will inherit all properties simply by specifying, in the .info file of your new theme, the command: base = [base theme name]. Yet a starter theme does not have to be used as a base theme; it can be modified directly, to stand on its own. None of the starter themes examined here utilize base themes, but at least one was intentionally developed from another theme -- specifically, Basic is derived from Zen.

In either case, be sure to update the template files (.tpl.php), as well as any template.php, to replace the machine name of the starter theme with whatever you have chosen for your custom theme.

All the leading starter themes include the bare minimum of a .info file, as well as at least one stylesheet and screenshot. Most also add template files and a logo. Some are quite advanced, with capabilities that allow you to define your new theme through a graphical user interface with no need to edit any CSS files. Others are much more minimalist, such as Stark, which is intended to show Drupal output completely unstyled (mostly for debugging purposes).

When it comes time to create a new theme, you may understandably wonder where to begin, and what starter theme could be the best candidate to meet your needs. Asking the advice of someone more experienced may yield a worthy suggestion, or you may end up with only a recommendation to use whatever starter theme that person stumbled upon and continued using, out of habit, without researching alternatives.

In order to help you with your research, the table shown here compares the commonly-used starter themes (that have versions for Drupal 7), to see how their features stack up against one another.

Theme name Project name Drupal versions Markup Layout types Themeable by UI Dimension units in UI Regions CSS reset Print CSS IE fixes <body> class to ID page Mobile Accessibility SEO optimized RTL support Subthemes Documentation
AdaptiveTheme adaptivetheme 6, 7 HTML5 + RDFa fixed, fluid yes, including breadcrumbs and search results %, e, px 12 custom yes yes, using override classes yes WCAG yes some 2 articles at adaptivethemes.com
Arctica arctica 7 HTML5 + RDFa fixed, fluid yes, including Drupal core CSS files %, e, px 11 HTML5 Doctor yes yes, using polyfills yes yes 2
Basic basic 6, 7 XHTML + RDFa 1.0 fixed 7 YUI yes some yes yes Zen documentaton mostly applies
Boilerplate boilerplate 7 HTML5 fixed 9 HTML5 Boilerplate, partial YUI yes yes yes yes yes
Boron boron 6, 7 HTML + RDFa 1.1 fixed 7 yes WAI-ARIA roles yes
Framework framework 6, 7 HTML5 fixed 8 Eric Meyer yes yes
Fusion fusion 6, 7 XHTML + RDFa 1.0 fixed, fluid, vertical grids yes, including typography px 14 yes yes 2 handbooks
Genesis genesis 6, 7 XHTML + RDFa 1.0 fixed, fluid, vertical grids 10 WAI-ARIA roles yes 1 Drupal.org posts
mothership mothership 7 HTML5 fluid 7 Eric Meyer, HTML5 Docto, normalize.css optional 3
NineSixty (960 Grid System) ninesixty 6, 7 fixed, vertical grids 8 Eric Meyer yes yes yes
OM 2 HTML5 om 6, , 8 HTML5 fixed, vertical grids 7 custom some yes 2 Drupal.org post
Omega omega 6, 7 HTML + RDFa 1.1 fixed, fluid, vertical grids yes, with fine-grain control scaling factors 18 Eric Meyer yes yes 3 web site; handbook; screencast
Panels 960gs panels_960gs 7 HTML + RDFa 1.1 fixed, fluid, vertical grids 2 custom yes WAI-ARIA roles yes
Square Grid squaregrid 7 XHTML + RDFa 1.0 fixed, vertical grids some px 7 Eric Meyer yes yes yes Drupal.org post; web site
Stark stark 6, 7 fluid 7 yes some yes yes
Tao tao 6, 7 fluid, vertical grids 7 Eric Meyer yes yes yes
Zen zen 6, 7 XHTML + RDFa 1.0 fixed, fluid 9 yes yes yes yes yes 1 code comments

In the table, to avoid the problem of the header labels becoming too lengthy, they were made fairly concise, which is sometimes difficult for technical topics. Consequently, most of them could use some explanation:

  • Project name: The theme installation file can be downloaded from its project page, which is "http://drupal.org/project/" + the project name. In the case of Stark, note that this version is a superset of the core version.
  • Markup: Most starter themes include their own html.tpl.php. Those that do not cause Drupal to use the default template file, modules/system/html.tpl.php, which specifies XHTML + RDFa 1.0 in its DOCTYPE. For these themes, no entry has been added in the table.
  • Themeable by UI: A growing number of themes can be styled within a configuration user interface, thereby reducing the need to hand-edit CSS files.
  • Dimension units in UI: For setting the sizes of regions, margins, and paddings in the theme's configuration UI, some combination of units is typically supported: percentages, ems, and pixels.
  • Regions: This is the number of regions available for use by the starter theme. In several cases, this does not match the number of regions defined in its .info file.
  • CSS reset: Most starter themes incorporate some sort of stylesheet for setting the browser's CSS configuration to sensible values. They include those from Eric Meyer, HTML5 Doctor, and Yahoo's Developer Network. Some theme developers opt to create their own reset stylesheets, which may be loosely based upon one of the widely-used ones.
  • <body> class to ID page: In some situations, it can be quite helpful when a theme includes a class name in the <body> tag that uniquely identifies the current page.
  • Mobile: Several of the newer themes support responsive design by using media queries to automatically detect the screen size of the current device, and adapt the layout accordingly -- which is becoming increasingly important as more people access web sites and apps using handheld devices.
  • SEO optimized: Some themes will list textual content prior to navigation elements, within the HTML markup, even though visually the latter appears first. This is commonly known as "source ordered."
  • RTL support: Most themes do not natively support right-to-left languages.
  • Subthemes: Several of these starter themes have excellent support for subthemes, and provide pre-built subthemes that can be copied; this number in the table indicates how many.
  • Documentation: Naturally, this is a somewhat subjective assessment based on the quality and quantity of help information readily available.

For any given starter theme, if a feature is not available, rather than indicating in the table "no" or "none" (or "N/A", in the case of the "Dimension units in UI"), the cell is left empty, so it is easier for the reader to quickly see which themes have more features in general.

Additional Features

It is possible that a feature may be indicated here as being unavailable, yet it actually is offered by the theme, or could be added easily--although that was not prominently explained in the theme's documentation or evident in the HTML markup it produced. For instance, a theme may support WCAG, but does not advertise it on its project page.

In the interests of minimizing the size of the table, some information is not included for those features that are consistent throughout these themes. For instance, years ago, not all starter themes supported the "core features" (a web site name, slogan, logo, favicon, search box, etc.); but nowadays, most, if not all of them, do so.

In the past, some starter themes offered native support for the Color module, which allows administrators to easily modify the color scheme. But in this era of Drupal 7, none of the starter themes appear to have integrated the Color module.

Also, none of the themes have explicit Panels integration, except for Panels 960gs -- although Genesis works with Gpanels, and Omega has some project notes that suggest it has been made Panels compatible.

This information should be helpful to anyone trying to decide which starter theme to use as a beginning point for his or her work.

Comments

Not only the table, but also the explanation of the technical topics is much appreciated.

It would be nice to link the project names to their D.O. project pages. The links in the CSS reset section seem erroneously to be relative.

Thanks, I've corrected those links.

Thank u for this nice,I'm a drupal intermediate developer, i need to what the easy starter theme for begin create a custom theme?