node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

@npmcorp/pui-react-grids

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.