Get started

Font

CSS Components

CSS Elements

Doc

Grid Responsive

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.

...

Example :

.col-s-2 .col-m-4 .col-l-6
.col-s-2 .col-m-4 .col-l-6
.col-s-2 .col-m-4 .col-l-6
.col-s-2 .col-m-4 .col-l-6
.col-s-2 .col-m-4 .col-l-6
.col-s-2 .col-m-4 .col-l-6
...
...
...
...
...
...
.col-s-10 .col-s-center .col-m-4 .col-m-center
.col-s-10 .col-s-center .col-m-4 .col-m-center