Simple Flexbox Grid
npm install koality-flexbox-gridThis aims to be a very simple Sass flexbox grid that isn't overly complicated or ends up being something you fight against while building.
You can get this project into like any node package: npm install koality-flexbox-grid
Then in your projects sass you will want to import it like @import node_modules/koality-flexbox-grid/src/scss/flexbox-grid. In doing that you can override some variables.
* flex-container: adding that class to any element simply applies a display: flex to it.flex-wrap
*
*
*
* or flex-dir-row
*
* or flex-dir-column
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* By default all items are flex: 1 1 100%
* To control the width of you item you have the class format of where you can put any number from 1-12. It should work like most common CSS frameworks where flex-2-3 will make this item 66%.flex-shrink-0
*
*
*
*
*
*
All classes listed can be prefixed with any breakpoint name to make it work on that breakpoint and up.
#### Available Breakpoints
* $default: 0$sm
* : 576px$md
* : 768px$lg
* : 992px$xl
* : 1200px
*
$breakpoints: (
default: $default,
sm: $sm,
md: $md,
lg: $lg,
xl: $xl,
);
These can be overridden in your own project as long as you match the variable names. If you drop breakpoints from the $breakpoints sass map it will change the amount of breakpoints the Grid has, this will greatly reduce the amount of CSS the Grid uses.
Example:
md-flex-dir-colmn, lg-flex-2-3
* row: will center the row and make it $row-width (default 1400px) and on screens smaller than it's width it will have gutters the width of $gutter-width (default 15px)
* will be 100% width even able to break outside of a row and touch the edge of the screeninner-row
* same as row but only $inner-row-width (default 800px)
As much as we can we try to allow things to be user overridable. Here are currently all the variables you can change.
* $row-width: 1400px;
*
*
*
*
*
*
*
$breakpoints: (
default: $default,
sm: $sm,
md: $md,
lg: $lg,
xl: $xl,
);
*
* This will adjust the amount of columns in the grid.$flex-grow-default: 0;
* This will change wheither or not the grid items grow by default or not.$flex-shrink-default: 1;` This will change wheither or not the grid items shrink by default or not.
*