Fluide Webflow sans quitter le Designer

Webflow n'a pas de build à lui. Compilez EVA CSS en amont, chargez-le en Custom Code, puis tapez var(--XX) directement dans n'importe quel champ de taille, d'espacement ou de couleur.

Ce qu'il vous faut

Une feuille de style compilée

$build-class: false

Variables uniquement — Webflow a déjà son propre système de classes, vous n'avez besoin que des variables fluides var(--XX) et des couleurs OKLCH.

Un endroit pour l'héberger

CDN / repo

Custom Code peut lier une feuille de style externe, ou vous pouvez l'inliner directement si elle reste petite.

Accès aux Project Settings

Custom Code

Il vous faut la permission d'éditer le head code du site — Designer ou propriétaire du plan Site.

Workflow

Étape 1

Compiler les variables EVA

$build-class: false — un bloc :root minimal de var(--XX) fluides et de variables de couleur OKLCH, rien d'autre.

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

Étape 2

Héberger ou inliner

Poussez le CSS compilé sur une URL CDN/repo, ou collez-le inline dans une balise