react-lime-grid
v0.0.2
Published
lime-grid.css for React.js
Downloads
3
Maintainers
wadackelReadme
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-gridSetup
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
- Fork it!
- Create your feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature'
- Run
$ npm test - Push to the branch: git push origin my-new-feature
- Submit a pull request :D
Bugs, feature requests and comments are more than welcome in the issues.