# PUDL PUDL is the Pleasantly Usable Design Language. It rhymes with "puddle", which is a joke at its own expense, because a puddle is the flattest thing there is and PUDL insists that everything a user can touch has depth. Try the [interactive host launcher demos](samples/host-launcher.html), covering application catalogs, content browsing and desktop tools. The demos use PUDL's shared controls and a sample host adapter; the shared launcher controller and title-menu integration are available in 0.99.0. I built PUDL as an answer to flat design. Flat design began as a fair rebellion against skeuomorphism, and it went on to strip out the cues that tell a user what can be pressed, what can be typed into, and what can only be read. PUDL gives every affordance one visual representation. Somebody who has learned it in one application should be able to open any other application built with it and know how to use it on sight. This repository is PUDL's web implementation. The language itself, its rules, tokens, glyphs and components, is specified in [pudl-spec](https://github.com/paulmooreparks/pudl-spec), independently of any platform, and each release here says which version of the specification it implements. This one implements specification 0.52.3. The web implementation is a stylesheet, a small theme script and a font, with optional scripts for menus, floating windows, applets and regions. It needs no framework, and a project has nothing to build: it copies `dist/` or loads it from a CDN, and carries its own copy. ## See it - **[The reference](https://paulmooreparks.github.io/pudl/reference.html)** shows every component in both themes, with a live demo of floating windows and menus. - **[The article reader](https://paulmooreparks.github.io/pudl/samples/article-reader.html)** is a working reading site built with PUDL: articles in windows, listings as child windows, a launcher, category tabs that change only the list, and an applet. - **[The colour mixer](https://paulmooreparks.github.io/pudl/samples/colour-mixer.html)** is that applet in a page of its own. - **[The expense tracker](https://paulmooreparks.github.io/pudl/samples/expenses.html)** is a small working application: expenses, trips and reports. Its list sorts, filters, pages and acts on several expenses at once; an expense moves from draft to paid through dialogs and menus, takes a receipt, and keeps its history; its forms refuse what is wrong field by field; and reports total everything and download as CSV. GitHub Pages has no server, so a script stands in for one in the browser, keeping the data in localStorage, and every view is still an address. - **[Commands and folding toolbars](https://paulmooreparks.github.io/pudl/samples/commands.html)** is a preview of [a proposal not yet settled](docs/proposals/toolbar-commands.md): a note editor applet declares each command once, with its words, glyph, key and state, and PUDL draws its toolbar from them, folds the groups into menus as the room runs out, answers the keys, and lets an agent list and run the same commands by id. Its command table, `pudl-commands.js`, may change before it is released; the folding is released in 0.78.0. - **[Files](https://paulmooreparks.github.io/pudl/samples/files.html)** is a file browser and editor: a folder tree, a path bar, the folder's contents as a grid of rows to choose from, files dropped on it to add them, and an editor with document tabs and a Markdown preview that open in windows. The editor and the preview are applets that answer requests, so the browser asks to open a file without naming either. Like the expense tracker, it keeps its files in localStorage. - **[Menus that unfold into a ribbon](https://paulmooreparks.github.io/pudl/samples/menu-ribbon.html)** shows the menu bar, the ribbon and the taskbar together: a menu bar whose menus unfold into a ribbon with Show as ribbon, titles that fold to their glyphs, a resident Pins applet whose pins are a command bar at the topbar's right, and a taskbar with a tray and its own menu at the foot of three applet windows. Narrow the page to watch each part give way in turn. The article reader fetches its windows from the server, so to run it from a copy of this repository, serve the folder, for example with `python -m http.server`, rather than opening the file directly. The reference works either way. ## The rules - **Elevation signals interactivity.** A raised control, with a hairline border and an inset highlight, can be pressed. A sunken field, with an inset shadow, takes input. Anything flat is there to be read. - **Categories stay separate.** Buttons, links, tabs, status badges, chips and filter chips each look like themselves, and none of them borrows another's appearance. - **Colour is never the only signal.** Every meaningful state carries a glyph, a position or an elevation as well as a colour, so the interface still reads for somebody with red-green colour blindness (WCAG 1.4.1). - **State is marked with the ARIA attribute that states it.** `aria-current` says where the reader is, `aria-pressed` and `aria-checked` say a toggle is on, and `aria-selected` marks the tab of a tab panel, so the eye and assistive technology are told the same thing. The older `.active` class still works as an alias. - **Each visible context has at most one primary button.** A view that seems to need two has a secondary or destructive action hiding in one of them. - **Links are underlined.** The brand wordmark in the topbar is the only exception. - **Numerals are tabular wherever numbers are data**, so identifiers, counts, money and timestamps line up in tables, fields, badges, chips and lists. Running prose keeps proportional figures, and a `