grid2flex

Configurable flexbox grid system

v. 0.2.0

grid2flex based on Flexbox Layout.

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

Demo page

Install

npm

bower

manual install

Unpack and copy files from src/ to your project or download minified version.

Include grid2flex module

You can setup grid2flex by adding custom variables file. Use sass @import directive to include your custom variables.

Variables

Original grid2flex-variables file include next variables:

Configuration variable:

Gutters variable:

Breakpoints variable:

This variable define wich prefixes will be generated. If breakpoints-enabled from $configuration set to false, $breakpoints will be ignored.

Grid classes

Rows classes:

The main row class is defined in $configuration variable. Basic class name is .row. Helpers will be generated with basic class name + breakpoint name (if breakpoints are enabled) + helper name:

Direction classes:

Direction class is defined in $configuration variable. Basic class name is .dir. Direction classes can be added both to rows and columns.

Columns classes:

The main column class is defined in $configuration variable. Basic class name is .col. Helpers will be generated with basic class name + breakpoint name (if breakpoints are enabled) + helper name:

Browser support

Visit Can I use to check browser support.