Décorations
L'habillage des fonds de section : cellules filetées, coutures pleine largeur, semis de points et trame du hero. Aucune image, tout est dessiné en CSS, aligné sur la grille et décliné dans les deux thèmes. Chaque section de cette page porte le décor qu'elle explique.
La trame du hero
La rupture d'ouverture du site : une grille fine posée sur un dégradé qui part du noir teinté par la rampe turquoise et atterrit sur le fond de page, pour que la couture avec la section suivante disparaisse. Le pas de la grille suit le même alignement de rails que le reste de la page.
Les cellules
Le filetage vit sur les cellules de la grille : chacune porte son filet gauche et son filet haut, la dernière de sa rangée ajoute le droit. Les bords extérieurs deviennent les rails, la gouttière tient le texte à distance du trait, et le contenu garde sa mesure de lecture dans une rangée intérieure, sans filet.
L'enchaînement
Les sections n'ont aucun espacement propre : le rythme vertical vit dans les cellules. Les rails ne s'interrompent donc jamais d'une section à l'autre, et chaque frontière est marquée d'une seule couture, jamais deux, puisque personne ne porte de filet bas.
Les croisées
Là où une couture croise un filet vertical, deux traits fins marquent le point de croisement, un cran plus soutenus que le filet : chaque cellule épingle son angle. Regardez les coins hauts de cette section, et les intersections de la rangée de colonnes juste en dessous. C'est la marque de l'instrument, la structure se mesure, elle ne se devine pas.
Pré-étude
Quelques jours pour décider si le projet vaut la peine, avec une estimation chiffrée en sortie.
Pilote
Un périmètre réduit, des données réelles, et une mesure honnête de ce que ça change.
Déploiement
La mise en production, l'intégration au SI et la passation aux équipes. Les colonnes se filètent toutes seules, la gouttière fait la respiration.
La couture pleine largeur
Cette bande est en rule-bleed : ses deux coutures quittent le châssis et courent de bord à bord de l'écran. Les cellules rendent leur filet haut, la section suivante rend le sien, une couture n'existe jamais en double. Pour un seul côté, rule-bleed-top ou rule-bleed-bottom.
Le semis de points
Un semis dessiné en CSS, sans image. Le pas est recalculé à chaque largeur d'écran pour qu'une colonne de points tombe exactement sur chaque rail : le décor et le châssis ne font qu'un. En clair, le point prend la surface la plus dense de la rampe ; en sombre, un contraste presque éteint.
Affichage sombre
Le même semis sur le fond sombre : le point s'éteint au lieu de se creuser.