960-sass

What?

A collection of SASS mixins (specifically, SCSS) to allow you to easily and more-sematically use 960.gs for fixed or flexible grids.

Why?

Because using non-semantic, strictly-presentational grid classes like <div class="grid_4 alpha"> rubs me the wrong way, and because SASS is awesome.

How?

First, choose whether you want a flexible grid or a fixed grid, and save the appropriate file in your SASS directory.

Then, in your main SASS file, you can do things like this:

@import "flexible_grid";

section{
  @include container_12;
  
  article{
    @include grid(8);
    
    img{
      @include grid(2);
      @include alpha;
    }
    
    p{
      @include grid(6);
      @include omega;
    }
    
  }
  
  nav{
    @include grid(4);
    @include push(8);
  }
  
}

Just like 960.gs, included options are

• container_12
• grid(#)
• push(#)
• pull(#)
• prefix(#)
• suffix(#)
• alpha
• omega

Where?

You can see it in action in the stylesheet source of tjschuck.com

Who?

T.J. Schuck
http://tjschuck.com
@tjschuck

License

Copyright © 2011 T.J. Schuck
Released under the MIT license.