📐 Système de Grille Orochi

Utilisez notre puissante grille flexbox mobile-first pour créer des mises en page de toutes formes et tailles grâce à un système à douze colonnes, six niveaux réactifs par défaut, des variables CSS et des dizaines de classes prédéfinies.

Table des matières

Comment ça marche

Le système de grille Orochi utilise une série de conteneurs, lignes et colonnes pour organiser et aligner le contenu. Il est construit avec flexbox et est entièrement responsive. Voici un aperçu et une explication détaillée:

Les trois composants principaux:
  1. Conteneurs (.o-box, .o-box-fluid) - Centrent et alignent horizontalement votre contenu
  2. Lignes (.o-row) - Conteneurs horizontaux pour les colonnes
  3. Colonnes (.o-col-*) - Où votre contenu réside réellement
O
R
O
C
H
I 
<div class="o-box">
  <div class="o-row">
    <div class="o-col">Colonne</div>
    <div class="o-col">Colonne</div>
    <div class="o-col">Colonne</div>
  </div>
</div>

Options de grille

Le système de grille Orochi s'adapte à travers six breakpoints. Les breakpoints sont basés sur des media queries @media et représentent une plage de tailles de vue courantes.

Extra phoneall
<576px		 phoneall
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 tv
≥1400px
Préfixe de classe .o-col- .o-col-phone- .o-col-tablet- .o-col-laptop- .o-col-desktop- .o-col-tv-
Largeur du conteneur 100% 540px 720px 960px 1140px 1320px

Mise en page automatique

Avec la mise en page automatique, vous pouvez créer des colonnes de largeur égale sans spécifier de largeur numérique. Les colonnes s'adapteront automatiquement à la largeur disponible.

Colonnes de largeur égale

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3 
<div class="o-row">
  <div class="o-col">1 of 2</div>
  <div class="o-col">2 of 2</div>
</div>

<div class="o-row">
  <div class="o-col">1 of 3</div>
  <div class="o-col">2 of 3</div>
  <div class="o-col">3 of 3</div>
</div>

Réglage d'une colonne

Vous pouvez définir la largeur d'une colonne et laisser les autres s'ajuster automatiquement autour d'elle.

1 of 3
2 of 3 (largeur 50%)
3 of 3
1 of 3
2 of 3 (largeur 41.6667%)
3 of 3 
<div class="o-row">
  <div class="o-col">1 of 3</div>
  <div class="o-col-6">2 of 3</div>
  <div class="o-col">3 of 3</div>
</div>

<div class="o-row">
  <div class="o-col">1 of 3</div>
  <div class="o-col-5">2 of 3</div>
  <div class="o-col">3 of 3</div>
</div>

Grille responsive

Les grilles responsive d'Orochi vous permettent de créer des mises en page adaptatives qui s'ajustent dynamiquement en fonction de la taille de l'écran.

Tous les breakpoints

Pour les grilles qui sont les mêmes depuis les appareils mobiles jusqu'aux grands bureaux, utilisez les classes .o-col et .o-col-*.

.o-col-tablet-8
.o-col-tablet-4
.o-col-tablet-4
.o-col-tablet-4
.o-col-tablet-4
.o-col-6 .o-col-tablet-4
.o-col-6 .o-col-tablet-4
.o-col-6 .o-col-tablet-4
<div class="o-row">
  <div class="o-col-tablet-8">.o-col-tablet-8</div>
  <div class="o-col-tablet-4">.o-col-tablet-4</div>
</div>

<div class="o-row">
  <div class="o-col-tablet-4">.o-col-tablet-4</div>
  <div class="o-col-tablet-4">.o-col-tablet-4</div>
  <div class="o-col-tablet-4">.o-col-tablet-4</div>
</div>

<div class="o-row">
  <div class="o-col-6 o-col-tablet-4">.o-col-6 .o-col-tablet-4</div>
  <div class="o-col-6 o-col-tablet-4">.o-col-6 .o-col-tablet-4</div>
  <div class="o-col-6 o-col-tablet-4">.o-col-6 .o-col-tablet-4</div>
</div>

Mélange et correspondance

Vous pouvez créer différents layouts en combinant les classes pour différents breakpoints.

.o-col-12 .o-col-tablet-8 .o-col-desktop-6
.o-col-12 .o-col-tablet-4 .o-col-desktop-6
<div class="o-row">
  <div class="o-col-12 o-col-tablet-8 o-col-desktop-6">.o-col-12 .o-col-tablet-8 .o-col-desktop-6</div>
  <div class="o-col-12 o-col-tablet-4 o-col-desktop-6">.o-col-12 .o-col-tablet-4 .o-col-desktop-6</div>
</div>

Alignement

Utilisez les utilitaires flexbox pour aligner verticalement et horizontalement les colonnes.

Alignement vertical

Aligné en haut
Aligné en haut
Aligné en haut
Aligné au centre
Aligné au centre
Aligné au centre
Aligné en bas
Aligné en bas
Aligné en bas
<!-- Alignement en haut -->
<div class="o-row o-align-items-start">
  <div class="o-col">...</div>
  <div class="o-col">...</div>
  <div class="o-col">...</div>
</div>

<!-- Alignement au centre -->
<div class="o-row o-align-items-center">
  <div class="o-col">...</div>
  <div class="o-col">...</div>
  <div class="o-col">...</div>
</div>

<!-- Alignement en bas -->
<div class="o-row o-align-items-end">
  <div class="o-col">...</div>
  <div class="o-col">...</div>
  <div class="o-col">...</div>
</div>

Alignement horizontal

Aligné à gauche
Aligné à gauche
Aligné au centre
Aligné au centre
Aligné à droite
Aligné à droite
Espacement autour
Espacement autour
Espacement entre
Espacement entre
<!-- Alignement à gauche -->
<div class="o-row o-justify-content-start">...</div>

<!-- Alignement au centre -->
<div class="o-row o-justify-content-center">...</div>

<!-- Alignement à droite -->
<div class="o-row o-justify-content-end">...</div>

<!-- Espacement autour -->
<div class="o-row o-justify-content-around">...</div>

<!-- Espacement entre -->
<div class="o-row o-justify-content-between">...</div>

Gouttières

Les gouttières (espacement entre les colonnes) peuvent être facilement ajustées avec les classes .o-g-*.

Gouttières par défaut

Colonne
Colonne
Colonne

Gouttières étroites (.o-g-1)

Colonne
Colonne
Colonne

Gouttières larges (.o-g-5)

Colonne
Colonne
Colonne
<!-- Gouttières par défaut -->
<div class="o-row">
  <div class="o-col">Colonne</div>
  <div class="o-col">Colonne</div>
  <div class="o-col">Colonne</div>
</div>

<!-- Gouttières étroites -->
<div class="o-row o-g-1">
  <div class="o-col">Colonne</div>
  <div class="o-col">Colonne</div>
  <div class="o-col">Colonne</div>
</div>

<!-- Gouttières larges -->
<div class="o-row o-g-5">
  <div class="o-col">Colonne</div>
  <div class="o-col">Colonne</div>
  <div class="o-col">Colonne</div>
</div>

Décalages de colonnes

Vous pouvez décaler les colonnes de deux manières: nos classes de décalage responsive .o-offset-*-* et les utilitaires de marge.

Classes de décalage

.o-col-tablet-4
.o-col-tablet-4 .o-offset-tablet-4
.o-col-tablet-3 .o-offset-tablet-3
.o-col-tablet-3 .o-offset-tablet-3
.o-col-tablet-6 .o-offset-tablet-3
<div class="o-row">
  <div class="o-col-tablet-4">.o-col-tablet-4</div>
  <div class="o-col-tablet-4 o-offset-tablet-4">.o-col-tablet-4 .o-offset-tablet-4</div>
</div>

<div class="o-row">
  <div class="o-col-tablet-3 o-offset-tablet-3">.o-col-tablet-3 .o-offset-tablet-3</div>
  <div class="o-col-tablet-3 o-offset-tablet-3">.o-col-tablet-3 .o-offset-tablet-3</div>
</div>

<div class="o-row">
  <div class="o-col-tablet-6 o-offset-tablet-3">.o-col-tablet-6 .o-offset-tablet-3</div>
</div>

Imbrication de grilles

Pour imbriquer votre contenu avec la grille par défaut, ajoutez une nouvelle .o-row et un ensemble de colonnes .o-col-* dans une colonne existante.

Niveau 1: .o-col-phone-8
Niveau 2: .o-col-4 .o-col-phone-6
Niveau 2: .o-col-8 .o-col-phone-6
Niveau 1: .o-col-phone-4 
<div class="o-row">
  <div class="o-col-phone-8">
    Niveau 1: .o-col-phone-8
    <div class="o-row">
      <div class="o-col-4 o-col-phone-6">
        Niveau 2: .o-col-4 .o-col-phone-6
      </div>
      <div class="o-col-8 o-col-phone-6">
        Niveau 2: .o-col-8 .o-col-phone-6
      </div>
    </div>
  </div>
  <div class="o-col-phone-4">
    Niveau 1: .o-col-phone-4
  </div>
</div>

💡 Bon à savoir

Le système de grille Orochi est entièrement responsive et s'adapte à tous les appareils. N'oubliez pas d'utiliser les classes de gouttières .o-g-* pour contrôler l'espacement entre les colonnes et les utilitaires d'alignement pour positionner votre contenu exactement comme vous le souhaitez.