navgarcha / column-policy

A SASS mixin for generating flexible grid like layouts from a collection of elements.

Column Policy

A SASS mixin for generating flexible grid like layouts from a collection of elements.

Dependencies

This depends on SASS (version 3.3.7 or greater) and Compass (version 0.12.6 or greater) being installed on the system.

Quick And Dirty Starting Point

Download the files

This can be done using git clone, downlowning a release zip/tar or using bower (bower install https://github.com/leadiv/column-policy.git).

Include the mixin

Include the mixin where you want to use it. Example: @import "path/to/sass/files/_column-policy";

Modify base functionality (if needed)

Set any global settings using @include column-policy-options(...);. This can be done just after @import or as a separate file like _use-column-policy.scss.

Generate global CSS

There is a little bit of CSS that is generated on first run. This is generated by the column-policy-base mixin.

Use the mixin!

Where columns are needed use @include column-policy(...);

Ensure the markup can pick up the styles

In the HTML markup ensure that the items that are in a grid have a column class. The default classname is column.