Overview

By default the grid is fluid and it consists of 12 columns with a specified maximum width of 940px. If the screen width is less than 768px, the elements of the grid are stretched to the whole width and are placed vertically.

Class names are very simple and speak for themselves. For example, .grid_1 has the shortest width, and .grid_12 - the longest. However, remember that in this grid one line can not contain more than 12 one-column elements.

For example, you want to create 3 blocks of text, following one another, then you need to assign class  .grid_4 to those blocks that will give the total result 12 (4+4+4).

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

Grid classes


Push & Pull

In addition to the primitive classes above, the grid supports a few more useful classes for column shift back and forth. Accordingly, the classes will be .push and .pull.

Interesting, you can move the columns as much as you need (within the grid of course). If you want to move the column by 2 cells, just apply the class .push_2 etc.

Let's say we need to center logo, but in the HTML code it should remain first. Do do this you need a copule of classes

Before the move:

logo
text column
text column
big box
<div class="grid_6">
    logo
</div>
<div class="grid_3">
    text column
</div>
<div class="grid_3">
    text column
</div>
<div class="grid_12">
    big box
</div>

 

After the move:

logo
text column
text column
big box
<div class="grid_6 push_3">
    logo
</div>
<div class="grid_3 pull_6">
    text column
</div>
<div class="grid_3">
    text column
</div>
<div class="grid_12">
    big box
</div>

Prefix & Suffix

To create an open space between the blocks, use classes  .prefix and .suffix  which are quite similar to as .push and  .pull .

For example, to leave one blank column after the block, use the class  .suffix_1 , and for one blank column before the element -  .prefix_1 

class="grid_6 suffix_3"
class="grid_3"
big box
<div class="grid_6 suffix_3">
    class="grid_6 suffix_3"
</div>
<div class="grid_3">
    class="grid_3"
</div>
<div class="grid_12">
    big box
</div>

Alpha & Omega

There are two more classes that you need to know: .alpha and .omega. They move the paragraph left and right according to the classes enlarging the column of paragraph size. 

class="grid_12"
class="grid_12 alpha omega"
<div class="grid_12">
    class="grid_12"
</div>
<div class="grid_12 alpha omega">
    class="grid_12 alpha omega"
</div>

Grid for mobile devices

Grid for mobile devices works as the ordinary grid, but it uses classes with additional prefix

  • Devices from 481px to 768px use the class .t-grid_N with maximum of 6 columns maximum.
  • Devices with the width  up to 480px - .m-grid_N with 4 columns maximum.
logo
text column
text column
big box
<div class="grid_6 t-grid_3">
    logo
</div>
<div class="grid_3 t-grid_3 m-grid_4">
    text column
</div>
<div class="grid_3 t-grid_2 m-grid_2">
    text column
</div>
<div class="grid_12 t-grid_4 m-grid_2">
    big box
</div>