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.

gem install compass-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.

Download the source and use it in your sass project.

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

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.

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.

• 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.

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.

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.