Flexbox-helper (work in progress)

(demo page coming soon)

Just a bunch of classes for flexbox-based layouts. Include a 12 col grid (using flex-basis) and responsive breakpoints.

Inspiration:

Flexbox Grid

Material Design.js (see layout.scss specifically)

Installing

Get it from npm:

npm install flexbox-helper --save

Simply include dist/flexbox-helper.css in your app or use src/flexbox-helper.scss

Usage

Just apply the classes as you need them, it follows flexbox naming. Nothing fancy.

<div class=".flx-row-all .flx-column-xs flx-start-all flx-align-center-all">
  <div class=".flx-basis-12-all">Full width child</div>
  <div class=".flx-basis-6-xs">Full width child but half width on small screens</div>
</div>

Additional infos

The default breakpoints are the following:

$breakpoint-xs: 600px !default;
$breakpoint-sm: 960px !default;
$breakpoint-md: 1280px !default;
$breakpoint-lg: 1920px !default;

The production version in /dist uses css nano is prefixed with the following:

var AUTOPREFIXER_BROWSERS = [
    'ie >= 11',
    'ie_mob >= 11',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 4.4',
    'bb >= 10'
];