Tokens, components and charts for CrabPHP applications. It looks like the Crab site: one typeface, one size, a dark page, amber for what you can act on. Everything here is plain HTML and CSS; copy the markup under any example.
<link rel="stylesheet" href="css/crab.css">Every colour is a token in tokens.css. White carries text at four strengths, amber marks what you can act on, and four status colours always sit beside a word.
One family, one size, one line height, two weights. Vertical space is counted in lines and horizontal space in characters, so everything sits on the same grid.
| Token | Value | Use |
|---|---|---|
--font | The only typeface | |
--size | The only text size; 14px on phones | |
--lh | One line: the unit of vertical space | |
--half | half a line | Cell padding, gaps inside a component |
--gap | Horizontal gap between related things | |
--gutter | Between columns | |
--measure | Reading column | |
--wide | Application content | |
--nav | Navigation column | |
--control | 1.25 lines; 36px on touch screens | Height of an input or solid button |
--touch | Tap area of a text button on touch screens |
Plain HTML needs no classes. Headings are uppercase and bold at body size, marked like Markdown.
Body text at 88% white with a link in amber, strong text in full white, inline code, a highlight and a key such as Ctrl K.
A note has a thin amber rule on its left.
composer create-project crabphp/crab appA button is bracketed amber text. Use one .solid button for the main action of a view, .quiet for secondary actions and .danger for destructive ones.
A few choices where one is on. Each button carries aria-pressed.
A native popover: it opens under its button, closes on Escape or a click outside, and needs no script.
A .field is a label, a control and an optional help line. Controls are square, a line and a quarter tall, with a border strong enough to see.
Checkboxes, radios and switches are drawn as text. A switch is a checkbox with role="switch".
An .input-group attaches text or a button to a control. Chips hold a set of values, such as recipients or filters.
An invalid control takes aria-invalid="true" and an .error line that says what to fix.
The default table is a thin grid. Numbers align right with tabular figures. Wrap a wide table in .table-wrap so it scrolls instead of shrinking.
Add .plain for rows without a grid, and .compact for dense data.
| Event | When | Duration |
|---|---|---|
| queue:work started | 10:42:07 | 12 ms |
| mail.send to [email protected] | 10:42:09 | 184 ms |
| schedule:run | 10:43:00 | 3 ms |
Headline numbers. The value is bold, not bigger. A change shows its direction with an arrow and says what it is compared with.
State is a word with a coloured mark in front of it. The word carries the meaning; the colour only helps you scan.
A list you pick from: messages, events, jobs. The current row has an amber edge; unread rows are bold with a star.
A term beside its value: settings, a message envelope, a list of commands.
<[email protected]>A thin bar for how much of something is used or done. Say the number next to it.
When there is nothing to show, say why and offer the next step.
No visits yet. Add the tracking script to your site and the first visit will show up here within a minute.
Seven series colours in a fixed order, chosen so neighbours stay apart for colour-blind readers. Assign them in order and never reuse one for a different series. A one-hue ramp shows magnitude.
Change over time. Hover or use the arrow keys to read a day; every chart also offers its numbers as a table.
Amounts per period. Bars are thin and square, and stacked parts are separated by a gap, not an outline.
Compare named things with a table and an inline .bar. The table already is the data, so nothing else is needed.
| Page | Visitors | |
|---|---|---|
| / | 18,420 | |
| /docs/installation | 11,790 | |
| /docs/routing | 7,552 | |
| /benchmarks | 4,051 | |
| /docs/queues | 1,660 |
How much, across two dimensions: here, when mail arrives.
One whole split into a few parts. The legend names each part and its share.
Visitors, pages and sources for the chosen range.
Custom events sent by your site.
Domain, timezone and the tracking script.
The column on the left of this page. The current item is amber and marked with >; a .count sits at the right.
A message in the page. Start with the word that says what it is.
A short confirmation that leaves on its own. Put a .toasts region at the end of the page and add each message to it.
<div class="toasts" role="region" aria-label="Notifications" aria-live="polite">
<div class="toast ok">Message sent. <button type="button" class="quiet">Dismiss</button></div>
</div>The native <dialog>, opened with showModal(). A form with method="dialog" closes it.
A spinner beside words. It stops for people who ask for reduced motion.
Loading the report
Wrap the target in an element with data-tip. Use it for a hint, never for something people must read.
A Pulse report built from the pieces above: filters in one row, headline numbers, one chart, two rankings.
| Page | Visitors | |
|---|---|---|
| / | 18,420 | |
| /docs/installation | 11,790 | |
| /docs/routing | 7,552 |
| Source | Visitors | |
|---|---|---|
| Direct | 21,004 | |
| github.com | 12,187 | |
| news.ycombinator.com | 6,530 |
A mail client: a .split with rows on the left and the open message on the right. Compose opens in a dialog.
A new version of crabphp/framework is available.
Version 0.6.2 was tagged a few minutes ago and is ready to install. Run composer update crabphp/framework to get it.
A settings page: tabs, a short form, and a danger zone set apart by a heading and a note.