Introducing Rackspace® Canon

Rackspace® Canon is designed to make application development easier and faster.

The framework provides Layouts and UI Components which are combined to form our library of UX Patterns.

These patterns have been designed and tested by Rackspace® Product Design.


Get Started Now

Step 1: Link to the CSS

Canon is designed to be conflict-free. Use with your existing framework, like Foundation, Twitter Bootstrap, or your custom CSS.

Latest Version:

https://eafdbc63c97ce6bec9ef-b0a668e5876bef6fe25684caf71db405.ssl.cf1.rackcdn.com/v1-latest/canon.min.js
https://eafdbc63c97ce6bec9ef-b0a668e5876bef6fe25684caf71db405.ssl.cf1.rackcdn.com/v1-latest//canon.min.css

View All Versions

Step 2: Use Canon class names in your HTML

Try implementing Canon in baby steps. For example, start with the "frame" or App Layout before the content areas. This makes changes easier on your users as well.

Step 3: Sign up for our mailing list

Sign up for canon-users@lists.rackspace.com. For every Canon release, we'll send an notice to this email list. It's also a great place for discussion among Canon users across Rackspace.

What's new in this release?
New Features in Version 1.8.0:
  • Apply filters to a table.
  • Add support for keybaord navigation.