#Golden Grid System Compass Plugin

This plugin adds the Golden Grid System to [Compass](compass-style.org).

[Golden Grid System](goldengridsystem.com) is a fluid grid created by [Joni Korpi](jonikorpi.com) with [four features](goldengridsystem.com/#features): columns, gutters, a baseline and a script.

##Install the gem

‘gem install compass-golden-grid-system`

##Create a Compass project using Golden Grid System

‘compass create -r ggs my_project –using ggs`

This will create a Compass project with the default directory structure and use scss syntax.

See the Compass [Install](compass-style.org/install) page for options.

###Sans Compass

Download the source and use it in your sass project.

##Usage

In the ‘sass` directory you will find the bootstrap file `GGS.scss` which imports all of the component files.

###Partials

There are partials for each grid size:

• ‘_mobile.scss` the default layout of 4 columns

• ‘_tablet.scss` 8 column grid

• ‘_large.scss` 16 column grid

‘_type.scss` contains the type presets.

_I left the classes to remain consistent with the original ‘GGS.css` file but they aren’t necessary._

‘_global.scss` is for styles shared by all layouts.

##Configuration Variables

From the GGS.scss file

‘$line: 24` - Line height `$column: 100% / 18` - Column width `$font-size: 16` - Base font size `$em: $font-size * 1` EM conversion

I’ve added:

‘$layout: 8 !default` - This variable is overridden in each layout. `$page: 100% !default` - You probably wouldn’t change this and it probably didn’t need to be a variable.

###Mixins

• ‘column($columns, $side)` - Considers the `$layout` and sets the width of an element to span the number of given columns, and optionally set a float direction.

• ‘outer($columns)` - Sets the outer margin width.

• ‘wrapper` - Elastic gutters, applies `padding: 0 .075em` and `box-sizing: border-box`.

• There are mixins for each of the type presets as well.

##Credit

Thanks to Joni Korpi for creating rad minimal tools. I started with the [GGS.scss](github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.scss) file which was contributed by [mikker](github.com/mikker)

Thanks to [willhw’s](github.com/willhw) [compass-less-plugin](github.com/willhw/compass-less-plugin) which I used as a reference point.

##Notes

I’m no sass/compass expert. This is my first Compass extension and Ruby Gem and I’m sure there art things that could be improved. Feel free to make it better. Cheers.