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 Ninesixty 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 to 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 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. Disables 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.

The message area with the yellow background is defined by Zen.

On mouse hover (and 960 debug is on) the 16 columns grid appear.

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.