Custom Flexbox Grid using Bootstrap mixins (SASS)

Custom grid new layout module flexbox in css3. Flexbox grid uses the same classes as bootstrap grid, so you won't have to get used to new classes names. 12,24,48 columns grid can be configured in variables.scss file.

If you want to learn more about what flexbox is, follow the link




Responsive
Enable specifying different column sizes, offsets, alignment and distribution at col-xs, col-sm, col-md & col-lg viewport widths.

Simple Syntax

<div class="row">
    <div class="col-xs-offset-6 col-sm-offset-4 col-xs-6 col-sm-8 col-md-12">
        <div class="content-box">6</div>
    </div>
</div>

Flexbox container properties

$class - 'xs, sm, md, lg'

.start-$class

@include justify-content(flex-start);

.center-$class

@include justify-content(center);

.end-$class

@include justify-content(flex-end);

.around-$class

@include justify-content(space-around);

.between-$class

@include justify-content(space-between);

.top-$class

@include align-items(flex-start);

.middle-$class

@include align-items(center);

.bottom-$class

@include align-items(flex-end);

.self-$class

@include align-self(center);

See example here: https://github.com/ukiedev/flexboxgrid

I have used mixins Bourbon http://bourbon.io/docs/

• The new syntax is in sync with the current specification (e.g. display: flex).
• The tweener syntax is an unofficial syntax from 2012, adopted only by IE 10 (e.g. display: -ms-flexbox).
• The old syntax is from 2009 (e.g. display: box).

The browser support for the latest flexbox specification is:

• Chrome 29+
• Firefox 31+
• Internet Explorer 10+ (prefixed with -ms-)
• Opera 17+
• Safari 7+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

http://caniuse.com/#search=flexbox

Resources:

1. http://flexboxgrid.com/
2. https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties