Grid
Layout include grid allows to design a responsive interface, for mobile, tablet or PC. We using Toast Framework.
Quick-start
Using Toast is easy. To use the grid, you'll need a wrap, for this purpose it is necessary to use .container
classe. Then, you can add columns with the .ms_col
and ms_col--[col-number]-of-[group-number]
classes. [col-number]
determines the number of columns to be displayed, and [group-number]
the total number of columns that can be displayed on the line (2, 3, 4, 5, 6, 8, or 12).
ms_col ms_col--12-of-12
ms_col ms_col--3-of-4
ms_col ms_col--1-of-2
ms_col ms_col--1-of-3
2--12...
1
<div class="container">
<div class="ms_col ms_col--12-of-12">...</div>
<div class="ms_col ms_col--3-of-3">...</div>
<div class="ms_col ms_col--1-of-2">...</div>
<div class="ms_col ms_col--1-of-3">...</div>
<div class="ms_col ms_col--2-of-12">...</div>
<div class="ms_col ms_col--1-of-12">...</div>
</div>
Samples content :
3-of-12...
9-of-12...
<div class="container">
<div class="ms_col ms_col--3-of-12">...</div>
<div class="ms_col ms_col--9-of-12">...</div>
</div>
1-of-3...
1-of-3...
1-of-3...
<div class="container">
<div class="ms_col ms_col--1-of-3">...</div>
<div class="ms_col ms_col--1-of-3">...</div>
<div class="ms_col ms_col--1-of-3">...</div>
</div>
1-of-4...
1-of-4...
1-of-2...
<div class="container">
<div class="ms_col ms_col--1-of-4">...</div>
<div class="ms_col ms_col--1-of-4">...</div>
<div class="ms_col ms_col--1-of-2">...</div>
</div>
Centered
In order to adjust your content, the ms_col--centered
classe allows you to center the columns.
ms_col--centered
<div class="container">
<div class="ms_col ms_col--3-of-5 ms_col--centered" >...</div>
</div>
Push & Pull
The ms_col--push-[col-number]-of-[group-number]
classe allows you to push columns, and ms_col--pull-[col-number]-of-[group-number]
allows you to pull columns.
ms_col--push-2-of-5
<div class="container">
<div class="ms_col ms_col--3-of-5 ms_col--push-2-of-5">...</div>
</div>
Mobiles & Tablets
In order to adapt your content to mobiles and tablets, you can use the following two classes : ms_col--m-[col-number]-of-[group-number]
for tablets, and ms_col--s-[col-number]-of-[group-number]
for mobiles.
By default, the mobile version (<560px) takes the entire width, so it is not necessary to specify it in the classe.
<div class="container">
<div class="ms_col--1-of-4 ms_col--m-2-of-4 ms_col">...</div>
</div>
Source
As mentioned above, we use the CSS Toast grid, for more information follow the links below :