Powerful flexbox grid system built on top of glamor.
MIT License
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>
)
Flex
componentThis 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.
tag
: PropTypes.stringThe HTML tag to render.
innerRef
: PropTypes.funcGet access to the internal ref.
inline
: PropTypes.boolSets CSS display
property to inline-flex
order
: PropTypes.numberSets CSS order
property
grow
: PropTypes.numberSets CSS flexGrow
property
shrink
: PropTypes.numberSets CSS flexShrink
property
basis
: PropTypes.stringSets CSS basis
property as well as minWidth
to help normalize bugs in IE
direction
: PropTypes.oneOf(['row','row-reverse','column','column-reverse'])Sets CSS flexDirection
property
wrap
: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])Sets CSS flexWrap
property
justifyContent
: PropTypes.oneOf(['center','end','space-around','space-between','space-evenly','start'])Sets CSS justifyContent
property, space-evenly
is polyfilled by adding before and after pseudo elements.
align
: PropTypes.oneOf(['baseline', 'stretch', 'center', 'end', 'start'])Sets CSS alignSelf
property
alignItems
: PropTypes.oneOf(['baseline','stretch','center','end','start'])Sets CSS alignItems
property
alignContent
: PropTypes.oneOf(['center','end','space-around','space-between','start','stretch'])Sets CSS alignContent
property
Grid
componentDictates the number of columns and the spacing between those columns. Accepts any props that the Flex
component accepts.
size
: PropTypes.numberThe size of a track. This can either be a row or column depending on what the grid's direction
prop is set to.
gutter
: gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({x:PropTypes.number, y:PropTypes.number})])Horizontal and vertical spacing between cells, set each respective axis by passing an object of { x, y }
.
Cell
componentUse to lay content along the grid. Accepts any props that the Flex
component accepts.
size
: PropTypes.oneOfType([PropTypes.number, PropTypes.string])The amount of space on the track a cell will occupy. Defaults to 1
.
pull
: PropTypes.numberPull the cell by any number of track sizes.
push
: PropTypes.numberPush the cell by any number of track sizes.
order
: PropTypes.numberThe 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/