styled-grid-system-component

The bootstrap grid system component made with styled-components

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.

Installation

Note: this component has a peer dependency on styled-components > v4. To use this component you also need to npm i styled-components -S.

npm install --save styled-grid-system-component
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies

Usage

For detailed information take a look at the documentation.

import { Column, Row } from 'styled-grid-system-component';

const MyGridComponent = (props) => (
  <div>
    <Row>
      <Column xs={6}>
        {'xs={6}'}
      </Column>
      <Column xs={6}>
        {'xs={6}'}
      </Column>
    </Row>

    <Row>
      <Column>
        {'no props'}
      </Column>
      <Column>
        {'no props'}
      </Column>
      <Column>
        {'no props'}
      </Column>
    </Row>

    <Row>
      <Column xs={3}>
        {'xs={3}'}
      </Column>
      <Column xs={3}>
        {'xs={3}'}
      </Column>
      <Column xs={6}>
        {'xs={6}'}
      </Column>
    </Row>
  </div>
);

Properties

Properties which can be added to the component to change the visual appearance. Every row consists of maximum of 12 columns.

• xs Type: only on Column, number (between 1 and 12)
• sm Type: only on Column, number (between 1 and 12)
• md Type: only on Column, number (between 1 and 12)
• lg Type: only on Column, number (between 1 and 12)
• xl Type: only on Column, number (between 1 and 12)
• xsOffset Type: only on Column, number (between 1 and 12)
• smOffset Type: only on Column, number (between 1 and 12)
• mdOffset Type: only on Column, number (between 1 and 12)
• lgOffset Type: only on Column, number (between 1 and 12)
• xlOffset Type: only on Column, number (between 1 and 12)

License

MIT © Lukas Aichbauer