Zen is a modern, powerful, HTML5 starting theme with component-based CSS and 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 Bartik or Stark. This theme has fantastic online documentation and tons of helpful code comments in its JavaScript, PHP, HTML, CSS and Sass.
Zen now comes with modern front-end development practices!
| HTML5 | RTL | Mobile-first | Components | Style guide | Task runner | |
|---|---|---|---|---|---|---|
| 7.x-6.x |  |
|
|
|
|
|
| 7.x-5.x | |
|
|
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-6.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! |
| 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. |
| Component-based CSS |
All of Zen’s CSS is now built as reusable components. Each repeatable design element gets its own component. And CSS class names follow Drupal 8’s BEM naming convention. |
| KSS Style Guide |
Zen now includes a KSS-based living style guide. KSS reads comments in your Sass files and automatically generates a Style Guide that shows how your actual CSS works on your Drupal site. |
| libSass |
Zen no longer uses the slower Ruby Sass/Compass toolset to build CSS. The Zen team has developed a Gulp.js task runner that uses the zippy libSass with compilations speeds . |
| Gulp.js |
In order to make it easier to do all the things you need to do as a front-end developer, Zen now includes the Gulp task runner. While developing, just type |
| Zen Grids |
Includes the revolutionary Sass 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 port of Normalize.) |
| 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, Singularity, 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: |
| RTL language support |
Built-in RTL language support, including a Sass variable that includes or removes all RTL-specific CSS, including RTL layouts! |
| 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 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. |
Contributors
The Zen theme system is maintained by John Albin Wilkins.
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. :-)
