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
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.
4px, 8px, 12px
For fine adjustments and tight layouts
20px, 32px, 52px
For component padding and margins
84px, 136px, 220px
For section gaps and major spacing
356px, 576px, 712px
For container widths and large layouts
_ (underscore) - Stronger responsive scaling for mobile/tablet
- (dash) - Minimal responsive scaling
px/rem - Traditional unit suffixes for clarity
Design-based naming makes it easy to match your Figma specifications directly!
These variables control the fundamental behavior of EVA CSS framework.
_eva.scss - Main framework configuration
Development mode toggle
$px-rem-suffix: true; // Development $px-rem-suffix: false; // Production
Enables additional classes and debugging features
CSS class generation
$build-class: true; // Generate utility classes $build-class: false; // CSS variables only
Controls whether utility classes are generated
Selective class generation
$custom-class: true; // Filtered classes $custom-class: false; // All classes
Enables granular control over which classes are generated
Variable naming convention
$name-by-size: true; // --20, --32, --52 $name-by-size: false; // --1, --2, --3
Uses actual pixel values vs sequential numbers
Customize the spacing and typography scale to match your design system.
_grid.scss - Grid and spacing system
Base screen width for calculations
$screen: 1440; // Default Figma width
Used for percentage calculations in clamp() functions
Spacing scale values
$sizes: 4, 8, 12, 20, 32, 34, 52,
84, 136, 220, 356, 576, 712;
Pixel values from your design system
Typography scale values
$font-sizes: 12, 16, 18, 24,
36, 52, 72;
Font sizes from your design system
Fine-tune the responsive behavior and class generation.
_components.scss - Component generation
CSS properties to generate
$properties: ( w: width, h: height, p: padding, px: padding-inline, py: padding-block, br: border-radius, g: gap );
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
Typography class filtering
$font-class-config: ( fs: (14, 16, 18, 24, 32) );
Control which font sizes generate classes
Advanced mathematical values that control the responsive scaling behavior.
_eva.scss - Mathematical functions
$Φ: 1.61803398875;
Used for proportional scaling calculations
$min: 0.5rem; $max: 1rem;
Minimum and maximum scaling limits
$ez: 142.4; // Spacing $ez: varies; // Typography
Controls extreme responsive behavior (different for spacing vs typography)
Detailed documentation for specific aspects of EVA CSS framework:
Responsive typography, font scaling, and text hierarchy
→ Read Typography Docs
Spacing scale, responsive modifiers, and layout dimensions
→ Read Sizing Docs
OKLCH colors, opacity modifiers, and theme configuration
→ Read Color Docs
Emmet-style gradients, animations, and dynamic control
→ Read Gradient Docs
Get EVA CSS up and running in minutes with this simple setup process.
git clone https://github.com/nkdeus/eva.git cd eva
Clone the EVA CSS repository to your local machine
npm install
Install all required Node.js dependencies
# 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
npm run watch
Compile and watch SCSS files for changes
# Rename try.scss to your project name # Configure spacing and typography values # Customize colors and themes
Customize the framework to match your design system
Understanding the key files and directories in your EVA CSS project.
styles/ - Main CSS and framework
projects/ - Individual project files
scripts/ - Build and utility scripts
assets/ - Images and resources
Main CSS files and framework
Core SCSS files and configuration
Your project-specific SCSS files
Compiled CSS output
Essential configuration steps to get the most out of EVA CSS.
# Copy projects/try/ to projects/your-project/ # Rename try.scss to your-project.scss # Configure your project settings
Create your own project folder based on the example
$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)
$font-sizes: 12, 16, 18, 24,
36, 52, 72;
Define your font size hierarchy
Best practices for working with EVA CSS in your development process.
$px-rem-suffix: true; // Enable all features $build-class: true; // Generate utility classes
Use during development for full feature access
$px-rem-suffix: false; // Disable debug features $custom-class: true; // Filter classes
Optimize for production with filtered output
$build-class: false; // No utility classes $name-by-size: true; // Design-based naming
Generate only CSS variables for custom CSS
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.