# EVA CSS

> A fluid SCSS framework that converts static UI designs into responsive systems using CSS clamp() and OKLCH colors.

EVA CSS generates fluid, responsive CSS from a set of design sizes. Instead of breakpoints, it uses `clamp()` functions so every dimension scales smoothly across all viewport sizes. Colors use the modern OKLCH color space with automatic opacity, brightness, and darkness variants.

## Quick Start

```bash
npm install eva-css-fluid eva-css-purge eva-colors
```

```scss
@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 32, 64, 128),
  $font-sizes: (14, 16, 20, 24, 32),
  $build-class: true
);
```

```bash
npx sass --load-path=node_modules styles/main.scss:styles/main.css
```

## Key Concepts

- **Fluid Sizes**: `var(--64)` scales fluidly. Modifiers: `var(--64_)` (reduced), `var(--64__)` (extreme), `var(--64-)` (extended)
- **Runtime Fluid Unit** (v2.2.0+): tokens track `vw` (viewport, default) or `cqi` (container) via `--eva-fluid-unit` — switch a subtree with `.eva-cqi`/`.eva-root`, no rebuild. `$min-font-size` sets an accessibility readability floor.
- **OKLCH Colors**: `var(--brand)`, `var(--accent)`, `var(--extra)`, `var(--dark)`, `var(--light)` with opacity (`var(--brand_)` 65%, `var(--brand__)` 35%, `var(--brand___)` 15%) and brightness variants (`var(--brand-d)`, `var(--brand-b)`)
- **Per-role Brightness** (v2.4.0+): each brightness step is tunable per base — `--<base>-<token>` for the absolute offset, `--<base>-<token>-ratio` for a proportional share of the remaining headroom that never clips at the 0%/100% bounds
- **Two Build Modes**: Utility classes (`$build-class: true`) or CSS variables only (`$build-class: false`)
- **Gradient System**: Emmet-style classes like `grad-linear from-brand to-accent d-br animated`
- **Auto Theme**: Light/dark mode with OKLCH-based theme switching

## Documentation

- [Framework Overview](https://eva-css.xyz/framework.html)
- [Fluid CSS Guide](https://eva-css.xyz/framework/css-fluid.html)
- [Documentation](https://eva-css.xyz/framework/doc.html)
- [Sizing System](https://eva-css.xyz/framework/sizes.html)
- [Color System](https://eva-css.xyz/framework/colors.html)
- [Gradients](https://eva-css.xyz/framework/gradients.html)
- [Flexbox](https://eva-css.xyz/framework/flex.html)
- [Grids](https://eva-css.xyz/framework/grids.html)
- [Typography](https://eva-css.xyz/framework/fonts.html)
- [Auto Theme](https://eva-css.xyz/framework/auto-theme.html)
- [Use Cases](https://eva-css.xyz/use-cases.html)
- [Figma to EVA](https://eva-css.xyz/figma-to-eva.html)
- [Tailwind CSS Override](https://eva-css.xyz/use-cases/tailwind.html)
- [Webflow Fluid](https://eva-css.xyz/use-cases/webflow.html)
- [Ycode Fluid](https://eva-css.xyz/use-cases/ycode.html)

## Links

- Website: https://eva-css.xyz
- GitHub: https://github.com/nkdeus/eva
- npm: eva-css-fluid
- Full documentation for LLMs: https://eva-css.xyz/llms-full.txt