Zen

47669
7.X
9.X
Demo to see how the theme looks in a sample Drupal site Apply theme

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 Dot Dot Dot Dot Dot Dot
7.x-5.x 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-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 gulp watch and it will watch and compile your Sass, lint your Sass and JavaScript for coding and syntax errors, build your style guide, and launch BrowserSync so you can test against mulitple devices at once.

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: drush help zen.

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 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.

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. :-)


 

Want to customize this theme in a unique way for your website, we are here to help you!

We also build custom Drupal themes

 

Get a custom theme