alom

The lightest, simplest framework ever.

Super fast, like the speed of light

Super simple responsive grid

It doesn’t interfere with your style.

The grid

We use Furattos'fluid system which scales up to 12 columns. You don't need much to start it up, the only thing you need to do is to nest each column (.col-1, .col-2, etc.) inside a div with class ".row".

You can algo nest rows inside existing .col-* columns.

4

8

4

1

The flex grid

We also included a grid system based on flex, it's pretty much the same thing, the only difference is that it uses display flex instead of floating the element to the left.

6

4

3

Offsets on columns

Probably you will want to add some offset the columns of the grid, to put it more to the right, don't worry we have you covered. Let us explain this thing works. In a case where want blank space between columns, the fair solution was to add some blank columns actually, that is not necessary with the offsets though. Offset will add a margin to the left according to the 12 column grid Furatto offers.

Offset 4

Offset 3

Offset 2

Functions

We have functions to help you make the responsive side even more easy.

Pixels to rems

px-to-rems($value)

With this function you convert the pixels to rems, to make it easier on the responsive side, you can change the default value in the variables scss.

body {
font-size: px-to-rems(16);
}

Pixels to ems

px-to-ems($value)

Just like the rems functions, just with ems.

body {
font-size: px-to-ems(16);
}

Utility Classes

We added some simple and functional class names for behavior tweaks.

Floating elements

.pull-left

This floats an element to the left.

.pull-right

This floats an element to the right.

Text Alignments

.text-left

This aligns the text to the left.

.text-right

This aligns the text to the right.

.text-justify

This aligns the text to be justify.

.text-center

This aligns the text to be center.

Alignment Utilities

.align.vertical

This classes will align any element vertically. The only but is that its parent has to have a height.

I'm centered!

.align-flex.vertical

This classes will center any element vertically using flex, the only constrain is that you have to apply it to the elements' parent, not to the element itself.

Hi, I'm centered because of my parent!

.align-flex.center

This class will center any element vertically and horizontally using flex, the only constrain is that you have to apply it to the elements' parent, not to the element itself.

Hi, I'm centered because of my parent!

.align-flex.between

This class will give the same amount of space to each element using flex, the only constrain is that you have to apply it to the elements' parent.

Hello