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.