grantelope / flexboxgrid-sass

Flexbox Grid (@kristoferjoseph) adapted to SASS (SCSS).

Flexbox Grid Sass

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

Grid based on the flex display property. Check the documentation

About

By trying the Flexbox Grid we saw the internal need to a SASS version of it. Thanks to the good work of Kristopher Joseph, we forked his project and sassified it.

Install

npm

npm i flexboxgrid-sass --save

bower

bower install --save flexboxgrid-sass

Use

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

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

$flexboxgrid-grid-columns: 12;

Set the gutter between columns.

$flexboxgrid-gutter-width: 1rem;

Set a margin for the container sides.

$flexboxgrid-outer-margin: 1rem;

Create or remove breakpoints for your project

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

$flexboxgrid-breakpoints:
  sm 48rem,
  md 64rem,
  lg 80rem,
  xlg 90rem,
  newbreakpoint 120rem;