Gridsys

Fixed-width, Swiss-style responsive React grid system

Gridsys is intended for full-page layouts with fixed-width columns that collapse at narrow viewport widths. Paired with a sensible type scale, gridsys can help create harmonious layouts with a natural visual rhythm.

Features

• Responsive
• Configurable
• Consistent proportions
• Conforms to type scales
• Based on a 16px scale
• Simple API
• Nestable
• No external stylesheets
• Modern
• Swiss
• International
• Typographic

Getting Started

npm i gridsys

import React from 'react'
import { Container, Grid } from 'gridsys'

const App = () => {
  return (
    <Container>
      <Grid span={2}>
        <h1>Grid</h1>
      </Grid>
      <Grid span={3}>Span 3</Grid>
      <Grid>Span 1</Grid>
    </Container>
  )
}

<Container />

Wrapper component for centering Grid cells across multiple breakpoints.

Props

• debug (boolean) - shows an outline and background grid for debugging visual layout

<Grid />

Fixed-width grid cell with built-in gutters

Props

• span (number) - number of columns for the grid cell to span
• align (string) - vertical alignment
• height (number) - fixed height in pixels
• gutter (number) - gutter (padding) in pixels
• debug (boolean) - shows outlines for debugging

<GridGroup />

Grid component with no gutters useful for nesting. Uses the same props as the Grid component.

Context Configuration

The grid system can be configured with React context.

class App extends React.Component {
  getChildContext () {
    return {
      gridsys: {
        gutter: 16,
        columnWidth: 320,
        columnCount: 5,
        debug: true
      }
    }
  }
  render () {
    <Container>
      <Grid span={3}>
        <h1>Span 3</h1>
      </Grid>
      <Grid span={2}>
        <p>Span 2</p>
      </Grid>
    </Container>
  }
}

App.childContextTypes = {
  gridsys: React.PropTypes.object
}

• gutter (number) - gutter (padding) in pixels for each Grid component
• columnWidth (number) - width in pixels for each Grid width. Spans are mutiplied by this number
• columnCount (number) - total number of columns for the grid system to span
• debug (boolean) - show outlines and background grid for debugging layout

MIT License