crueber/passage
Watch
1
0
Fork
You've already forked passage
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UI redesign: replace Bulma with Tailwind CSS v4 (merged to local main, pending push) #1

New issue
Closed
opened 2026-08-29 18:02:29 +00:00 by crueber · 0 comments
crueber commented 2026-08-29 18:02:29 +00:00
Owner
Copy link

Summary

Replaced the Bulma 1.0.2 UI with a locally-compiled Tailwind CSS v4 stylesheet. CSS payload drops from 687 KB to 44.8 KB (-93%). No CDNs, no Node — the standalone tailwindcss CLI builds the stylesheet and the output is committed.

What changed

  • internal/web/static/bulma.min.css deleted; single internal/web/static/passage.css (44.8 KB, compiled + minified Tailwind output) is the only stylesheet shipped
  • internal/web/ui/input.css (@theme design tokens + @layer components: .btn/.card/.input/.table/.badge/.sidebar-link/…) is the style source of truth — rebuild with make css (tools/build-css.sh)
  • All 24 templates reclassed (deep-forest-green token palette, icon sidebar with section labels, unified page-header pattern, card-wrapped tables with badge pills, purpose-built centered auth pages, friendly empty states)
  • JS-free mobile drawer (#admin-nav-toggle checkbox pattern); admin.js removed
  • Dark mode via one prefers-color-scheme token override block; system font stack; inline-SVG icon sprite (templates/icons.html)
  • Docs updated (AGENTS.md, README)

Verification

  • CGO_ENABLED=0 go build, go vet, go test -race ./... (all 14 packages) pass
  • Screenshotted desktop (1280x800) / mobile (375x812) / dark across login, register, dashboard, passkeys, and all admin pages
  • CI: new Verify compiled CSS is up to date step rebuilds the stylesheet in the test job and fails on drift (tools/build-css.sh now tracked; only tools/tailwindcss* is gitignored)

Branches

  • Merged: redesign/tailwind-v4 (a92f3f3)
  • Alternates kept for reference: redesign/bulma-refined (evolved Bulma, 695 KB), redesign/pico (Pico CSS v2.1.1, 99 KB)

Follow-ups

  • Push main (merge + docs + CI commits are local-only)
  • Consider a max-width container cap for admin content on ultrawide screens
  • OAuth client-secret "Copy" button still uses an inline onclick inherited from the old template
## Summary Replaced the Bulma 1.0.2 UI with a locally-compiled Tailwind CSS v4 stylesheet. CSS payload drops from **687 KB to 44.8 KB (-93%)**. No CDNs, no Node — the standalone tailwindcss CLI builds the stylesheet and the output is committed. ## What changed - `internal/web/static/bulma.min.css` deleted; single `internal/web/static/passage.css` (44.8 KB, compiled + minified Tailwind output) is the only stylesheet shipped - `internal/web/ui/input.css` (`@theme` design tokens + `@layer components`: .btn/.card/.input/.table/.badge/.sidebar-link/…) is the style source of truth — rebuild with `make css` (`tools/build-css.sh`) - All 24 templates reclassed (deep-forest-green token palette, icon sidebar with section labels, unified page-header pattern, card-wrapped tables with badge pills, purpose-built centered auth pages, friendly empty states) - JS-free mobile drawer (`#admin-nav-toggle` checkbox pattern); `admin.js` removed - Dark mode via one `prefers-color-scheme` token override block; system font stack; inline-SVG icon sprite (`templates/icons.html`) - Docs updated (AGENTS.md, README) ## Verification - `CGO_ENABLED=0 go build`, `go vet`, `go test -race ./...` (all 14 packages) pass - Screenshotted desktop (1280x800) / mobile (375x812) / dark across login, register, dashboard, passkeys, and all admin pages - CI: new `Verify compiled CSS is up to date` step rebuilds the stylesheet in the test job and fails on drift (`tools/build-css.sh` now tracked; only `tools/tailwindcss*` is gitignored) ## Branches - Merged: `redesign/tailwind-v4` (a92f3f3) - Alternates kept for reference: `redesign/bulma-refined` (evolved Bulma, 695 KB), `redesign/pico` (Pico CSS v2.1.1, 99 KB) ## Follow-ups - [ ] Push `main` (merge + docs + CI commits are local-only) - [ ] Consider a max-width container cap for admin content on ultrawide screens - [ ] OAuth client-secret "Copy" button still uses an inline `onclick` inherited from the old template
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
redesign/tailwind-v4
feature/per-app-session-lifetime
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
crueber/passage#1
No description provided.