Worko-react-grid NPM

Worköholics React Grid

Author: Worköholics

React Grid to scaffold Worköholics grid in React apps. You can also use it in Gatsby projects.

Install

npm install --save worko-react-grid

Usage

1. Import `grid.scss` file in your sass main file.

Override variables

You can override some variables to customize the grid as you want.

$cols: 12 !default;
$gutter: 15px !default;
$safe-area: 90px !default;
$safe-area-xs: 30px !default;
$breakpoint-sm: 576px !default; 
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;

@import "./path/to/node_modules/worko-grid/grid.scss"

2. Import Row and Col components in your React component to use the grid

import {Row, Col} from "worko-react-grid"

3. Use it

const ExampleComponent = () => {
  return (
    //...
    <Row wrap={true}>
      <Col md={5} mdOffset={1}>
        ...
      </Col>
      <Col md={5}>
        ...
      </Col>
    </Row>
    //...
  )  
}

Components

Row

Parameters

wrap (bool): Enable flex-wrap on the Row component

Col

Parameters

xs (number): Width set in columns (screen < $breakpoint-sm)
sm (number): Width set in columns ($breakpoint-sm < screen < $breakpoint-md)
md (number): Width set in columns ($breakpoint-md < screen < $breakpoint-lg)
lg (number): Width set in columns ($breakpoint-lg < screen < $breakpoint-xl)
xl (number): Width set in columns (screen > $breakpoint-xl)
xsOffset (number): Width set in columns (screen < $breakpoint-sm)
smOffset (number): Width set in columns ($breakpoint-sm < screen < $breakpoint-md)
mdOffset (number): Width set in columns ($breakpoint-md < screen < $breakpoint-lg)
lgOffset (number): Width set in columns ($breakpoint-lg < screen < $breakpoint-xl)
xlOffset (number): Width set in columns (screen > $breakpoint-xl)
xsTotal (number): Total of columns enabled in the row (screen < $breakpoint-sm) (default: 12)
smTotal (number): Total of columns enabled in the row ($breakpoint-sm < screen < $breakpoint-md)(default: 12)
mdTotal (number): Total of columns enabled in the row($breakpoint-md < screen < $breakpoint-lg) (default: 12)
lgTotal (number): Total of columns enabled in the row ($breakpoint-lg < screen < $breakpoint-xl) (default: 12)
xlTotal (number): Total of columns enabled in the row (screen > $breakpoint-xl) (default: 12)