Le cœur d'EVA CSS
Un seul clamp() remplace trois media queries. Les designs coulent. Les layouts respirent. Faites glisser les sliders ci-dessous.
Faites glisser le slider. Le simulateur de viewport se rétrécit. Le contenu intérieur se redimensionne en douceur — pas de breakpoints, pas de sauts.
Aperçu en direct
Padding, gap, typo et bouton — tous pilotés par une seule formule clamp(). Lisse sur tous les viewports.
Même composant, deux stratégies. Un seul slider pilote les deux. Regardez la gauche sauter. Regardez la droite glisser.
Saute à 768 / 1024 / 1440
Continu entre 320 et 1920
Un token, quatre comportements de scaling. --220 standard. --220_ reduced. --220__ extreme. --220- extended.
Un seul @use. Les tailles que vous utilisez vraiment. EVA génère le reste.
@use 'eva-css-fluid' with (
$sizes: (4, 8, 16, 32, 64, 128),
$font-sizes: (14, 16, 24, 36, 52),
$build-class: true
);--16: clamp(...);
--16_: clamp(...); /* réduit */
--16__: clamp(...); /* extrême */
--16-: clamp(...); /* étendu */
--fs-24, --fs-24_, --fs-24__.card {
padding: var(--32);
gap: var(--16);
font-size: var(--fs-16);
}Vingt ans de design front-end. Je suis assis entre les designers et les développeurs — et je vois la même rupture à chaque fois. Les designers livrent des valeurs Figma que les développeurs traduisent en breakpoints rigides, et l'intention de design se perd entre les deux paradigmes.
EVA CSS transforme chaque valeur Figma fixe en variable fluide et responsive. Les maths se font une fois, le résultat tient sur tous les viewports, et la hiérarchie visuelle d'origine survit au passage du canvas au code.
Chaque variable, modificateur et formule vit dans /llms.txt. Copiez-le dans Claude, ChatGPT ou Cursor — votre assistant connaît EVA CSS par cœur.