Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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

About

Flex grid, ported to Sass. Easy to setup and use.

Resources

License

Releases

No releases published

Packages

No packages published

Languages