Fluide Ycode avec du CSS personnalisé

Le champ CSS personnalisé par classe de Ycode accepte du CSS brut. Chargez les variables EVA compilées une fois, puis référencez var(--XX) partout où vous tapiez une valeur en pixels.

Ce qu'il vous faut

Une feuille de style compilée

$build-class: false

Variables fluides var(--XX) et couleurs OKLCH uniquement — le système de classes propre à Ycode reste intact.

Un endroit pour l'héberger

CDN / repo

Custom Code accepte un lien vers une feuille de style ou un bloc <style> inline.

Réglages projet ou page

Custom Code

Il vous faut l'accès au panneau Custom Code — au niveau du projet (head) ou par page.

Workflow

Étape 1

Compiler les variables EVA

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

@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 (ou Page Settings). Liez la feuille de style ou collez le bloc inline.

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

Étape 4

Le référencer par classe

Dans le champ Custom CSS de l'élément, écrivez padding, gap ou font-size avec var(--XX) au lieu d'une valeur fixe.

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

Étape 5

Idem pour les couleurs

Référencez les variables de couleur OKLCH dans le même champ Custom CSS, ex. background: var(--brand).

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

Étape 6

Supprimer les breakpoints redondants

Une propriété déjà pilotée par une variable fluide scale toute seule — retirez les surcharges tablette/mobile pour elle.

Règles importantes

Règle 1

Le CSS perso l'emporte, prudemment

Le CSS personnalisé par classe écrase les contrôles visuels de Ycode pour cette propriété — restez cantonné à ce qu'EVA pilote.

Règle 2

Une seule source de vérité

Gardez $sizes synchronisé avec ce qui est réellement référencé dans le CSS personnalisé de vos classes.

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.