An All-New Zen with the Same Guiding Principles

by John Albin Wilkins

After a year in development, Zen 7.x-5.0 finally came out last month. Every single line in the code base has been scrutinized, and re-thought or re-written. To pump the keyword density up to 11, Zen is now a Sass/Compass-powered, Zen Grid-laden, reset-hatin’/normalize-lovin’, IE conditional-class including, drush-buildable, RTL and Accessibility mindful HTML5 Drupal starter theme with a responsive, mobile-first grid design. A slightly more verbose description of this feature list can be found on the project page: http://drupal.org/project/zen

But the biggest feature of Zen, which is unstated on the project page, is that it makes no assumptions about your content and your design. It does the most minimally useful thing for all designs and then gets the hell out of your way.

Zen 5

If you don’t like the way Zen does something, you can remove or override or ignore a feature without any performance hit. Don’t like normalize.css? Remove it from the .info file. Done. Same with every other feature.

It’s this flexibility balanced with performance that has always been at the heart of the Zen theme project.

Back-end and front-end performance

The back-end performance of Zen has been a critical priority of the project for years. A few months ago, I did some performance tests with ab but they aren’t publishable since they suffered from an over-large standard deviation. But the results hinted at an obvious truth. The more features in a base theme, the slower it was.

I wrote most of the code in Drupal core to allow PHPTemplate themes to have “theme settings”, because I thought (and continue to think) that it’s a useful feature for site builders. And the idea has certainly been embraced by themers. But Zen only uses a handful of theme settings because each setting creates a conditional set of code that needs to be executed on every page. Even if you move all your theme setting values to a .info file (and you should!) the code in the base theme will still need to check what that value is before it executes its code. Hundreds of theme settings could mean hundreds of PHP if statements.

Front-end performance

Ultimately, front-end performance is more critical then back-end performance. Front-end performance is also a critical priority for Zen. That’s why Zen 5’s markup and CSS footprint is so small. After turning on Sass production-mode compilation, the total CSS is only 14k; this includes the layout, vertical rhythm support, print styles, all the appropriate vender prefixes (like -o and -khtml), CSS3-prettified tab styling and the 3 menu images that are included via Data URIs into the CSS. Zen includes no images and only 2 JavaScripts (which are only loaded conditionally by IE8 and lower, but also minified and pre-aggregated together).

Zen 5 also minimizes the number of HTTP requests to just one CSS file by always using the "all" media type in its .info file and writing CSS3 media queries inside the CSS files.

Zen can’t make all the front-end performance decisions for you. Most of that work has to be done on an individual sub-theme. But Zen will make it a little easier for you by pointing you in the right direction.

What took so long?

I think the biggest question everyone has (besides “Why is it called Zen 5 and not Zen 4?”) is “What took you so long?” Other base themes claimed to be the “first responsive Drupal base theme” last year. Zen 7.x-3.0 came out last April and it was as straight a port as possible from Zen 6.x-2.0, which meant it was a standard XHTML, fixed-width theme. After its release, I immediately started thinking about the best way to incorporate a responsive grid and HTML5 features into Zen. And that path took me far outside what Zen 3 did.

First, I knew I wanted to explore using a CSS preprocessor for all of Zen’s stylesheets. I’ve been wanting variables for colors in CSS for over 10 years. So, after doing some research with Matt Farina, we decided that Sass was a clear winner over Less. Because Sass files compile to standard CSS, there was very little risk to experimenting with it. Over several client projects at Palantir, we were able to continually improve our Sass knowledge and figure out best practices. What is in Zen 5 is nearly a year’s worth of that work. You can see some of the results already here on Palantir.net, as well as the King Center's new website and other upcoming projects such as the responsive sites we’re currently building for the University of Michigan Medical School.

With HTML5, updating most of the markup in Zen was straightforward. But I quickly saw that the biggest hurdle for Drupal with HTML5 was what to do about wrapping its fields. I came to realize what I wanted to do wasn’t possible in a base theme. Only site builders know the semantics of their content. So a few of us at Palantir created the Fences module, which allows site builders to easily select the semantic HTML5 markup they want for each field. Plus, the markup in Fences is lean. Fences 7.x-1.0 was recently released as well. Check it out.

Lastly, I started to look at layout methods. The default layout method in Zen 3 was the infamous “Zen Columns” method, a powerful CSS layout method that, unfortunately, required deceptively complicated math and a deep understanding of negative margins. With Zen going to a responsive design, we’d need a layout per media query. Writing 3-5 times more layout CSS wasn’t going to cut it. Fortunately, Sass provided a solution. I looked at the existing Sass layout libraries, but was unhappy with them. But by writing a Compass plug-in (a library of Sass mixins), I could write an abstraction layer on top of the underlying CSS complexities that were in Zen Columns. Not only did I end up with something easier to build with, but it turned out to be much more powerful. Zen Grids is crazy simple to use; which means that it’s much easier to make crazy awesome layouts.

What’s next?

Stay tuned for more information about the features found in Zen 5 and Zen Grids, which is actually a completely separate project from Drupal and the Zen theme that can be used by any site to create flexible responsive layouts.

Comments

...but I had no idea.

I love Zen and Zen Grids. At first I thought I wanted a theme to do everything and make me dinner, then I realized I actually needed one that let me do as I pleased.

Thanks!