Common Style Inventory

Form Elements

Buttons

Buttons that only interact with the current page (via Javascript, etc.) should be gray. Buttons that submit form data or commit updates are dark blue.

Button Button (type='Submit')

Sometimes a submit button is needed even though it is not the expected forward course of action. In these cases use class="notmainsubmit" to make it gray.

And sometimes you might want a control for a form that isn't a button, but it needs to look like one. For this, use div class="fakebutton".

Search

  Link as a Submit Button

We are deprecating Ladda buttons. Another style of button is called "Ladda." See examples of Ladda buttons here.

Tables

(Because of troubles with layout responsiveness, we are promoting Data Tables instead of Tablesaw.)

Table data is the only kind of content that should be laid out in a table. It is good to note that many input forms are suited for tabular data. The <th> tags should contain the <label> for the input field, and the <td> tags will contain the fields themselves. Use class="simpleform" to style regular tables.

name

Use class="showcase" for tables that need to be wider.

field1
field2 is much longer than field1

Don't be afraid to limit the width of your label columns if they look too far from the inputs. You can assign a local class="mytable" (or something) and define the width in your <style> section.

field1
field2
field3 is much longer than both field1 and field2

Use class="right-align" to align the left column's labels to the right for displays wider than mobile.

field1
field is longer

Text Inputs

Needed when users must type a single line of text.

Username
Phone
Read Only
Disabled

Unmasked Password

Because it is rare that someone else might view a person entering a password, and because masked passwords make it more difficult to know if you've entered it correctly, current UX studies suggest un-masking password fields. The user is given the option to conceal the password, but the field is offered as plain text initially.

Show Password ShowMask

Password

This technique requires the following javascript which handles accessibility issues as well. The CSS is baked into application.css already.

$(document).ready(function () {
    $('#showpw').click(function() {
        var mybutton = $('#showpw');
        if(mybutton.attr("aria-checked") === "true") {
			mybutton.attr("aria-checked","false");
			$('#pw1').attr("type","password");
		} else {
			mybutton.attr("aria-checked","true");
			$('#pw1').attr("type","text");
		}
	})
});
			 

Number Stepper

While HTML5 has an input for type="number" with a tiny stepper on it for making incremental values, a better version would have larger targets for the stepper. So I've built into the new styles a layout for these:

You'll need to include a call to jQuery and um_stepper.js at the bottom of your pages to make this work. Here's the code above: <input type="text" pattern="[0-9]+" class="stepper" name="mystepper" id="mystepper" value="3">. The "stepper" class identifies that input to the javascript, which then builds the buttons. The pattern attribute should invoke just the number keyboard for mobile devices.

Pickadate and Pickatime

We have new options for choosing dates and times that are responsive. See the Pickadate example.

Fieldsets

Option elements like radio buttons and checkboxes lose their meanings without labels and other associated context. To gather related elements under a single question, it is helpful to group them within a <fieldset> element.

All fieldsets must have an accompanying <legend> that serves as the explanation for the grouping. "Choose an option" or "Which of these do you prefer?" are examples of legends. When a legend is required for accessibility but is not desired, the class="offscreen" attribute can be used. The following examples of radio buttons and checkboxes use fieldsets.

Note that option elements shown here are using class="nice" to style them nicely. Until a better solution can be found, the structure to support this styling is two-fold. The "nice" class must be on the surrounding element for each of the option elements (usually a span) as well as on the element that groups them (usually the fieldset).

Radio Buttons

When the user must choose only one option from a group. In the case of radio buttons, it is often helpful for one of the options to be preselected using the checked attribute. There should always be at least two radio buttons in a set to give the option of one not being selected.

Answer yes or no.

yes no

We encourage all option elements to be grouped in a <fieldset> with a descriptive <legend>. However, there will be some cases where this is not necessary. The labeling of radio buttons and checkboxes, however, often means the field name is not able to be associated with the elements themselves. For this reason, the title attribute should be used to reflect the entire meaning of the option if the label does not do so adequately:

<p>Display in directory?</p>
<input type="radio" name="dc2" value="no" title="Display in directory: no" checked> <label for="dc2-no"> no</label>
<input type="radio" name="dc2" value="yes" title="Display in directory: yes"> <label for="dc2-yes"> yes</label>

Option elements must be grouped in a <fieldset> to show how they are related.

What is your favorite candy?

M&Ms Hershey's Kisses Snickers Twizzlers

For vertical alignment, indicate class="vertical" in the fieldset.

Is life unfair?

yes no maybe can you repeat the question?

Use class="blendin" in the fieldset to make it look less like a fieldset.

Best toy ever?

Play-Doh Silly Putty LEGO Spirograph

Because accessibility is a high priority, some forms requiring many radio buttons need a different labeling technique. The Diploma Application example uses aria-labelledby on each of the radio buttons in the survey matrix at the bottom. This accessibility attribute references the ID of its question and its column heading. Using this technique, the third radio button for question 12 is supposed to make screen readers say "Felt academically challenged Agree."

Checkboxes

When the user can select more than one option from a group.

Check whatever you want

check this out check that out

The same fieldset styles apply to checkboxes as they do to radio buttons (see above). In both, the name attribute relates to the value of the field within the submitted form and the id is referenced by CSS and by the for attribute of the accompanying <label> tag. Because id attribute values must be unique, each radio button and checkbox must have a unique id value.

Selects

When the list of options is too great to show them all, offer the users a <select> of options that they can scroll through.

Choose an option Option 1 Option 2 Option 3 etc.

To let the user choose more than one option, yet not take up so much room, put checkboxes in a scrollable list (class="scrollable").

Bugs!

ant bee aphid fly roly-poly dragonfly

Page Controls

Controls that refresh, print, or affect the entire page, yet are not essential to the function of the application itself, should be included near the top right of the page.

Do Something Refresh this page Email this page to me Print this page

Javascript Controls

A control that creates new page elements (or deletes existing ones) must be easy to comprehend. The use of the 'plus/minus' symbols extends the metaphor of numerical addition and subtraction to process of adding and deleting parts of a page. Including words in these controls also helps, though it's possible they may not be necessary for sighted users because the context is so clear.

class="jsctrl" — identifies the control element. It should be a <div>.
class="jsctrl plus" — uses the plus image.
class="jsctrl minus" — uses the minus image.
class="jsctrl showtext" — displays the text. Text should always be included, whether it is displayed or not.

Example: <div class="jsctrl plus showtext">Add a new task</div>

Note that aria attributes ought to be assigned to these control elements. These will depend on the actual usage of the controls.

System Messages

May be used with either <span> or <div>

There is also a customized alert box called Sweet Alert that you may find useful. In addition to "OK" and "Cancel," Sweet Alert lets you customize the responses. Try it now!

Please Wait...

To give the user a visual cue that something is happening in the background, adapt this code to your needs. Style the width of the image to the size needed.

http://jsfiddle.net/jgqxQ/71/

Another style of pressing a button and showing progress is called "Ladda." See examples of Ladda buttons here.