EVA CSS - Documentation

The fluid DOCS of EVA CSS

Core System SCSS Options Spacing & Sizing Naming Conventions Responsive Typography CSS Variables Mathematics Ready to try ?

Core System

EVA CSS is built around a 1440px design system, perfect for Figma workflows.
The scaling system adapts seamlessly to any viewport while maintaining design consistency.

          $screen: 1440;
          $sizes: 4, 8, 12, 20, 32, 52, 84, 136, 220, 356, 576, 712;
          $name-by-size: true; // Uses actual size values as variable names

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!

SCSS Configuration Options

Core Configuration Variables

These variables control the fundamental behavior of EVA CSS framework.

_eva.scss - Main framework configuration

$dev-mode

Development mode toggle

$dev-mode: true;  // Development
$dev-mode: false; // Production

Enables additional classes and debugging features

$build-class

CSS class generation

$build-class: true;  // Generate utility classes
$build-class: false; // CSS variables only

Controls whether utility classes are generated

$custom-class

Selective class generation

$custom-class: true;  // Filtered classes
$custom-class: false; // All classes

Enables granular control over which classes are generated

$name-by-size

Variable naming convention

$name-by-size: true;  // --20, --32, --52
$name-by-size: false; // --1, --2, --3

Uses actual pixel values vs sequential numbers

Design System Configuration

Customize the spacing and typography scale to match your design system.

_grid.scss - Grid and spacing system

$screen

Base screen width for calculations

$screen: 1440; // Default Figma width

Used for percentage calculations in clamp() functions

$sizes

Spacing scale values

$sizes: 4, 8, 12, 20, 32, 34, 52, 
       84, 136, 220, 356, 576, 712;

Pixel values from your design system

$font-sizes

Typography scale values

$font-sizes: 12, 16, 18, 24, 
           36, 52, 72;

Font sizes from your design system

Advanced Configuration

Fine-tune the responsive behavior and class generation.

_components.scss - Component generation

$properties

CSS properties to generate

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

$class-config

Granular class filtering

$class-config: (
  w: (50),        // Only width:50
  h: (),          // No height classes
  px: (24),       // Only padding-inline:24
  g: ()           // No gap classes
);

Control which sizes are generated for each property

$font-class-config

Typography class filtering

$font-class-config: (
  fs: (14, 16, 18, 24, 32)
);

Control which font sizes generate classes

Mathematical Constants

Advanced mathematical values that control the responsive scaling behavior.

_eva.scss - Mathematical functions

$Φ (Ratio)

$Φ: 1.61803398875;

Used for proportional scaling calculations

$min & $max

$min: 0.5rem;
$max: 1rem;

Minimum and maximum scaling limits

$ez (Extreme scaling)

$ez: 142.4; // Spacing
$ez: varies; // Typography

Controls extreme responsive behavior (different for spacing vs typography)

Configuration Examples

Common configuration patterns for different use cases.

try.scss - Example project configuration

Development Setup

$dev-mode: true;
$build-class: true;
$custom-class: false;
$name-by-size: true;

Full feature set with debugging

Production Setup

$dev-mode: false;
$build-class: true;
$custom-class: true;
$name-by-size: true;

Optimized for production with filtered classes

CSS Variables Only

$dev-mode: false;
$build-class: false;
$custom-class: false;
$name-by-size: true;

Generate only CSS variables, no utility classes

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 prefixes for consistent and efficient styling.

Property Prefixes

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
           );

Responsive Typography

Typography scales fluidly based on your design system. Perfect for maintaining visual hierarchy across all devices.

.fs-72-px

.fs-72

.fs-72_

.fs-72__

CSS Variables

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

Typography Variables

var(--fs-36) clamp(1.63rem, 0.63vw + 1.69rem, 2.5rem)

1.63rem = 26px

0.63vw + 1.69rem = 36px

2.5rem = 40px

var(--fs-36_) clamp(1.25rem, 1.25vw + 1.13rem, 2.5rem)

1.25rem = 20px

1.25vw + 1.13rem = 36px

2.5rem = 40px

var(--fs-36__) clamp(0.96rem, 1.88vw + 0.56rem, 2.5rem)

0.96rem = 15px

1.88vw + 0.56rem = 36px

2.5rem = 40px

Mathematics Behind EVA CSS

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 (spacing) / Responsive scaling (typography)

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)

Typography vs Spacing Calculations

Different mathematical approaches for typography and spacing.

Spacing Variables

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

Optimized for layout and spacing

Typography Variables

$min: 0.6rem
$max: 1rem
$Φ: 1.3
$ez: 142.4

Optimized for readability and hierarchy

Key Differences:

Typography uses higher minimum values (0.6rem vs 0.5rem) for better readability
Typography uses a smaller ratio (1.3 vs 1.618) for more conservative scaling
Both use different extreme scaling factors for maximum responsiveness
Typography variables are prefixed with --fs- for clear identification

Mathematical Functions Summary

All the mathematical functions used in EVA CSS calculations.

Core Functions

round2($number)
getPercent($size)
toPx($size)
toRem($size)

Scaling Functions

getMinRem($percent)
getMaxRem($percent)
getVW($percent)

Ratio Functions

getFinalMinDiv($size, $Φ)
getFinalMinMulti($size, $Φ)

Ready to try ?

Quick Setup Guide

Get EVA CSS up and running in minutes with this simple setup process.

Step 1: Clone the Repository

git clone https://github.com/nkdeus/eva.git
cd eva

Clone the EVA CSS repository to your local machine

View on GitHub

Step 2: Install Dependencies

npm install

Install all required Node.js dependencies

Step 3: Launch Local Server

# Use your IDE's local server
# VS Code: Live Server extension
# Or any other local development server

Start your local development server to serve the HTML files

Step 4: Watch SCSS Files

npm run watch

Compile and watch SCSS files for changes

Step 5: Configure Your Project

# Rename try.scss to your project name
# Configure spacing and typography values
# Customize colors and themes

Customize the framework to match your design system

Project Structure

Understanding the key files and directories in your EVA CSS project.

styles/framework/ - Core SCSS files

styles/projets/ - Project-specific files

styles/framework/

Core SCSS files and configuration

_eva.scss - Main framework file
_colors.scss - Color system
_theme.scss - Theme configuration

styles/projets/

Your project-specific SCSS files

try.scss - Example project file
lili.scss - Another example

styles/render/

Compiled CSS output

try.css - Compiled CSS
try.css.map - Source maps

Configuration Tips

Essential configuration steps to get the most out of EVA CSS.

1. Rename try.scss

# Copy try.scss to your-project.scss
# Configure your project settings

Create your own project file based on the example

2. Configure Spacing Values

$sizes: 4, 8, 12, 20, 32, 52, 
       84, 136, 220, 356, 576, 712;

Match your Figma design system spacing

Based on 1440px Figma design (configurable)

3. Set Typography Scale

$font-sizes: 12, 16, 18, 24, 
           36, 52, 72;

Define your font size hierarchy

Development Workflow

Best practices for working with EVA CSS in your development process.

Development Mode

$dev-mode: true;  // Enable all features
$build-class: true; // Generate utility classes

Use during development for full feature access

Production Mode

$dev-mode: false; // Disable debug features
$custom-class: true; // Filter classes

Optimize for production with filtered output

CSS Variables Only

$build-class: false; // No utility classes
$name-by-size: true; // Design-based naming

Generate only CSS variables for custom CSS

Welcome to the Future!

A Word of Warning

Warning: Once you enter the world of fluid CSS, traditional responsive design and breakpoints will feel like something from the past!

Say goodbye to media queries and hello to truly adaptive layouts that scale naturally across every screen.