Create a Theme Style Guide

Video loading...

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:00
    Create a Theme Style Guide, with Emma Jane Westby.
  • 0:07
    EMMA JANE WESTBY: Over the last couple of years
  • 0:09
    we've seen a lot of progress being made
  • 0:11
    in the concept of object oriented CSS.
  • 0:13
    Ultimately what this does is it helps us to categorize and sort
  • 0:18
    together our styles so that they're more
  • 0:21
    easily worked with by a team of people.
  • 0:24
    We're going to create a style guide and use this as a foundation piece
  • 0:27
    to allow us to map the design onto what Drupal needs in its theme.
  • 0:32
    Specifically, we're going to use this to make our layout rules,
Loading ...

Create a Theme Style Guide

Loading...

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.

Downloads: 
Log in or sign up to download companion files.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.