alom

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

4

4

1

1

1

1

1

1

1

1

1

1

1

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

6

4

4

4

3

3

3

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

it's

me

Display Utilities

.display-block

This class will add its name to the element.

.display-inline

This class will add its name to the element.

.display-inline-block

This class will add its name to the element.

.display-flex

This class will add its name to the element.

.display-inline-flex

This class will add its name to the element.

.display-table

This class will add its name to the element.

.display-none

This class will add its name to the element.

Media Queries

We have provided a set of helpful media query mixins with really cool names. Kudos to Rafal Bromirski. We have one for Mobile and Tablet so it's easier for you to manage those screens.

Example of Mobile Full media

@media only screen and (min-width: 320px) and (max-width: 480px) {
//Your set of rules
}

Our Mobile mixin

This applies when you have 768px of width.

.class-name {
//Regular css rules

@include breakpoint(s) {
//Your awesome responsive rules. Cool isn't it?
}
}

Our Tablet mixin

This applies when you have 1024px of width.

.class-name {
//Regular css rules

@include breakpoint(m) {
//Your awesome responsive rules. Cool isn't it?
}
}

Our Laptop mixin

This applies when you have 1140px of width.

.class-name {
//Regular css rules

@include breakpoint(l) {
//Your awesome responsive rules. Cool isn't it?
}
}

Our Desktop mixin

This applies when you have 4096px of width.

.class-name {
//Regular css rules

@include breakpoint(w) {
//Your awesome responsive rules. Cool isn't it?
}
}

Responsive

We made some class names to make it more easy for you to manage the responsive part, with them you can show or hide content on small, medium or large devices.

Visibility

Width < 768px Width < 1024px Width < 1140px Width > 4096px
show-on-s Visible Hidden Hidden Hidden
show-on-m Hidden Visible Hidden Hidden
show-on-l Hidden Hidden Visible Hidden
show-on-w Hidden Hidden Hidden Visible
hide-on-s-only Hidden Visible Visible Visible
hide-on-m-only Visible Hidden Visible Visible
hide-on-l-only Visible Visible Hidden Visible
hide-on-w-only Visible Visible Visible Hidden

Hiding elements

.hide-on-s

This class hides the element when it reaches 768px.

.hide-on-m

This class hides the element when it reaches 1024px.

.hide-on-l

This class hides the element when it reaches 1140px.

.hide-on-w

This class hides the element when it reaches 4096px.

Do you like what you see?

Download it