Grid component for deku, using pure.css grid system.
npm install deku-pure-grid
The main container for your grid.
Adds any custom class to the grid element.
The container for each grid cell.
Adds any custom class to the cell element.
Adds class pure-u-[value]
. Default, no media query.
Adds class pure-u-small-[value]
. --small-min media query.
Adds class pure-u-medium-[value]
. --medium-min media query.
Adds class pure-u-large-[value]
. --large-min media query.
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.
import { Grid, Cell } from 'deku-pure-grid';
export default {
render: function () {
return (<Grid>
<Cell size='1-1' smSize='1-2' mdSize='1-3' lgSize='1-4' xlgSize='1-5'>
Cell content
</Cell>
</Grid>);
}
}
<div class='pure-g'>
<div class="pure-u-1-1 pure-u-small-1-2 pure-u-medium-1-3 pure-u-large-1-4 pure-u-x-large-1-5">Cell content</div>
</div>
Import the css using postcss. Depends on postcss-custom-media to define breakpoints.
@custom-media --x-large-min (min-width: 1600px);
@custom-media --large-min (min-width: 1348px);
@custom-media --medium-min (min-width: 1024px);
@custom-media --small-min (min-width: 768px);
@import 'deku-pure-grid';