/compass-golden-grid-system

Golden Grid System Compass plugin

Primary LanguageRuby

#Golden Grid System Compass Plugin

This plugin adds the Golden Grid System to Compass.

Golden Grid System is a fluid grid created by Joni Korpi with four 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 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 file which was contributed by mikker

Thanks to willhw's 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 are things that could be improved. Feel free to make it better. Cheers.