Autarchy of the Private Cave

Tiny bits of bioinformatics, [web-]programming etc

    Drupal theme development: where to start

    8th June 2008

    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).

    Share

    8 Responses to “Drupal theme development: where to start”

    1. slux Says:

      I’ve been thinking of going with the Blueprint route but wasn’t really convinced by the recently released Blueprint theme myself. Zen seems like a much better starting point, I believe you could use any grid framework in your subtheme if you’re so inclined.

      Could you tell a little more about what you mean by the em-to-px and px-to-em conversions with Blueprint?

    2. Bogdan Says:

      Slux,

      I used Zen as a starting point, and do not regret that decision at all.

      As for em2px, px2em: I was only looking through the docs/files of each theme, and it was in Blueprint that I stumbled upon instructions on how to convert between em and px values; at the time of looking through, that appeared to be some necessary modification each time you develop a theme. (Note: to my shame, I’m not yet used to using relative em-style font/element sizes.) Now I do understand that Blueprint only holds generally applicable em2px/px2em conversion routines, which aren’t really necessary for all the themes one might be developing on the basis of Blueprint.

      But so far I’m satisfied with Zen :)

    3. Drupal Themes Garden Says:

      Thanks for this comparison.

      Notice: almost all of mentioned “base” themes are released for both Drupal 5 and Drupal 6. Just Blueprint is released for Drupal 5 only (jet)

    4. Ronnie Says:

      Hi,

      I’m about to attemopt my first theme. I want to convert an XHTML template into a drupal theme. What is the advantage of using these skeleton themes compared to say just copying the BlueMarine theme, and editing it from there? This is all new to me, so not really sure what’s the best route to go…

    5. Bogdan Says:

      Ronnie,

      if you start with a “skeleton” theme, you don’t have to remove all the features of the, say, BlueMarine theme. That is, you really get the necessary minimum, plus some extra features which can help you in creating a standards-compliant, nice theme.

      Previously, I tried the “take a theme and change” route, and I like the Zen approach much more (out of the three “skeleton” themes I’m currently using only Zen). Also: note, that if you take some existing theme, you would better choose one which looks similar to what you are trying to achieve – otherwise it’s easier to start from scratch…

      Good luck in your theme creation!

    6. How to learn the Web development skills that will keep you working | Underpants Office Says:

      [...] Drupal Theme Development: Where to Start [...]

    7. Cam Says:

      very helpful! I am coming from wordpress and starting on my firts

    8. Web development tips that will keep you working | Pro Websites Design Says:

      [...] Drupal Theme Development: Where to Start [...]

    Leave a Reply

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>