Addon · Tailles

Des espacements qui restent en harmonie.

Un nombre, quatre saveurs. Padding, marge, gap, largeur, hauteur — tous sur la même échelle fluide.

L'échelle

Un carré fluide à chaque palier. Redimensionnez la fenêtre pour les voir s'adapter d'un coup.

--4

--8

--12

--16

--20

--32

--52

--84

--136

--220

Même nombre, quatre courbes de scaling. Choisissez celle qui colle à votre intention de design.

--64 (standard)

Scaling fluide par défaut.

--64_ (réduit)

Courbe plus subtile. Delta plus petit entre min et max.

--64__ (extrême)

Courbe agressive. Grosse réduction sur mobile.

--64- (étendu)

Pousse plus loin sur les grands viewports.

Configurer votre échelle

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 32, 64, 128)
);

Utiliser comme utilitaire

<div class="p-32 g-16">...</div>
<div class="w-220 h-136">...</div>

Utiliser comme variable

.card {
  padding: var(--32);
  gap: var(--16__);
}

Référence complète

Calcul pas à pas, conventions de nommage, ratio $Φ, liste des préfixes. Tout ce dont une IA a besoin.