worko-react-grid

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)

Dependencies

• worko-grid
• worko-mixins