Messages and Progress

Telling people what happened, asking for a file in a dialog and showing how far along something is.

Flash Messages App

The result of what someone just did, shown once: "You're in line: 3 people ahead of you," or what went wrong. A tinted box with a colored rule at the left: green when it worked, red when it didn't and gold for something to know that's neither, such as a deadline or a change that came with it.

• After a form sends someone to a new page, put it at the top of the page's content, above everything else, and show it only that once.
• For an error in one place, such as a dialog or one part of a form, put it right there.
• Use role="alert" on a message that appears without a page load, so screen readers announce it.
• Not for standing notices that everyone should see, such as who a page is for: those are announcements, the template's full-width color bands. An aside within a page's content, such as a tip or a warning, is a callout.

cmu-flash, cmu-flash--success, cmu-flash--notice, cmu-flash--error

CMU's red alert bar at the very top of the page (#campusAlert) is for campus emergencies. Don't use it for an app's messages.

Dialog and File Drop Zone App

Use the native <dialog> element with showModal(); the browser handles focus, Escape and the backdrop. Inside a method="dialog" form, Cancel submits with formnovalidate so it closes even when a required field is empty. The drop zone is a label wrapping a file input, so it works by click and keyboard as well as by dragging.

cmu-dialog, cmu-dialog-buttons, cmu-drop, cmu-drop-pick, cmu-drop-file

The app's script sets these on the drop zone: cmu-drop-over while a file is dragged over it, and cmu-drop-has-file once a file is chosen, with the file's name in cmu-drop-file. Inside the dialog, the hidden attribute works on anything, including buttons.

The drop zone in its three states: waiting, a file dragged over it and a file chosen.

Error Pages CMS

When a page can't be shown, say what happened in plain words and give people a way forward, inside the usual header, navigation and footer. Send the real HTTP status with the page, so browsers, search engines and monitoring see the error too.

• 404, Not Found: The address is wrong or the page moved. Offer the home page and the site's search, or its main list.
• 500, Something Went Wrong: The problem is on your end, so say so. Offer to try again, and say who to contact if it keeps happening. Serve it as a plain file the web server can send even when the app is down.
• 503, Down for Maintenance: Say when it will be back, in AP style: "until 6 p.m. Eastern." The web server sends this one too.
• 403, No Access: The user is signed in, but the page isn't for them. Say who it's for, not what's on it, how to get access if they should have it and where to go instead. Someone who isn't signed in yet should get the Sign In box instead.
• Keep codes and details out of the heading. The number can go in small text at the bottom, for anyone reporting it; stack traces and server messages belong in the logs.

cmu-lead, cmu-cta-row, cmu-muted

Progress Bars App

A headline number with a bar, and optional per-item rows below it. Set a bar's width with an inline style on a div (the template strips inline styles from spans). Color the percentage by how far along it is.

cmu-stat, cmu-stat-value, cmu-stat-sub, cmu-meter, cmu-pct with --high, --mid, --low, cmu-breakdown

In use, on a page for someone who looks after three departments:

Progress Through Steps App

How far someone is through a training, a course or a task that takes several sittings, step by step. A red box at the top of the sidebar gives the name and a progress bar; under it, each step is done, current or not started, with a marker on the right. Mark the states in words too, for screen readers: a hidden "Done:", "Current:" or "Not started:" before each name (sr-only), and aria-current="step" on the current step's link. A step that can't be opened yet is a <span> instead of a link. On phones the template puts the sidebar under the content, so say where people are at the top of the content too, such as "Step 3 of 6."

cmu-outline, cmu-outline-done, cmu-outline-current, cmu-meter--full