Zen-960

UPDATE: Since writing this post ninesixty theme has advanced. I am now using it as my base theme, and create a subtheme. I no longer use Zen.

Zen is my first favorite base theme. Ninesixty is the other. The following post will show how we can enjoy both of them - How we can have a “Zen-960” theme _done correctly.

As always, lets first understand _why we want to combine those two themes. JohnAlibn’s Zen is a great starter theme - if you need a list of features, just head to the project page, you won’t be disappointed. dvessel’s Ninesixty takes the power of grid 960 -that we really love as it allows us to spend less time banging our heads on CSS - and adapts it to Drupal.

The way that I look at it - Zen should be doing the job of defining the page _elements (how fonts will look, lists, tabs, etc’) and defining their RTL equivalent. Ninesixty on the other hand should be doing the job of defining the page _layout.

So what is the problem? Well, according to Drupal I’m too griddy! I want my theme to have two base themes - and that’s currently not possible. Ok, so why not just download zen_ninesixty theme (a.k.a Zen-960) and go on with my life?

Well, I downloaded Zen-960. In fact I’ve started porting it to use Zen’s 2.x version, and pretty quickly I understood something wasn’t right. Since I can have only a single base theme, Zen-960 was copying lots of Ninexisty files. Code duplication is a good sign for bad things… I’ve come up with a simple work-around that shrank Zen-960 considerably and _completely removed any code duplication.

The idea in short is two have the following themes hierarchy:

1. Zen - Base theme –2) Zen starter - That’s how we renamed Zen’s STARTERKIT —-3) Ninesixty - We’ll make it a subtheme of Zen starter ——4) Zen ninesixty - Our theme that we can directly edit

I will not cover the process of installation in detail, as this can be read in the README.txt of the Zen-960 5.x version, but I will point out the “trick” that made it all happen. We make Ninesixty a subtheme of Zen starter, manually or or via code in a custom module (In Drupal 7 this will not be needed as themes can implement alter functions):

<?php
/**
* Implementation of hook_system_info_alter()
*
* Add Zen starter theme as the base theme of Ninesixty theme.
*/
function foo_system_info_alter(&$info, $file) {
  if ($file->name == 'ninesixty') {
    $info['base theme'] = 'zen_starter';
  }
}
?>

So simple it almost makes this whole blog post seem trivial, doesn’t it? And indeed the above lines made sure that the only things left for Zen-960 to take care of are:

1. Disable’s Ninesixty reset.css and test.css and Zen’s layout-fixed/liquid.css - As I said before, Zen is in-charge of defining the elements and Ninesixty the layout.
2. Provide a page.tpl which is Zen’s page.tpl sprinkled with 960’s grid classes - as a reference on how to use 960’s grids.

To conclude, our gain here apart of enjoying the Zen and Ninesixty mix:

1. Zen-960 doesn’t need to continue “chasing” Zen and Ninesixty development
2. No code duplication
3. Zen-960 became much much smaller and it’s doing it in a better “Drupal way”.

Now we can move things like 960 based Views row style template override or Panels layout to Ninesixty where, in my opinion, they belong - as they define layout.