Drupal Theming: Zen vs Tao

If you, like me, are working on your first Drupal theme, a big question can be: Do I really need a base theme or should I start from scratch? This is an easy question to answer: start with a base theme. Why? Because even if you start from scratch, you really aren’t starting from scratch. Drupal loads in a bunch of CSS files for you. And the styles they apply make far too many assumptions. And as my 9th grade Geometry teacher loved to say: assumptions make an “ass” out of “u” and “me.”

So if you’re going to go with a base theme, which to chose? There are a ton out there, but the two I was most intrigued by were Zen and Tao, and I’m going to tell you why Tao totally beat the heck outa Zen in a very Buddhist way.

Zen – the path to (record scratch)

I started with Zen. It was very nice at first. It made me feel welcome in a foreign land. It has nice documentation. It walked me step-by-step through creating a sub-theme. I felt good. I felt confident.

After my sub-theme was established, I checked it into our SVN repository, and began coding. This was going well! I saw a lot of things I liked about Zen — A focus on accessibility, an attempt to break down CSS into logical files so you don’t have one monster CSS file, logical content regions, and did I mention the documentation!?

Heart of Darkness

But after a few days of working with Zen, theming became maddening. What had been sensible defaults now turned into a Heart of Darkness journey to find and override styles. I was spending far more time in Firebug tracking down exactly what styles were doing so they could be overridden instead of coding my site. And I couldn’t use CSScaffold, which is my CSS framework of choice, due to the way the comments were formatted throughout (this really isn’t Zen’s fault).

And while the CSS files were broken down, they are broken down in a very illogical way which requires redefining selectors in multiple files, and also mixing your screen and print styles. For example, zen has “layout.css” where you’re supposed to put all layout-related styles, such as display, margin, padding, floating, etc. But then it encourages you to put background and font styles in other stylesheets — yuck! That decision alone makes it very hard to quickly visualize what an element will look like in your “Minds Compiler”, and requires you to shift between files just to make edits to a single element. Overall, bad news.

Not so sure about ems

Furthermore, within Zen, fonts and many margins are sized in ems. I decided to go with the flow and keep using ems, which is nice if you want to support text resizing in IE6, but is a complete mess if you’re trying to establish a baseline grid. Ems turn into nasty fractions you have to constantly calculate (and recalculate if you want to do something simple like make the page text slightly larger), and the rounding errors that occur cross browser are simply unavoidable. So scratch that. IE6 only accounts for 1.5% of our users, and my brain accounts for 100% of my sanity.

No reset — the deal breaker

And then, in my opinion, the dagger in the heart: There’s just no reset. This was an intentional design decision by the creators, but in my opinion, a HUGE mistake. I simply could not get my Zen sub-theme to render consistently in all browsers, which is a direct result of no reset.

So I added a reset. But you know what? It was still inconsistent! Ack, why? Because of Drupal’s core CSS files. It was like a dream within a dream… I just couldn’t escape Firebug purgatory, and almost lost my cool with Drupal. Once again, I had found myself in assumption land, and I didn’t like it.

Tao rescues me. Or did I rescue myself?

So I went back to the drawing board. I went through a lot of the starter themes again, and still saw a bunch of stuff I was concerned about. This time around, I wanted a theme which did one thing well — reset pretty much everything so that my Drupal page looks just like an XHTML document with a reset CSS applied to it. No weird spacing, no more Drupal CSS files effing with me, and I didn’t want ANY STYLING. I literally didn’t even want default columns, tabs, yellow backgrounds for blocks on the edit-block page, NOTHING. I just wanted some very clean HTML with a reset style that made everything consistent between all our favorite browsers.

And that’s when I remembered reading about Rubik theme from Development Seed. If you don’t know, Development Seed makes the best looking Drupal sites. The Best. No question in my mind about it.

Rubik is a fantastic administration theme. It dramatically improves the drupal administrative interface by reducing visual clutter, and it looks just wonderful. It’s worth it to download and install just for it’s own functionality. And best of all: it relies on a fantastic base theme maintained by Development Seed: Tao.

As Tao says: “Tao is a base theme for Drupal that is all about going with the flow. It is not meant for general-purpose use, but instead takes care of several tasks so that sub-themes can get on with their job.” And this is exactly what it does.

It has an “aggressive reset,” provides preprocessing functions for “core annoyances,” properly splits up its files between screen and print, and unifies theme files within a “templates” directory (thank you for this alone — makes the directory structure much cleaner!).

Basically, it resets the ugly in Drupal, and kindly opens the door to beautiful design for you.

Now, I can use CSScaffold. This gives my page a beautiful grid without needing to further pollute my HTML with even more extraneous classes, as you have to do to employ 960gs or Blueprint.

I can split CSS files up into an order I think is much more logical (CSS files for the header, footer, content, blocks, etc). This means no more switching between files to edit one selector, and also prevents me from slipping into Firebug Purgatory.

And best of all — my site renders almost perfectly across browsers now.

Conclusion

If you’re just starting off, Install Zen and play with it. If you’re a casual designer and don’t care too much about whether the line-height of your fonts is off, and don’t particularly care about rigid control of you grid system (which is too bad, cus your page probably looks ugly), go ahead and use Zen.

But if you want to avoid Firebug Purgatory, clean up your code, organize it in a way that’s logical to you, and make sites that are truly spectacularrrrr, the choice is clear: use Tao.

And if you don’t believe me, take a look at Lullabot (creators of Zen), and then compare it to Development Seed. Lullabot’s site isn’t bad — I’m not saying that, but it clearly isn’t the same caliber as Development Seed. And if that’s the case, which one do you trust to make the best base theme? I know where I’m putting my money.