A simple yet flexible sass class naming structure on top of a flexbox based grid
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
See the website flexeble.space for demo examples
See all customisable variables
npm install flex_e_ble
or copy dist/_flex_e_ble.scss
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;
}
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.