The responsive grid allows to design a responsive interface, for mobile, tablet or PC.
In order to guarantee the optimal functioning of the framework it is necessary to use the 'Mobile first', namely: to design a site by designing in priority the mobile version (.col-s-[0-9]) and by gradually adapting this one for the larger screens.
| Small < 640px |
Medium > 1024px |
Large > 1140px |
|
|---|---|---|---|
| Class | col-s-[0-12] | col-m-[0-12] | col-l-[0-12] |
| Number of columns | 12 | ||
| Gutter width | 2% | ||
The 'container' class allows to center and contain the columns with a maximum width of 1140px.
<div class="container">...</div>Example :
<div class="container">
<div class="col-s-2 col-m-4 col-l-6">...</div>
<div class="col-s-2 col-m-4 col-l-6">...</div>
<div class="col-s-2 col-m-4 col-l-6">...</div>
<div class="col-s-2 col-m-4 col-l-6">...</div>
<div class="col-s-2 col-m-4 col-l-6">...</div>
<div class="col-s-2 col-m-4 col-l-6">...</div>
</div><div class="col-s-10 col-s-center col-m-4 col-m-center">.col-s-10 .col-s-center .col-m-4 .col-m-center</div>