CSS/Sass files in 7.x-3.x or 7.x-5.x

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

The stylesheets in Zen 7.x-5.2 and later are organized according to the SMACSS categorization technique.

For a full documentation about SMACSS see the SMACSS website. It's pretty awesome. (The book is pretty sweet too.)

This guide describes how the CSS/Sass are organized in 7.x-5.1 and earlier, before component-based design was implemented in Zen.

Zen stylesheet organization

How Zen organizes its styles in 7.x-3.x or 7.x-5.1

With Zen 7.x.5 you can take advantage of new techniques for more efficiently writing CSS

The CSS layout method used in the core Zen theme is based on the mostly undocumented “Zen Columns” layout method. The theme developer can

The following selectors can be really useful when styling your sub-theme. These class names come from Drupal core and the Zen 7.x-5.x base