GRID.md

Grid

Quick guide on how to make use of the project's grid system

Principles

Designers usually provide us with Sketch or Photoshop files that use pixel based grids. This is fine for reference on how to keep proportions and consistency right while designing.

However when it gets to development, the media changes. The web is not restricted to a closed canvas as it is on these design tools; on the contrary it's one of the most unpredictable environments given that we have so many things to account for. Different devices, browser engine implementations (for styles, JavaScript, font rendering, etc), multiple breakpoints, so on and so forth.

With that being said whilst still keeping proportions and constraints from the original design files, we have built the grid system based on the principle that pixel perfect design is something from the past and that we should embrace the flexibility of the browser.

Implementation

The grid system implementation is built on top of The Flexible Box Module (aka flexbox) through a simple React wrapper called Reflexbox.

Gutter

For the gutter we use a popular technique where the container has a horizontal margin of a negative of half of the gutter size that later is compensate by setting half of the gutter value as horizontal padding on each element within the container.

row horizontal margin     = (gutter / 2) * -1
column horizontal padding = (gutter / 2)

This article has more details about this technique.

Usage

import Grid from '../common/components/Grid';
import Row from '../common/components/Row';
import Column from '../common/components/Column';

// Breakpoints (uses `em` internally)
const breakpoints = [
  48,
  64,
  80,
  100,
];

// Number of columns on each breakpoint
const columns = [4, 8, 12]; // For debugging purposes only

// Gutter size on each breakpoint
const gutter = [20, 20, 25];

// Scale for the space between elements
export const space = [
  0,
  8,
  24,
  16,
  32,
  64,
  128,
];

// Grid configuration
const grid = {
  breakpoints,
  columns,
  gutter,
  space
};

// `Grid` is a provider and should be set only once, on the your app entry point
const App = () => (
  <Grid {...grid}>
    <Row>
      <Column size={[2 / 4, 4 / 8, 6 / 12]}>
        <div style={ { backgroundColor: 'gold', padding: '1em' } }>Half</div>
      </Column>

      <Column size={[2 / 4, 4 / 8, 6 / 12]}>
        <div style={ { backgroundColor: 'gold', padding: '1em' } }>Half</div>
      </Column>
    </Row>
  </Grid>
);

API

<Grid />

Provider that wraps the application and carries all the grid configuration.

Props

breakpoints

Type: Array of Number
Default: [40, 52, 64]

List of all breakpoints supported (uses em internally).

columns

Type: Array of Number
Default: [4, 8, 12]

List of all columns expected to be available. Used for debugging purposes only.

gutter

Type: Array of Number
Default: [2, 3, 3]

List of space indexes to be used as gutter values.

space

Type: Array of Number
Default: [0, 8, 16, 32, 64]

List of possible values that can be used to set spacing (via margin, padding, etc). It's important to stick to it so we keep the vertical rythm consistent and proportional.

<Row />

Creates a new grid "context" or block.

<Column />

Props

size

Type: Array of Number
Default: 1

Proportion of how many "columns" that block should fill. In the case of 1 / 12 we are saying that "one out of twelve columns".