Styled-Gel

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.

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:

• react
• styled-components
• styled-system

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