- 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.
Elastic-Grids consist of two types of helpers:
The grid class .grid
Widths helpers for all needed proportions (2/3
, 3/4
, 8/12
...).
[More documentation coming soon...]
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.
Some optional settings you can specify before the import.
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;
$elastic-grids-class-name: "grid";
@include elastic-widths($elastic-widths, $prefix: "u-", $suffix: "--test");
$elastic-widths-custom-selector: '[class^="u-"], [class*=" u-"]';
[More documentation coming soon...]
Copyright (c) 2015, Etienne Magnier.
Licenced under the BSD license. See the
LICENSE file for license text
and copyright information.