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
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
role: globalglobaltag is-primary is-light
02

box · box_head

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

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
Name
Verdict in words
ok · one supporting fact Name
Expires in 12 days
sp-warn Name
1 of 2 answering
sp-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

Time, UTCNamesp-clipStatus
09-21 14:01:52the row's linkA long subject is clipped with an ellipsis instead of wrapping the rowsentDetailsDelete
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.