get started

Easy setup & access to CDN versioning.

How to Use Canon

To begin using Canon, start with this basic HTML template that includes everything we mentioned in the App Layout section.

<!DOCTYPE html>
<html>
<head>
  <title>Canon Starter Template</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="https://eafdbc63c97ce6bec9ef-b0a668e5876bef6fe25684caf71db405.ssl.cf1.rackcdn.com/v1-latest/canon.min.css">
  <script type="application/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  <script type="application/javascript" src="https://eafdbc63c97ce6bec9ef-b0a668e5876bef6fe25684caf71db405.ssl.cf1.rackcdn.com/v1-latest/canon.min.js"></script>
</head>

<body class="rs-responsive">
  <div class="rs-wrapper">
    <div class="rs-nav-utility">
      <div class="rs-container">
        <ul class="rs-nav rs-pull-right">
          <li class="rs-nav-item"><a class="rs-nav-link" href="#">Account: Username123</a></li>
        </ul>
      </div>
    </div>
    <div class="rs-nav-primary">
      <div class="rs-container">
        <div class="rs-nav-brand">
          <a href="index.html"></a>
        </div>
        <ul class="rs-nav">
          <li><a href="#">Link One</a></li>
          <li><a href="#">Link Two</a></li>
          <li><a href="#">Link Three</a></li>
          <li><a href="#">Link Four</a></li>
        </ul>
      </div>
    </div>
    <div class="rs-nav-secondary">
      <div class="rs-container">
        <ul class="rs-nav">
          <li><a href="#">Subnav One</a></li>
          <li><a href="#">Subnav Two</a></li>
          <li><a href="#">Subnav Three</a></li>
        </ul>
      </div>
    </div>
    <div class="rs-body">
      <div class="rs-container">
        <div class="rs-main">
          <div class="rs-content rs-panel">
            <div class="rs-inner">
              <h2 class="rs-page-title">Product Name</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rs-push"></div>
  </div>
  <div class="rs-nav-footer">
    <div class="rs-container">
      <ul class="rs-nav">
        <li class="rs-nav-item">&copy; Rackspace, US</li>
        <li class="rs-nav-item"><a class="rs-nav-link" href="http://www.rackspace.com/information/legal/websiteterms" target="blank">Website Terms</a>
        <li class="rs-nav-item"><a class="rs-nav-link" href="http://www.rackspace.com/information/legal/privacystatement" target="blank">Privacy Policy</a>
      </ul>
    </div>
  </div>
</body>
</html>

Or, find more detail on our demo site.

CDN Resources

Most users will want to pull the latest Canon release directly off CDN:

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

By consuming Canon using these URLs, you will automatically receive bug fixes and other forward-compatible changes. We also provide the ability to link to a specific version from the CDN. See the versioning section for more information on our versioning strategy and links to additional downloads.

What's Included
Versioning

Canon uses Semantic Versioning. In a nutshell, changes are divided into three categories:

  • Backwards compatible bug fixes
  • New, backwards compatible functionality
  • New, backwards incompatible functionality

Canon distributes a build to CDN that includes all backwards compatible bug fixes and functionality for the latest major version. We strongly recommend that you consume Canon in this manner so that you will automatically receive critical bug fixes. If you would rather link to a specific version or serve Canon yourself, the table below provides links to all Canon versions.

Previous Versions

See the changelog for more information about the changes contained in each release.

Version Minified Uncompressed Downloads
Version 1.8.0 CSS Javascript CSS Javascript ZIP TAR
Version 1.7.0 CSS Javascript CSS Javascript ZIP TAR
Version 1.6.1 CSS Javascript CSS Javascript ZIP TAR
Version 1.5.1 CSS Javascript CSS Javascript ZIP TAR
Version 1.5.0 CSS Javascript CSS Javascript ZIP TAR
Version 1.4.1 CSS Javascript CSS Javascript ZIP TAR
Version 1.4.0 CSS Javascript CSS Javascript ZIP TAR
Version 1.3.1 CSS Javascript CSS Javascript ZIP TAR
Version 1.2.0 CSS Javascript CSS Javascript ZIP TAR
Version 1.1.0 CSS Javascript CSS Javascript ZIP TAR
Version 1.0.0 CSS Javascript CSS Javascript ZIP TAR
Version 1.0.0-rc.3 CSS Javascript CSS Javascript ZIP TAR
Version 1.0.0-rc.2 CSS Javascript CSS Javascript ZIP TAR
Version 1.0.0-rc.1 CSS Javascript CSS Javascript ZIP TAR
Version 0.5.0 CSS Javascript CSS Javascript ZIP TAR
Version 0.4.2 CSS Javascript CSS Javascript ZIP TAR
Version 0.4.1 CSS Javascript CSS Javascript ZIP TAR
Version 0.4.0 CSS Javascript CSS Javascript ZIP TAR
Version 0.3.2 CSS Javascript CSS Javascript ZIP TAR
Version 0.3.0 CSS Javascript CSS Javascript ZIP TAR
Version 0.2.0 CSS Javascript CSS Javascript ZIP TAR
Version 0.1.1 CSS Javascript CSS Javascript ZIP TAR
Version 0.1.0 CSS Javascript CSS Javascript ZIP TAR
Version 0.0.0 CSS Javascript CSS Javascript ZIP TAR