bear-styled-grid v1.0.22

bear-styled-grid

Most modern rwd grid system by react + styled-component

This project demo

Install

yarn add bear-styled-grid

Usage

in your index.js add
see the example/src/index.js

import {GridThemeProvider} from 'styled-bs-grid';
import 'bear-styled-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-styled-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:

Component and setup docs

License

MIT © imagine10255