{"main":["grid.less"],"options":[],"events":[],"methods":[],"css":[],"name":"Grid","type":"grid","description":"A responsive CSS grid.","use":"The grid works by nesting 'cells' within 'rows'. Cells are defined by classes that set widths at specific breakpoints. The breakpoints correspond to general screen sizes. By default, Grid renders 3 columns on 'small', 6 columns on 'medium' and 12 columns on 'large' displays.\n\n### Markup\n\nA basic example may look something like:\n\n```markup\n\n\t
\n\t\t
...
\n\t\t
...
\n\t\t
...
\n\t
\n\n```\n\nThis will create 3 cells that each span 3 columns on 'small', 2 columns on 'medium' and 4 columns on 'large' screens. Think of the nested structure like a directory tree:\n\n```\ngrid\n├─ row\n| ├─ cell\n| |─ cell\n| | └─ row\n| | ├─ cell\n| | └─ cell\n| └─ cell\n└─ row\n ├─ cell\n └─ cell\n```\n\n### Box-Sizing\n\nGrid relies on border-box and includes a global box-sizing reset:\n\n```css\n*,\n*:before,\n*:after {\n\tbox-sizing: border-box;\n}\n```\n\nThis will effect every element on the page and can have unexpected results. In the long run it will help speed development by modifying how padding and borders effect the box model calculations. [Learn more about border-box](http://www.paulirish.com/2012/box-sizing-border-box-ftw/).\n\n### Row Widths and Columns Counts\n\n| Name | Screen Size | Row Width | Column Count |\n| --- | --- | --- | --- |\n| `xs` | smaller than 500px | 300px | 3 |\n| `sm` | smaller than 740px | 480px | 3 |\n| `md` | 740px to 980px | 720px | 6 |\n| `lg` | 980px to 1220px | 960px | 12 |\n| `xl` | larger than 1220px | 1200px | 12 |\n\n### Defining Cells\n\n| Class | Description |\n| --- | --- |\n| `fs-xs-[x]` | only extra small size |\n| `fs-sm-[x]` | both small and extra small sizes |\n| `fs-md-[x]` | medium size |\n| `fs-lg-[x]` | both large and extra large sizes |\n| `fs-xl-[x]` | only extra large size |\n| `fs-all-[x]` | all sizes |\n\nCells will default to filling the available horizontal space but can be defined by the target screen size and column count. For example `fs-sm-2` will produce a cell spanning 2 of the 3 available columns within the 'small' screen size range. Cell classes can be stacked to specify column spans across all screen sizes:\n\n```markup\n
...
\n```\n\nThe `fs-xl-[x]` and `fs-xs-[x]` classes adds level of control when targeting large and small screens. For example, a cell may need to span 2 columns at the small size, but span the full width at the extra small size:\n\n```markup\n
...
\n```\n\nThe `fs-all-[x]` classes will create a cell that spans the specified width on all screen sizes (only works with fraction cell counts):\n\n```markup\n
...
\n```\n\n### Fraction Cells\n\nThe fraction classes can be used in place of specific column counts:\n\n| Class | Description |\n| --- | --- |\n| `fs-[x]-full` | entire row width |\n| `fs-[x]-half` | 1/2 row width |\n| `fs-[x]-third` | 1/3 row width |\n| `fs-[x]-fourth` | 1/4 row width |\n| `fs-[x]-fifth` | 1/5 row width |\n\n### Hidden Cells\n\nTo hide cells at specific screen sizes:\n\n| Class | Description |\n| --- | --- |\n| `fs-xs-hide` | Hide on extra small |\n| `fs-sm-hide` | Hide on small |\n| `fs-md-hide` | Hide on medium |\n| `fs-lg-hide` | Hide on large |\n| `fs-xl-hide` | Hide on extra large |\n\n### Helper Classes\n\nHelper classes can be added to cells to modify their default behavior in predictable ways.\n\n| Class | Description |\n| --- | --- |\n| `fs-padded` | Swaps cell margin for padding. Allows backgrounds to touch while maintaining gutters. |\n| `fs-contained` | Removes cell margin. Allows backgrounds to touch by removing gutters. |\n| `fs-centered` | Centers cell. Useful for centering odd column count cells. |\n| `fs-right` | Right aligns cell. Useful for changing document flow on different device sizes. |\n\n### LESS Configuration\n\nGrid can also be configured and rebuilt using Grunt. Simply edit the variables found in `/src/grid/grid-config.less` before running the default `grunt` process.\n\n| Variable | Default | Description |\n| --- | --- | --- |\n| **Structure** | | |\n| `@fs-grid-class-container` | `fs-grid` | Container class |\n| `@fs-grid-class-row` | `fs-row` | Row class |\n| `@fs-grid-class-contained` | `fs-contained` | Contained helper class |\n| `@fs-grid-class-padded` | `fs-padded` | Padded helper class |\n| `@fs-grid-class-centered` | `fs-centered` | Centered helper class |\n| **Cells** | | |\n| `@fs-grid-class-all` | `fs-all` | All cell class |\n| `@fs-grid-class-xs` | `fs-xs` | Extra Small cell class |\n| `@fs-grid-class-sm` | `fs-sm` | Small cell class |\n| `@fs-grid-class-md` | `fs-md` | Medium cell class |\n| `@fs-grid-class-lg` | `fs-lg` | Large cell class |\n| `@fs-grid-class-xl` | `fs-xl` | Extra Large cell class |\n| **Columns** | | |\n| `@fs-grid-columns-sm` | `3` | Small column count |\n| `@fs-grid-columns-md` | `6` | Medium column count |\n| `@fs-grid-columns-lg` | `12` | Large column count |\n| **Gutters** | | |\n| `@fs-grid-gutter` | `1.0416666666666667%;` | Gutter width |\n| **Widths** | | |\n| `@fs-grid-width-xs` | `300px` | Extra Small row width |\n| `@fs-grid-width-sm` | `480px` | Small row width |\n| `@fs-grid-width-md` | `720px` | Medium row width |\n| `@fs-grid-width-lg` | `960px` | Large row width |\n| `@fs-grid-width-xl` | `1200px` | Extra Large row width |\n| **Breakpoints** | | |\n| `@fs-grid-width-break-xs` | `320px` | Extra Small break width |\n| `@fs-grid-width-break-sm` | `500px` | Small break width |\n| `@fs-grid-width-break-md` | `740px` | Medium break width |\n| `@fs-grid-width-break-lg` | `980px` | Large break width |\n| `@fs-grid-width-break-xl` | `1220px` | Extra Large break width |\n| **Media Queries - Max** | | |\n| `@fs-grid-mq-max-sm` | `499px` | Small max mq |\n| `@fs-grid-mq-max-md` | `739px` | Medium max mq |\n| `@fs-grid-mq-max-lg` | `979px` | Large max mq |\n| `@fs-grid-mq-max-xl` | `1219px` | Extra Large max mq |\n| **Media Queries - Min** | | |\n| `@fs-grid-mq-min-sm` | `500px` | Small min mq |\n| `@fs-grid-mq-min-md` | `740px` | Medium min mq |\n| `@fs-grid-mq-min-lg` | `980px` | Large min mq |\n| `@fs-grid-mq-min-xl` | `1220px` | Extra Large min mq |\n| **Mixin-Only Grid** | | |\n| `@fs-grid-mixin-only` | `false` | Disables generation of classes based grid |\n\n### LESS Extends & Mixins \n\nGrid can be compiled into CSS directly. This allows for a similar declarative approach, without adding classes to markup. \n\n| Name | Description |\n| --- | --- |\n| **Extends** | |\n| `.fs_grid_row` | Base row |\n| `.fs_grid_row_fluid` | Base fluid row |\n| `.fs_grid_row_fluid_sm` | Base fluid row (small only) |\n| `.fs_grid_row_row` | Base nested row |\n| `.fs_grid_row_row_contained` | Base nested row (parent cell is contained) |\n| `.fs_grid_cell` | Base cell |\n| `.fs_grid_cell_centered` | Base centered cell |\n| `.fs_grid_cell_padded` | Base padded cell |\n| `.fs_grid_cell_contained` | Base contained cell |\n| `.fs_grid_cell_right` | Base right cell |\n| **Mixins** | |\n| `.fs_row();` | Base row |\n| `.fs_row_fluid();` | Base row fluid |\n| `.fs_row_fluid_sm();` | Base fluid row (small only) |\n| `.fs_row_row();` | Base nested row |\n| `.fs_row_row_contained();` | Base nested row (parent cell is contained) |\n| `.fs_cell();` | Base cell |\n| `.fs_cell_centered();` | Base centered cell |\n| `.fs_cell_padded();` | Base padded cell |\n| `.fs_cell_contained();` | Base contained cell |\n| `.fs_cell_right();` | Base right cell |\n| `.fs_cell_xs(@count [, @total]);` | Extra Small cell; Pass @total to define fractions |\n| `.fs_cell_sm(@count [, @total]);` | Small cell; Pass @total to define fractions |\n| `.fs_cell_md(@count [, @total]);` | Medium cell; Pass @total to define fractions |\n| `.fs_cell_lg(@count [, @total]);` | Large cell; Pass @total to define fractions |\n| `.fs_cell_xl(@count [, @total]);` | Extra Large cell; Pass @total to define fractions |\n| `.fs_push_xs(@count [, @total]);` | Extra Small push; Pass @total to define fractions |\n| `.fs_push_sm(@count [, @total]);` | Small push; Pass @total to define fractions |\n| `.fs_push_md(@count [, @total]);` | Medium push; Pass @total to define fractions |\n| `.fs_push_lg(@count [, @total]);` | Large push; Pass @total to define fractions |\n| `.fs_push_xl(@count [, @total]);` | Extra Large push; Pass @total to define fractions |\n","demo":"\r\n\r\n\r\n\r\n
\r\n\t
\r\n\t\t\r\n\t\t\r\n\t
\r\n
\r\n\r\n\r\n

Bookmarklet

\r\n

Drag the bookmarklet to your bookmarks bar.

\r\nFormstone Grid\r\n
\r\n

Or, include it on every page of your development site:

\r\n
<script>\r\n(function(){if(typeof FSGridBookmarklet==='undefined'){document.body.appendChild(document.createElement('script')).src='http://beta.formstone.it/js/bookmarklet/grid.js';}else{FSGridBookmarklet();}})();\r\n</script>
\r\n\r\n\r\n

Asymmetrical

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\tfs-sm-1\r\n\t\t\tfs-md-2\r\n\t\t\tfs-lg-4\r\n\t\t
\r\n\t\t
\r\n\t\t\tfs-sm-2\r\n\t\t\tfs-md-4\r\n\t\t\tfs-lg-8\r\n\t\t
\r\n\t
\r\n
\r\n\r\n

Symmetrical

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\tfs-sm-3\r\n\t\t\tfs-md-3\r\n\t\t\tfs-lg-6\r\n\t\t
\r\n\t\t
\r\n\t\t\tfs-sm-3\r\n\t\t\tfs-md-3\r\n\t\t\tfs-lg-6\r\n\t\t
\r\n\t
\r\n
\r\n\r\n

3 Column

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\tfs-all-third\r\n\t\t
\r\n\t\t
\r\n\t\t\tfs-all-third\r\n\t\t
\r\n\t\t
\r\n\t\t\tfs-all-third\r\n\t\t
\r\n\t
\r\n
\r\n\r\n

Push

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\tfs-sm-2 fs-sm-push-1\r\n\t\t\tfs-md-3 fs-md-push-3\r\n\t\t\tfs-lg-8 fs-lg-push-4\r\n\t\t
\r\n\t
\r\n
\r\n\r\n

Centered

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\t-centered fs-all-half\r\n\t\t
\r\n\t
\r\n
\r\n\r\n

Contained

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\t-contained fs-all-half\r\n\t\t
\r\n\t\t
\r\n\t\t\t-contained fs-all-half\r\n\t\t
\r\n\t
\r\n
\r\n\r\n

Padded

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\t-padded fs-all-half\r\n\t\t
\r\n\t\t
\r\n\t\t\t-padded fs-all-half\r\n\t\t
\r\n\t
\r\n
\r\n\r\n

Right

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\t-right fs-all-half\r\n\t\t
\r\n\t
\r\n
\r\n\r\n

Nested

\r\n
\r\n\t
\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\tfs-sm-full\r\n\t\t\t\t\tfs-md-half\r\n\t\t\t\t\tfs-lg-half\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\tfs-sm-full\r\n\t\t\t\t\tfs-md-half\r\n\t\t\t\t\tfs-lg-half\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t
\r\n\t\t
\r\n\t\t\tfs-sm-full\r\n\t\t\tfs-md-2\r\n\t\t\tfs-lg-4\r\n\t\t
\r\n\t
\r\n
"}