Grid

Overview

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).

Attention! To make it work all of your units should be placed within a parent container under the class .container.

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:

<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:

<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 

<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. 

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

Grid for mobile devices

• 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.

<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>