DICTIONARY of portable UI · UX tools

A Standard Reference

DICTIONARY

of Portable UI · UX Tools

Vol. I — MMXXVI

front matteri

How to read this book

This is a dictionary of tools, not a design system. Each entry is a small, framework-free component you can lift into any page — two files and a little markup — that takes on the dress of whatever surface holds it. An entry reads the way a dictionary entry ought to: a headword, its pronunciation, its part of speech, its senses, and plates showing the thing alive.

headwordthe component's name, set in the display face, syllabified.
pronunciationa wink — components don't really have one.
part of speechn., component. — how it behaves in a sentence of interface.
sensesnumbered meanings, plainest first.
platesthe component, running live, framed as an illustration.
formsits construction — the attributes and how to set it.
Contents
  1. 01bubblen.1
  2. 02——room to grow—
bubble1

bub·ble

/ˈbʌb.əl/ n., component. Dict. 01

[ orig. a marginal blurb in broadsheet, lifted free of the page and given breath ]

  1. 1. A note that rises from the page as its passage meets the eye, lingers while it is read, and withdraws as the eye travels on.
  2. 2. Being dismissed, it folds to a small pill by which it may be recalled; or dev. departs once, and for good.
  3. 3. typog. Set as plain prose, it stays legible though all motion be stilled — nothing of the sense is lost.
  4. 4. chameleon. It wears the livery of whatever page holds it, wanting only a few --bubble-* tokens changed.
Plates
Plate I.  in flow — it rises from the headword above.

The plainest placement: the note keeps its place in the column and simply appears as it reaches the middle of the leaf. The little tail points back up at the matter it glosses.

Scroll it to the centre of the page — it arrives. Scroll on — it withdraws. Dismiss it — it folds to a recall pill.

Plate II.  beside a figure — it pops from the component it explains.
a specimen figure § 9.8 an engraving to be annotated

Given data-bubble-place="beside" and an anchor, the note issues from that figure — inheriting its accent — and, on a narrow leaf, stacks politely beneath rather than running into the margin.

Plate III.  the once-gloss — said once, then gone.

Set data-bubble-dismiss="once" for a remark the reader oughtn't have to keep closing. The × dismisses it for good — for this sitting. Nothing is kept; a fresh reading brings every note back.

Plate IV.  in another livery — the same note, re-dressed.

Every surface, ink, rule, face and accent reads from a token that falls back to the shared set. Change a handful — here, a gilt-on-board livery — and the note re-dresses itself without a word of its behaviour altered.

The same component as Plate I — only its --bubble-* tokens differ.

Forms

Two files — bubble.css in the head, bubble.js after your own scripts — then set the markup. It self-initializes, supplies the × and the recall pill, and wires the scroll. No build, no dependencies.

<link rel="stylesheet" href="bubble.css">

<div class="bubble" data-bubble
     data-bubble-place="in-flow"          in-flow | beside | corner
     data-bubble-dismiss="recall"         recall  | once
     data-bubble-anchor="#some-element"   optional: element to pop from
     data-bubble-label="Short label">     shown on the recall pill
  <p>The description, as normal prose.</p>
</div>

<script src="bubble.js"></script>
attributevaluesdefaultsense
data-bubble——marks the element as a bubble. required.
data-bubble-placein-flow · beside · cornerin-flowin the column, or fixed off an anchor.
data-bubble-dismissrecall · oncerecallfold to a recall pill, or depart for the sitting.
data-bubble-anchorselectorselfthe element it issues from / reveals with.
data-bubble-labeltextNotethe word on the recall pill.

Re-dress it by overriding the --bubble-* tokens on the bubble or any ancestor. Its state is of the sitting only — nothing is written down.