The core of EVA CSS
One clamp() replaces three media queries. Designs flow. Layouts breathe. Drag the sliders below.
Drag the slider. The viewport simulator narrows. The content inside scales smoothly — no breakpoints, no jumps.
Live preview
Padding, gap, type and button — all driven by one clamp() formula. Smooth across every viewport.
Same component, two strategies. One slider drives both. Watch the left jump. Watch the right glide.
Jumps at 768 / 1024 / 1440
Continuous between 320 and 1920
One token, four scaling behaviors. --220 standard. --220_ reduced. --220__ extreme. --220- extended.
One @use. The sizes you actually use. EVA generates the rest.
@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(...); /* reduced */
--16__: clamp(...); /* extreme */
--16-: clamp(...); /* extended */
--fs-24, --fs-24_, --fs-24__.card {
padding: var(--32);
gap: var(--16);
font-size: var(--fs-16);
}Twenty years of front-end design. I sit between designers and developers — and I see the same gap every time. Designers ship Figma values that developers translate into rigid breakpoints, and the design intent gets lost between two paradigms.
EVA CSS turns every fixed Figma value into a fluid, responsive variable. The maths happens once, the result holds across every viewport, and the original visual hierarchy survives the trip from canvas to code.
Every variable, modifier, and formula lives in /llms.txt. Copy it into Claude, ChatGPT, or Cursor — your assistant now knows EVA CSS by heart.