Le cœur d'EVA CSS
Le fluide scale
là où les breakpoints sautent.
Un seul clamp() remplace trois media queries. Les designs coulent. Les layouts respirent. Faites glisser les sliders ci-dessous.
La révélation clamp()
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
Titre responsive
Padding, gap, typo et bouton — tous pilotés par une seule formule clamp(). Lisse sur tous les viewports.
Breakpoint vs fluide
Même composant, deux stratégies. Un seul slider pilote les deux. Regardez la gauche sauter. Regardez la droite glisser.
Carte breakpoint
Saute à 768 / 1024 / 1440
Carte fluide
Continu entre 320 et 1920
Quatre modifiers de taille
Un token, quatre comportements de scaling. --220 standard. --220_ reduced. --220__ extreme. --220- extended.
La configuration canonique
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);
}Une seule feuille, deux modes de fluidité
Les tokens EVA peuvent désormais suivre soit la fenêtre (vw, par défaut), soit n'importe quel conteneur (cqi) — on bascule un sous-arbre à la volée, sans rebuild ni second fichier. La courbe fluide d'EVA est inchangée : rendu identique aux versions précédentes par défaut.
Chaque token passe désormais par une custom property commutable au lieu d'une unité figée au build.
.card {
container-type: inline-size;
--eva-fluid-unit: 1cqi;
}
/* les tokens de cette card suivent sa propre largeur, pas la fenêtre */.eva-cqi et .eva-root posent container-type et l'override cqi d'un coup, sans risque de les oublier.
<div class="eva-cqi">...</div>
<div class="eva-root">...</div>$min-font-size (défaut 0 = off) empêche le texte fluide de descendre sous un seuil lisible dans un petit conteneur ou sur mobile. Ce plancher est la taille mobile, pas la taille desktop — 13-14px est une valeur recommandée.
@use 'eva-css-fluid' with (
$min-font-size: 14
);@use 'eva-css-fluid' with (
$sizes: (4, 8, 16, 24, 48),
$font-sizes: (16, 24, 48),
$unit-fluid: 1vw, // unité fluide + fallback : 1vw | 1cqi
$reference-width: 1440, // largeur où les tokens atteignent leur max (défaut 1440)
$min-font-size: 14 // plancher a11y en px (défaut 0 = off)
);
100 % rétrocompatible. Pas de --eva-fluid-unit défini → fallback 1vw → valeur calculée identique à avant. fluidRuntime: false reproduit l'ancienne sortie octet pour octet.
vw vs cqi — qui suit quoi ?
Même slider, même largeur de frame. Regardez laquelle des deux cards bouge : la card cqi suit sa propre boîte, la card vw reste calée sur votre vraie fenêtre de navigateur.
vw
clamp(1.125rem, 5vw, 4rem) — lit la vraie fenêtre, pas cette frame.
cqi
clamp(1.125rem, 5cqi, 4rem) — lit la largeur de cette frame.
Faites glisser le slider — seule la card cqi bouge, car c'est la frame qui se redimensionne, pas votre navigateur. Redimensionnez maintenant votre vraie fenêtre : c'est la card vw qui réagit. Fenêtre réelle actuelle : 1920px.
Pourquoi ça existe
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.
La référence complète tient dans un seul fichier.
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.