← Lab
Open source

EVA CSS

A 100% fluid sizing system, not responsive: the scale breathes between its bounds instead of jumping from step to step. 99% fewer breakpoints.

Field
SCSSFluid CSSEVA CSS
Year
2024
Link
See the project ↗
EVA CSS

EVA CSS turns a frozen mockup into a system that breathes. Where classic frameworks cut the screen into steps (mobile, tablet, desktop), EVA varies every dimension continuously with clamp(). No threshold, no jump: the design intent holds from the smallest screen to the largest.

Fluid, not responsive

That is the whole distinction. Responsive reacts in jumps at breakpoints; fluid interpolates. EVA thinks in proportional relationships rather than absolute sizes. Visual harmony is preserved everywhere, and browser zoom stops breaking the layout. In concrete terms: 99% fewer breakpoints.

What it settles

Writing fluid CSS by hand guarantees inconsistency by the end of a project: the calculations get copied, get wrong, drift. EVA industrialises the scale with a single source of truth for sizing, typography and spacing. One grid, one rhythm, one intent.

In practice

Written in SCSS, published on NPM, modular: EVA grafts onto any stack. The outcome of ten years of in-house frameworks, it closes the gap between the intent (the Figma mockup) and the implementation, with immediate feedback on resize.

Going further
NotesThe old dream of fluid CSSI spent fifteen years working around the same problem. A piece of text, a margin, a grid: three values that should grow with the screen, and no tool to do it cleanly. We called it…Read the note →
On the same topic
NotesWhat responsive still costsOpen the stylesheet of any site delivered this year. You will almost always find the same thing: three or four breakpoint widths, and under each of them, the same values…Read the note →NotesA system, not screensMany sites are a collection of screens designed one by one. Each page has its own sizes, its own margins, its own approximate colours. From a distance it holds. Up close, nothing…Read the note →ProjectSkipcallAn AI dialer sold in motion, not in promises.See the project →ProjectFlorian RonziA CTO's portfolio, in black and in relief.See the project →

Other experiments

All of the lab →
02Blow out the candlesOnline game
Contact
Your project becomes the next point of focus.
Turn on at least 2 areas of expertise to reach me