Awesome

flex_e_ble

A simple yet flexible class naming structure on top of a flex based grid.

Flexeble 2.0 removes support for < IE 11 and as such all fall backs and flexbox namespacing

Reasons

• Can assist you in migrating your current Bootstrap and Foundation grids to flexbox as a drop in replacement.
• Use a grid system that is the same across your projects but adapts to the naming conventions that your are used to.

See the website flexeble.space for demo examples

See all customisable variables

Requirements

• include-media for responsive grid generation

Install

• npm install flex_e_ble or copy dist/_flex_e_ble.scss

How it works

Flex_e_ble was originally based on purecss.io grid work.

Row css looks like

.row {
  display: flex;
  flex-flow: row wrap;
  position: relative;
}

Grid css looks like

[class*=grid-] {
  display: inline-block;
}

Usage

A basic grid class structure is a follows .$global-name-space-$grid-name-$breakpointsize-$columnindex

Make a simple 5 column grid with 30px gutters either side

@import 'flex_e_ble';
$total-columns: 5;
$column-gutter: 30px;
$auto-column-gutters: true;

Will output the grid as follows

.grid-1 { width: 20%; }

.grid-2 { width: 40%; }

/*...etc... */

Want a Bootstrap class structure?

@import 'flex_e_ble'
// Bootstrap like
$grid-name: 'col-';
$base-grid-name: 'xs';
$column-gutter: 15px;
$auto-column-gutters: true;
$right-name: 'push';
$left-name: 'pull';
$breakpoints: (
  'sm': 480px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1180px
);

Outputs a grid using the bootstrap naming convention

.col-xs-1 { width: 8.33333%; }

.col-xs-2 { width: 16.66667%; }

/*...etc... */

Want a Foundation class structure?

@import 'flex_e_ble';
// foundation like;
$column-gutter: 0.9375rem;
$auto-column-gutters: false;
$independant-grid-name: 'column';
$grid-name: '';
$base-grid-name: 'small';
$breakpoints: (
  'medium': 768px,
  'large': 1024px
);

Will output our grid as follows

.small-1 { width: 8.33333%; }

.small-2 { width: 16.66667%; }

/*...etc... */

But remember underneath the properties outputted are just the same.