cbhoweth / golly Goto Github PK

Powerful flexbox grid system built on top of glamor. If you want even more super powers, pair this library with react-matches to change yer columns when the screen resizes 🔥

near-future goals:

• generate as little CSS as possible.

• tests

• docs/demo site

yarn add golly

npm install golly --save

import { Flex, Grid, Cell } from 'golly'

const GridComponent = () => (
  <Grid size={12} gutter={{ x: 32, y: 16 }}>
    <Cell size={6} alignItems="center" justifyContent="center">
      <Flex>
        Flex all the way down 🐢
      </Flex>
    </Cell>
    <Cell size={6} alignItems="center" justifyContent="center">
      <Flex>
        Always rely on your flex hammer 🔨
      </Flex>
    </Cell>
  </Grid>
)

This is the base component of the grid system. It renders a flex div by default and provides a convenient API around all of the possible flex styles.

The HTML tag to render.

Get access to the internal ref.

Sets CSS display property to inline-flex

Sets CSS order property

Sets CSS flexGrow property

Sets CSS flexShrink property

Sets CSS basis property as well as minWidth to help normalize bugs in IE

Sets CSS flexDirection property

Sets CSS flexWrap property

Sets CSS justifyContent property, space-evenly is polyfilled by adding before and after pseudo elements.

Sets CSS alignSelf property

Sets CSS alignItems property

Sets CSS alignContent property

Dictates the number of columns and the spacing between those columns. Accepts any props that the Flex component accepts.

The size of a track. This can either be a row or column depending on what the grid's direction prop is set to.

Horizontal and vertical spacing between cells, set each respective axis by passing an object of { x, y }.

Use to lay content along the grid. Accepts any props that the Flex component accepts.

The amount of space on the track a cell will occupy. Defaults to 1.

Pull the cell by any number of track sizes.

Push the cell by any number of track sizes.

The order of the cell in the grid. Because of the grid implementation and how we set gutters, this will actually move the cell in your tree by ordering the children before rendering.

clone repo

git clone [email protected]:souporserious/golly.git

move into folder

cd ~/golly

install dependencies

yarn

run dev mode

yarn dev

open your browser and visit: http://localhost:8080/