Simple responsive SASS Grid

Download the grid from my GitHub account.

This grid is kind of basic but has the most important features: Mobile first, push, pull and nesting. The grid itsel is naked and comes with no styling at all. No grid cell padding, no colors, just grid. So you have the full control of it.

With the mobile first approach we have some base classes. In my opinion there aren't more than four columns needed, when using a small layout. So we have .full, .half, .one-third, .two-third, .one-quarter, .three-quarter classes.

Full
Half
Half
One third
Two third
One quarter
Three quarter

For medium sized layouts, we can extend our classes with a m-*classname. E.g.: m-full, m-half, m-one-third and so on.

m-full
m-half
m-half
m-one-third
m-two-third
m-one-quarter
m-three-quarter

What brings us to the big sized layouts. Here you have full controll of the amount of columns. Thanks to SASS variables we can give our grid a column amount. The default is 12 and is stored inside the $column-count variable. Based on that number, the grid gets automatically created. SASS loops over the amount of columns and creates a percentage based width for them.

col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-1-of-12
col-2-of-12
col-2-of-12
col-2-of-12
col-2-of-12
col-2-of-12
col-2-of-12
col-3-of-12
col-3-of-12
col-3-of-12
col-3-of-12
col-4-of-12
col-4-of-12
col-4-of-12
col-5-of-12
col-7-of-12
col-6-of-12
col-6-of-12
col-8-of-12
col-4-of-12
col-9-of-12
col-3-of-12
col-10-of-12
col-2-of-12
col-11-of-12
col-1-of-12

Also the grid creates push-n and pull-n columns based on the $column-count variable.

First element pushed 6 columns
Second element pulled 6 columns

Last but not least, we can nest rows inside columns inside rows inside columns inside... okay i am sure you get the point :-)

Nesting
example
First
Second
I am not nested

That's all! You can download the grid from my GitHub account.

I am happy for every feedback or issues that you find. Also I really appreciate a short hint or message, if you use my grid.