Skip to content

A simple yet flexible sass class naming structure on top of a flexbox based grid

Notifications You must be signed in to change notification settings

jackmcpickle/flex_e_ble

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

flex_e_ble

NPM

Build Status Dev Dependencies Total Downloads renovate-app badge

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

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.