LD Consulting — Structure des pages

Structure des pages

Une page du Design System se construit avec une chaîne stable : la couche définit la zone, le conteneur centre le contenu, la grille répartit les modules, puis chaque module reçoit un composant réel.

Patterns disponibles

Un pattern de page ne décrit pas un écran métier. Il définit uniquement la forme générale dans laquelle le contenu sera ensuite composé.

Page standard

Structure de base pour la majorité des pages : dashboard, listes, contenus, panels, tableaux ou pages métier.

Page 2 colonnes avec menu

Structure avec un menu secondaire en première colonne et une zone de contenu en seconde colonne.

Splash page

La splash page est une page custom spécifique. Elle peut rester dans les templates pour être modifiée manuellement, mais elle ne fait pas partie du système dynamique de construction des pages.

Structure canonique

Cette structure est la référence pour les pages standards, les templates structurels et les futures pages générées.

<main>
  <div class="app-layer is-background">
    <div class="app-page-content">
      <div class="app-module-grid is-span-2-1">
        <div class="app-module">
          <section class="app-panel">...</section>
        </div>
        <div class="app-module">
          <aside class="app-panel">...</aside>
        </div>
      </div>
    </div>
  </div>
</main>

`.app-layer`

Bande structurelle pleine largeur. Elle porte le contexte visuel de la zone : fond de page, surface, transparence ou exception mobile pleine largeur.

`.app-page-content`

Conteneur centré. Il limite la largeur utile et applique les espacements latéraux attendus, notamment en mobile.

`.app-module-grid`

Grille de composition. Elle expose des variantes lisibles comme .is-span-4, .is-span-2-2, .is-span-3-1 ou .is-span-1-3.

`.app-module`

Slot de contenu. Il reçoit un composant, une molécule ou un organisme. L’élément placé dedans prend toute la largeur disponible.

Fonds et surfaces

Le fond général des pages est piloté par --app-page-background. Les classes de fond doivent rester sur la couche, pas sur les composants internes.

Classe	Usage	Règle
`.app-layer.is-background`	Contenu principal standard	Utilise le fond général de page.
`.app-layer.is-surface`	Bande avec surface distincte	À réserver aux zones qui doivent se détacher du fond.
`.app-layer.is-transparent`	Fond parent visible	Ne pas utiliser pour masquer un problème d’espacement.
`.app-layer.is-muted`	Zone discrète	À utiliser uniquement si la couche doit rester visuellement neutre.

Responsive et mobile

.is-mobile-full est une exception structurelle. Elle s’applique uniquement à .app-layer quand une couche doit réellement toucher les bords sur mobile.

À faire

Utiliser .app-layer.is-mobile-full pour une splash, une bande immersive ou un bloc explicitement plein écran mobile.

À éviter

Ne pas appliquer .is-mobile-full à un composant interne, une card, un panel ou une grille.

À vérifier

Contrôler systématiquement le rendu en 390px et 430px.

Checklist avant création d’une page

Un seul <main> visible.
Le premier bloc de contenu standard est une .app-layer.
La largeur utile est portée par .app-page-content.
Les compositions internes utilisent .app-module-grid et .app-module.
Les fonds de page ou de section sont portés par la couche, pas par des classes locales.
Les exceptions splash ou plein écran mobile sont documentées dans le template concerné.

À éviter

Ne pas placer une largeur maximale directement sur .app-layer.

Ne pas remplacer .app-page-content par une classe locale de largeur.

Ne pas créer une grille locale si une variante .is-span-* existe.

Ne pas utiliser section.app-layer sans titre ou justification sémantique claire.