Grid

Use

The grid system is used through Container, Row, and Columm. Its encapsulation allows future enhancements on how the grid is managed without damaging its use over time.

As of today, the grid used is the Bootstrap Grid.

Installation

yarn add @chantelle/grid

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/grid/dist/styles.css">

Note: you can import the CSS directly into your project if your bundler supports it:

 import '@chantelle/grid/dist/styles.css';

React Component

import { Container, Row, Column } from '@chantelle/grid';

ReactDOM.render(
  <Container>
    <Row>
      <Column></Column>
      <Column></Column>
      <Column></Column>
    </Row>
  </Container>,
  container
);

By default, the container is fluid. You can still use className to specify Bootstrap Grid classes (like col-auto), if you ever need it.

But you should use the props size, order and offset to allow easier re-use later:

• size accepts a number (size={12}), or an object defining sizes across breakpoints (size={{xs: {12}, md: {6}, xl: {4}}})
• order accepts a number (order={1}), or any string (order="first")
• offset accepts an object defining offsets across breakpoints (size={{xs: {1}, md: {2}, xl: {3}}})

CSS API

To use the Grid component, you can completely refer to Bootstrap Grid documentation.

<div class="container container-fluid">
  <div class="row">
    <div class="col col-12 col-md-10 offset-md-1">
      A nice column
    </div>
  </div>
</div>