React-lime-grid NPM

react-lime-grid for React.js

https://tsuyoshiwada.github.io/react-lime-grid/

Install

Install lime-grid.css and react-lime-grid.

$ npm install lime-grid.css react-lime-grid --save

# or

$ yarn add lime-grid.css react-lime-grid

Setup

To use react-lime-grid, you need to import lime-grid.css.

Basic

Add <link> to <head>.

$ cp node_modules/lime-grid.css/lime-grid.min.css ./path/to/

<link rel="stylesheet" href="/path/to/lime-grid.min.css">

webpack

Use the following 2 loaders.

webpac.config.js

{
  test: /\.css$/,
  include: /node_modules/,
  // or
  // include: /node_modules\/lime-grid\.css/,
  use: ['style-loader', 'css-loader'],
},

index.js

import 'lime-grid.css';

PostCSS

See lime-grid.css.

Usage

import React from 'react';
import { Container, Row, Col } from 'react-lime-grid';

const MyComponent = () => (
  <Container>
    <Row>
      <Col xs={12} lg={4}>...</Col>
      <Col xs={12} lg={4}>...</Col>
      <Col xs={12} lg={4}>...</Col>
    </Row>
  </Container>
);

See more detail for https://tsuyoshiwada.github.io/react-lime-grid/

API

Container

prop	type	default
`className`	`string`	`null`
`children`	`React$Element<any>`	`null`
`tagName`	`string`	`'div'`
`fluid`	`boolean`	`false`

Row

prop	type	default
`className`	`string`	`null`
`children`	`React$Element<any>`	`null`
`tagName`	`string`	`'div'`
`start`	`GridBreakpoint`	`null`
`center`	`GridBreakpoint`	`null`
`end`	`GridBreakpoint`	`null`
`top`	`GridBreakpoint`	`null`
`middle`	`GridBreakpoint`	`null`
`bottom`	`GridBreakpoint`	`null`
`around`	`GridBreakpoint`	`null`
`between`	`GridBreakpoint`	`null`
`reverse`	`GridBreakpoint`	`null`

GridBreakpoint is type defined as follows

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type GridBreakpoint = Breakpoint | Breakpoint[];

Col

prop	type	default
`className`	`string`	`null`
`children`	`React$Elemen<any>`	`null`
`tagName`	`string`	`'div'`
`xs`	`number`	`null`
`sm`	`number`	`null`
`md`	`number`	`null`
`lg`	`number`	`null`
`xl`	`number`	`null`
`xl`	`number`	`null`
`xsOffset`	`number`	`null`
`smOffset`	`number`	`null`
`mdOffset`	`number`	`null`
`lgOffset`	`number`	`null`
`xlOffset`	`number`	`null`
`first`	`boolean` or `GridBreakpoint`	`false`
`last`	`boolean` or `GridBreakpoint`	`false`