react-spine v1.0.5

React Spine is a simple responsive grid system for ReactJs made with flexbox and Styled Components. It works with simple or complex layouts.

Install

This package can be installed via Yarn

yarn add react-spine

Or via NPM

npm i -s react-spine

Usage

The grid system has two components: Row and Col, which represents the rows and the columns respectively. The row component defines the grid's basics, such as alignment and gutter, while the column component defines its width in each breakpoint. You can nest many grids inside each other.

Here's a simple example:

import { Grid, Container } from 'react-spine'

const { Row, Col } = Grid

const App = () => (
  <Container>
    <Row justify={{md: 'flex-end'}}>
      <Col sm="12" md="1/4" lg="6">
        Column 1
      </Col>
      <Col sm="hide" md="1/4" lg="6">
        Column 2
      </Col>
      <Col sm={12} md="1/4" lg="6">
        Column 3
      </Col>
    </Row>
  </Container>
);

export default App

Overriding default values

You can also override the default values by specifying your own Styled Components theme with a spine key.

// Default values
const customTheme = {
  spine: {
    gridColumns: 12,
    gridGap: 10,
    breakpoints: {
      sm: 0,
      md: 768,
      lg: 1024
    }
  }
}

// And then
const App = () => (
  <ThemeProvider theme={customTheme}>
    your application here
  </ThemeProvider>
);

API

Row

Col

License

MIT © jrmiranda