Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Layout Rules for CSS Stubs

Video loading...

Transcript language code: 

Join Drupalize.Me to watch this video

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

Log in Sign up
  • 0:00
    Layout Rules for CSS Stubs, with Emma Jane Westby.
  • 0:08
    EMMA JANE WESTBY: In object oriented CSS,
  • 0:10
    there's a concept of both major layout
  • 0:13
    rules and minor layout rules.
  • 0:15
    A major rule is used to divide the page into a series of regions,
  • 0:20
    whereas a minor rule is used for things like a list
  • 0:23
    if you've got picture and a title, and how
  • 0:25
    do those things fit together?
  • 0:27
    Minor rules are often more reusable.
  • 0:30
    In this lesson, we're going to go ahead and create our rules
Loading ...

Layout Rules for CSS Stubs


In SMACSS there are both major and minor layout rules that need to be created. The major layout rules are often handled by a grid framework and are used to describe big areas on your site, such as your Drupal regions. The minor rules are used for the components (for example how a picture aligns next to a paragraph of text). In this lesson we'll start by review how Sass allows us to use semantic naming for our CSS layout classes. Then we'll adapt the sample Sass provided by the 960 Compass Plugin so that it uses the necessary structure for our design.

By the end of this lesson, you will be able to implement the layout rules from your style guide as a Sass file using the 960 Compass Plugin as a reference.

Log in or sign up to download companion files.
Additional resources: