@arnat/styled-grid-system

The bootstrap grid component created with styled-components

Usage no npm install needed!

<script type="module">
  import arnatStyledGridSystem from 'https://cdn.skypack.dev/@arnat/styled-grid-system';
</script>

README

ARNAT - styled-grid-system

npm Travis branch Codecov branch storybook lerna

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)