Zen

Zen is a powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Stark. This theme has fantastic online documentation and tons of helpful code comments in its PHP, HTML, CSS and Sass.

At many points in my Drupal career I’ve loved, leaned on & learned from the Zen theme. Version 5 takes that to a whole new level.
- Jen Simmons

The theme “Zen” turned out to be the public favorite and won the “Best Drupal Theme” title.
- Award announcement for the Drupal Hall of Fame Award by Packt Publishing

Zen now comes in two flavors!

XHTML HTML5 Responsive Mobile-first Sass/Compass RTL
7.x-3.x Dot Dot
7.x-5.x Dot Dot Dot Dot Dot

Documentation

The Zen theme is wonderfully documented. Each source file in the project is chock-full of best practice tips and Drupal-specific comments. The project also has an extensive online guide book at:


7.x-5.x features at a glance:

Feature Details
HTML5 HTML5 from top to bottom; all of Zen's templates have lean, semantic HTML5 markup. And, with the Fences module, Zen finally tames the field.tpl markup nightmare and makes choosing the right HTML5 element a snap!
HTML5 shiv
(or Modernizr)
Zen automatically includes the HTML5 shiv. But this can easily be turned off in the theme settings when you want to use a custom Modernizr build.
Responsive Design Zen’s default layout is a mobile first, responsive layout with a fluid grid system. The layout is either a 1-, 3-, or 5-column grid (depending on the media query), but one Sass variable allows you to change the number of columns to suit your needs.
Sass/Compass Complete Sass/Compass integration using best practices for Drupal/Sass. The Zen team has developed over the span of a year with blood, sweat and tears, but you can leap frog the pain by using what we’ve learned.
CSS If you're not ready for Sass yet, Zen still includes a full set of well-documented CSS files. Sass integration adds zero overhead, so if you simply ignore all of Zen's Sass, your site performance isn’t penalized. No worries!
Zen Grids Includes the revolutionary Sass/Compass plugin, Zen Grids! This set of mixins allows themers to easily build complex responsive grid layouts without the burden of complex CSS or convoluted classes for every media query.
Normalize CSS Includes Normalize CSS — a better way to “reset”. (And JohnAlbin maintains the official Drupal/Compass port of Normalize.)
Respond.js Full IE8 support for media queries with the included Respond.js. Or, if you prefer, to feed a desktop-specific layout to IE8, easily disable Respond.js in the theme settings.
IE conditional classes Includes IE conditional classes on the HTML tag so your IE-specific styles are no longer hidden away in a separate file where they are hard to keep in sync with the rest of your styles. If you prefer to conditional stylesheets, simply use the conditional styles module.
Optional IE6/7 Support Easily add IE7 (and 6!) support to your theme with a single Sass variable ($legacy-support-for-ie7: true;).
Documentation Extremely well-documented PHP, CSS and Sass source files. You’ll find best practices tips for web development, as well as Drupal-specific code comments.
Swappable layouts Zen has a separate layout CSS/Sass file to allow for easy swapping of the layout. So whether you prefer Zen Grids, 960.gs, Gridset App or whatever, you can easily replace the default layout with your preferred one.
Drush support We provided a patch to Drush, just so Zen could have its own drush command to create sub-themes. If you're geeky enough, just type: drush help zen. We --without-rtl option.
RTL language support Built-in RTL language support, including a 2-line Sass file that can auto-generate RTL layouts from LTR layouts! Check it out!
Accessibility

Zen pioneered the navigation “skip link” now found in Drupal 7 core. And Zen now includes a full compliment of ARIA roles and Sass mixins for the element-invisible (hidden, but accessible) styling.

Zen was also one of the first themes to make the D7 Accessibility Pledge. And we stand behind it!

#D7AX/#DAX - I pledge to make this theme as accessible as it can be. If you find any flaws, please submit an issue. Help me fix them if you can.

Note:

There seems to be a conflict between some host installations of the SiteZen site builder and the Zen directory name which causes broken tabs, css files to be "not found", and other issues. To learn more about this problem and to learn its solution, visit the troubleshooting guide.


Contributors

The Zen theme system is maintained by John Albin Wilkins, Elly Gross, and Kris Bulman. There are numerous contributors to make Zen a better framework for further theme development. All 100+ of their names can be found by following the View all committers link under the prominent “Maintainers for Zen” block on this page. They rock!

Please contribute your ideas in the issue queue. Zen continues to get better because of community input. :-)


Project Information

Downloads