flex_e_ble
v2.0.4
Published
A simple yet flexible class naming structure on top of a flexbox based grid.
Downloads
35
Maintainers
Readme
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 copydist/_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.