Skip to main content

Responsive

Breakpoints​

Patrimo utilise les breakpoints Tailwind CSS par défaut (non customisés).

NomMin-widthUsage typique
sm640 pxPetit mobile paysage / grande tablette portrait
md768 pxTablette / petit laptop
lg1024 pxLaptop standard
xl1280 pxLaptop large / desktop
2xl1536 pxGrand desktop (limite max du contenu)

Les classes Tailwind sont mobile-first : text-sm md:text-base lg:text-lg signifie « sm par défaut (mobile), base à partir de md, lg à partir de lg ».

Max-width du contenu​

Le layout authentifié limite le contenu à max-w-screen-2xl (1536 px) et le centre :

<main className="flex-1 overflow-y-auto">
  <div className="p-6 lg:p-8 max-w-screen-2xl mx-auto">
    {children}
  </div>
</main>

Au-delà de 1536 px, un gouttière neutre s'étend de part et d'autre.

La sidebar (voir Navigation) est fixe en largeur (220 px expandée, 64 px repliée) et ne se transforme pas en menu mobile actuellement. Le mode replié est l'équivalent d'un menu compact.

Roadmap

Un vrai mode mobile (drawer / bottom nav) n'est pas encore documenté. À ajouter dans un ADR si décidé.

Ciblage des écrans cibles​

  • Primary : laptop 13-16" (1280 × 800 à 2560 × 1600)
  • Secondary : desktop 27" (2560 × 1440)
  • Tertiary : tablette portrait 10-13"
  • Non prioritaire (mais testé) : mobile portrait

Les captures d'écran de la doc sont générées à 1280 × 800 en light + dark pour refléter l'usage principal.

Grilles​

Pattern typique d'une grille KPI responsive :

<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
  {kpis.map(k => <KpiCard {...k} />)}
</div>
  • Mobile : 1 colonne
  • Tablette : 2 colonnes
  • Desktop : 4 colonnes

Règles​

  • Mobile-first : écrire d'abord les classes sans préfixe, ajouter les variantes md:, lg:, xl: pour les viewports plus larges
  • Pas de max-width arbitraire sur les cartes — elles s'adaptent à la grille parente
  • Tests : vérifier 360 px (mobile), 768 px (tablette), 1280 px (laptop), 1920 px (desktop)

Voir aussi​