Alignement

Alignement de texte

Ces classes servent à aligner horizontalement le contenu: .left-align, .right-align et .center-align.

Ceci devrait être aligné à gauche

Ceci devrait être aligné à droite

Ceci devrait être centré


  <div>
    <h5 class="left-align">This should be left aligned</h5>
  </div>
  <div>
    <h5 class="right-align">This should be right aligned</h5>
  </div>
  <div>
    <h5 class="center-align">This should be center aligned</h5>
  </div>
        

Alignement vertical

Vous pouvez facilement centrer verticalement les choses en ajoutant la classe valign-wrapper au conteneur contenant les éléments que vous souhaitez aligner verticalement.

Ceci devrait être aligné verticalement


<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>
        

Quick Floats

Flotter rapidement des choses en ajoutant la classe left ou right à l’élément. ! important est utilisé pour éviter les problèmes de spécificité.


<div class="left">...</div>
<div class="right">...</div>
        

Cacher/Afficher le contenu

Nous fournissons des classes faciles à utiliser pour cacher/afficher le contenu sur des tailles d’écran spécifiques.

Plage d’écran
.hide Hidden for all Devices
.hide-on-small-only Hidden for Mobile Only
.hide-on-med-only Hidden for Tablet Only
.hide-on-med-and-down Hidden for Tablet and Below
.hide-on-med-and-up Hidden for Tablet and Above
.hide-on-large-only Hidden for Desktop Only
.show-on-small Show for Mobile Only
.show-on-medium Show for Tablet Only
.show-on-large Show for Desktop Only
.show-on-medium-and-up Show for Tablet and Above
.show-on-medium-and-down Show for Tablet and Below

Utilisation


  <div class="hide-on-small-only"></div>
        

Formatage

Ces classes permettent de formater divers contenus sur votre site.

Troncature

Pour tronquer de longues lignes de texte dans une ellipse, ajoutez la classe truncate à la balise qui contient le texte. Voir un exemple ci-dessous d’un en-tête tronqué à l’intérieur d’une carte.

This is an extremely long title that will be truncated


  <h4 class="truncate">This is an extremely long title that will be truncated</h4>
        

Survol

Le hoverable est une classe survol qui ajoute une animation pour l’ombre de la boîte comme on le voit ci-dessous. Il peut être utilisé sur la plupart des éléments, mais destiné à être utilisé sur des cartes.

Titre de carte

Je suis une carte toute simple. Je suis très forte quand il est question de contenir des petites informations. Je suis pratique car je demande peu de configuration afin de fonctionner correctement.


  <div class="card-panel hoverable"> Hoverable Card Panel</div>
        

Browser Defaults

Étant donné que nous remplaçons plusieurs styles et éléments de navigateur par défaut, nous fournissons la classe .browser-default pour rétablir ces éléments dans leur état d’origine.

Name of Element Reverted Style
UL Bullet points
SELECT Browser default select element
INPUT Browser default input