Whats new in Genesis 2

Genesis Lite directories and filesToday I released Genesis 6.x-2.x. [Genesis](http://drupal.org/project/genesis) has been through a total rebuild the past couple of months and I've incorporated many ideas and features from my every day work as a Drupal themer.

A little slice of history. Genesis was born out a pile of snippets, templates, stylesheets and ideas that have been slowly accumulating in my code library for the past couple of years. Genesis 2 stamps some order on this as well as sweeping away the [cruft](http://en.wikipedia.org/wiki/Cruft) and imposing a new structure that reflects the way I work.

## Major changes
**New directory and file structure**. Everything is organised into sub-folders. Drupal 6 themes have an amazing capacity for building up CSS and template files, in particular node, page and block templates not to mention Views. I like to keep these in sub-folders. The CSS is very modular and having all those stylesheets floating about in the main directory would be needless clutter—lets put them in a sub-folder also.

**Subthemes have their own templates**. Why? Because template suggestions require the base template in the same directory. Until this is addressed I see no reason forcing users through the silly steps of 1) wtf, this doesn't work, and then 2) copy/paste. Sure, you could argue that some users will never use template suggestions, but seriously, who doesn't?

**No IE CSS**. This is gone, kaput, burned at the sacrificial stake of standards compliance. [Conditional comments](http://en.wikipedia.org/wiki/Conditional_comment) are not standards compliant, they are [proprietary](http://en.wikipedia.org/wiki/Proprietary_software) Microsoft technology. After careful and deliberated thought I came to the conclusion that non-standards compliant proprietary code has no place Genesis. If you want to add it you can, and that's my opinion on that. The [zoom:1 for hasLayout](http://www.positioniseverything.net/articles/haslayout.html) is replaced by a good old fashioned child selector work-around which IMO is better than including Microsoft code just to pass validation.

**Choice of Subthemes**. The regular genesis\_SUBTHEME is a [heavyweight](http://en.wikipedia.org/wiki/Heavyweight) contender, there's no denying it packs in the HTML and classes. Its deliberate of course and makes complex theming easier. However, we don't always need this extra HTML, nor do we always want it. The genesis_LITE subtheme is then our choice—no inner divs, stricter approach to semantic class naming and broader use of [POSH](http://microformats.org/wiki/posh). Like [Stark](http://drupal.org/project/stark) but with Genesis cores robust, usable layout methods. genesis\_SUBTHEME is more like Zen, although IMO easier to theme and has more [out-of-the-box layout options](http://drupal.org/node/439670).

**4 Layout Methods**. In Genesis 1 there were 7 layouts, however there were essentially only 3 layout methods, with variations in sidebar width. This time around we have a new layout method to make it 4 and if you want to change the sidebar widths you will need to override the layout. Thankfully this is dead simple to do. The layout methods are:

1. Standard 3 col - left / content / right (20em sidebars, 2em gutters)
2. 2 cols right - content/left/right (20em sidebars, 2em gutters)
3. 2 cols left - left/right/content (25% sidebars, 1% gutters)
4. 2 cols, Golden rule 68%/32% (2em gutters)

BTW, the new default width is 85% (was 80em), although again, this is mind-numbingly trivial to change to any width, fixed or fluid.

**Modular Stylesheets now in Subthemes**. Previously the [modular stylesheets](http://dhtmldev.com/content/view/63/27/) were in the base theme and we had this monolithic stylesheet in the subtheme that overrode them. The way I see it now is this—if modular is good for the base theme, then why shouldn't the end user modifying the subtheme have the same tools? Now, modular stylesheets are not everyone's [cup of tea](http://www.ideachampions.com/weblogs/cup%20of%20tea.jpg) and certainly cannot be claimed as a best practice, but it's how I like to work. If you prefer one big-ass sheet then unset the modular stylesheets and use the _all-[subtheme].css file. Everyone is happy.

**Site name and logo HTML back where it should be**. A key tenant of Genesis is to exclude complex logic from templates (tpl files). You'll see this evident in they way Genesis shifts processing for Primary and Secondary links to theme\_preprocess\_page and just prints a nice clean variable in page.tpl.php. In Genesis 6.x-1.x I took this too far and even shifted the entire logic for site name (conditional H1 or DIV) and the usual ugly code we see for the logo off to the theme\_preprocess\_page function. This time I move the wrapper HTML back to page.tpl.php and use simple if/else for the conditional site name wrapper elements. I'm a fan of hiding scary PHP and printing only variables (the one exception is the t() function for the skip nav link - do I really need to store that in a variable? na...).

**Crufty dynamic classes gone**. The cruftiest things in Genesis 1 were the Header and Nav dynamic classes. In 50 themes I never used them once. Needless to say... gone.

**CSS3**. I have gone all out and used, wait for it, one CSS3 selector! [:last-child](http://www.w3.org/TR/css3-selectors/#last-child-pseudo) gets rid of some annoying margin bottom in messages, and now I'm not CSS2.1 valid. Not sure if this qualifies as a major change but I needed to mention it somewhere in case someone thinks I've used a shed-load of CSS3 selectors... I wish.

**No Fancy Tabs**. Sorry, they had to go. The fancy Zen like tabs just added bloat and required theme function overrides. In Genesis 6.x-2.x I wanted to have no theme function overrides and indeed all but one (theme_breadcrumb) have been removed, so sayonara fancy tabs.

Well that's enough for now, I'm sure there is more and I'll be writing all new tutorials and blogging about the new features aplenty. In short the key features are:

  • Standards compliant—XHTML Strict, CSS3
  • Modular CSS
  • Choice of 2 starter themes
  • No complex logic in templates
  • Advanced dynamic CSS classes
  • 4 layout methods to choose from
  • Clear well organised directory structure
  • Commented, documented & supported

Less key but nice:

  • OpenID icon CSS fix
  • Admin message icons
  • Skip to main content link now included
  • Work-around for IE Max 30 stylesheets issue
  • CSS sprite replaces Drupal menu bullets and arrows (original fireworks png included)
  • Clean admin styles, formatted tables and form elements
  • Options to use CSS Tidied stylesheets
  • No propitiatory code or techniques

Edit: ha, I nearly forgot - we have a new logo also. And in case you're wondering, I'm agnostic...

Last updated 26th April, 2009 - 12:27pm

Authored by Jeff Burnz on