Skip to content
Flex grid, ported to Sass. Easy to setup and use.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Aug 1, 2015
README.md
_grid.sass

README.md

Oh yes… another Flexbox Grid

Grid based on the flex display property using Sass and BEM naming convention.

Quick install

Open your main Sass file, import _grid.sass and compile.

Usage

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

Inspiration

You can’t perform that action at this time.