Elastic Grids

• Fully customizable and responsive CSS Grids with Sass.
• Give you a set of CSS helper classes for dealing with widths/proportions.
• Only enable what you needs. Keep control on the generated CSS.

How it works

Elastic-Grids consist of two types of helpers:

Grids

The grid class .grid

Widths

Widths helpers for all needed proportions (2/3, 3/4, 8/12...).

[More documentation coming soon...]

Installation

Install using Bower:

$ bower install --save elastic-grids

Install using npm:

$ npm install --save elastic-grids

Usage:

$elastic-grids: true;
$elastic-widths: 1, 2, 3, 4, 6, 9, 12;
  
@import "elastic-grids";
@include elastic-widths($elastic-widths);

By default the Grid helpers are not generated, until you specify $elastic-grids: true;.

The first parameter of elastic-widths corespond to the Widths you needs. Again you have the control of what CSS you want to generate.

Optional Settings

Some optional settings you can specify before the import.

Use spoken-word selector instead of fractions

If you don't like the fraction attribute selector <div class="1/2">, you can use the spoken-word format instead, e.g. <div class="one-half">.

$elastic-widths-use-fractions: false;

Rename the Grid class name

$elastic-grids-class-name: "grid";

Add Prefix/Suffix to the Width classes

@include elastic-widths($elastic-widths, $prefix: "u-", $suffix: "--test");

Specify a custom width selector inside a grid

$elastic-widths-custom-selector: '[class^="u-"], [class*=" u-"]';

Responsive Grids and Widths

[More documentation coming soon...]

Licence

Copyright (c) 2015, Etienne Magnier.
Licenced under the BSD license. See the LICENSE file for license text and copyright information.