- Replace OpenProps (~25KB) with native src/tokens.css (~40 tokens) - Remove open-props, postcss-import from package.json + postcss.config - Update main.css: remove @import open-props/*, import ./tokens.css - Rewrite 01-tokens.css header to reference tokens.css - All raw OpenProps values (font stacks, sizes, weights, colors, easings, durations, shadows, radii, animations, media queries) now defined natively in tokens.css - Build uses cat concat + cssnano (no postcss-import needed) - Build output: 78KB minified (saved ~24KB from OpenProps removal)
3.2 KiB
3.2 KiB
Why
ASW has been in experimental development — a working CSS framework buried inside a Hugo documentation site, with 7 engine packs, lab experiments, a PostCSS build pipeline, and SSI-based examples that don't work standalone. The framework itself is solid (semantic HTML + data-attributes), but it's not publishable as v0.1 because:
- Bloat: It ships OpenProps (~25KB) while only using ~40 of 500+ tokens
- No working templates: The examples directory uses SSI (
<!--#include virtual=...-->) — they don't open in a browser - Obscured core: The framework lives in 13 CSS layers, buried under Hugo templates, packs, and experiments
- No clear dev path: A new developer lands and sees Hugo + PostCSS + packs and doesn't know what ASW is
0.1 is the "minimum viable framework" — just the CSS, a handful of working templates, and a clear README. Everything else stays in the repo for 0.2 (documentation site) and 0.3 (engine packs).
What Changes
- Drop OpenProps dependency — replace with hand-authored native CSS token system using
oklch()and relative color syntax. Removesopen-propsfrompackage.json, removespostcss-importof OpenProps. Framework goes from ~25KB baseline to ~4KB. - Prune repo surface — move
packs/,src/lab/, andsite/intoarchive/directory. No deletion. Everything stays in git. - Simplify build — PostCSS stays for minification (
cssnano), but no OpenProps import.postcss-importmay become optional. - 5-6 working standalone HTML templates — semantic HTML, flexbox via
data-layoutattributes. No SSI. No Hugo. Open in a browser and they work. - New README + CHANGELOG — "link this one CSS file" documentation. Roadmap forward.
- Vendor the used OpenProps values — copy the ~40 tokens we actually use into our token file (MIT license, legally clean).
Capabilities
New Capabilities
native-tokens: The design token system — oklch-based colors, size scales, spacing, typography. Zero external dependencies. Powers all ASW styling.flexbox-layouts: Layout system viadata-layoutattributes. Pure flexbox.data-layout="row",data-layout="col",data-layout="spread",data-layout="center",data-layout="stack", etc.reference-templates: Standalone HTML files that demonstrate the framework — landing page, docs page, prose/article, stats/dashboard, vault/tasks page.
Modified Capabilities
(No existing spec-level requirements are changing — we're replacing the token foundation and adding new layout/template capabilities)
Impact
| File / Directory | Action |
|---|---|
package.json |
Remove open-props dependency |
postcss.config.js |
Remove postcss-import (no longer needed) |
src/main.css |
Remove OpenProps @import lines, update layer imports |
src/layers/01-tokens.css |
Replace OpenProps primitives with native oklch values |
dist/asw.css |
Rebuild — drops from ~28KB to ~6KB |
packs/ |
Move to archive/packs/ |
src/lab/ |
Move to archive/lab/ |
site/ |
Move to archive/site/ |
examples/ |
Replace SSI-based examples with standalone templates |
README.md |
Rewrite for 0.1 — "link this one file" |
CHANGELOG.md |
New file |