EVA CSS Sizing System

Fluid spacing and sizing system that adapts seamlessly to any viewport.

Sizing Scale Spacing Examples Naming Conventions Spacing Variables Spacing Mathematics

Spacing & Sizing Scale

The spacing system uses a carefully crafted scale that works harmoniously across all viewport sizes. Each value is designed to create balanced proportions in your layouts.

Micro Spacing

4px, 8px, 12px

For fine adjustments and tight layouts

Component Spacing

20px, 32px, 52px

For component padding and margins

Section Spacing

84px, 136px, 220px

For section gaps and major spacing

Layout Spacing

356px, 576px, 712px

For container widths and large layouts

Responsive Modifiers

_ (underscore) - Stronger responsive scaling for mobile/tablet

- (dash) - Minimal responsive scaling

px/rem - Traditional unit suffixes for clarity

Variable Naming

$name-by-size: false
Sequential naming:
--1, --2, --3, --4, --5, --6...

$name-by-size: true (default)
Design-based naming:
--4, --8, --12, --20, --32, --52...

Design-based naming makes it easy to match your Figma specifications directly!

Spacing & Sizing Examples

Common Use Cases

Button Spacing

px-20 py-12

Standard button padding

px-32 py-16

Large button padding

Card Layouts

p-32

Card padding

g-20

Card content gap

Section Spacing

py-136

Section vertical padding

px-220

Section horizontal padding

Container Widths

w-356

Medium container

w-576

Large container

Responsive Behavior

Desktop (1440px)

px-220

220px horizontal padding

Tablet (768px)

px-220_

~120px horizontal padding

Mobile (375px)

px-220__

~40px horizontal padding

Naming Conventions

EVA CSS uses intuitive Emmet-style suffixes for consistent and efficient styling.

Property suffixes

w == width

h == height

p == padding

px == padding-inline

py == padding-block

pr == padding-right

br == border-radius

mb == margin-bottom

g == gap

SCSS Configuration

           $properties: (
                   w: width,
                   h: height,
                   p: padding,
                   px: padding-inline,
                   pr: padding-right,
                   py: padding-block,
                   br: border-radius,
                   mb: margin-bottom,
                   g: gap
           );

Class Generation Control

Optimize CSS bundle size by generating only needed classes:

            $custom-class: true;
           
           $class-config: (
              w: (50),        // Only width:50 classes
              h: (),          // No height classes
              px: (24),       // Only padding-inline:24
              // Empty arrays = no classes generated
           );

Spacing Variables

var(--20-) clamp(1.13rem, 0.35vw + 0.94rem, 1.39rem)

1.13rem = 18px

0.35vw + 0.94rem = 20px

1.39rem = 22px

var(--20) clamp(0.7rem, 0.7vw + 0.63rem, 1.39rem)

0.7rem = 11px

0.7vw + 0.63rem = 20px

1.39rem = 22px

var(--20_) clamp(0.43rem, 1.05vw + 0.31rem, 1.39rem)

0.43rem = 7px

1.05vw + 0.31rem = 20px

1.39rem = 22px

var(--20__) clamp(0.5rem, 1.98vw - 0.7rem, 1.39rem)

0.5rem = 8px

1.98vw - 0.7rem = 20px

1.39rem = 22px

Spacing Mathematics

The Mathematical Foundation

EVA CSS transforms pixel values from Figma into fluid CSS variables using advanced mathematical calculations. Every variable is generated using the clamp() function with carefully calculated minimum, fluid, and maximum values.

Base Constants

$screen: 1440px;     // Figma design width
$min: 0.5rem;        // Minimum scaling limit
$max: 1rem;          // Maximum scaling limit
$Φ: 1.61803398875;   // Golden ratio
$ez: 142.4;          // Extreme scaling factor

Core Formula

clamp(min, fluid, max)

CSS clamp() function with calculated values

Step-by-Step Calculation Process

How a Figma pixel value becomes a fluid CSS variable.

Step 1: Calculate Percentage

getPercent($size) = ($size / $screen) * 100

Example for 20px:
getPercent(20) = (20 / 1440) * 100 = 1.39%

Converts pixel value to percentage of screen width

Step 2: Calculate REM Values

toRem($size) = $size / 16 * 1rem
getMinRem($percent) = $percent * $min
getMaxRem($percent) = $percent * $max

Note: The actual mathematical formula in EVA CSS is more complex
than these simplified examples. See the CSS output for real values.

Step 3: Calculate Fluid Values

getVW($percent) = $percent * 1vw

vw-light: (getVW(percent) / 4) + (toRem(size) / 1.33)
vw-medium: (getVW(percent) / 2) + (toRem(size) / 2)
vw-strong: (getVW(percent) / 1.33) + (toRem(size) / 4)
vw-extrem: getVW(percent * $ez) - $rem-min

Different fluid calculations for each modifier

Modifier Calculations

How each modifier affects the final clamp() values.

No Modifier (default)

min: $rem-min
fluid: vw-medium
max: $rem-max

Standard responsive scaling

Single Underscore (_)

min: $rem-min / $Φ
fluid: vw-strong
max: $rem-max

Stronger responsive scaling

Double Underscore (__)

min: $min (0.5rem)
fluid: vw-extrem
max: $rem-max

Maximum responsive scaling

Dash (-)

min: $rem-min * $Φ
fluid: vw-light
max: $rem-max

Minimal responsive scaling

Real Example: 20px to CSS Variable

Complete calculation breakdown for a 20px value from Figma.

Input: 20px from Figma (1440px design)

Step 1: Percentage

getPercent(20) = (20 / 1440) * 100 = 1.39%

Step 2: Base REM

toRem(20) = 20 / 16 = 1.25rem

Step 3: Calculate clamp() values for each modifier

--20 (default)

min: 0.7rem
fluid: 0.7vw + 0.63rem
max: 1.39rem

Result: clamp(0.7rem, 0.7vw + 0.63rem, 1.39rem)

Note: The actual mathematical formula is more complex
than the simplified examples shown above.

--20_ (strong)

min: 0.43rem
fluid: 1.05vw + 0.31rem
max: 1.39rem

Result: clamp(0.43rem, 1.05vw + 0.31rem, 1.39rem)

--20__ (extreme)

min: 0.5rem
fluid: 1.98vw - 0.7rem
max: 1.39rem

Result: clamp(0.5rem, 1.98vw - 0.7rem, 1.39rem)

--20- (light)

min: 1.13rem
fluid: 0.35vw + 0.94rem
max: 1.39rem

Result: clamp(1.13rem, 0.35vw + 0.94rem, 1.39rem)

Spacing vs Typography

Different mathematical approaches for spacing calculations.

Spacing Variables

$min: 0.5rem
$max: 1rem
$Φ: 1.61803398875
$ez: 142.4

Optimized for layout and spacing

Key Spacing Features:

Spacing uses minimum values of 0.5rem for maximum responsiveness
Uses the golden ratio (1.618) for proportional scaling
Extreme scaling factor allows for dramatic size changes
All values maintain visual hierarchy across viewport sizes