Fluid Ycode with custom CSS

Ycode's per-class custom CSS field accepts raw CSS. Load EVA's compiled variables once, then reference var(--XX) wherever you'd normally type a pixel value.

What you need

A compiled stylesheet

$build-class: false

Fluid var(--XX) and OKLCH color variables only — Ycode's own class system stays untouched.

Somewhere to host it

CDN / repo

Custom Code accepts a stylesheet link or an inline <style> block.

Project or page settings

Custom Code

You need access to the Custom Code panel — project-wide (head) or per page.

Workflow

Step 1

Compile EVA variables

$build-class: false — a lean :root block of fluid var(--XX) and OKLCH color variables.

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 32, 64, 128),
  $font-sizes: (14, 16, 20, 24, 32),
  $build-class: false
);

Step 2

Host or inline it

Push the compiled CSS to a CDN/repo URL, or paste it inline inside a <style> tag if it's small.

Step 3

Paste into Custom Code

Project Settings → Custom Code (or Page Settings). Link the stylesheet or paste the inline block.

<link rel="stylesheet" href="https://cdn.example.com/eva-vars.css">

Step 4

Reference it per class

In the element's Custom CSS field, write padding, gap or font-size against var(--XX) instead of a fixed value.

padding: var(--32);
gap: var(--16);
font-size: var(--fs-24);

Step 5

Same for colors

Reference the OKLCH color variables in the same Custom CSS field, e.g. background: var(--brand).

background: var(--brand);
color: var(--dark);

Step 6

Drop redundant breakpoints

A property already driven by a fluid var scales on its own — remove the tablet/mobile overrides for it.

Important rules

Rule 1

Custom CSS wins, carefully

Per-class custom CSS overrides Ycode's visual controls for that property — keep it scoped to what EVA drives.

Rule 2

One source of truth

Keep $sizes in sync with what's actually referenced in your classes' custom CSS.

Rule 3

Don't fight the breakpoints

For a property on a fluid var, leave the other breakpoints alone instead of adding overrides on top.

Rule 4

Never hardcode

Always var(--XX), never XXpx — same rule as everywhere else in EVA.