jk-grid

JK-Grid

This work is an adaptation from the original Flexbox Grid created by @kristoferjoseph.

Grid based on the flex display property. Check the documentation

Install

npm

npm i jk-grid --save

Use

To modify the Flexbox grid, declare the following variables on your layout .styl

Set the number of columns you want to use on your layout.

$gridColumns = 12

Set the gutter between columns.

$gutterWidth = 1rem

Create or remove breakpoints for your project

You can modify, remove or create breakpoints before generate the final CSS.

$breakpoints = {
  sm: {
    size: 48em,
    container: 46rem
  },
  md: {
    size: 62em,
    container: 61rem
  },
  lg: {
    size: 75em,
    container: 71rem
  },
  newBreakPoint: {
    ...
  }
}
$enabledBreakpoints ?= 'sm', 'md', 'lg', 'newBreakPoint'

License

MIT