pui-react-grids

React components for laying-out content in a grid

Pivotal UI React (GitHub, npm) is a collection of React components for rapidly building and prototyping UIs.

This component requires React v0.13

See the Pivotal UI Styleguide for fully rendered examples.

Components

Row

Denotes a container of grid columns for the Pivotal UI 24-column mobile-first grid system

var Row = require('

#### Properties

- `gutter`
  - `String`: Sets the spacing between columns (either `sm`, `md`, or `lg`).


### Col

Denotes a column within a row of the Pivotal UI grid system



#### Properties

- `xs`
  - `Number`: The width of the column (1-24) in extra small devices (<= 768px)

- `sm`
  - `Number`: The width of the column (1-24) in small devices (> 768px)

- `md`
  - `Number`: The width of the column (1-24) in medium devices (> 992px)

- `lg`
  - `Number`: The width of the column (1-24) in large devices (> 992px)

- `xsOffset`
  - `Number`: The number of column-widths to use as left margin in extra small devices

- `smOffset`
  - `Number`: The number of column-widths to use as left margin in small devices

- `mdOffset`
  - `Number`: The number of column-widths to use as left margin in medium devices

- `lgOffset`
  - `Number`: The number of column-widths to use as left margin in large devices

- `xsPush`
  - `Number`: Move this column to the right by the given number of column-widths in extra small devices

- `smPush`
  - `Number`: Move this column to the right by the given number of column-widths in small devices

- `mdPush`
  - `Number`: Move this column to the right by the given number of column-widths in medium devices

- `lgPush`
  - `Number`: Move this column to the right by the given number of column-widths in large devices

- `xsPull`
  - `Number`: Move this column to the left by the given number of column-widths in extra small devices

- `smPull`
  - `Number`: Move this column to the left by the given number of column-widths in small devices

- `mdPull`
  - `Number`: Move this column to the left by the given number of column-widths in medium devices

- `lgPull`
  - `Number`: Move this column to the left by the given number of column-widths in large devices


*****************************************

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.