@chantelle/grid

0.2.3 • Public • Published

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>

Readme

Keywords

none

Package Sidebar

Install

npm i @chantelle/grid

Weekly Downloads

3

Version

0.2.3

License

MIT

Unpacked Size

33.2 kB

Total Files

10

Last publish

Collaborators

  • ctsd
  • blackakula