B.A. Baracus
a433b935fa
- 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)
38 lines
2.7 KiB
Markdown
38 lines
2.7 KiB
Markdown
## 1. Token System — Replace OpenProps with Native CSS
|
|
|
|
- [ ] 1.1 Create `src/tokens.css` with all ~40 native oklch custom properties (colors, sizes, spacing, fonts, easings). Copy needed values from OpenProps under MIT license.
|
|
- [ ] 1.2 Update `src/main.css` — remove `@import "open-props/..."` lines, add `@import "./tokens.css"` header.
|
|
- [ ] 1.3 Audit all 13 layer files (02-12) — remove any remaining OpenProps primitive references (`--size-N`, `--gray-N`, `--ease-N`, etc.), replace with sem tokens from `tokens.css`.
|
|
- [ ] 1.4 Remove `"open-props"` from `package.json`. Remove `postcss-import` from `postcss.config.js` and `package.json`.
|
|
- [ ] 1.5 Build and verify: `postcss src/main.css -o dist/asw.css` succeeds, output under 10KB minified.
|
|
|
|
## 2. Archive Deferred Content
|
|
|
|
- [ ] 2.1 Create `archive/` directory. Move `packs/` → `archive/packs/`.
|
|
- [ ] 2.2 Move `site/` → `archive/site/`.
|
|
- [ ] 2.3 Move `src/lab/` → `archive/lab/`.
|
|
- [ ] 2.4 Move legacy examples (SSI-based) → `archive/examples-legacy/`. Ensure nothing is deleted from git.
|
|
|
|
## 3. Flexbox Layout System
|
|
|
|
- [ ] 3.1 Add `data-layout="row"` CSS rule — flexbox horizontal with wrap.
|
|
- [ ] 3.2 Add `data-layout="col"` and `data-layout="stack"` CSS rules — vertical flex with gap.
|
|
- [ ] 3.3 Add `data-layout="spread"` and `data-layout="center"` CSS rules — justify-content/align-items patterns.
|
|
- [ ] 3.4 Add responsive wrapping behavior for narrow viewports (breakpoint at 640px).
|
|
|
|
## 4. Build Working Templates
|
|
|
|
- [ ] 4.1 Create `templates/index.html` — landing/hero page with data-layout="col stack spread center", semantic nav, feature cards.
|
|
- [ ] 4.2 Create `templates/docs.html` — documentation layout with sidebar nav + main content area using flexbox.
|
|
- [ ] 4.3 Create `templates/article.html` — long-form prose layout with code blocks, blockquotes, footnotes.
|
|
- [ ] 4.4 Create `templates/dashboard.html` — stats grid with data-layout="row spread", status indicators, charts.
|
|
- [ ] 4.5 Create `templates/tasks.html` — vault-style task tracking page with data-task attributes.
|
|
- [ ] 4.6 Verify each template opens in browser with no errors and no SSI includes.
|
|
|
|
## 5. Release Prep
|
|
|
|
- [ ] 5.1 Rewrite `README.md` for 0.1 — "link this one CSS file" instructions, quick start, vocabulary, roadmap.
|
|
- [ ] 5.2 Create `CHANGELOG.md` with 0.1 entry — Breaking: dropped OpenProps, new token system, archive restructuring.
|
|
- [ ] 5.3 Final build: `npm run build && npm run build:min`. Verify `dist/asw.css` and `dist/asw.min.css` exist and are under 10KB.
|
|
- [ ] 5.4 Git commit all changes with message `asw-v01: framework core, native tokens, templates, archive deferral`.
|
|
- [ ] 5.5 Tag `v0.1`: `git tag -a v0.1 -m "ASW 0.1 — Framework core with native tokens and reference templates"`.
|