Styled-components responsive flexbox grid
Clone or download
dagda1
Latest commit 1b2315c Jun 28, 2017

README.md

Styled-Gel

Build Status

Bootstrap 4 Grid over Styled Components.

Lightweight bootstrap like grid system for reactjs that uses flexbox.

Why?

If like me, you still think about grids in terms of bootstrap, Row, Col, xs, sm, md, lg and xl, then look no further.

styled-grid

Usage

import { Grid, Row, Col } from 'styled-gel';

export const MyComponent = () =>
  <Grid>
    <Row>
      <Col my={1}>
        <Bar>100% All devices</Bar>
      </Col>
    </Row>
    <Row>
      <Col xs={12} md={6} my={1}>
        <Bar>50% tablet - 100% mobile</Bar>
      </Col>
      <Col xs={12} md={6} my={1}>
        <Bar>50% tablet - 100% mobile</Bar>
      </Col>
    </Row>
    <Row flush>
      <Col xs={12} md={6} my={1}>
        <Bar>Flush column - no gutters 50%</Bar>
      </Col>
      <Col xs={12} md={6} my={1}>
        <Bar>Flush column - no gutters 50%</Bar>
      </Col>
    </Row>
  </Grid>

Dependencies

Built on top of and much props to:

npm i --save styled-gel

Breakpoints

styled-gel uses bootstrap 4's mobile first repsonsive breakpoints which are by default:

export const breakpoints = {
  // xs:               0      - Extra small screen / phone
  sm:  '36em',    // > 576px  -  Small screen / phone
  md:  '48em',    // > 768px  -  Medium screen / tablet
  lg:  '62em',    // > 992px  -  Large screen / desktop
  xl:  '75em'     // > 1200px - Extra large screen / wide desktop
};

Configuration

styled-system can be configured with styled-components to override the breakpoints, gutter width, background colour of the grid and number of columns in a row with more configuration options to come.

The following overridable theme options can be used to style a grid component:

Property Description Default value
columns number of columns a row is subdivided into 12
gutterWidth pixel width between columns 30px
breakpoints the xs, sm, md, lg, xl values in em [36,49,62,75]
bodyBg Background Colour inherit
textColor font color inherit

Example of using the ThemeProvider to override the above properties

import { ThemeProvider } from 'styled-components'
import App from './App';

const theme = {
  bodyBg: #fff',
  textColor: '#333',
  gutterWidth: 20,
  columns: 13,
  breakpoints: [
    32, 48, 64, 128, 256
  ]
}

const App = props => (
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
)

no gutters

Pass the flush property to the <Row /> component to render <Col /> column instances with no gutters.

<Row flush>
  <Col md={6}>
    <Bar>no gutters 50%</Bar>
  </Col>
  <Col md={6}>
    <Bar>no gutters 50%</Bar>
  </Col>
</Row>

Run Sample Project

npm start

Run tests

npm test

Coming Next

  • xsOffset, xsPull, xsPush etc.
  • Responsive fonts
  • Graceful degredation to inline-block.

MIT License