@comparaonline/ui-grid

• Row and Column components based on react-foundation project
• Breakpoints json file included has screen breakpoints sizes

Installation

$ npm install --save @comparaonline/ui-grid

Usage

This package relies on the existence of the stylesheet located at dist/index.css, please import it accordly to your project needs.

Row

import { Row } from '@comparaonline/ui-grid';

The known props for Row are:

name	description	default value
collapse	Removes the columns gutter	false
expanded	Sets width to 100%	false
collapseOn[breakpoint]	Removes the gutters on the given breakpoint	undefined
uncollapseOn[breakpoint]	Overrides collapseOn rules inherited from smaller sizes	undefined
equalHeightColumns	Sets all the columns height to the max column height (requires flex support)	false
addVerticalGutters	Adds vertical gutters to all the children columns	false

Column

import { Column } from '@comparaonline/ui-grid';

The known props for Column are:

name	description	default value
small, medium, large, xlarge, xxlarge	Sets the column size per breakpoint	small=12
offsetOn[breakpoint]	Moves block to right according to offset,	undefined
pushOn[breakpoint]	Right shift column	undefined
pullOn[breakpoint]	Left shift column	undefined
centeredOn[breakpoint]	Centers the column on the given breakpoint	undefined
uncenteredOn[breakpoint]	Overrides centeredOn rules inherited from smaller sizes	undefined

Example:

<Row>
  <Column small={2} large={4} pushOnSmall={2} pullOnLarge={2}>
    Content
  </Column>
  <Column small={2} offsetOnLarge={4} centeredOnSmall uncenteredOnLarge>
    Content
  </Column>
</Row>

Visibility props

name	description	default value
showOn[breakpoint]	Shows itself from the given breakpoint an higher	undefined
hideOn[breakpoint]	Hides itself from the given breakpoint an higher	undefined

Breakpoints

The breakpoints values are exported as a literal object with the following properties:

name	size
xsmall	0px
small	480px
medium	600px
large	840px
xlarge	960px
xxlarge	1280px

To access to this values, simply import them:

import { breakpoints } from '@comparaonline/ui-grid';

Other settings

Other relevant values are exposed using the settings object.

import { settings } from '@comparaonline/ui-grid';

The current output is:

{
  gutters: {
    default: "16px"
  }
}