ascii/ui

Starter page

A page that links ascii-ui.css and ascii-ui.js and nothing else. Below it is every component in the kit, as the Code tab prints it. View the source and take what you need.

The three steps are in README.md, next to this file. Every component with its code: ascii.fedekotek.design.

Form

Button

Calendar

Input

The email waits until you leave it, then checks as you type.

Input OTP

Type any six digits. A letter says no.

Select

Slider

55

Textarea

0/280

Toggles

Visibility

Toggle group

Board view.

Overlay

Alert dialog

Delete project?

Reporting redesign and its 14 comments go for good. There is no undo.

Delete static-prod?

Every monitor, status page and incident in static-prod goes. Type its name to confirm.

Combobox

Context menu

Incidents. Right-click a row, or press Shift F10 on it, for what you can do with it.
IDServiceStatus
INC-481 api-gateway Down
INC-480 checkout Degraded
INC-479 search Resolved

Right-click a row, or press and hold it.

Popover

Sheet

On a touch screen, drag it down by its title to close it.

Filters

Tooltip

Deploys to production on a Friday

Display

Avatar

ARBICD

Badge

OperationalDegradedDownBeta

Card and dialog

Reporting redesign

Team
Analytics
Owner
Ana Ruiz

Publish project?

Reporting redesign will be visible to anyone with the link. You can unpublish it at any time.

Details

What ships in the kit?

Two files, ascii-ui.css and ascii-ui.js. No build step, no dependencies.

Can I change the characters?

Yes. ASCIIUI.tones() takes a map from the default characters to yours.

Kbd

/ searchesc close

Separator

Timeline

  1. ShippedSearch v2 went to 100 percent of accounts.
  2. In review14 comments in Figma, 3 of them useful.
  3. KickoffOne problem statement, zero solutions.

Feedback

Alert

Signal lost

Probes from 3 regions are timing out. Check the load balancer in fra-1.

Heads up

Maintenance window on Sunday at 03:00 UTC.

Empty

No work orders

Nothing is broken. Enjoy it, it never lasts.

Progress

Skeleton

Loading

Spinner

A spinner with an aria-label is read as that word.

Toast

Longer words stay longer. [x] puts it away, and it holds while you point at it.

Pagination

Tabs

One dashboard for plant managers. Mobile first.

From ascii.fedekotek.design. MIT license, the text is in README.md.