Styled-grid-system-component NPM

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>
);