Ember Flexbox Grid Sass

This work is an adaptation from the original [Flexbox Grid Sass] http://hugeinc.github.io/flexboxgrid-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

bower

npm install --save ember-flexboxgrid-sass

Use with Ember

Add the following in your app.scss @import flexboxgrid; Make sure the path to the node_module installed is added to your ember-cli-build.js file under sassOptions: { includePaths: [ 'node_modules/ember-flexboxgrid-sass/', 'node_modules/sass-flex-mixin/' ] }

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.

$grid-columns: 12;

Set the gutter between columns.

$gutter-width: 1rem;

Set a margin for the container sides.

$outer-margin: 1rem;

Create or remove breakpoints for your project

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

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