Simple grids with flexbox

Just is a simple and straightforward SASS library that uses flexbox and can be customized as you want.

Requirement

• SASS 3.4+

Links

• Installation
• Using
• Customization
• Wiki
• About

Installation

1. Install Just from npm

npm install just-grid --dev

2. Import Just in your SASS main file

@import "just";

Using

Just consist in three mixins: row(), column() and media().

.element {
    @include row();
}

Means the setup of a row and defines this element with display: flex.

.element {
    @include column(1);
}

With this you defined a 1 of 12 column, using default settings.

You can pass how many columns you expect to column mixin, like this:

.element {
    @include column(1 of 3);   
}

This change the default 12 columns to 3 in this element.

Customization

If you want to change the default 1rem gap or the default 12 columns setting, you can override passing a grid (a SASS map) to the mixin.

$style: (columns: 6, gap: 2rem);

@include column(2, $style);

For more information visit our wiki.

About

Just was an idea of flexbox grid using only SASS based in Neat framework from thoughtbot. It's free to use and eager to receive new ideas and critiques.