deku-pure-grid
Grid component for deku, using pure.css grid system.
Install
npm install deku-pure-grid
Grid component
The main container for your grid.
Attributes
class=[class list]
Adds any custom class to the grid element.
Cell component
The container for each grid cell.
Attributes
class=[class list]
Adds any custom class to the cell element.
size=[value]
Adds class pure-u-[value]
. Default, no media query.
smSize=[value]
Adds class pure-u-small-[value]
. --small-min media query.
mdSize=[value]
Adds class pure-u-medium-[value]
. --medium-min media query.
lgSize=[value]
Adds class pure-u-large-[value]
. --large-min media query.
xlgSize=[value]
Adds class pure-u-x-large-[value]
. --x-large-min media query.
All size-attributes takes a value specifying the size of the cell, using format: n-n
, where 1-2
mean cell takes up 50% width, 3-4
takes up 75% width etc. See pure.css documentation for details.
Example
; { return <Grid> <Cell size='1-1' smSize='1-2' mdSize='1-3' lgSize='1-4' xlgSize='1-5'> Cell content </Cell> </Grid>; }
Output
Cell content
index.css
Import the css using postcss. Depends on postcss-custom-media to define breakpoints.
@);@);@);@); ;