English
资源说明：Simple, flexible Compass / SASS Grid. Infinitely nestible, consistent gutter width, no alphas, omegas or nth-childs needed. All mixin based.
Nestable Fluid Grid
=====================
Compass / SASS set of mixins for an infinitely nestable fluid grid.
* Assign column width, gutter width, and number of columns.
* Mixins included for container, row, and column span.
* Infinitely nestable.
* Gutter width stays visually consistent when nested.
* No *alpha*, *omega*, or *nth-child* needed on end columns.
* Columns flow naturally to the next row when the number of column spans exceed the width of the row.
* Mixin based, so class names are flexible.
### Installation
The only file needed for the grid is sass/partials/_grid.scss. Everything else is just for the demonstration. Compass is not required. Simply include the _grid.scss file anywhere within an existing Compass or SASS project.
@include "partials/grid.scss";
### Configure Grid Settings
Configure the grid by setting the 4 variables.
// Configure grid variables in _grid.scss
$totalColumns: 12;
$gutterWidth: 1em;
$columnWidth: 6em;
$containerPadding: 1em;
// Apply mixins to any class
@include container; // Applies container max-width and padding
@include row(12) // Defines a row that spans 12 columns
@include spans(2,12) // Defines a column that spans 2 columns
// widths within a 12 column row.
### Nesting
To nest a grid, create another row within a span. The parameter given to the nested row should its parent span's assigned width. Example:
@include row(12); // Row spanning 12 columns.
@include spans(4,12); // Column spanning 4 columns.
@include row(4); // Nested row inside our span(4,12)
@include spans(2,4); // Nested columns spanning 2 of 4 columns.
### Markup Structure
Markup structure should follow a row > span structure. Example:
div.container
div.row
div.span
div.span
div.span
div.row
div.span
div.span
div.span
div.span
div.span
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
