coastdigitalgroup/coastai-skills

Système d'Espacement Fluide

Objectif

La compétence Système d'Espacement Fluide fournit une méthodologie pour créer une échelle responsive de blancs (marges, paddings, gaps) qui s'adapte progressivement à la fenêtre d'affichage de l'utilisateur. En utilisant la fonction CSS clamp(), l'espacement évolue linéairement entre des valeurs minimales et maximales définies, maintenant une harmonie visuelle et des proportions cohérentes sans avoir recours à des media queries excessives.

Cas d'Utilisation

• Établir une échelle d'espacement fondamentale pour un nouveau système de design.
• Moderniser un site web pour améliorer la cohérence visuelle sur mobile, tablette et desktop.
• Concevoir des mises en page de haute qualité où les blancs doivent respirer sur les grands écrans tout en restant compacts sur les petits écrans.
• Remplacer un espacement fixe basé sur les pixels par un système plus flexible et adaptatif.

Quand NE PAS Utiliser

• Pages Simples et Non Responsives : Si la mise en page est extrêmement basique ou n'a pas d'exigences responsives.
• Mises en Page Strictement Fixes : Lorsque les spécifications de conception imposent des valeurs pixel exactes et non négociables à toutes les résolutions.
• Prise en Charge des Navigateurs Obsolètes : Si le public cible utilise principalement des navigateurs qui ne supportent pas CSS clamp() (par exemple, Internet Explorer).

Entrées

Pour générer un système d'espacement fluide, vous avez besoin de :

1. Plage de la Fenêtre d'Affichage :
   • min-width : La largeur d'écran à laquelle la mise à l'échelle commence (par exemple, 320px).
   • max-width : La largeur d'écran à laquelle la mise à l'échelle s'arrête (par exemple, 1280px).
2. Unité de Base d'Espacement :
   • min-size : L'unité de base (par exemple, 16px) à min-width.
   • max-size : L'unité de base (par exemple, 20px) à max-width.
3. Rapport d'Échelle :
   • Un multiplicateur pour déterminer les paliers de l'échelle (par exemple, 1.25 pour une échelle Tiers Majeure, ou une progression linéaire 2x/3x/4x).

Sorties

1. Échelle d'Espacement Fluide : Un ensemble de variables CSS définissant des valeurs allant de « très petite » à « très grande » en utilisant clamp().
2. Correspondance Sémantique : Des directives sur la façon d'appliquer ces tokens (par exemple, --space-m pour le padding des composants, --space-xl pour les marges des sections).
3. Documentation d'Utilisation : Des règles pour combiner les unités afin de maintenir le rythme vertical et l'alignement horizontal.

Workflow

1. Définir les Paramètres de l'Échelle

Définissez les limites de votre système fluide en fonction des appareils cibles du projet. Exemple : 320px (Mobile) à 1440px (Desktop), avec une unité de base allant de 16px à 24px.

2. Choisir un Rapport d'Espacement

Décidez comment les paliers d'espacement doivent croître.

• Linéaire/Multiplicatif : Les paliers sont des multiples de l'unité de base (par exemple, 0.5x, 1x, 1.5x, 2x, 4x, 8x). Idéal pour un alignement prévisible.
• Échelle Géométrique : Chaque palier est le palier précédent multiplié par un rapport (par exemple, 1.25). Idéal pour des mises en page artistiques avec un contraste élevé.

3. Calculer les Paliers de l'Échelle

Créez une gamme de tailles. Une échelle typique comprend :

• 3XS à XS : Pour les petits détails, les listes serrées et le padding interne des boutons.
• S à M : Pour l'espacement standard des composants et les gouttières.
• L à 3XL : Pour les marges des sections, l'espacement des héros et les principaux écarts de mise en page.

4. Générer les Formules CSS clamp()

Convertissez les valeurs pixel en formules fluides. clamp(min_rem, intercept_rem + slope_vw, max_rem)

Calcul de la pente : (max_px - min_px) / (max_viewport - min_viewport) * 100

5. Attribuer des Rôles Sémantiques

Mappez l'échelle abstraite à des rôles fonctionnels pour garantir la cohérence au sein de l'équipe.

• space-component : --space-s
• space-layout-gutter : --space-m
• space-section : --space-xl

Règles de Décision

• Principe de la Grille 8pt : Dans la mesure du possible, assurez-vous que vos valeurs min/max sont des multiples de 4 ou 8 pour s'aligner sur les motifs d'interface utilisateur standard.
• Principe de Proximité : Les éléments apparentés doivent avoir moins d'espace entre eux que les éléments non apparentés.
• Compression Mobile : Gardez les petites unités d'espacement (3XS-S) relativement stables ; seules les grandes unités (L-3XL) doivent s'adapter fortement pour éviter que les mises en page mobiles ne paraissent « explosées ».
• Accessibilité : Assurez-vous que, même à la plus petite échelle, les éléments interactifs conservent une zone de contact suffisamment grande (minimum 24x24px selon WCAG 2.2 SC 2.5.8, y compris le padding ; 44x44px pour les actions principales).
• Espacement Relatif au Conteneur : Pour un espacement qui doit répondre au conteneur d'un composant plutôt qu'à la fenêtre d'affichage (par exemple, une carte pouvant se trouver dans une barre latérale étroite ou une colonne principale large), utilisez les unités de longueur de requête de conteneur (cqi/cqw) dans la formule clamp() au lieu de vw.

Contraintes

• Responsivité : L'espacement ne doit jamais provoquer de débordement horizontal.
• Cohérence : Une fois l'échelle définie, n'utilisez pas de valeurs pixel uniques.
• Hiérarchie : Un espacement plus grand doit toujours être utilisé pour séparer des blocs de contenu plus grands (par exemple, les sections), tandis qu'un espacement plus petit est réservé aux détails internes des composants.
• Périmètre : Cette compétence couvre uniquement les valeurs d'espacement — elle ne crée pas de grille de mise en page (utilisez responsive-grid-system), ne définit pas de tailles typographiques (utilisez fluid-typography-system), et ne gère pas les index z/les calques.

Schémas d'Échec Courants

• Tout Mettre à l'Échelle de Manière Égale : Mettre trop à l'échelle les petits paddings (comme 4px) peut déformer les composants sur desktop.
• Ignorer les Gouttières de Mise en Page : Avoir un espacement fluide des composants mais des gouttières de grille fixes, entraînant une « dérive » de l'alignement.
• Échelle Trop Importante : Avoir plus de 20 paliers d'espacement différents rend le système difficile à utiliser et à maintenir. Visez 7 à 9 paliers.
• Pas de Progression Logique : Utiliser des nombres arbitraires au lieu d'une échelle ou d'un rapport cohérent.

Critères de Validation

• L'espacement s'adapte progressivement lorsque la fenêtre d'affichage est redimensionnée.
• Le rythme vertical est maintenu à tous les points de rupture majeurs.
• Aucune valeur pixel unique n'est utilisée dans l'implémentation ; tout l'espacement utilise les variables définies.
• Le système utilise des unités rem pour les limites min et max de la fonction clamp().
• La proximité et la hiérarchie sont renforcées par les choix d'espacement.
• Les éléments interactifs conservent au moins une zone de contact de 24x24px (WCAG 2.2 SC 2.5.8) à chaque point de l'échelle fluide, y compris la plus petite fenêtre d'affichage.