bear-react-grid v5.0.13
bear-react-grid
Most modern rwd grid system by react + styled-component
This project demo
Install
yarn add bear-react-grid
Usage
in your index.js addsee the example/src/index.js
import {GridThemeProvider} from 'styled-bs-grid';
import 'bear-react-grid/dist/index.css'
<GridThemeProvider gridTheme={{
gridGutterWidth: 10,
gridColumns: 24,
gridBreakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1540,
},
containerMaxWidths: {
xs: 540,
sm: 540,
md: 720,
lg: 960,
xl: 1140,
xxl: 1141,
},
}}>
<App/>
</GridThemeProvider>
use in your page/component:
import {Container, Row, Col, media} from 'bear-react-grid';
const MyPage = () => {
return (
<Container>
<MyTitle>styled-bs-grid</MyTitle>
<Row>
<Col col>col2 (50%) </Col>
<Col col>col2 (50%) </Col>
</Row>
</Container>
);
}
// use rwd
const MyTitle = styled.div`
font-size: 12px;
${media.md`
font-size: 14px;
`}
`
There is also a codesandbox template that you can fork and play with it:
License
MIT © imagine10255
1 day ago
1 day ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
6 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago