Fondations
Les fondations définissent les règles visuelles, structurelles et techniques qui assurent la cohérence du Design System.
Grille
La grille générale repose sur 12 colonnes. Les classes .is-span-* sont des raccourcis de répartition pour les enfants directs .app-module de .app-module-grid.
Patterns responsive
La grille reste basée sur 12 colonnes. Les onglets ci-dessous distinguent la répartition de référence desktop et les adaptations possibles en tablette ou mobile.
Desktop — répartition de référence
Sur desktop, les classes .is-span-* décrivent l’occupation de la grille principale.
.is-span-4.is-span-2-2.is-span-3-1.is-span-1-3.is-span-2-1.is-span-1-2.is-span-2-1-1.is-span-1-1-1.is-span-1-1-1-1Tablette — adaptation selon le contenu
La tablette conserve la logique 12 colonnes. Certains modules peuvent s’empiler, tandis que les composants compacts peuvent rester en plusieurs colonnes.
| Cas | Comportement | Usage |
|---|---|---|
| Contenu dense | 12 colonnes | Panels longs, tableaux, formulaires ou textes importants. |
| Deux blocs lisibles | 2 x 6 colonnes possible | Deux modules courts qui restent confortables côte à côte. |
| Grille compacte | 4 colonnes | Stats, raccourcis ou mini-cartes. Variante disponible : .is-tablet-4-cols. |
| Grille compacte responsive | 4 colonnes | À combiner avec .is-mobile-2-cols pour obtenir 4 colonnes en tablette puis 2 colonnes en mobile. |
Mobile — empilement ou grille compacte
Le mobile n’empile pas automatiquement tous les modules. Le choix dépend de la densité du contenu.
| Cas | Comportement | Usage |
|---|---|---|
| Contenu standard | 12 colonnes | Composants larges, formulaires, panels détaillés ou contenu textuel. |
| Composants compacts | 2 x 6 colonnes | Deux colonnes mobiles pour stats, mini-cartes ou raccourcis. Variante disponible : .is-mobile-2-cols. |
| Grille compacte responsive | 2 x 6 colonnes | À combiner avec .is-tablet-4-cols pour conserver 4 colonnes en tablette puis 2 colonnes en mobile. |
| Couche pleine largeur mobile | .app-layer.is-mobile-full | À utiliser seulement quand la couche doit réellement toucher les bords en mobile. |
Exemple compact : .app-module-grid.is-span-1-1-1-1.is-tablet-4-cols.is-mobile-2-cols permet d’afficher 4 modules par ligne en desktop/tablette, puis 2 modules par ligne en mobile.
Le responsive dépend du contenu : les composants denses s’empilent, les composants courts peuvent conserver 2 colonnes en mobile ou 4 colonnes en tablette.