react-lime-grid for React.js
https://tsuyoshiwada.github.io/react-lime-grid/
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-gridTo use react-lime-grid, you need to import lime-grid.css.
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">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';See lime-grid.css.
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/
| prop | type | default |
|---|---|---|
className |
string |
null |
children |
React$Element<any> |
null |
tagName |
string |
'div' |
fluid |
boolean |
false |
| 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[];| 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 |
See CHANGELOG.md
- 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.