Canon Bootstrap

Summary

UI components are reusable elements that combine to form UX Patterns. If you are using these for the first time, please read through the component details carefully. The “Adherence Rating” of each pattern explains how strict implementation must be to ensure usability. If you need new components/patterns for your app or if would like to participate in creating additional ones, please let us know.

Adherence Rating Scale:

  1. Just a suggestion - Use it if you like it! Your implementation can vary. You may choose to use a similar pattern of your own.
  2. A really good idea - Some really good thought was put into this. Try and follow the guidelines.
  3. Sort of strict - Significant design and research went into the production of this pattern. Implementation should follow guidelines pretty closely overall.
  4. Basically the law - A lot of research and design went into this pattern. It has been widely accepted as the standard at Rackspace. Implementation must be exactly as prescribed in this article.

Typography

Headings

Use these styles to visually distinguish sections of content.

When to use

  • Page titles should use <h2 class="rs-page-title">
  • Section headings should use <h1>, sub-sections should use <h3>.
  • Sidebar headings should use <h3>, sidebar sub-headings should use <h4>

Adherence Rating: 2

Markup

<div>Coming soon...</div>

Buttons

How it works

Use these styles to visually distinguish between actions, making it clear to users which action they are performing.

Guidelines for use

  • Button groups should be used to submit forms and should contain a cancel link.
  • Never shown/hide buttons dynamically. Instead, disable/enable buttons using the "disabled" attribute on the button.
  • Learn more about button best practices from our design research.

Adherence Rating: 2

Markup

<div>Coming soon...</div>

Popover

Use the popover in conjunction with Details and Edit Button to edit data or with the Primary Button to add or create data.

  • The notch of the popover always points to the title (key, link, or button) of the element you are editing or viewing.
  • The popover should cover any information that you are editing.
  • Popover buttons have reserved space at the bottom. Save button labels should indicate what action you are performing and always relate to the subject of the popover.
  • Clicking outside the popover should close it. Interaction with elements under the popover is restricted until closed.
  • Don't force-fit multi-step processes into popovers. That sort of interaction should be acheived using full-page views.
  • Try to avoid spawning popovers from popovers. Keeping the interaction as flat as possible is the key to clean design.
  • Avoid spawning popovers on hover. They should not behave like tooltips.
  • Specify form sizes to match the width of the longest label: xsmall, small, medium, large, xlarge, xxlarge.
Required Components

Adherence Rating: 3

Markup

<div>Coming soon...</div>

When to use

Dropdown menus are used when displaying several related links will not fit the alotted space. There are 3 styles of dropdowns, each with a different purpose. Use the links below to learn more about the usage guidelines for each one:

Adherence Rating: 3

Markup

<div>Coming soon...</div>

Tables

When to use

Tabs are used to navigate lists of related content. In forms, they are used to categorize and organize similar content. The count for each list is not required, but feel free to use where appropriate.

  • Use when the content for each tab has similar structure (e.g., list tables).
  • Use when there is not enough space on the page to show all content.
  • Use when the content of each tab can be viewed separately from each other, and doesn't require comparison.
  • Do not use when the content inside each pane would function just as well in its own separate page.
  • Limit to 5-8 sections, depending on the length of each section name.

Adherence Rating: 2

Markup

<div>Coming soon...</div>

Facets

How it works

Facets can be used to apply filters to a Table. This is not a standalone component - it should be used as part of the List View Pattern.

Rules for Use

  • The top header should reflect the name of the product - EX: "Filter Servers"
    If the product name is long and gets truncated, use "Filter List" instead.
  • Organize sections based on usefulness - For example: we place priority on tags
  • Sections must contain at least two items to appear in the facet sidebar
  • Facets can contain icons related to items in the table - see the Status example
  • Only one facet section should have icons per page to reduce cognitive load
  • Facet counts are optional and although useful, they can result in extra processing to calculate - beware of performance issues

Toggling Facet Sections

  • Limit facet sections to 5 visible facet items
  • Add the "more" / "less" link when a section has 6 or more facet items
  • Use "expanded" and "collapsed" classes on the rs-facet-section element to easily track toggled states

About Filtering

Table filtering should usually reduce result sets rather than increase them. A good analogy is that of choosing to query a system using "OR" versus "AND" operators.

How you choose to filter will depend on the nature of your data, and what your users are trying to achieve by filtering.

When filtering using "OR" logic, do not hide excluded facets - just add the "disabled" class to show that they are not within the result set.

Adherence Rating: 3

Markup

<div>Coming soon...</div>

Details

When to use

Use this to display details about a single item or product. Combine this component with the action button, action dropdown, status indicator, embedded tables, and popovers. For more information on how to combine components, use the Detail View Pattern.

The content of a details component is broken into 2 main parts: The details header summarizes the item you are viewing. The details sections are sub-sections that display status, technical specifications, settings, or tables of data about the product. These are often combined with editable actions that spawn popovers.

Details Header
  • Grey text shows the category of the product.
  • Primary text shows the name of the product.
  • Include tags (if applicable).
Details Sections
  • The section header should identify the type of content within the sub-section.
  • This pattern is built to be used with content like key / value lists, embedded tables, etc.
  • The entity's status should always be the first item in the key / value list.
  • When key / value items are editable, use edit buttons to open a popover, modal or new page to update.

Adherence Rating: 1

Markup

<div>Coming soon...</div>

Forms

How it works

Forms consist of two or more elements in key/value (or label/input) format.

  • Each key should be specific, short and easy to read.
  • When creating, name fields come first.
  • Specify the input size to match the width of the data: xsmall, small, medium, large, xlarge, xxlarge.
  • Specify form sizes to match the width of the longest label: xsmall, small, medium, large, xlarge, xxlarge. (Applies to all but Create Form)

Adherence Rating: 2

Markup

<div>Coming soon...</div>

Tabs

When to use

Tabs are used to navigate lists of related content. In forms, they are used to categorize and organize similar content. The count for each list is not required, but feel free to use where appropriate.

  • Use when the content for each tab has similar structure (e.g., list tables).
  • Use when there is not enough space on the page to show all content.
  • Use when the content of each tab can be viewed separately from each other, and doesn't require comparison.
  • Do not use when the content inside each pane would function just as well in its own separate page.
  • Limit to 5-8 sections, depending on the length of each section name.

Adherence Rating: 2

Markup

<div>Coming soon...</div>

Status Indicators

How it works

Use status indicators for any entity with states that may impact the customer's experience.

  • Indicators use a solid color to represent status, such as "error, warning, active, or disabled".
  • Use .rs-status for the pill-style component. It is most often the first item on an entity's details page.
  • The colored text style (without .rs-status) is often used in a table to explain a process.
  • Improve the API status formatting as necessary (e.g., change API strings from ALL CAPS to Title Case).
  • Status specifications for Cloud Products can be found below. Use these as an example for mapping other Rackspace API statuses to the UI.

Adherence Rating: 1

Markup

<div>Coming soon...</div>

Progress Bars

Progress bars visually communicate activity, status and percentage.

When to use

  • Basic Progress Bars can be used when a metric can be expressed in terms of amount consumed versus total amount
  • Multi-Step Progress Bars are good for representing a user's position in a multi-step process as well as the activity and status of each step.

How it works

  • Use status colors to reflect the parent entity's status. This can change throughout the process.
    • Green (OK) state is for processes with no impact on the uptime of a product, like uploading a file.
    • Yellow (Processing) state shows a user initiated processes, like rebuilding or resizing, that may cause a product to intermittently work.
    • Red (Error) state is used to represent a failed process, or to indicate that a device is currently offline.
    • Blue (Neutral Info) is for displaying metrics with a neutral status, like showing percent of total.
  • Use animating stripes when you need more indication that work is happening in the background.

Adherence Rating: 1

Markup

<div>Coming soon...</div>

Tooltips

How it works

Use the tooltip when you want to convey brief snippets of information, to explain an element a bit more, or to display truncated text.

  • Activates when hovered on with mouse.
  • The tooltip disappears when mouse hovers away, or when clicked in the icon. Tooltip does not reactivate on click.
  • Tooltip should only be used on icon images, text, and table rows; use when see fit.
  • Max width for the tooltip is 500px.

Adherence Rating: 1

Markup

<div>Coming soon...</div>