_gx's Introduction

DEPRECATED Fork this repo or see https://github.com/TGRstack/gx

Gx

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

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>

MIT License

_gx's People

Contributors

Stargazers

Watchers

_gx's Issues

cannot read property oneOf undefined

Console error points to this line of the code

Gx.propTypes = {
  /** Width of column above the breakpoint. Based on a 12 column grid. All numbers in a row should add up to 12 or less. */
  col: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
  /** Width in pixels at which columns render side-by-side */
  breakpoint: _react2.default.PropTypes.number
};

My code worked before so I'm assuming this is because of upgrading from React 15 to 16 which no longer provides _react2.default.PropTypes (b/c PropTypes is now its own package).

import Gx from 'gx' won't work

I am working with Webpack and ES6. Webpack won't be able to find module 'gx' after "npm i gx".
I could make it work by adding a line "main": 'dist/Gx.js'," in package.json locally.

Could you check it?

Recommend Projects