- Genesis SUBTHEME:
- This is the standard starter subtheme. In short it has more HTML and more CSS classes than the ULTRALITE version.
- Genesis ULTRALITE:
- The ULTRALITE starter subtheme has less HTML and fewer CSS classes.
- Genesis DARK:
- The DARK subtheme has been completely re-colored to support dark or "negative" style themes. The HTML is the same as genesis_SUBTHEME, so everything below comparing SUBTHEME to ULTRLITE will apply.
Lets take a look at an example by comparing the node.tpl.php files from both the SUBTHEME/DARK and ULTRALITE starter subthemes. I have removed all the conditional if statements to make it easier to read the code, please don't copy paste these as real examples.
genesis_SUBTHEME node.tpl.php (all conditional if statements removed for clarity)
The genesis_SUBTHEME starter subtheme has an inner div and wrapper divs around most variables. Note that each wrapper div also has a node specific class name, such as
<div id="<?php print $node_id; ?>" class="<?php print $classes; ?>"> <div class="node-inner"> <h2 class="node-title"> <a href="<?php print $node_url; ?>" rel="bookmark"><?php print $title; ?></a> <?php print $unpublished; ?> </h2> <?php print $picture; ?> <div class="node-submitted"><?php print $submitted; ?></div> <div class="node-content"><?php print $content; ?></div> <div class="node-terms"><?php print $terms; ?></div> <div class="node-links"><?php print $links; ?></div> </div> </div> <!-- /node -->
genesis_ULTRALITE node.tpl.php (all conditional if statements removed for clarity)
The genesis_ULTRALITE starter subtheme dispenses with the inner div and has no wrapper divs around variables.
<div id="<?php print $node_id; ?>" class="<?php print $classes; ?>"> <h2 class="title"> <a href="<?php print $node_url; ?>" rel="bookmark"><?php print $title; ?></a> <?php print $unpublished; ?> </h2> <p class="submitted"><?php print $submitted; ?></p> <?php print $picture; ?> <?php print $content; ?> <?php print $terms; ?> <?php print $links; ?> </div> <!-- /node -->
This is true for all the templates in the ULTRALITE theme, they have almost no wrapper divs and no inner divs. Another example is the #nav bar, which contains the Primary and Secondary link menus.
These are strait copy/pasted from the respective page.tpl.php files:
// genesis_SUBTHEME #nav section. <?php if ($primary_menu or $secondary_menu): ?> <div id="nav" class="clear-block"> <?php if ($primary_menu): ?> <div id="primary"><?php print $primary_menu; ?></div> <?php endif; ?> <?php if ($secondary_menu): ?> <div id="secondary"><?php print $secondary_menu; ?></div> <?php endif; ?> </div> <!-- /nav --> <?php endif; ?> // genesis_ULTRALITE #nav section. We don't insert any wrapper divs. <?php if ($primary_menu or $secondary_menu): ?> <div id="nav" class="clear-block"> <?php if ($primary_menu): print $primary_menu; endif; ?> <?php if ($secondary_menu): print $secondary_menu; endif; ?> </div> <!-- /nav --> <?php endif; ?>
Why genesis_SUBTHEME has wrapper divs and template specific classes
To make theming easier. Lets explore that a little bit more:
- Wrapper divs allow for more design contingencies—in short the SUBTHEME has design redundancy.
- The CSS class naming convention is known as pseudo namespacing and I believe it is more maintainable and easier for design teams to manage. These namespaced classes also make it much easier to style deep nested elements in Drupal, because nodes can contain blocks, blocks can contain nodes and so on (no limit to the nesting depth).
Design contingencies could be anything from positioning content, adding borders, backgrounds, margins and padding and so on.
Targeting nested elements refers to when nodes are output within a block, or a block within a node (this is possible with Drupal). Things can start getting problematic when you have three or four levels of nesting.
During a recent discussion I put together this example of targeting nested elements in Drupal and the various different selectors you can use. You will see that using classes such as .block-title and .node-title make it very easy to target nested elements.
If you view this in IE6 things really start to fall apart because child selector is not supported by IE6, and this is where namespaced classes can make life much easier.
DARK is the latest addition to the Genesis starter subtheme lineup, and made its debut in Genesis 6.x-2.3. Under the hood DARK is exactly the same as genesis_SUBTHEME, however DARK has an additional stylesheet called
style_dark.css which recolors all the major page elements to support dark style themes. This includes all Drupal admin pages and three popular contributed modules—Views, Panels and Vertical Tabs (which is now in D7).
Building DARK themes in Drupal has always been difficult because Drupal core styles and most contributed modules are designed for normal light colored themes only. DARK makes it very easy to build a dark style theme without having to worry about Drupal's normal light colored CSS getting in the way (its a lot of work to restyle it!). Support for the contributed modules is a bonus and really brings consistency to the theme for these modules.
3rdworldthemes.org is built using genesis_DARK.
Which one should I use?
That answer is going to be a personal choice. If you hate extra divs and classes choose the ULTRALITE theme. If you need design contingency then use the genesis_SUBTHEME.
At the end of the day the differences in actual page weight are marginal (less than 3% difference). If you use Views, CCK and Panels to build your site and you do not override the default output of those modules the difference in HTML output is going to be negligible. The flip side of that argument is that those modules provide plenty of design redundancy themselves.
Looking at this from the perspective of the newbie themer I would suggest to use both. Start with genesis_SUBTHEME to get a feel for the Genesis framework and how it works, then build a theme with the ULTRALITE version to examine the differences.