/gx

Minimal responsive React grid system based on the Fab Four Technique.

Primary LanguageHTML

Gx

Build Status

Minimal responsive React grid system based on the Fab Four Technique.

http://jxnblk.com/gx

Features

  • Element-query-like behavior
  • No CSS dependencies
  • No client-side JS
  • Works with server-side rendering
  • Works in email
  • Single React component
  • <1KB gzipped & minified

Getting Started

npm i gx
import React from 'react'
import Gx from 'gx'

class MyComponent extends React.Component {
  render () {
    return (
      <div>
        <Gx col={7}>
          <h1>Left Column</h1>
        </Gx>
        <Gx col={5}>
          <h2>Right Column</h2>
        </Gx>
      </div>
    )
  }
}

export default MyComponent

Props

  • col (number) - Width of column above the breakpoint. Based on a 12 column grid. Default: 6
  • breakpoint (number) - Width in pixels at which columns render side-by-side. Default: 512

Configuration

A custom breakpoint value can be set with React context.

class MyComponent extends React.Component {
  static childContextTypes = {
    gx: React.PropTypes.object
  }

  getChildContext () {
    return {
      gx: {
        breakpoint: 768
      }
    }
  }
}

Examples

3 Columns

<div>
  <Gx col={4}>Col 4</Gx>
  <Gx col={4}>Col 4</Gx>
  <Gx col={4}>Col 4</Gx>
</div>

7/5 Split

<div>
  <Gx col={7}>Col 7</Gx>
  <Gx col={5}>Col 5</Gx>
</div>

Wrapping

Because Gx uses display: inline-block, grid cells automatically wrap.

<div>
  <Gx col={6}>Col 6</Gx>
  <Gx col={6}>Col 6</Gx>
  <Gx col={6}>Col 6</Gx>
  <Gx col={6}>Col 6</Gx>
</div>

Nesting

<div>
  <Gx col={6}>
    <Gx col={6}>Nested</Gx>
    <Gx col={6}>Nested</Gx>
  </Gx>
  <Gx col={6}>Col 6</Gx>
</div>

Custom Breakpoint

<div>
  <Gx col={6} breakpoint={768}>Breakpoint 768</Gx>
  <Gx col={6} breakpoint={768}>Breakpoint 768</Gx>
</div>

Demo

http://jxnblk.com/gx

MIT License