React Pure Grids

A small library to help with creating and wrapping components with PureCSS grid classes in order to create grids and units.

Installing

npm install react-puregrids --save

Usage

import {Grid, Unit} from 'react-puregrids';
export default class MyComponent extends React.Component {
    render() {
        return (
            <Grid>
                <Unit>
                    <MyOtherComponent />
                </Unit>
            </Grid>
        );
    }
}

will output

<div class="pure-g">
    <div class="pure-u-1">
        <div class="myComponent"><div>
    </div>
</div>

Options for the Grid and Unit types

Grid

element: type String, will set the DOM element outputted as grid.
Defaults to 'div'.

className: type String, will set a custom classname to your grid along with
pure-g

Unit

element: type String, will set the DOM element rendered as a unit.
Defaults to 'div'.

className: type String, will set a custom classname to your unit along with any other
unit classes.

Non-responsive unit classes (enabled by default):
u: type String, will set a non responsive grid unit.
Defaults to pure-u-1, will not be set if any responsive class is set
Example: <Unit /> will render <div class="pure-u-1"></div>

Responsive unit classes (not enabled by default):
sm, md, lg, xl: type String, will set the actual unit sizes defined by PureCSS
No defaults, will be ignored if not set.

Example: <Unit sm={'1-1'} ><MyComponent /></Unit> will render <div><div class="pure-u-sm-1-1 myComponent"></div></div>
When you pass this.props.className inside your MyComponent

Running tests

npm test

With coverage

npm run test-cover

Building

npm run compile

Contributing

All pull requests are welcome!