This repository is a mirror of the component module suitcss/components-grid. It has been modified to work with NPM+Browserify. You can install it using the command npm install npmcomponent/suitcss-components-grid
. Please do not open issues or send pull requests against this repo. If you have issues with this repo, report it to npmcomponent.
SUIT Grid
A SUIT component for a CSS grid. The grid makes use of inline-block
and
box-sizing
to provide features that float-based layouts cannot.
N.B. This component relies on particular dimensions being applied to cells in the grid via other classes. For example, suitcss-utils-size.
Read more about SUIT.
Installation
- Component(1):
component install suitcss/components-grid
- npm:
npm install suitcss-components-grid
- Bower:
bower install suit-components-grid
- Download: zip
Features
- Fluid layout.
- Intelligent cell wrapping.
- Horizontal centering of cells.
- Custom vertical alignment of cells (top, bottom, or middle).
- Cell width is controlled independently of grid gutter.
- Infinite nesting.
- Built-in redundancy.
Available classes
Grid
: core componentGrid--alignCenter
: center-align all childGrid-cell
Grid--alignRight
: right-align all childGrid-cell
Grid--alignMiddle
: middle-align all childGrid-cell
Grid--alignBottom
: bottom-align all childGrid-cell
Grid--withGutter
: adds a gutter between cellsGrid-cell
: a child cell ofGrid
that wraps grid contentGrid-cell--center
: center an individualGrid-cell
Configurable variables
var-font-size-Grid
: the font-size to use within the Grid (defaults to 1rem).var-gutter-size-Grid
: the width of the gutter applied by theGrid--withGutter
modifier class.
Use
A simple grid is easy to create. A grid container can have any number of child cells.
<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom]">
<div class="Grid-cell u-size1of2 u-lg-size6of12"></div>
<div class="Grid-cell u-size1of2 u-lg-size4of12"></div>
<div class="Grid-cell u-size1of3 u-lg-size2of12"></div>
<div class="Grid-cell u-size1of3"></div>
</div>
Widths and offsets
Cell widths and offsets can be controlled using the responsive dimension utilities and responsive offset utilities, respectively.
One limitation of creating grid gutters in the manner shown above is that it
prevents any offset utilities applied directly to the Grid
component from
functioning as expected.
GOOD:
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size1of2 u-before1of4 u-after1of4">
{{>partial}}
</div>
</div>
BAD:
<div class="Grid Grid--withGutter u-before1of4 u-after1of4">
<div class="Grid-cell">
{{>partial}}
</div>
</div>
You can nest grids in any context, including one that uses dimension or offset utilities, but keep in mind that the the dimensions will be relative to the grid's width, and not the width of the whole application.
<div class="u-before1of4 u-after1of4">
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size1of2"> <!-- 50% of the width of the Grid -->
{{>partial}}
</div>
</div>
</div>
Testing
Install Node (comes with npm).
npm install
To generate a build:
npm run build
To generate the testing build.
npm run build-test
Basic visual tests are in test.html
.
Browser support
- Google Chrome (latest)
- Opera (latest)
- Firefox 4+
- Safari 5+
- Internet Explorer 9+