Clone this wiki locally
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 init rails -r ninesixty --using 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.
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.
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
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)
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:
- remove all the imports from that framework in your sass files.
- remove any require statement in your config file.
- 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.