App Components

From cmu-app.css, for web apps on the CMU template. Load it after cmu-cms.css; everything on the CMS Components page works in apps too.

Page Setup and Forms

Put cmu-app on <body> on pages with the CMU header and footer, or cmu-framed on pages shown inside another tool (such as a Canvas LTI frame) without them. cmu-app also styles forms: a bold label over each text box or menu, which fills its column; a bold legend over each group of checkboxes or radio buttons, listed without bullets, with each label beside its box; and room under each. On any page with the kit, checkboxes, radio buttons, sliders and progress bars are CMU red. A p.cmu-hint right after a field (or after a fieldset's list) sits just under it, with the room below moved under the hint; point the field's aria-describedby at it. Add inline to a text box or menu to keep its natural width. Group checkboxes in a fieldset so the legend names them for screen readers.

body.cmu-app, body.cmu-framed

Fields in a Row

Short fields that belong together on one line, each with its label above: a width and a height, a date range, a first and last name. Wrap each label and its field in a div inside cmu-field-row; a separator such as × or "to" goes between them in a span with aria-hidden="true", since the labels already say what each field is. A hint under the row works as under a single field. When the row is too narrow, the fields wrap onto the next line. For short values, such as numbers or codes, add cmu-field-row--short so the boxes keep a short width instead of sharing the whole row.

cmu-field-row, cmu-field-row--short, cmu-hint

Options Under a Choice

Options that only apply to one choice go inside that choice's list item, lined up with its label, in a cmu-sub-options block. Show them only while that choice is picked: set hidden on the block when another one is. Menus and text boxes inside fill the block, as they fill a column elsewhere.

cmu-sub-options

Small Text

Gray secondary text, a smaller hint under a field, a centered empty-list message and codes kept on one line.

cmu-muted, cmu-hint, cmu-empty, cmu-code, cmu-label

Button With a Note

A short note beside a button, centered on it top to bottom, saying what the button does or what to expect. On a narrow screen the note wraps under the button. Keep it to a sentence; anything longer belongs above the button. Right under a photo (figure.image), it sits close to the photo it acts on, as with a Show Another Photo button; the note is optional.

cmu-button-note, cmu-hint

Link Button

A button that looks like a link, for a small action that happens in place (such as a form post) sitting among plain links, where a full button would be too heavy. It still behaves as a button. Signing out isn't one of these: it goes in the menu.

cmu-link-button