Messages and Dialogs

Telling people what happened, asking for a file and showing progress.

Flash Messages

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

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

Your 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.

Progress

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