zen-grids.md

#Demo: Creating a Zen Sub-theme and Using Zen Grids

##Add and enable Zen

drush dl zen
drush en zen
drush cc all

##Create a new sub-theme

drush zen "Zen Subtheme" zen_subtheme --description="My first zen subtheme" --path=sites/all/themes/custom --without-rtl

Enable the subtheme and set it as a default

drush en subtheme
drush vset theme_default subtheme

Add some content to the first and second sidebar Test the theme at different screen widths

##Start compass!

compass watch sites/all/themes/zen_subtheme

##Use Zen Grids

Change layout on screens larger than 960px to be a 7-column layout

$zen-column-count: 7;

Change the zen-grid-item() calls to follow a 7-column layout.

##Add variables and mixins

Add a variable to _init.scss.

$green: #96b97d;

Add a mixin to _mixins.scss.

@mixin error-block {
  background: #fffddd;
  color: #ff0000;
}

Use these in the styles.scss files.