Grid based on the flex display property using Sass and BEM naming convention.
Open your main Sass file, import _grid.sass and compile.
It works like flexboxgrid, but using BEM naming convention which it makes it easier for developers to follow and import their projects.
There is two kinds of containers: normal and fluid.
.container
.row
.container--fluid
.row
A typical row with 3 colum would be:
.container
.row
.col__lg--4
...
.col__lg--4
...
.col__lg--4
...
You can differentiate cols between viewports easily:
.container
.row
.col__lg--6.col__md--6.col__sm--4.col__xs--12
...
You can make them also with self and achieve the same result:
.container
.row
.col__lg--self
...
.col__lg--self
...
.col__lg--self
...
You can apply some attributes to .row anytime:
.container
.row.row__lg--reverse
.col__lg--4
3
.col__lg--4
2
.col__lg--4
1