Home

NOTE: After installing the Compass and 960gs gems all you need to do to setup your RAILS app (opposed to a straight Ruby app) to use 960gs within Compass is this from the root directory of your app:

compass —rails -r ninesixty -f 960 .

Using The Framework

Setting Up The Application

This is a down-and-dirty overview of how a Newbie got this up and running. After issuing the command above, copy the outputted HAML stylesheet calls into your applications layout, such as:

= stylesheet_link_tag 'compiled/grid.css', :media => 'screen, projection'
= stylesheet_link_tag 'compiled/text.css', :media => 'screen, projection'

Unlike using COMPASS stand-alone, with rails you don’t need to run compass —watch as compass will auto-compile your SASS into CSS when a page is requested (pretty nice of Chris huh?).

SASS Includes & Headers

Within grid.sass you will see the following:

@import compass/utilities/general/reset.sass
@import 960/grid.sass

+global-reset

Leave it. This brings in the needed mixins and resets the browser properties based on the 960gs framework. You also need to leave +global-reset at the root level as it is.

Mixins

The main mixins that you will use are:

+grid-system(12|16|N columns) # => sets up the main 960gs
+grid-children # => sets up alpha and omega
+grid(X,N) # => use this like you would use grid_X.  N should equal the total number of columns.  I am not sure why Chris did it this way, but it works.
+grid_prefix(X,N) # => use this like you would prefix_X.  N should equal the total number of columns.
+grid_suffix(X,N) # => use this like you would suffix_X.  N should equal the total number of columns.
+alpha
+omega

That’s it. It’s pretty straight-forward from there.

Note: Why did I use the +grid-system mixin and not +grid-container?
Because +grid-system emcompasses +grid-container plus a bunch more.

Example

Here is an example of one of my grid.sass files:

@import compass/utilities/general/reset.sass
@import compass/utilities/general/clearfix.sass
@import 960/grid.sass

+global-reset

=brdr
  border: 1px dashed red

body
  background-color: #6DCBCD

#container
  +grid-system(16)
  +clearfix
  +grid-children
  background: #6CB01A url(/images/bg_homepage.gif) top center no-repeat
  height: 900px
  color: white

 / notice how prefix and grid add to 16
  #app-title
    +grid-prefix(9,16)
    +grid(7,16)
    padding-bottom: 10px

 / the following two divs will add to 16 with a sub-div
  #main-copy
    +grid-prefix(1,16)
    +grid(8,16)
    font-size: 12pt
    .icon
      +grid(3,16)

  #screen-shots
    +grid(7,16)
    .left
      +grid(3,16)
      +alpha
      padding-bottom: 10px
    .right
      +grid(4,16)
      +omega
      padding-bottom: 10px

Customizing The Framework

If you look inside 960/_grid.sass you will see you can customize a few things within your own sass stylesheet. For example:

!ninesixty_gutter_width = 20px  # =>  Use this to override the 20px gutter width
!ninesixty_grid_width = 960px # => Use this to override the 960px grid width

Advanced Mixins

There are a number of advanced mixins, but as a newbies to this I don’t know what they do, so someone else needs to comment :)

  =grid-width(!n, !cols, !gutter_width = !ninesixty_gutter_width)
  =grid-unit-base(!gutter_width = !ninesixty_gutter_width)
  =grids(!cols, !gutter_width = !ninesixty_gutter_width)
  =grid-prefixes(!cols)
  =grid-suffixes(!cols)  

Changing Frameworks

This isn’t exactly about the 960gs framework, but Chris was nice enough to send it to me so I thought I would share and document:

To change frameworks:

1. remove all the imports from that framework in your sass files.
2. remove any require statement in your config file.
3. Delete any sass files you don’t want anymore

Then install the other framework:

compass -i -f blueprint <project_dir>

Or just add imports to it yourself and start using it.