react-gridify

React Gridify

A very simple grid maker in form of React Components Inspired by foundations row and column.

Usage

import { Row, Column } from 'react-gridify'

<Row maxWidth="960px">
  <Column
    xSmall="12" // 100%
    small="6" // 50%
    medium="4" // 33.333333333333336%;
    large="3" // 25%
    padding="10px"
    className="someAdditionalClass"
  >
    <SomeCustomChildComponent />
  </Column>
</Row>

Example usage with centered

// Works nicely when working with article pages etc.

  <Row>
    <Column small="12" large="10" centered>
      <Row>
        <Column>
          <h1>Title<h1>
          <p>Lorem ipsum dolor sit amet</p>
        </Column>
      </Row>
    </Column>
  </Row>

Available props

• Row
  • maxWidth
• Column
  • xSmall
  • small
  • medium
  • large
  • centered
  • padding
  • className

Pro tip!

column 12 = 100%

Install it locally

$ git clone https://github.com/oyvindhermansen/react-gridify.git
$ npm install

Development

Run $ npm run build for compiling up the src-folder
Run $ npm run demo for running the webpack-build for demo page.
Run $ npm test for running the tests with Jest.