Sass Flexbox Grid

Documentation and examples available at sassflexboxgrid.com

Overview

A responsive grid system based on Flexbox Grid and the flex property, re-written in Sass, edited and expanded upon.

Enhancements include:
- Visibility classes
- Additional 'XL' breakpoint
- Sass variables and mixins
- Customizable grid

Installation

$3

``
npm install @drewbot/sass-flexbox-grid --save
`
Then link to your preferred CSS or Sass File:

#### CSS
node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/main.css

#### CSS (minified)
node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/main.min.css

Or copy the Sass files over to your src directory from the following directory:

node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/scss

$3

https://github.com/drewbot/sass-flexbox-grid/raw/master/public/sass-flexbox.zip

Mobile First

Use Sass Flexbox Grid's mobile-first media queries provided in the Sass version of the library. All styles should first be declared at small (mobile) then built outward for larger screens.

Version 2.0.3 Release Notes - 04/12/2018

- Added !default; to adjustable grid vars in .../scss/variables/_grid-variables.scss.

Version 2.0.2 Release Notes - 04/10/2018

- Added box-sizing: border-box; to all rows and columns by default.

Version 2.0.0 Release Notes - 04/09/2018

- All columns within a row will automatically scale in height to match the tallest column in the row.
- eq-height is thereby deprecated.
- .auto-height class has been refactored to .natural-height.
- Likewise, the row-auto-height() mixin has been refactored to row-natural-height().
- The flex-column() mixin has been refactored to row-flex-column().
- The .show class can now be applied to .row elements.
- The show() mixin now accepts an optional $row argument and can be used on row elements.
- Example: @include show("xs", "row") or @include show("xs", "true").

Version 1.0.0 Release Notes - 04/08/2018

- Added gutters to the top, bottom, left, and right of all columns by default.
- Gutter size can be adjusted by changing the value of the sass variable $gutter.
- The .col-gutter-lr class will only apply gutters to the left and right of a column.
- The .col-no-gutter` class will remove gutters from a column.