Create a Theme Style Guide for Drupal 7

Last updated

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Sprout Video

Over the last couple of years we've seen the rise of object oriented CSS. There's been a lot of work done by smart folks to categorize different types of rules that we use to style our sites. We're going to take advantage of this work and use it to create a style guide. This foundation piece will help us to map the elements in our static design to the elements that we will build, and theme, in Drupal.In this lesson we'll create a style guide from our design with:

  • Base rules
  • Layout rules
  • Component rules

By the end of this lesson you will be able to create a text-based style guide of your design which accurately describes your site according to base rules, layout rules, and component rules. You will be able to further supplement this style guide by adding relevant images which reference the exact component the style guide is describing.