Parks ComputingPUDL
I built PUDL as an answer to flat design. Flat design began as a fair rebellion against skeuomorphism, all that fake leather and brushed metal, but it went on to strip out the cues that tell you what you can press, what you can type into, and what you can only read. Too many modern screens are a puzzle: is that grey text a button, a link, or a label?
PUDL stands for 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.
One look for each thing
The core idea is simple. Anything you can press is raised, like a real button. Anything you type into is sunken, like a well. Anything that's only there to be read is flat. Buttons, links, tabs, badges and chips each have their own look and never borrow another's, so once you've learned PUDL in one application, you should be able to open any other application built with it and know how to use it on sight.
A few other rules come along with that:
- Color is never the only signal. Every status carries a glyph as well, so it still reads for people who can't tell red from green.
- Every state has an address. Even PUDL's floating windows keep their arrangement in the URL, so you can bookmark it, share it, and use the Back button.
- Dialogs are real HTML dialogs, not browser pop-ups.
- Projects can change the colors to suit themselves, but not the rules.
It also supports high contrast, reduced motion, right-to-left languages and printing, and it's tested for accessibility in Chromium, Firefox and WebKit.
What's in it
PUDL is a stylesheet, a small theme script and the Inter font, plus optional scripts for menus, floating windows, embedded applets, tabs, notifications and tooltips. It needs no framework and no build step: you copy a tagged release into your project, or load a pinned version from a CDN.
Where you can see it
You're looking at it. This site is the first one built on PUDL alone, and it's where PUDL gets tested against real work. The site engine page explains more. PUDL also has a reference page and some sample applications.
Details
- Plain CSS and JavaScript.
- Version 0.23.0; it's still before 1.0, and moving quickly.
- Licensed under Apache 2.0, with Inter under the SIL Open Font License.
The code is on GitHub: github.com/paulmooreparks/pudl.