FormidableLabs/radium-grid

Name: radium-grid

Owner: Formidable

Description: A powerful, no-fuss grid system component for React

Created: 2016-01-07 18:41:22.0

Updated: 2017-12-04 17:12:50.0

Pushed: 2017-06-06 17:35:09.0

Homepage:

Size: 1879

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Radium Grid

Radium Grid is a powerful, no-fuss grid system component for React. It combines the best decisions from the ecosystem of (S)CSS-based grid systems and implements them hack-free on top of Flexbox.

What makes Radium Grid special?

• Declarative layout using JSX.
• Sensible defaults.
• Uses arbitrary fractions for cell widths. No more 12-column straitjacket!
• Infers rows from the given cell sizes. No need for explicit rows or extra <div>s!
• Customizable cell alignment, including a hack-free vertical align!
• Customizable fixed-width and fluid-width gutters. Just pass a CSS unit!
• Customizable media queries for breakpoint definitions.
• Uses Radium Style to handle breakpoint changes efficiently.
• Accepts style arrays and resolves them with Radium Style.
• Cascading defaults: set cell props on:
• all cells for all sizes,
• all cells for individual sizes,
• a single cell for all sizes,
• a single cell for individual sizes,
• …with the lowest props in the tree overriding parent props.

Prerelease

Although this is prerelease software, we'll do our best to avoid breaking public API changes.

Installation

npm install --save radium-grid

Usage

rt { Grid, Cell } from 'radium-grid';

t App = () => {
turn (
<Grid>
  <Cell>
    <p>Lorem</p>
  </Cell>
  <Cell>
    <p>ipsum</p>
  </Cell>
  <Cell>
    <p>dolor</p>
  </Cell>
  <Cell>
    <p>sit</p>
  </Cell>
</Grid>

The above example will render with the following provided defaults:

• All cells in the grid are 1/3 wide for all screen sizes.
• The grid uses a 16px fixed gutter.
• Cell content is aligned to the top left.
• The breakpoints use the following media queries:
• small: “@media only screen and (max-width: 640px)“,
• medium: “@media only screen and (min-width: 641px) and (max-width: 1024px)“,
• large: “@media only screen and (min-width: 1025px) and (max-width: 1440px)“,
• xlarge: “@media only screen and (min-width: 1441px)”

To set a default width and alignment for every cell in the grid:

d cellWidth="1/2">
ell>
<p>Lorem</p>
Cell>
ell>
<p>ipsum</p>
Cell>
id>

An example of setting widths and alignment per screen size for every cell in the grid:

d
allCellWidth="1"
allAlign="right"
allVerticalAlign="bottom"
diumCellWidth="1"
diumCellAlign="right"
diumCellVerticalAlign="bottom"

ell>
<p>Lorem</p>
Cell>
ell>
<p>ipsum</p>
Cell>
id>

An example of custom per-cell widths and alignments:

d>
ell
align="right"
verticalAlign="bottom"
width="1/4"

<p>Lorem</p>
Cell>
ell
align="left"
verticalAlign="top"
width="3/4"

<p>ipsum</p>
Cell>
ell
align="right"
verticalAlign="bottom"
width="3/4"

<p>dolor</p>
Cell>
ell
align="left"
verticalAlign="top"
width="1/4"

<p>sit</p>
Cell>
id>

The same as above, but with different per-cell widths on small screens:

d>
ell
align="right"
verticalAlign="bottom"
width="1/4"
smallWidth="1/2"

<p>Lorem</p>
Cell>
ell
align="left"
verticalAlign="top"
width="3/4"
smallWidth="1/2"

<p>ipsum</p>
Cell>
id>

Custom gutters can use any valid CSS value string. Percentage values create fluid gutters, while all other values create fixed gutters. Example:

d gutter="24px">
ell>
<p>Lorem</p>
Cell>
ell>
<p>ipsum</p>
Cell>
id>

d gutter="4%">
ell>
<p>Lorem</p>
Cell>
ell>
<p>ipsum</p>
Cell>
id>

While we recommend the default breakpoints, you can customize them:

t breakpoints = {
all: "@media only screen and (max-width: 320px)",
dium: "@media only screen and (min-width: 320px) and (max-width: 640px)",
rge: "@media only screen and (min-width: 641px) and (max-width: 1024px)",
arge: "@media only screen and (min-width: 1025px)"

d breakpoints={breakpoints}>
ell>
<p>Lorem</p>
Cell>
ell>
<p>ipsum</p>
Cell>
id>

Demo

There are more complex examples on the demo page. Check out the code in app.jsx.

Installation

• Install builder: npm install -g builder
• Clone this repo
• npm install and then builder run hot will load a webpack dev server at localhost:3000

Gotchas

<Grid /> only accepts <Cell />s as children, since inserting arbitrary children can break the layout. Two options for custom children are:

• Wrap the children in a <Cell />.
• Move the children to a sibling of <Grid>.