Zen now comes with modern front-end development practices!
|HTML5||RTL||Mobile-first||Components||Style guide||Task runner|
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:
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!
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.
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.
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 .
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
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.
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.
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.
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!
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!
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. :-)