📦 Boxs

Les box sont un composant clé d’Orochi : ils servent à centrer, limiter la largeur et structurer votre contenu de façon responsive sur tous les appareils.

Comment ils fonctionnent

Les box sont l'élément de mise en page le plus basique d’Orochi et sont indispensables à l'utilisation de notre système de grille par défaut. Ils servent à contenir, remplir et (parfois) centrer le contenu. Bien que les box puissent être imbriqués, la plupart des mises en page n'en nécessitent pas.

Orochi est livré avec trois box différents :

  • .o-box, qui définit un max-width à chaque point d'arrêt réactif
  • .o-box-{breakpoint}, qui dure width: 100% jusqu'au point d'arrêt spécifié
  • .o-box-fluid, qui est width: 100% à tous les points d'arrêt

Box standard

Notre .box classe par défaut est un conteneur réactif à largeur fixe, ce qui signifie qu'il max-width change à chaque point d'arrêt.

<div class="o-box">
    Contenu centré avec largeur responsive
</div>

Box réactifs

<div class="o-box-phone"></div>
<div class="o-box-tablet"></div>
<div class="o-box-laptop"></div>
<div class="o-box-desktop"></div>
<div class="o-box-tv"></div>

Box fluide

À utiliser .box-fluid pour un conteneur pleine largeur, couvrant toute la largeur de la fenêtre d'affichage.

<div class="o-box-fluid">
    Contenu pleine largeur
</div>

💡 Bonnes pratiques

  • Utilisez toujours un conteneur comme élément racine
  • Combine avec le système de grille pour des layouts complexes
  • Préférez les box responsives pour le mobile-first