SELFPOSTREFDESIGN CONTRACT

Reference · page_head

Components

Every building block of the panel, in every state it has. A screen is assembled from these and from plain Bulma — nothing else. The title of each box is the name of its template partial.

Cover sheet
flash — the result of the last action, between page_head and the first box. Success, or…
…flash, error — a failure that belongs to the page, not to one field. A field's error stays under the field in Bulma's help is-danger.
00

Page layouts

A page is exactly one of these
list
page_head, then full-width boxes: the add form first, the table second. Example
detail
page_head, then columns: is-3 side menu + is-9 boxes. Example
form
page_head, then boxes in equal columns, one submit row under them. Example
signed out
The split brand / form screen, no navbar. Example
01

postmark

Worst status of the page's checks
SELFPOSTOK6 OF 6 CHECKS
SELFPOSTWARN1 OF 6 CHECKS
DNSFAIL1 OF 3 RECORDS

Only inside page_head, at most one per page, and only where the page has a verdict to give.

03

status_tag

One mapping, one function
StatusTagBulma classes
ok, published, running, sentoktag is-success is-light
warn, deferred, quietwarntag is-warning is-light
error, fail, mismatch, bouncedfailtag is-danger is-light
unknown, off, neutral countsofftag is-light
held: quarantine · role: globalquarantinetag is-primary is-light
02

box · box_head

The end slot: a note, a tag, a link or a filter form

The after the end slot is sp-help: an optional link to the section's topic on the Help page. It replaces today's help drawer.

box_body — padded content. A table or a run of sp-record blocks sits directly in the box, without box_body.

box_foot — a legend, pagingend slot

box · sp-danger-zone

For destructive confirmations and the "delete" entry of a settings page. The number may be an icon when the box is not part of a sequence.

box · sp-credential

Shown once

Only for a secret the panel will never show again.

04

health_card

Overview only · each card links to its detail
NameVerdict in wordsok · one supporting fact NameExpires in 12 dayssp-warn Name1 of 2 answeringsp-fail
05

dns_record · copy_field

One block per record

Record

publishedA one-line note

Record

mismatch"In DNS now" appears only when it differs

What is wrong and the exact fix.

07

Table conventions

Always inside table-container · an address breaks after its @
Time, UTCNamesp-clipStatus
09-21 14:01:52the row's linkA long subject is clipped with an ellipsis instead of wrapping the rowsentDetails
Page 1 of 9Older →
09

log_pane

sp-d time · sp-w warning · sp-e error
13:58:07 an ordinary line
13:58:09 a deferred delivery — sp-w
13:57:41 a reject or a bounce — sp-e
06

facts

Label
Value
Mono value
4XcB7k2Jm9z1
sp-big
5 days
a supporting line
08

timeline

  1. Done — default
  2. Deferred — sp-warn
  3. Bounced — sp-fail
  4. Expected next — sp-pending
10

empty_state

One sentence: what is absent and why that is fine.
11

confirm_list

  • each thing that will be lost, one per line;
  • inside an sp-danger-zone box, above the danger button.
12

Form rows · route · help_topic

Help text lives in Bulma's help.

from@example.orgto@example.netdeferred

help_topic

A heading and a paragraph; topics stack inside one box on the Help page.

13

shell

Owned by the layout — a screen never writes it
Name
The wordmark, not the stamp: at nav size the stamp's perforation is under a pixel and its brick field dissolves into the bar. The stamp lives on sign-in, setup and the favicon.
Edge
Built like the mark: the brick field, then the stamp's paper margin, and the perforation along the outer edge of that margin — round holes, flat teeth, the ink hairline. One tile, perf-edge.svg.
Sibling strip
The pages of the current group, under the edge. Five or six entries; past that the group is split.
Menus
Bulma hover dropdowns, no JavaScript. The user menu holds Account, Help and Sign out.
14

Type scale

Three sizes · nothing to be read is under 13px
SizeLooks likeUsed for
body · 16pxThe quick brown fox, 203.0.113.25Text, table cells, inputs, selects, buttons, menus and their dropdowns
--sp-fs-s · 14pxThe quick brown fox, 203.0.113.25Supporting text: labels, help, notes in a box head or foot, mono values (sp-small), logs, the footer
--sp-fs-xs · 13pxUpper-case mono label tagUpper-case mono micro-labels (kicker, table head, dt, box title) and tags — nothing else
Bulma's is-small and is-size-7 are not used: a control is never small, and sp-small replaces the helper. The postmark's fine print is an imprint, not text.