004Library

LAYOUT-LIB

J'ai conçu layout-lib pour combler l'écart entre la maquette Figma et le code. Les extensions de grille vivent en dehors du projet, chaque développeur les reconfigure à la main, et elles ne servent à rien sur un vrai téléphone. Ici la grille est un fichier versionné dans le repo, partagé par toute l'équipe.

L'overlay bascule seul entre mobile, tablette et desktop selon la largeur réelle du viewport, se règle à la souris, puis s'exporte en TypeScript, en variables CSS ou en config Tailwind.

Deux partis pris techniques : l'overlay est monté dans un shadow root et ne touche jamais au DOM de l'application, et il ne s'exécute qu'en développement via un import dynamique, donc le bundle de production ne contient pas une ligne de la librairie.

LAYOUT-LIB, image 1
LAYOUT-LIB, image 2
LAYOUT-LIB, image 3
LAYOUT-LIB, image 4
LAYOUT-LIB, image 5
LAYOUT-LIB, image 6
LAYOUT-LIB, image 7