Layout

Lignes & Colonnes

Répartition de 2 à 12 colonnes .column sur une ligne .row. Définition de la largeur d'une colonne via les classes .column1 à .column12.
1
1
1
1
1
1
1
1
1
1
1
1
3
3
3
3
4
4
4
2
3
5
2
<div class="row">
    <div class="column column2">...</div>
    <div class="column column3">...</div>
    <div class="column column5">...</div>
    <div class="column column2">...</div>
</div>

Largeur personnalisée

Personnalisation possible de la largeur des colonnes via l'attribut style.
32%
44%
24%
<div class="row">
    <div style="width:32%">...</div>
    <div style="width:44%">...</div>
    <div style="width:24%">...</div>
</div>

Classes responsive

  Phone (< 768px) Tablet (≥ 768px / ≤ 991px) Desktop (≥ 992px)
.visible-phone Visible Hidden Hidden
.visible-tablet Hidden Visible Hidden
.visible-desktop Hidden Hidden Visible
.hidden-phone Hidden Visible Visible
.hidden-tablet Visible Hidden Visible
.hidden-desktop Visible Visible Hidden

Test des classes responsive

.visible-phone .visible-phone
.visible-tablet .visible-tablet
.visible-desktop .visible-desktop
.hidden-phone .hidden-phone
.hidden-tablet .hidden-tablet
.hidden-desktop .hidden-desktop

Media queries

Voici la liste des différents points de rupture utilisés lors de la conception du Framework EMS :

/*Styles CSS par défaut, optimisés pour un affichage sur mobile*/
...

/*Tablettes en mode portrait et résolutions supérieures*/
@media only screen and (min-width: 768px){...}

/*Tablettes en mode horizontal et résolutions supérieures*/
@media only screen and (min-width: 992px){...}

/*Écrans de bureau et résolutions supérieures*/
@media only screen and (min-width: 1200px){...}

Ces points de rupture peuvent être limités à l'aide de max-width afin de cibler plus particulièrement une résolution :

/*Styles CSS par défaut, optimisés pour un affichage sur mobile*/
...
@media only screen and (min-width: 480px) and (max-width: 767px){...}
@media only screen and (min-width: 768px) and (max-width: 991px){...}
@media only screen and (min-width: 992px) and (max-width: 1199px){...}
@media only screen and (min-width: 1200px) and (max-width: 1599px){...}