Autarchy of the Private Cave

Simplest way to develop your custom Drupal theme is to start with some skeleton/wireframe theme.

In this post, I’m briefly reviewing 4 themes (atck, blueprint, framework, and zen), made specifically to serve as theme developer’s starting point. All 4 are listed with their features (as per Drupal project page of each one), with my personal “impressions” (not based on actual use experience, yet). There’s also my choice and order of preference for the 4 candidates at the end.

Advanced Theme Construction Kit (ATCK) (see also atck homepage and atck on-line layout builder tool)

1. WYSIWYG grid builder
A browser-based grid builder which produces starter code for a page.tpl.php file. The grid builder itself was originally built by Christos Constandinou and it uses a modified version of Yahoo Grids which is more flexible and easier to customize. With Christos’ permission (thanks, Christos!) it, and the supporting css, has been customized so that it works for Drupal themes and so that it is css3 valid. Access the builder online (FF only!), or download it and run it locally. [builder cannot be on Drupal.org because of MIT license]

2. style.css [separate download because of BSD license]
style.css contains only the css needed to support what the grid-builder outputs, as well as some general ‘resets’. The only modifications one should need to make here would be if they want to make their layout a fixed width and/or a different width (default widths are in %).

3. page-layout.css and template.php
These files are where the visual styling of the site happens. The source of these files is from a combination of code from the Hunchbaque theme and some changes/additions which I added in order to provide baseline settings I prefer and/or provide more granular settings. The beauty of these files is the simplicity of them – they include as little markup/styling as possible to avoid complexity, while at the same time putting many helpful tools/comments at your finger tips so that you can accomplish what you want.

4. page.tpl.php
A sample page.tpl.file is included as a reference for finishing your own page.tpl.php file using code output from the grid builder. Note particularly the variable names for the blocks, regions, menus, etc. (at this point the builder does not include those items)

5. fix-ie-6.css and fix-ie-7.css
These files are included for purposes of providing IE-only css to each of the respective versions. By using conditional comments like this we keep the main css files hack-free and atck css3 valid.

Impression: atck is very easy to make initial block layout from scratch (thanks to builder), it has separate fix-CSSs for IE6 and IE7, is very flexible even in complicated grids, and is code-documented.

Blueprint: theme for developers (also required: Blueprint CSS Framework)

* normalizes Drupal’s CSS to be consistent
* properly aggregates all blueprint CSS files into a single file when this setting is enabled
* put scripts at bottom of page for nice performance gains, read more: http://developer.yahoo.com/performance/rules.html#js_bottom
* flexible layout, from 1 to 3 columns, based on where you configure your blocks to show (left, centre, right)
* SEO optimization without the need for heavy modules and additional queries per page
o automatically adds META description to many pages, read more: http://googlewebmastercentral.blogspot.com/2007/09/improve-snippets-with…
o automatically adds META keywords if taxonomy exists on that node, read more: http://searchengineland.com/070905-194221.php
* better forum icons, http://drupal.org/node/102743#comment-664157
* improve forum display and performance, http://www.sysarchitects.com/node/70
* prevents duplicate form submissions with jQuery, read more
* shows the # of comments below a node since Drupal doesn’t do this by default (usability)
* highlight any comments by the author of the node
* adds a “you need to login / register” box below all comments if you can’t add a comment (usability)
* supports conditional comment subjects, if the setting is off it won’t show a chopped off title of the comment
* uses CSSEdit http://macrabbit.com/cssedit/ comments for grouping of styles
* lots of comments and theming tricks in template.php to learn from

Impression: blueprint has some not-really-theme-design-related features; blueprint is a whole framework with docs; it has single ie.css for fixes; it requires framework knowledge; blueprint’s css modifications aren’t easy (em-to-px and px-to-em conversions).

Framework theme: blank canvas for theme developers

# Framework gives general placement and formatting to basic Drupal elements
# Fixed width of 960px by default. Main column resizes between two-column and three-column layouts
# CSS file is highly organized, including a table of contents, colour codes, section flags, alphabetical properties, etc.
# Includes a list of CSS utility classes for easy content formatting
# W3C valid CSS 2.1 / XHTML 1.0 Strict
# Verified and tested with Firefox 3, Firefox 2, IE7, IE6, Safari 3
# Search in sidebar (as a block) and header (as a theme configuration option)
# Clean and simplified code and file structure
# Works nicely in mobile browsers
# The administration section is adapted from the default Garland theme

Impression: good and simple starting point; code-documented; has ie.css and ie-6.css fix files; far lighter and easier than blueprint, but less capable than atck.

Zen: starting theme for Drupal (plus online docs)

* Well documented php and css files.
* Lots of easy-to-access classes and ids for CSS developers.
* Classes on body include items like “logged-in”, “not-logged-in”, “front”, “not-front”, as well as the node type (“node-type-story”, “node-type-blog”, etc) for single node pages. This can allow CSS developers to do things like have a different colour for a given page item for non-logged-in users, have a larger header section on the front page, or put a different background colour on a given node type.
* Automatic (table-less) column resizing for 1, 2, and 3-column layouts.
* Separate layout.css file to allow for changing the type of column layout (holy grail, jello mold, etc).
* A print.css file optimizes print display automatically when sent to a printer — removes, sidebars and nav elements, optimizes font size, adds text to links showing href, etc.

Impression: code-documented plus extensive online documentation; has print.css; has sub-theming guidelines to simplify future support and enhancements of customized sub-themes (has a STARTERKIT sub-theme ready for customizations); also has “happy user testimonials” :). For one of the new Drupal-based projects I decided to try this one. Next in line are (in order of preference): atck for complex layouts *or* framework for simple sites, and blueprint isn’t quite to my liking (so far at least).