Create CSS Stub Files

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 CSS Stub Files with Emma Jane Westby.
  • 0:08
    EMMA JANE WESTBY: I'd like to get started into my CSS files
  • 0:10
    early in the theming process.
  • 0:12
    This is probably because I love rules and structure, though.
  • 0:15
    And people who know me, probably, will get a bit of a giggle
  • 0:18
    at the fact that I put this into my theming process.
  • 0:21
    As part of this lesson what we're going to do
  • 0:23
    is create a series of CSS files that are based on our style guide,
  • 0:29
    and we'll actually get in there and develop our class names, our rules,
  • 0:33
    and our properties in CSS even though we
Loading ...

Create CSS Stub Files

Loading...

In this lesson we will convert the style guide into a series of stubs which we can view in a Web browser. The design was originally created using the templates from the 960gs. We'll use this same grid framework to ensure all of our margins are automatically adopted. Grid frameworks are excellent for rapid prototyping of designs. Ultimately many front end developers choose choose to write their own for the final theme; however, if you're just getting started try to stick with a grid framework to reduce the number of things that you need to fight with.

The original theme that was created for this design used the NineSixty base theme. There are some nifty features in this theme which are great for more complex designs; however, it is not responsive, and does not use Sass. To bring the lessons up-to-date we'll be using the 960-Compass Plugin to generate our stub files and give us some sample Sass output to work with.

By the end of this lesson you will be able to convert a style guide to a series of stub files in Sass (or CSS) using SMACSS conventions and a grid framework.

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

SMACSS (Scalable and Modular Architecture for CSS) 

960gs

960-Compass-Plugin

Intro to Sass and Compass