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
  1. <div class="row">
  2.   <div class="column column2">...</div>
  3.   <div class="column column3">...</div>
  4.   <div class="column column5">...</div>
  5.   <div class="column column2">...</div>
  6. </div>

Largeur personnalisée

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

Classes responsive

  Phones (<768px) Tablets (≥768px) Desktops (≥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

Groupes de classes

Groupes CSS display
.visible-* display: block;
.visible-*-inline-block display: inline-block;
.visible-*-inline display: inline;

Media queries

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

  1. /*Styles CSS par défaut, optimisés pour un affichage sur mobile*/
  2.  
  3. /*Tablettes en mode portrait et résolutions supérieures
  4. @media only screen and (min-width: 768px){...}
  5.  
  6. /*Tablettes en mode horizontal et résolutions supérieures
  7. @media only screen and (min-width: 992px){...}
  8.  
  9. /*Écrans de bureau et résolutions supérieures
  10. @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 :

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