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

$3

npm install grid2flex --save

$3

bower install grid2flex --save

$3

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.

// importing custom variables

@import "grid2flex-variables-custom";



// importing grid2flex module



// import using bower install

@import "bower_components/grid2flex/src/grid2flex";



// import using npm install

@import "node_modules/grid2flex/src/grid2flex";



// for manual import

@import "grid2flex";

Variables

Original grid2flex-variables file include next variables:

Configuration variable:

$configuration: (

	columns-count:                               12,

	container:                                   grid-container,

	row:                                         row,

	column:                                      col,

	direction-prefix:                            dir,

	offsets-enabled:                             true,

	box-sizing-enabled:                          true,

	row-wrap-enabled:                            true,

	row-vertical-alignment-enabled:              true,

	row-horizontal-alignment-enabled:            true,

	direction-enabled:                           true,

	column-vertical-alignment-enabled:           true,

	column-ordering-enabled:                     true,

	breakpoints-enabled:                         true

);

Variable name	Description	Type
columns-count	Used to define how much columns should be generated	Integer
container	Define class name of main container. Use this container to prevent horizontal scroll on wrapper. Width and height set to 100%. Will not compile if set to "false"	string, default == grid-container
row	Row container class name. Wrapper for columns	string, default == row
column	Column class name	string, default == row
direction-prefix	Direction class name	string, default == dir
offsets-enabled	Offsets for columns	boolean, default == true
box-sizing-enabled	Set box-sizing to border box. Need to correct width calculation on columns. Disable if box-sizing reseted in project	boolean, default == true
row-wrap-enabled	Wrap/ nowrap classes for row (available classes: multi, inline)	boolean, default == true
row-vertical-alignment-enabled	Vertical alignment for all columns in row	boolean, default == true
row-horizontal-alignment-enabled	Distribution for columns in row	boolean, default == true
direction-enabled	Direction for columns in row	boolean, default == true
column-vertical-alignment-enabled	Vertical alignment for current column in row	boolean, default == true
column-ordering-enabled	Ordering for columns (available classes: first, last, ordered)	boolean, default == true
breakpoints-enabled	Option to generate class prefixes for media queries	boolean, default == true

Gutters variable:

$gutters: (

	gutter:                                      20px,

	gutter-none:                                 0,

	gutter-large:                                40px

);

Variable name	Description
gutter	Default gutter value
gutter-none	Use for grid without gutters
gutter-large	Custom gutter example

Breakpoints variable:

$breakpoints: (

	xs:                                          0,

	sm:                                          480px,

	md:                                          768px,

	lg:                                          1024px

);

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

Grid classes

$3

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:

Helper name	Classes examples	Description
Gutter modifiers	.row--gutter-none, .row--gutter-large	Define grid gutters from $gutters
Row wrapping	.row-(bp)--multi .row-(bp)--line	Define wrapping behavior for columns in row
Vertical alignment	.row-(bp)--top, .row-(bp)--middle, .row-(bp)--baseline, .row-(bp)--bottom, .row-(bp)--stretch	Define vertical alignment for columns in row
Space distribution	.row-(bp)--left, .row-(bp)--right, .row-(bp)--between, .row-(bp)--around	Define space distribution in row

$3

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

Helper name	Classes examples	Description
Grid direction	.dir-(bp)--row .dir-(bp)--row-reverse .dir-(bp)--column .dir-(bp)--column-reverse	Define direction for nested columns

Use prefix "stretch" for IE11 support in column | column-reverse cases.

$3

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:

Helper name	Classes examples	Description
Column sizes	.col-(bp)-$i (from 1 to $columns-count), .col-(bp) (column equal width), .col-(bp)-auto (auto width), col-(bp)-stretch (used for column | column-reverse direction)	Define column size
Column offsets	.col-(bp)-offset-$i (from 0 to $columns-count - 1)	Define offset for column
Vertical alignment	.col-(bp)--top, .col-(bp)--middle, .col-(bp)--baseline, .col-(bp)--bottom, .col-(bp)--stretch	Define vertical alignment for column
Column ordering	.col-(bp)--first, .col-(bp)--last, .col-(bp)--ordered	Define order for column

Browser support

Visit Can I use to check browser support.