Drupal 7 Starter Themes
A Feature Comparison of the Leading Foundational Themes
By Michael Ross
This article was published in the print magazine Drupal Watchdog, Volume 2 Issue 1, 2012-03, on pages 20-21, by Tag1 Publishing. The magazine was distributed at Drupalcon Denver, 2012-03-19. The article was also published on their website.
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||Drupal versions||Markup||Layout types||Themeable by UI||Dimension units in UI||Regions||CSS reset||Print CSS||IE fixes||Page class in <body>||Mobile||Accessibility||Source ordered||RTL support||Subthemes||Documentation|
|AdaptiveTheme||6, 7||HTML5 + RDFa||fixed, fluid||yes, including breadcrumbs and search results||%, em, px||12||custom||yes||yes, using override classes||yes||WCAG||yes||some||2||articles at adaptivethemes.com|
|Arctica||7||HTML5 + RDFa||fixed, fluid||yes, including Drupal core CSS files||%, em, px||11||HTML5 Doctor||yes||yes, using polyfills||yes||yes||2|
|Basic||6, 7||XHTML + RDFa 1.0||fixed||7||YUI||yes||some||yes||yes||Zen documentation mostly applies|
|BigDaddy||6, 7||HTML5||fixed||10||HTML5 Doctor||yes||yes|
|Boilerplate||7||HTML5||fixed||9||HTML5 Boilerplate, partial YUI||yes||yes||yes||yes||yes|
|Boron||6, 7||HTML + RDFa 1.1||fixed||7||yes||WAI-ARIA roles||yes|
|Detamo||7||XHTML + RDFa 1.0||fluid, vertical grids||%||15||Eric Meyer||yes||yes||yes||yes|
|Doune||7||HTML + RDFa 1.1||fixed, vertical grids||11||Skeleton||yes||yes||yes||yes|
|Fluid Baseline Grid||6, 7||vertical grids||12||yes||yes||yes|
|Framework||6, 7||HTML5||fixed||8||Eric Meyer||yes||yes|
|Fusion||6, 7||XHTML + RDFa 1.0||fixed, fluid, vertical grids||yes, including typography||px||14||yes||yes||2||handbooks|
|Genesis||6, 7||XHTML + RDFa 1.0||fixed, fluid, vertical grids||10||WAI-ARIA roles||yes||1||Drupal.org posts|
|mothership||7||HTML5||fluid||7||Eric Meyer, HTML5 Doctor, normalize.css||optional||3|
|NineSixty (960 Grid System)||6, 7||fixed, vertical grids||8||Eric Meyer||yes||yes||yes|
|OM 2 HTML5||6, 7, 8||HTML5||fixed, vertical grids||7||custom||some||yes||2||Drupal.org post|
|Omega||6, 7||HTML + RDFa 1.1||fixed, fluid, vertical grids||yes, with fine-grain control||scaling factors||18||Eric Meyer||yes||yes||3||website; handbook; screencast|
|Panels 960gs||7||HTML + RDFa 1.1||fixed, fluid, vertical grids||2||custom||yes||WAI-ARIA roles||yes|
|Sasson||7||HTML + RDFa 1.1||fixed, vertical grids||yes||px||10||Boilerplate||yes||yes||yes||yes||website|
|Square Grid||7||XHTML + RDFa 1.0||fixed, vertical grids||some||px||7||Eric Meyer||yes||yes||yes||Drupal.org post; website|
|Tao||6, 7||fluid, vertical grids||7||Eric Meyer||yes||yes||yes|
|Zen||6, 7||XHTML + RDFa 1.0||fixed, fluid||9||yes||yes||yes||yes||yes||1||code comments|
Table Header Labels
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 "https://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, Skeleton, 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.
- Page class in <body>: 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 websites and apps using handheld devices.
- Source ordered: Some themes will list textual content prior to navigation elements, within the HTML markup, even though visually the latter appears first.
- 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.
It is possible that a feature may be indicated here as being unavailable, and yet it actually is offered by the theme, or could be added easily — but this was not explained prominently 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 website 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.
The Skinr module is intended to allow themers to package up sets of CSS styles, and to make them modular and available for reuse on other websites. Being unfamiliar with it, I was uncertain as to which themes could be considered to have Skinr integration; hence I chose not to guess. However, the documentation for Arctica and Fusion suggest that they are compatible with Skinr.
This information should be helpful to anyone trying to decide which starter theme to use as a beginning point for his or her work.
Copyright © 2012 Michael J. Ross. All rights reserved.