drizzle-css 0.1.0

Classless-first CSS framework — exposes compiled CSS as &'static str constants.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

# Drizzle CSS

A classless-first CSS framework driven by CSS variables, bundled with the Rust [Lightning CSS](https://lightningcss.dev/) crate.

- **Classless by default** — bare semantic HTML renders well with zero classes or IDs.
- **Variables everywhere** — every color, size, weight, gutter, border, and radius is a CSS custom property. Override one to retheme.
- **Dark mode** — auto via `prefers-color-scheme`, with `.dark` / `.light` overrides for manual toggling.
- **Tiny** — single file, no runtime, no JS, no dependencies for consumers.

## Quick start

```html
<link rel="stylesheet" href="dist/drizzle.css">
<body>
  <h1>Hello</h1>
  <p>This page is styled. No classes were used.</p>
  <button>Go</button>
</body>
```

## Use in a Rust project

Add to `Cargo.toml`:

```toml
[dependencies]
drizzle-css = "0.1"
```

The CSS is compiled at build time and embedded as `&'static str` constants:

```rust
// Write to your output directory
std::fs::write(output_dir.join("drizzle.css"), drizzle_css::CSS_MIN)?;
```

Then reference it from generated HTML:

```html
<link rel="stylesheet" href="drizzle.css">
```

Both `drizzle_css::CSS` (readable) and `drizzle_css::CSS_MIN` (minified) are available.

## Build

Requires Rust (stable). The bundler uses Lightning CSS to inline `@import`s, transform modern syntax for target browsers, and emit both readable and minified outputs.

```sh
cargo run --release
```

Produces:

- `dist/drizzle.css` — bundled, readable
- `dist/drizzle.min.css` — bundled, minified

## Demos

Open any file in `demo/` in a browser:

| File | Showcases |
|---|---|
| `demo/index.html` | Overview + theme toggle |
| `demo/typography.html` | Headings, prose, code, blockquote, inline elements |
| `demo/forms.html` | Every input type, validation, buttons |
| `demo/tables.html` | Simple + captioned + zebra tables |
| `demo/lists.html` | ul, ol, dl, nested, task lists |
| `demo/palette.html` | 8 hues + 4 semantic aliases + alerts |
| `demo/components.html` | details, figure, dialog, cards, buttons |

## Customising

Override any variable on `:root` (or any scope):

```css
:root {
  --color-link: #ff6b6b;
  --radius: 0;
  --font-family-base: "Inter", system-ui, sans-serif;
}
```

Dark-theme values are single-sourced as `--dark-*` tokens. Override one var and both the OS-driven and `.dark`-toggled paths pick it up:

```css
:root {
  --color-link:      #ff6b6b;   /* light theme */
  --dark-color-link: #ff9b9b;   /* dark theme  */
}
```

### Variable reference (summary)

| Group | Variables |
|---|---|
| Palette | `--color-{red,orange,yellow,green,blue,indigo,violet,pink}` |
| Semantic | `--color-{error,warning,success,info}` |
| Surface | `--color-{bg,surface,surface-2,text,muted,border,link,link-hover}` |
| Dark | `--dark-color-{bg,surface,surface-2,text,muted,border,link,link-hover}`, `--dark-shadow{,-sm,-lg}` |
| Type | `--font-family-{sans,mono,serif,base}`, `--font-size-{xs,sm,base,lg,xl,h1..h6}` |
| Weight | `--font-weight-{light,normal,medium,bold,heading}` |
| Spacing | `--gutter-{xs,sm,md,lg,xl,2xl}` |
| Border | `--border-width-{thin,,thick}`, `--border-style`, `--border` |
| Radius | `--radius-{sm,,lg,full}` |
| Shadow | `--shadow-{sm,,lg}` |
| Layout | `--container-width`, `--content-width` |

See `css/tokens.css` for the full list and defaults.

## Project layout

```
css/             # source modules (entry: drizzle.css)
src/lib.rs       # library — exposes CSS and CSS_MIN constants
src/main.rs      # binary — bundles CSS to dist/
build.rs         # compiles CSS at consumer build time
demo/            # demo HTML pages
dist/            # build output (gitignored)
Cargo.toml
```

## License

MIT.