Fondations

Espacements & grille

التباعد والشبكة

Une échelle unique en base 4px pour tous les espacements, un conteneur central de 78rem, et une grille de douze colonnes pour composer les pages. Les mêmes valeurs gouvernent le rythme vertical des sections, les rayons et les ombres.

Échelle d'espacement

Base 4px (0.25rem). Chaque valeur Tailwind (p-4, gap-6, -mt-10…) pointe sur ce même multiple.

0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px
164rem64px
205rem80px
246rem96px

Rythme vertical

Les sections de page respirent avec deux paliers, l'un pour le mobile, l'autre à partir de lg.

ContexteClasseUsage
Section de pagepy-12 lg:py-16Blocs empilés sur une page institutionnelle ou d'accueil
Section documentairepy-8 first:pt-0Rubriques de cette documentation (voir Section)
Carte / panneaup-5 sm:p-6Contenu intérieur d'une carte
Groupe de contrôlesgap-3 / gap-4Boutons, champs de formulaire côte à côte

Conteneur

dsm-container centre le contenu avec une largeur maximale de 78rem et une gouttière qui s'élargit à partir de md.

dsm-container — max-width: 78rem, padding-inline: 1.25rem (2rem à partir de md)
@utility dsm-container {
  width: 100%;
  max-width: var(--dsm-container); /* 78rem */
  margin-inline: auto;
  padding-inline: var(--dsm-gutter); /* 1.25rem */
  @media (width >= 48rem) {
    padding-inline: 2rem;
  }
}

Points de rupture

Les points de rupture par défaut de Tailwind CSS v4, sans surcharge.

PréfixeValeurEn pixelsUsage typique dans DSM
sm:40rem640pxBascule des colonnes de formulaire
md:48rem768pxGrilles de cartes à deux colonnes, gouttière du conteneur à 2rem
lg:64rem1024pxApparition de la barre latérale, sections py-16
xl:80rem1280pxGrilles à trois ou quatre colonnes
2xl:96rem1536pxPlafond visuel avant marge morte

Grille à douze colonnes

grid-cols-12 avec un empan (col-span-*) variable selon le point de rupture. Exemple : un contenu principal sur huit colonnes et une barre latérale sur quatre.

1
2
3
4
5
6
7
8
9
10
11
12
col-span-8 — contenu principal
col-span-4 — aside

Rayons

Les rayons suivent la fonction de l'élément, pas sa taille : contrôles, conteneurs, pastilles.

  • rounded-xs

    0.125rem

    Puces, indicateurs

  • rounded-sm

    0.25rem

    Badges, pastilles

  • rounded-md

    0.375rem

    Contrôles : boutons, champs

  • rounded-lg

    0.75rem

    Conteneurs : cartes, panneaux, popovers

  • rounded-xl

    1.25rem

    Blocs héros, illustrations

Ombres

Des ombres chaudes et discrètes, quatre paliers d'élévation seulement.

  • shadow-xs

    Repos — cartes, champs

  • shadow-sm

    Légère élévation — en-têtes fixes

  • shadow-md

    Survol, éléments relevés

  • shadow-lg

    Superpositions — popovers, dialogues

Utilisation

<div className="dsm-container py-12 lg:py-16">
  <div className="grid grid-cols-12 gap-6">
    <main className="col-span-12 sm:col-span-8">…</main>
    <aside className="col-span-12 sm:col-span-4">…</aside>
  </div>
</div>

Une seule échelle

N'introduisez pas de valeurs arbitraires (mt-[13px]) : composez toujours à partir de l'échelle 4px, y compris pour les décalages fins d'icônes ou de libellés.