SelfPost · panel redesign · stage 1
Three directions, three key screens
Overview, an outbound domain and sign-in, drawn three ways. Pick one (or a mix); the remaining screens are then drawn in that direction only. Serve this folder from the repository root — the pages load the panel's own fonts and mark by relative path.
Shared by all three
- Navigation by mail direction. Overview · Outbound (Domains, Log, Queue, DMARC reports) · Inbound (Domains, Log, Queue) · Server (System log, Backup, Users, Settings). Account, Help and Sign out live with the user name. Eleven flat entries become four groups.
- One block per DNS record. Today "DNS status" and "records to publish" show every host twice. Here a record is one block: its status, what to publish, and — only on a mismatch — what DNS holds now.
- The domain page stops being nine cards. DNS and applications are the page; limits, report address, export and delete are "rarely changed" and sit behind one click.
- Applications are a table; editing one is its own form page instead of a three-column panel inside a list row.
- Brand carriers stay: the stamp, brick, IBM Plex. No inline
styleor script in any mockup.
The directions
A · Pico CSS 2.1
Blank
The panel as a postal form: one centred sheet, numbered sections, mono field labels, a postmark for the verdict. Overview is a ledger — one row per check, the row opens into its detail. Sections on the first header row, the section's pages on the second.
B · Tabler 1.5 (Bootstrap 5)
Console
The classic admin kit: ink sidebar with every page one click away, status tiles, cards and tables in a 12-column grid, read-only input groups with Copy. Almost nothing is ours; it also looks the most like every other admin panel.
C · Bulma 1.0
Counter
Brick top bar with CSS-only hover menus. Overview is the whole service on one screen: a health strip over the outbound and inbound domain lists. The domain page gets a sticky side menu. Softer, rounder, the boldest use of the brand colour.
What each one costs
| A · Pico | B · Tabler | C · Bulma | |
|---|---|---|---|
| Licence | MIT | MIT | MIT |
| Vendored CSS (minified) | 83 KB | 694 KB | 678 KB |
| JavaScript | none | none for these screens; Bootstrap bundle only if dropdowns / modals are wanted | none |
| Build step | none | none | none (a Sass build could trim it; not needed) |
CSP default-src 'self' |
needs img-src 'self' data: — 14 data: SVGs (select chevron, checkbox tick) |
needs img-src 'self' data: — 28 data: SVGs |
works as is — no data: URIs |
| Our own CSS in the mockup | ≈ 200 lines | ≈ 80 lines | ≈ 100 lines |
| Markup style | semantic HTML, few classes — closest to today's templates | class-heavy Bootstrap markup | class-based, moderate |
| Own components | sheet, ledger row, postmark, record block | sidebar group label, record block | health strip, record block |
| Recognisable | most | least | middle |
Open points
- Icons in B come from Tabler Icons (MIT) through its webfont for the mockup; the panel would vendor only the used glyphs as an SVG sprite.
- Inbound log rides on the agreed
inbound-antispam-paneljournal; Inbound queue is a new filter over the one Postfix queue and needs its own roadmap row. - Dark scheme and the narrow-screen shell are not drawn at this stage; all three libraries ship both.
- The earlier panel-ui experiment and panel-redesign.md are superseded by whichever direction is accepted.