Espace et densité
Une échelle à sept étapes pour chaque espace. Liée au raffinement (peu de valeurs, toujours les mêmes) et à "jamais compliqué" (espace pour que chaque chose soit vue dans sa propre intégrité).
Sur cette page
L'échelle
Tout espace provient d'une seule échelle à sept étapes. Personne ne choisit "environ 20 pixels" : vous choisissez une étape.
- space-1
- 4px
- space-2
- 8px
- space-3
- 16px
- space-4
- 24px
- space-5
- 40px
- space-6
- 64px
- space-7
- 96px
Plus proche, plus unis
Ce qui appartient ensemble reste proche (icône et mot : space-1) ; les parties différentes restent séparées (entre les sections : space-7). L'espace indique ce qui forme un groupe, pas des lignes ou des boîtes.
Do
RappelMardi, 9 hSauvegardeTout de nuit
Titre et détail ensemble ; un élément loin du suivant.
Don’t
RappelMardi, 9 hSauvegardeTout de nuit
Tout avec la même espacement : vous ne pouvez pas dire quel détail appartient à quel titre.
Aucun espace hors de l'échelle
Si aucune étape ne convient, la composition est incorrecte, pas l'échelle.
Densité dépend de l'écran
Les pages de lecture respirent. Les écrans de travail, avec des tableaux et des formulaires à scanner et agir en masse, sont compacts : data-density="compact" sur la zone de travail resserre les cellules et les contrôles et laisse le texte seul. Changer la densité anime : les lignes se rétractent, elles ne sautent pas.
| Planning | Lorsque |
|---|---|
| Sauvegarde hebdomadaire | Dimanche, 3 heures |
| Arroser les plantes | Mardi, 9 heures |
| Rapport mensuel | Le 1er, 8 h |
Largeur et grille
Une colonne de lecture dispose d'une mesure
Elle ne dépasse jamais la largeur confortable (measure-reading, environ 70 caractères par ligne).
Une grille ne grandit jamais au-delà de l'écran
Une colonne de grille, par défaut, ne se rétrécit pas en dessous de son contenu : un tableau large étire la colonne et toute la page commence à défiler horizontalement. Utilisez minmax(0, 1fr) pour les colonnes, et laissez le contenu large défiler dans sa propre boîte.
Do
Une colonne de lecture confortable permet à l'œil de revenir au début de la ligne suivante sans se perdre. Lorsque la ligne s'étend d'un bord à l'autre sur un écran large, chaque retour devient une recherche, et la lecture s'épuise avant la fin du paragraphe.
La colonne s'arrête à une mesure confortable, même avec de la place en surplus.
Don’t
Une colonne de lecture confortable permet à l'œil de revenir au début de la ligne suivante sans se perdre. Lorsque la ligne s'étend d'un bord à l'autre sur un écran large, chaque retour devient une recherche, et la lecture s'épuise avant la fin du paragraphe.
La ligne s'étend aussi loin que le boîtier le permet : sur un écran large, l'œil se perd dans le retour.
.colunas {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}Do
Planning · Quand · Statut · Exécution · Propriétaire · Dernière exécution
Une autre colonne
Avec minmax(0, 1fr), la colonne respecte le boîtier et le contenu large défile à l'intérieur.
Don’t
Planning · Quand · Statut · Exécution · Propriétaire · Dernière exécution
Une autre colonne
Avec 1fr, la colonne grandit avec son contenu et dépasse la ligne pointillée : sur mobile, toute la page défile horizontalement.
Cette règle vient d'une erreur réelle : le premier showcase de Feitio a défilé de 34px sur mobile à cause d'un tableau.