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 <style> si c'est petit.

Étape 3

Coller dans Custom Code

Project Settings → Custom Code → Head Code. Liez la feuille de style ou collez le bloc <style> inline.

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

Étape 4

Le référencer dans le Designer

Tapez var(--XX) directement dans un champ width, padding, gap ou font-size au lieu d'un nombre fixe.

width: var(--220)
padding: var(--32)
gap: var(--16)

Étape 5

Idem pour les couleurs

Référencez les variables de couleur OKLCH partout où Webflow accepte une valeur personnalisée.

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

Étape 6

Supprimer les breakpoints redondants

Un champ piloté par une variable fluide scale déjà tout seul — laissez les autres breakpoints du Designer intacts pour cette propriété.

Règles importantes

Règle 1

Publier pour voir le résultat

Custom Code ne s'exécute que sur le site publié ou en staging, pas toujours en direct dans le canvas du Designer.

Règle 2

Une seule source de vérité

Gardez $sizes synchronisé avec ce qui est réellement tapé dans les champs Webflow.

Règle 3

Ne pas lutter contre les breakpoints

Pour une propriété sur une variable fluide, laissez les autres breakpoints tranquilles plutôt que d'ajouter des surcharges.

Règle 4

Jamais de valeur codée en dur

Toujours var(--XX), jamais XXpx — même règle que partout ailleurs dans EVA.