Grid-Scheibo - A Simple SCSS Grid Based on Flexbox

 !npm
!npm

Demo (https://scheibome.github.io/grid-scheibo/)

Install

~~~
npm install grid-scheibo
~~~

---

Usage

#### Grid with CSS Grid
~~~scss
@import
'../../../node_modules/grid-scheibo/source/variables',
'../../../node_modules/grid-scheibo/source/cssgrid-scheibo';
~~~

#### Grid with Flexbox
~~~scss
@import
'../../../node_modules/grid-scheibo/source/variables',
'../../../node_modules/grid-scheibo/source/grid-scheibo';
~~~

---

Advanced Usage

Insert your settings before the import

~~~scss
// add own gutter size
$col-gutter-size: 2rem;

// your grid with CSS-Grid
$grid-setup: (
'1-1': '1fr 1fr',
'1-1-1': '1fr 1fr 1fr',
'1-2-1': '1fr 2fr'
);

// your grid with flexbox
$col-widths: (
'1\\/8': '1/8',
'2\\/8': '2/8',
'3\\/8': '3/8',
'4\\/8': '4/8',
'5\\/8': '5/8',
'6\\/8': '6/8',
'7\\/8': '7/8',
'full': 100%
);

// your breaks
$col-grid-breaks: (
tablet: '900px',
desktop: '1024px',
wide: '1400px'
);

// for using CSS-Grid
@import '../../../node_modules/grid-scheibo/source/cssgrid-scheibo';
// for using Flexbox
@import '../../../node_modules/grid-scheibo/source/grid-scheibo';
~~~

$3

#### Grid with CSS-Grid

~~~html

#### Grid with Flexbox

##### o-row--nogutter

~~~html

##### o-row--between

~~~html

##### o-row--between & o-row--vertical-align

~~~html

##### o-row--row-reverse

~~~html