BORN Flexbox Grid
Enhances the useful flex-grid to provide extra features, such as multi-base grids.
Includes SASS and LESS options, as well as a built CSS and minified file.
Recommended: use the node-sass|libSass includePaths option to reference your node folder.
You can setup custom values for your grid. Follow instructions here for a how to.
Additionally, you can set $fg-columns as a list to generate a grid with multiple bases:
$fg-columns: 10, 12, 16;
You can also set different spacing per breakpoint using $fg-gutter. Note: You can skip a breakpoint if you want.
$fg-gutter: (xs: 0.5rem, md: 1rem, lg: 1.5rem);
Set $fg-use-off-half to true to generate -off margin positioning using half a column's width.
Finally, import the grid into your file:
Recommended: use the lessc --include-path option to reference your node folder.
Usage is similar to the SASS setup. The only differences are:
Import the .less variant:
LESS doesn't support maps, so you must setup your breakpoint variables as a list of lists:
@fg-breakpoints: xs, sm 768px, md 992px, lg 1200px;
Unlike the SASS version, @fg-gutter must have the same order as @fg-breakpoints, and must have values for each breakpoint:
@fg-gutter: xs 0.5rem, sm 0.75rem, md 1rem, lg 1.5rem;