React BEM Grid
A BEM-ified port of Flexbox Grid to a simple, reusable React component.
NPM
npm install --save react-bem-grid
Usage
;; Component { return <Grid> <Row> <Col xs=12 sm=6 lg=4> ... </Col> <Col xs=12 sm=6 lg=4> ... </Col> <Col xs=12 sm=6 lg=4> ... </Col> </Row> </Grid> ; }
Include the css file in the way that best suits your project, if you're using Webpack, we recommend using CSS loader.
Documentation
See all the documentation including live examples
- Responsive
- Offsets
- Auto Width
- Nested Grids
- Custom Element Type
- Alignment
- Distribution
- Reordering
- Reversing
Responsive
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.
<Grid> <Row> <Col xs=12 sm=8 md=6 lg=4> ... </Col> </Row></Grid>
Offsets
Offset a column.
<Grid> <Row> <Col xs=8 xsOffset=4 sm=6 smOffset=6 lg=12> ... </Col> </Row></Grid>
Auto Width
Add any number of auto sizing columns to a row. Let the grid figure it out.
<Grid> <Row> <Col xs> ... </Col> <Col xs> ... </Col> <Col xs> ... </Col> </Row></Grid>
Nested Grids
Nest grids inside grids inside grids.
<Grid> <Row> <Col xs=12> <Row> <Col xs=6> <Row> <Col xs=4> ... </Col> <Col xs=4> ... </Col> <Col xs=4> ... </Col> </Row> </Col> <Col xs=6> <Row> <Col xs=6> ... </Col> <Col xs=6> ... </Col> </Row> </Col> </Row> </Col> </Row></Grid>
Custom Element Type
Add the componentClass property to override the default element type of a Grid, Row or Col.
<Grid> <Row componentClass='nav'> <Col xs=6> ... </Col> <Col xs=6> ... </Col> </Row></Grid>
Alignment
Add properties to align elements to the start or end of a row as well as the top, bottom, or center of a column.
Start
<Grid> <Row xsStart> <Col xs=6> ... </Col> </Row></Grid>
Center
<Grid> <Row xsCenter> <Col xs=6> ... </Col> </Row></Grid>
End
<Grid> <Row xsEnd> <Col xs=6> ... </Col> </Row></Grid>
Here is an example of using the modifiers in conjunction to achieve different alignment at different viewport sizes.
<Grid> <Row xsCenter smEnd lgStart> <Col xs=6> ... </Col> </Row></Grid>
Top
<Grid> <Row xsTop> <Col xs=6> ... </Col> </Row></Grid>
Middle
<Grid> <Row xsMiddle> <Col xs=6> ... </Col> </Row></Grid>
Bottom
<Grid> <Row xsBottom> <Col xs=6> ... </Col> </Row></Grid>
Distribution
Add properties to distribute the contents of a row or column.
Around
<Grid> <Row xsAround> <Col xs=2> ... </Col> <Col xs=2> ... </Col> <Col xs=2> ... </Col> </Row></Grid>
Between
<Grid> <Row xsBetween> <Col xs=2> ... </Col> <Col xs=2> ... </Col> <Col xs=2> ... </Col> </Row></Grid>
Reordering
Add properties to reorder columns.
First
<Grid> <Row> <Col xs=4> 1 </Col> <Col xs=4> 2 </Col> <Col xs=4 xsFirst> 3 </Col> </Row></Grid>
Last
<Grid> <Row> <Col xs=4 xsLast> 1 </Col> <Col xs=4> 2 </Col> <Col xs=4> 3 </Col> </Row></Grid>
Reversing
<Grid> <Row reverse> <Col xs=4> 1 </Col> <Col xs=4> 2 </Col> <Col xs=4> 3 </Col> </Row></Grid>
Example project
First, clone react-bem-grid, install dependencies and build the project:
git clone https://github.com/nordnet/react-bem-grid.gitnpm installnpm run build
Then run the simple-grid or documentation example project:
cd examples/simple-gridnpm installnpm start
License
MIT © Nordnet Bank AB