❤
npm
Sign UpSign In

react-lime-grid

0.0.2 • Public • Published

React LIME GRID

Build Status npm version

react-lime-grid for React.js

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

Table of Contents

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

Changelog

See CHANGELOG.md

Contribute

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Run $ npm test
  5. Push to the branch: git push origin my-new-feature
  6. Submit a pull request :D

Bugs, feature requests and comments are more than welcome in the issues.

License

MIT © tsuyoshiwada

Readme

Keywords

Package Sidebar

Install

npm i react-lime-grid

Repository

github.com/tsuyoshiwada/react-lime-grid

Homepage

github.com/tsuyoshiwada/react-lime-grid#readme

Weekly Downloads

0

Version

0.0.2

License

MIT

Last publish

Collaborators

  • wadackel
Try on RunKit
Report malware