Canon Bootstrap

Summary

Layout Framework

The basic layout of Canon consists of 5 parts: 3 layers of navigation within the header, the content area, and the footer.

  1. The utility navigation consists of links and tools that help the user, such as account details, log out, or help information, but are not the core sections of the application.
  2. The primary navigation is used for the main sections of the application or for dropdown categories that organize sections into higher level groups.
  3. The secondary navigation is used for a 2nd or 3rd level of navigation, depending on the structure of the primary nav.
  4. The content area is used for your application's main data and interactions.
  5. The footer is used for legal information, application news, and feedback links.

Content

Fluid Grid

How it works

Canon predefines options for page layout via the content area styles but sometimes a grid system is needed for content within those sections or for custom layouts. As such, Canon includes a responsive 12 column fluid grid.

  • Create a grid row with the rs-row class
  • Add the appropriate number of span- columns. As this is a 12-column grid, each span- spans a number of those 12 columns, and should always add up to 12 for each row
  • The column gutters can be removed by using rs-row-collapse as the row class
  • Offsets can be applied with offset-
  • Nest grids by adding a new row and columns within a span- column

Responsive Options

  • The default span- columns stack vertically for viewports under 768px
  • To prevent vertical stacking use small-span- column classes

Content

Header and Navigation

Types of Navigation

Utility Navigation:
  • Top-right: Used for utilities like Account information, Support links, Logout, etc
  • Top-left: Used to SSO between Rackspace properties.
  • Remains consistent across the UIs that it links together
  • Highlight the current application with an active state so users know where they are.
Primary Navigation:
  • Customize these sections for your application's categories or products.
  • Highlight the category with an active state so users know what section they are in.
  • Use dropdowns when you have 3 or more levels of information/navigation.
Secondary Navigation:
  • Highlight the section with an active state so users know what sub-section they are in.

Adherence Rating: 3

Content

Content Area

Layout Options

The content area contains the primary information and functionality views for your application. Consistent layout is imperative so users always have a feel for where they are. For example, a List Table should use a different layout than a Detail View.

Sidebars

The position of the sidebars significantly changes based on the content.

  • Left Sidebar (Filtering):
    Use for functionality that correlates with the main content (filtering). Do not use for navigation or informational text.
  • Right Sidebar (Help Panel):
    Use for information that correlates with the main content (help information, support links, etc). Do not use for navigation or filtering.

Adherence Rating: 2

Content

How it works

The footer looks and behaves similar to the top navigation bar. Just like the top nav, the footer should be consistent across Rackspace applications. If you support multiple geographies, these may change between countries. Below is a list of what it should contain in the order they appear:

  • Copyright Date
  • Terms of Service
  • Privacy Policy
  • Application News:
    For example: Release notes, new features, or other information that keeps users up to date with your app.
  • Feedback:
    Provide a way for users to submit feedback. This helps your team prioritize features and make users feel involved.

Adherence Rating: 3

Content