Column.js

import React from 'react';
import PropTypes from 'prop-types';
import { Box } from 'reflexbox';

const Column = ({ children, size, ...props }) => (
  <Box w={size} {...props}>
    {children}
  </Box>
);

Column.propTypes = {
  children: PropTypes.node,
  size: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
};

Column.defaultProps = {
  size: 1,
};

export default Column;

Grid.js

import React from 'react';
import PropTypes from 'prop-types';
import { ReflexProvider } from 'reflexbox';

export default class Grid extends React.PureComponent {
  getChildContext() {
    return {
      grid: this.props,
    };
  }

  render() {
    const { breakpoints, children, space } = this.props;
    const props = { breakpoints, space };

    // Pass down props to Reflexbox's provider
    return <ReflexProvider {...props}>{children}</ReflexProvider>;
  }
}

export const propTypes = {
  breakpoints: PropTypes.arrayOf(PropTypes.number),
  columns: PropTypes.arrayOf(PropTypes.number),
  gutter: PropTypes.arrayOf(PropTypes.number),
  space: PropTypes.arrayOf(PropTypes.number),
};

export const contextTypes = {
  grid: PropTypes.shape(propTypes),
};

Grid.childContextTypes = contextTypes;

Grid.propTypes = {
  children: PropTypes.node,
  ...propTypes,
};

Row.js

import React from 'react';
import { Flex } from 'reflexbox';
import PropTypes from 'prop-types';
import { PureComponent } from './BaseComponent';
import { contextTypes } from './Grid';

export default class Row extends PureComponent {
  template() {
    const { children, ...props } = this.props;
    const { gutter, space } = this.context.grid;

    /**
     * We gotta use pixels here otherwise we won't be able to do the math
     * properly since Reflexbox expects an array of indexes and won't be able
     * to deal with negative values.
     * We still use our space scale regardless.
     */
    const px = values => values.map(value => (value === 0 ? '0' : `${value}px`));
    const inner = gutter.map(index => space[index] * 0.5);
    const outer = inner.map(value => -value);

    return (
      <Flex mx={px(outer)} {...props}>
        {React.Children.map(children, child =>
          React.cloneElement(child, {
            px: px(inner),
          })
        )}
      </Flex>
    );
  }
}

Row.contextTypes = contextTypes;

Row.propTypes = {
  children: PropTypes.node,
};

theme.js

// Make sure Webpack includes all fonts on the build
/* eslint-disable import/no-unresolved */
import GTPressuraBold from '../assets/fonts/GTPressura-Bold.woff';
import GTPressuraBold2 from '../assets/fonts/GTPressura-Bold.woff2';
import ChronicleTextG4 from '../assets/fonts/ChronicleTextG4-Roman.woff';
import ChronicleTextG42 from '../assets/fonts/ChronicleTextG4-Roman.woff2';
/* eslint-enable import/no-unresolved */

export const fontSerif = {
  fontFamily: 'Chronicle Text G4',
  fontWeight: 'bold',
  fontStyle: 'normal',
  src: `url('${ChronicleTextG42}') format('woff2'),
        url('${ChronicleTextG4}') format('woff')`,
};

export const fontSansSerif = {
  fontFamily: 'GT Pressura',
  fontWeight: 'normal',
  fontStyle: 'normal',
  src: `url('${GTPressuraBold2}') format('woff2'),
        url('${GTPressuraBold}') format('woff');`,
};

export const Colors = {
  WHITE: '#FFF',
  BLACK: '#020102',
  BLUE: '#0F68F1',
  BLUE_LIGHT: '#00B4F0',
  YELLOW: '#FCC10A',
  YELLOW_LIGHT: '#FFE403',
  YELLOW_DARK: '#FF8F00',
  GRAY: '#E6E6E6',
  GRAY_DARK: '#808080',
};

// Global CSS styles
export const globals = {
  body: {
    fontFamily: 'sans-serif',
    margin: 0,
    padding: 0,
    color: Colors.WHITE,
    backgroundColor: Colors.YELLOW_LIGHT,
    textRendering: 'optimizeLegibility',
    fontSmoothing: 'antialiased',
    '-moz-osx-font-smoothing': 'grayscale',
  },
};

export const breakpoints = [
  32,
  48,
  64,
  80,
];

export const space = [
  0,
  4,
  8,
  16,
  32,
  64,
  128,
];

export const FontSizes = {
  16: 16,
  18: 18,
  22: 22,
  28: 28,
  30: 30,
  36: 36,
  42: 42,
  60: 60,
  96: 96,
};

export const media = (rule = 'min', size) => `@media screen and (${rule}-width: ${size}em)`;

export function bp(prop, rules) {
  return rules
    .map((rule, index) => ({
      [media(breakpoints[index])]: {
        [prop]: rule,
      },
    }))
    .reduce((accumulator, value) => ({ ...accumulator, ...value }), {});
}