Somewhere over Garland's rainbow

screenshot of new site

Garland has been a good thing for Drupal, overall, mainly for the color module. Anyone remember what it replaced in Drupal core? Yeah, it was pretty ugly. Context is important. So even though Garland is something of a front-end developer's nightmare, it has its purpose for the new Drupal user wanting to do at least a modicum of customization to the site's look, without resorting to coding.

And it has served its purpose here. I leaned on Garland (or actually her fixed-width daughter, Minelli) for my blog here for many months ... maybe more than a year. I honestly don't recall. It was since I upgraded to Drupal 6, when I didn't have time to work up a new theme. Garland gave me something so at least I could present the content here (such as it is).

But thanks to the fabulous NineSixty theme, I was able to whip something together yesterday afternoon — the theme you are seeing right here on That's right, it took me just one afternoon, even though I was hand-coding a few templates. NineSixty made it all so easy!

I had been designing using the 960 grid for quite some time now, but I had never employed the Ninesixty Drupal theme for implementation before. After hearing all the buzz at Design 4 Drupal Boston 2009, I was definitely curious to try it out. Now was my chance.

My own prior themes for rarepattern had been pretty hacky — quick throw-togethers with plenty of shortcuts. With NineSixty, I spent less time and resorted to fewer hacks. I still have some extraneous styles lurking, and of course there's the usual mark-up excess of some Drupal modules like CCK, but this was about quick implementation, with the emphasis on quick.

One of the beauties of NineSixty is that your page layout mark-up and CSS are pretty much already done. You actually accomplish most of your own layout adjustments directly in your page.tpl.php template. Just copy NineSixty's own into your own theme folder — the folder you created to make a child theme of NineSixty — and edit the classes on the various regions.

grid-8 means 8 grid columns wide

prefix-1 means 1 empty grid column before

suffix-2 means 1 empty grid column after

And there's more — push-x and pull-x, for example — to give you all kinds of power. Just change the classes assigned to each region, and your page falls into place.

The rest is just "skinning."


Get occasional email updates on what I'm doing (and not blogging about).

Powered by MailChimp