ARNAT - styled-grid-system

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import { Column, Row } from '@arnat/styled-grid-system';

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)