Glorious Grid

Simple. Light. Clean.

introduction

This grid was made for front enders who like simplicity and doesn't like the way that Bootstrap and Foundation handle grid systems. Differently from Bootstrap and Foundation, this grid system avoid multiple screen classes strategy that usually lead the front end into a messed markup.

install

You can install it using npm or, if you're not confortable with package management, download the code and put it manually in your html:

npm install ggrid --save

usage

box

.gg-box

This is the default container for the grid. It sets the maximum width of the grid to 960 pixels.

6 cols
6 cols
6 cols
6 cols

row

.gg-row

Every column should be a direct child of a row.

3 cols
3 cols
3 cols
3 cols
6 cols
6 cols
12 cols
3 cols
3 cols
3 cols
3 cols
6 cols
6 cols
12 cols

column

.gg-col-[1...12]

It is possible split a row up to 12 columns.

1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col

horizontal offset

.gg-hof-[1...11]

This grid is capable to horizontally offset a column up to 11 times its width.

6 cols
6 cols
3 cols
1 col
6 cols
6 cols
3 cols
1 col

vertical offset

.gg-vof-[1...12]

The grid also offers a vertical offset. It can offset a row from 10 to 120 pixels.

12 cols
6 cols
9 cols
12 cols
6 cols
9 cols

responsiveness

.gg-kot, .gg-kom

This grid was designed to allow responsiveness keeping markup as simple and clean as possible. So, its default behavior is to make the grid single column when the screen width is lower than 960 pixels, but it can stay multi-column either on tablets, smartphones or both.

6 cols
6 cols
3 cols
3 cols
3 cols
3 cols
The class gg-kom used on the rows of the grid above keeps it multi-colum on smartphones and tablets
6 cols
6 cols
3 cols
3 cols
3 cols
3 cols
6 cols
6 cols
3 cols
3 cols
3 cols
3 cols
The class gg-kot used on the rows of the grid above keeps it multi-colum on tablets, but makes it single-column on smartphones.
6 cols
6 cols
3 cols
3 cols
3 cols
3 cols

nesting

This grid allows nesting. It is completely possible split a column in more columns.

12 cols
6 cols
6 cols
7 cols
3 cols
3 cols
3 cols
3 cols
5 cols
7 cols
5 cols
12 cols
6 cols
6 cols
7 cols
3 cols
3 cols
3 cols
3 cols
5 cols
7 cols
5 cols

contribute

To contribute on this project, feel free to fork it on Github