chronoskin
Menu
Sign in Get the kit
Release 6, eighty-four blocks

Back-office screens, one block at a time.

chronoskin is a shelf of plain, copyable interface blocks for the tools nobody outside your company will ever see.

Get the kit → chronoskin add orders-table
Blocks on the shelf
84
Whole screens
17
Scripts to install
0
Teams using it
2,960

All blocks

Showing 6 of 84, newest first

  • Orders table

    Stable

    Sortable rows with a status column, a numeric column and a pager underneath.

    5 parts, 3.9 kB

  • Customer form

    Changed

    One column of fields for adding or editing a record, with a calm error line.

    5 parts, 3.4 kB

  • Status labels

    Stable

    Approved, waiting and rejected, in the three sizes a table and a header need.

    9 labels, 1.1 kB

  • Action bar

    New

    A primary action, a way out and a destructive one, kept apart on purpose.

    12 buttons, 2.2 kB

  • Inline messages

    Stable

    A running import and a stopped one: what happened, then what to do next.

    7 messages, 1.6 kB

  • Blank slates

    Draft

    What a queue, a search and an inbox say when there is nothing in them.

    9 slates, 1.8 kB

  • Fresh on the shelf

    All releases

    • Detail sheet

      One record on one page, with its history down the side.

      12 days ago

    • Customer form

      The error line now sits under the field, not beside it.

      12 days ago

    • Orders table

      A wider amount column and a pager that fits a phone.

      Last month

  • New to the shelf?

    4 pages

    Start with the handbook

    Pick a block, press copy, paste it where the screen needs it. The second page shows how.

    Copying a block
    Is it free?

    The shelf is free. Whole screens need the kit.

    Do I install anything?

    No. A block is one file you copy.

  1. Blocks
  2. Records
  3. Customer form

Customer form

One column of fields for adding or editing a customer record.

Preview

Stable

Six digits follow the letter.

Shown at the top of every order.

Dense spacing suits tables of more than twenty rows.
Cancel

Removing it

Confirm

Parts

5 parts, 3.4 kB together

PartClassStatusSinceBytes
Text fieldfield-textStableRelease 1620
Choice fieldfield-choiceStableRelease 1710
Error linefield-errorChangedRelease 6280
Long textfield-areaStableRelease 2540
Inline help bubblefield-bubbleRetiredRelease 31,250
In review New Draft 5 parts Stable Changed Retired
  1. Blocks
  2. Handbook
  3. Copying a block

Handbook

Four short pages. Read the second one and you can start.

Try it on a block

Copying a block

A block is one file of markup and the classes it needs. Nothing is installed, so nothing can go out of date behind your back.

Three steps

Pick a block, press copy, paste it where the screen needs it. Set data-density on the wrapper if the table should be tighter.

  • Keep the class names as they are
  • Change the words, not the spacing
  • Put one primary action on a screen

When a block does not fit

Take the nearest one and remove parts. Removing is always safe; adding a new kind of box rarely is.

HandbookPage 2 of 4

Related pages

Two minutes each

← Start here Changing colours →
  1. Blocks
  2. Releases
  3. Release 6

Releases

What changed on the shelf, newest first.

How to update Get release 6
Release 6 is out

Nine new blocks and a calmer error line. Copy them again to update.

This year

Page 2 of 9

Coming next

0

Nothing scheduled

Release 7 has no date yet. Ask for a block and it goes on the list.

Ask for a block