When an action requires the user to wait for a response from the server, the cursor: wait property should be applied to their cursor, and removed when the response comes back and the appropriate feedback is displayed. If said action was initiated by clicking on a control, the control should be disabled until the response comes back, at which point it should be re-enabled.

When the user’s attention is on a form-driven task we should automatically focus the first input of the form for them (by adding the autofocus attribute) so that they don’t have to click or tab into it. Examples of places to use this pattern: modal dialogues, the main search page, toggleable ‘Edit’ sections.

• When an element is draggable, add the .drag-element class to the draggable area.
• Also include drag 'nubs' as an affordance by using two .glyphicons-option-vertical icons placed next to one another.

• If a page doesn't contain any data (but can), the action the user needs to take in order to populate the page should be made as clear as possible.
• The standard format for empty states is as follows:

Optionally an icon or illustration may accompany the empty state.

When a group of pages uses a tab set as secondary navigation, the amount of content included above the tabs should be minimal—usually just a title, a few primary actions, high-level information like project state, and back navigation if applicable.

Checkboxes should be used in instances during which a user can select multiple options. The selection of checkboxes should follow a consistent and predictable pattern.

• If there are layers of items to select from, practice progressive disclosure with check boxes in subsections
• If a user selects the checkbox for Section 1, the checkboxes for Section 1, Items 1-N will be revealed
• If a user selects some items within a section and then deselects Section 1, the check boxes for Section 1 will hide
• If user then reselects Section 1, the user’s previous selections will be remembered upon reveal of Section 1, Items 1-N checkboxes

When performing an operation on an element in a list, the item's background color should be animated green or red after the operation is complete in order to indiciate the success or failure of the operation.

• See example here: Projects documents and surveys tab

The site's z-index stack is structured as follows:

• Modal windows sit on top of all other elements.
• The top navigation bar sits on top of everything else.
• Popovers and tooltips should float over all other content except the top nav bar, but including the side navigation.