Menu

Basic Grid

Example One

From ( 0px - 649px ) — One Collumns
From ( 650px + ) — Two Collumns
XS_Grid_1x1 M_Grid_1x2
XS_Grid_1x1 M_Grid_1x2
Example Code:
<div class="Grid_Row" >
<div class="XS_Grid_1x1  M_Grid_1x2"> XS_Grid_1x1 M_Grid_1x2 </div>
<div class="XS_Grid_1x1  M_Grid_1x2"> XS_Grid_1x1 M_Grid_1x2 </div>
</div>

Example Two

From ( 0px - 999px ) — One Collumns
From ( 1000px + ) — Tree Collumns
XS_Grid_1x1 L_Grid_1x3
XS_Grid_1x1 L_Grid_1x3
XS_Grid_1x1 L_Grid_1x3
Example Code:
<div class="Grid_Row" >
<div class="XS_Grid_1x1   L_Grid_1x3"> XS_Grid_1x1 L_Grid_1x3 </div>
<div class="XS_Grid_1x1   L_Grid_1x3"> XS_Grid_1x1 L_Grid_1x3 </div>
<div class="XS_Grid_1x1   L_Grid_1x3"> XS_Grid_1x1 L_Grid_1x3 </div>
</div>

Example Tree

From ( 0px - 649px ) — One Collumns
From ( 650px - 999px ) — Two Collumns
From ( 1000px + ) — For Collumns
XS_Grid_1x1 M_Grid_1x2 L_Grid_1x4
XS_Grid_1x1 M_Grid_1x2 L_Grid_1x4
XS_Grid_1x1 M_Grid_1x2 L_Grid_1x4
XS_Grid_1x1 M_Grid_1x2 L_Grid_1x4
Example Code:
<div class="Grid_Row" >
<div class="XS_Grid_1x1   M_Grid_1x2   L_Grid_1x4"> XS_Grid_1x1 M_Grid_1x2 L_Grid_1x4 </div>
<div class="XS_Grid_1x1   M_Grid_1x2   L_Grid_1x4"> XS_Grid_1x1 M_Grid_1x2 L_Grid_1x4 </div>
<div class="XS_Grid_1x1   M_Grid_1x2   L_Grid_1x4"> XS_Grid_1x1 M_Grid_1x2 L_Grid_1x4 </div>
<div class="XS_Grid_1x1   M_Grid_1x2   L_Grid_1x4"> XS_Grid_1x1 M_Grid_1x2 L_Grid_1x4 </div>
</div>

Margin And Padding

Padding

Random text
Random text
Random text
Example Code:
How to add padding. Example padding:

<style>
.Padding_Box { padding:10px; }
</style>

<div class="XS_Grid_1x3" >
<div class="Padding_Box"> Random text </div>
</div>

Margin and padding

Random text
Random text
Random text
Example Code:
How to add padding. Example padding:

<style>
.Margin_Box {
padding:10px;
margin:10px;
}
</style>

<div class="XS_Grid_1x3" >
<div class="Margin_Box"> Random text </div>
</div>

Complex Grid

Example One

From ( 0px - 650px ) — One Collumns
From ( 650px + ) — Two Collumns
XS_Grid_1x1 M_Grid_3x4
XS_Grid_1x1 M_Grid_3x4
Example Code:
<div class="Grid_Row" >
<div class="XS_Grid_1x1  M_Grid_3x4"> XS_Grid_1x1 M_Grid_3x4 </div>
<div class="XS_Grid_1x1  M_Grid_3x4"> XS_Grid_1x1 M_Grid_3x4 </div>
</div>

Example One

From ( 0px - 1000px ) — Mobile Grid System
From ( 1000px + ) — Dekstop Grid System
XS_Grid_1x2 L_Grid_1x8
XS_Grid_1x2 L_Grid_1x8
XS_Grid_1x1 L_Grid_2x8
XS_Grid_1x1 L_Grid_2x8
XS_Grid_1x1 L_Grid_2x8
Example Code:
<div class="Grid_Row" >
<div class="XS_Grid_1x2  L_Grid_1x8"> XS_Grid_1x2 L_Grid_1x8 </div>
<div class="XS_Grid_1x2  L_Grid_1x8"> XS_Grid_1x2 L_Grid_1x8 </div>
<div class="XS_Grid_1x1  L_Grid_2x8"> XS_Grid_1x1 L_Grid_2x8 </div>
<div class="XS_Grid_1x1  L_Grid_2x8"> XS_Grid_1x1 L_Grid_2x8 </div>
<div class="XS_Grid_1x1  L_Grid_2x8"> XS_Grid_1x1 L_Grid_2x8 </div>
</div>