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/
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
;
PostCSS
See lime-grid.css.
Usage
;; 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.