Interface Styleguide - cockpit-project/cockpit GitHub Wiki

Introduction

[TBD: add intro]

Styleguide

Consistency

The most important rule is to make things as consistent as possible. Limit the number of (unwelcome) surprises in your interface.

Links and Buttons

  • Links: navigate to a new location
  • Buttons: perform an action
  • Buttons with ellipsis: perform an action that needs input (often in a dialog)

External links from web applications should look different from internal links, and, in most cases, open in a new tab/window using target="_blank".

Tooltips

Tooltips should only be used when information is obscured in some manner. If there is an ellipsis, use a tooltip. If an icon lacks a label, use a tooltip.

Confirmation versus Undo

Whenever possible, skip a confirmation step and allow for an undo afterward.

An exception: If there is possible or probable data loss and no way to undo, show a confirmation.

Primary and secondary actions

Make the default (primary) action clear, and make it visibly different from the secondary action.

Web technology

HTML5

Use HTML5.

Browser Targets

By default, target the latest and the previous versions of popular browsers, which include: Firefox, Chrome, and Internet Explorer. (Some projects have additional requirements.)

CSS and HTML versus JavaScript

Try to rely on native proprities of CSS and HTML instead of doing things through pure JavaScript. In most cases, the pure CSS way of doing things (like some animations & transitions, opacity) is optimized and hardware accelerated. Reimplmenting the same thing

Accessiblity

Whenever possible, try to take advantage of a browser's built in accessibility.

Do not break typical keyboard presses, such as "/" for search or "control-p" for print.

Widgets should have a "tab" order and should have a visible state when focused. (See the tabindex HTML property.)

Color is to be used as an additional indicator of state. Ensure your interface works without color (or varying types of color) for colorblind people. Use different shades, different types of widgets, and text to convey meaning.

Resources