Loading repository data…
Loading repository data…
stolinski / repository
A minimal CSS framework with utilities that are actually useful.
The standards-first, full-featured CSS library for the modern web.
npm install @drop-in/graffiti
Then import in your project:
// Import everything (default, ~75KB)
import "@drop-in/graffiti";
// Or import only what you need for smaller bundles
import "@drop-in/graffiti/minimal"; // core + utilities (~26KB)
import "@drop-in/graffiti/standard"; // core + utilities + layouts (~33KB)
// Or pick individual modules
import "@drop-in/graffiti/core"; // variables, reset, typography
import "@drop-in/graffiti/utilities"; // helper classes
import "@drop-in/graffiti/layouts"; // page layouts
import "@drop-in/graffiti/components"; // UI components
// Optionally import aesthetic presets (apply as a class on any container)
import "@drop-in/graffiti/themes"; // all five presets
// or tree-shake to a single preset
import "@drop-in/graffiti/themes/soft-consumer"; // also: editorial, paper, system, neon-arcade
Apply a preset via class on :root, html, or any container element:
<html class="theme-editorial">...</html>
<section class="theme-brutalist">...</section>
Download the CSS file directly:
https://raw.githubusercontent.com/stolinski/graffiti/refs/heads/main/src/lib/drop-in.css
npx @drop-in/graffiti
This copies drop-in.css to your src/ folder.
clamp() and pow().fc classlight-dark() with color-scheme for automatic themingGraffiti uses modern CSS features and requires recent browser versions:
Minimum versions:
Key features requiring modern browsers:
light-dark() function for automatic theminglinear() easing functionsFull documentation: https://graffiti-ui.com/
ISC