A BEM-ified port of Flexbox Grid to a simple, reusable React component
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src
test
.editorconfig
.eslintignore
.eslintrc
.gitignore
.jscsrc
.npmignore
.travis.yml
README.md
package.json
webpack.config.js

README.md

React BEM Grid

A BEM-ified port of Flexbox Grid to a simple, reusable React component.

NPM version Build Status Coveralls Status Dependency Status

NPM

npm install --save react-bem-grid

Usage

import React from 'react';
import { Grid, Row, Col } from 'react-bem-grid';

class GridExample extends React.Component {
  render() {
    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

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.git
npm install
npm run build

Then run the simple-grid or documentation example project:

cd examples/simple-grid
npm install
npm start

License

MIT © Nordnet Bank AB