SASS mixins for a better 960 grid system
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
fixed_grid.scss
flexible_grid.scss

README.md

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.