EVA CSS is now available as an npm package for easy integration into any project.
Built around fluid design principles, it transforms static Figma designs into truly responsive systems.
npm install eva-colors eva-css-purge
Optional: Color utilities and CSS optimization
New features: Interactive CLI, JSON configuration, validation tools, modular imports
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.
@use 'eva-css-fluid' with ( $sizes: (4, 8, 16, 32, 64, 128), $font-sizes: (14, 16, 20, 24, 32), $build-class: true );
Extract sizes from your Figma design
// eva.config.cjs
module.exports = {
sizes: [4, 8, 16, 32, 64, 128],
fontSizes: [14, 16, 20, 24, 32],
buildClass: true
};
Centralized configuration file
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!
EVA CSS v2.0+ introduces interactive CLI commands to simplify project setup and configuration.
Initialize EVA CSS configuration
npx eva-css init
Creates eva.config.cjs with interactive prompts
Complete project setup
npx eva-css setup
Interactive setup with workflow choice (SCSS vs JSON)
Validate configuration
npx eva-css validate
Check eva.config.cjs for errors and show summary
Generate SCSS from config
npx eva-css generate output.scss
Convert JSON config to SCSS variables
EVA CSS v2.0+ supports two configuration methods. Choose based on your project needs.
| Feature | SCSS Variables | JSON Config |
|---|---|---|
| Setup | Simple | Requires script |
| Works with npx sass | Immediately | Needs custom script |
| Config location | Inside SCSS file | Separate eva.config.cjs |
| Multiple files | Duplicated config | Shared config |
| Validation | No | npx eva-css validate |
| Generated CSS | Identical | Identical |
Both workflows generate identical CSS output!
// styles/main.scss @use 'eva-css-fluid' with ( $sizes: (4, 8, 16, 32, 64, 128), $font-sizes: (14, 16, 20, 24, 32), $build-class: true );
Configuration directly in SCSS file
npx sass styles/main.scss:styles/main.css
Works immediately with standard Sass
Advantages:
Disadvantages:
// eva.config.cjs
module.exports = {
sizes: [4, 8, 16, 32, 64, 128],
fontSizes: [14, 16, 20, 24, 32],
buildClass: true
};
Centralized configuration file
// styles/main.scss @use 'eva-css-fluid';
Clean import, config loaded from file
node scripts/build-with-config.js \ styles/main.scss \ styles/main.css
Requires custom build script (see repo examples)
npx eva-css validate
Check config before compilation
Advantages:
Disadvantages:
These variables control the fundamental behavior of EVA CSS framework.
View source on NPM - Framework configuration options
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.
View full documentation - 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.
View framework source - 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.
View framework source - 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 the npm package.
npm install eva-css-fluid
Install the EVA CSS framework package
npx eva-css setup
Interactive CLI guides you through configuration
Choose workflow, set sizes, fonts, build mode
// styles/main.scss @use 'eva-css-fluid' with ( $sizes: (4, 8, 16, 32, 64), $font-sizes: (14, 16, 24, 32) );
Use your extracted Figma sizes
npx sass styles/main.scss:styles/main.css
Compile SCSS to CSS
<div class="w-64 p-16 _bg-brand"> <h1 class="fs-32 _c-light">Hello EVA</h1> </div>
Use utility classes or CSS variables
Want to explore the full documentation site and examples?
git clone https://github.com/nkdeus/eva-framework.git cd eva-framework npm install
Explore full examples and documentation
npm run watch
Watch and compile SCSS files
Use Live Server extension for local preview
Understanding the key files and directories in your EVA CSS project.
styles/ - Main CSS and framework
examples/ - Example projects
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.