ustyle 1.3.6

data/styleguide/content/design/index.tpl

@@ -0,0 +1,79 @@
+---
+name: Imagery
+---
+
+<p>Our brand imagery is made up of <strong>lifestyle photography, product and object images, illustrations,</strong>  and <strong>infographics.</strong>  All of our imagery types should reassert our brand values of fairness, clarity and confidence.</p>
+<p>It’s important to remember that imagery is an extension of the uSwitch brand. It's use is to support or convey a message, not drive it.</p>
+<div class="us-content-group">
+  <h2>Lifestyle photography</h2>
+  
+  <p>Lifestyle photography should have a British feel where possible, avoiding obviously American or global images. It should be ‘reportage’ in style, avoiding cheesy, posed, forced or unrealistic photography.</p>
+  <div class="us-grid-row">
+    <div class="us-col-md-6">
+      <img class="us-img--full trailered" src="/images/lifestyle-photography-01.png">
+      <img class="us-img--full trailered" src="/images/lifestyle-photography-02.png">
+      <img class="us-img--full trailered" src="/images/lifestyle-photography-05.png">
+      <img class="us-img--full trailered" src="/images/lifestyle-photography-06.png">
+    </div>
+    <div class="us-col-md-6">
+      <img class="us-img--full trailered" src="/images/lifestyle-photography-03.png">
+      <img class="us-img--full trailered" src="/images/lifestyle-photography-04.png">
+      <img class="us-img--full trailered" src="/images/lifestyle-photography-07.png">
+      <img class="us-img--full trailered" src="/images/lifestyle-photography-08.png">
+    </div>
+  </div>
+</div>
+<div class="us-content-group">
+  <h2>Product and object images</h2>
+  <p>Our product and object focused imagery may be cut out over our brand colours, brand gradients or white. When objects aren’t cut out, they should be realistic in their setting and not appear staged. Images should be straightforward, not overly metaphor based, and should not appear noticeably manipulatd. Images should be ‘documentary’ in style, avoiding cheesy, posed, forced or unrealistic photography.</p>
+  <p>This will also extend into 3D renderings of objects, which are used within the banner areas of our website.</p>
+  <div class="us-grid-row">
+    <div class="us-col-md-6">
+      <img class="us-img--full trailered" src="/images/object-photography-01.png">
+      <img class="us-img--full trailered" src="/images/object-photography-02.png">
+      <img class="us-img--full trailered" src="/images/object-photography-05.png">
+      <img class="us-img--full trailered" src="/images/object-photography-06.png">
+    </div>
+    <div class="us-col-md-6">
+      <img class="us-img--full trailered" src="/images/object-photography-03.png">
+      <img class="us-img--full trailered" src="/images/object-photography-04.png">
+      <img class="us-img--full trailered" src="/images/object-photography-07.png">
+      <img class="us-img--full trailered" src="/images/object-photography-08.png">
+    </div>
+  </div>
+</div>
+<div class="us-content-group">
+  <h2>Illustrations</h2>
+  <p>Our illustration style should be straightforward, clean and simple. Illustrations should be put over our brand colours, gradients or white, and they should be 2-D where possible, and not be overly metaphor based or cliché.</p>
+  <div class="us-grid-row">
+    <div class="us-col-md-6">
+      <img class="us-img--full trailered" src="/images/illustration-01.png">
+      <img class="us-img--full trailered" src="/images/illustration-02.png">
+      <img class="us-img--full trailered" src="/images/illustration-05.png">
+      <img class="us-img--full trailered" src="/images/illustration-06.png">
+    </div>
+    <div class="us-col-md-6">
+      <img class="us-img--full trailered" src="/images/illustration-03.png">
+      <img class="us-img--full trailered" src="/images/illustration-04.png">
+      <img class="us-img--full trailered" src="/images/illustration-07.png">
+      <img class="us-img--full trailered" src="/images/illustration-08.png">
+    </div>
+  </div>
+</div>
+<div class="us-content-group">
+  <h2>Infographics</h2>  
+  <p>We use a 3D text effect to give some depth to our infographics. This should be used on objects to highlight or pull them out of the infographic. Due to the uniqueness of each infographic, there is not a rigid style in place. Just be as sympathetic to our guidelines as possible and use the colour palette.</p>
+  <h4>Sizing</h4>
+  <p>Infographics are generally displayed on our news and guide pages, so size the graphic accordingly (ie. 8 column width). They are also sometimes printed, so prepare them at 300dpi, then save at 72dpi if also needed for web.</p>
+  
+  <div class="us-grid-row">
+    <div class="us-col-md-6">
+      <img class="us-img--full trailered" src="/images/infographic-01.png">
+    </div>
+    <div class="us-col-md-6">
+      <img class="us-img--full trailered" src="/images/infographic-02.png">
+    </div>
+  </div>
+    </div>
+  </div>
+</div>

data/styleguide/content/design/typography.md

@@ -0,0 +1,30 @@
+Typography is a key element of how we communicate at uSwitch. We've recently revised our type settings and removed FS Elliot Web from our fonts to increase legibility across devices.
+
+Our chosen font is the beautiful and open source Open Sans which performs exceptionally well across all of our target devices and operating systems. It is, unlike many custom webfonts, particularly well kerned for Windows machines.
+
+Open Sans
+---
+
+<div class="font-chars">
+A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z
+<br>a  b  c  d  e  f  g  h  i  j  k  l  m  n  o  p  q  r  s  t  u  v  w  x  y  z
+<br>0  1  2  3  4  5  6  7  8  9  10
+</div>
+
+Open Sans Bold
+---
+
+<div class="font-chars font-chars--bold">
+A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z
+<br>a  b  c  d  e  f  g  h  i  j  k  l  m  n  o  p  q  r  s  t  u  v  w  x  y  z
+<br>0  1  2  3  4  5  6  7  8  9  10
+</div>
+
+Open Sans Italic
+---
+
+<div class="font-chars font-chars--italic">
+A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z
+<br>a  b  c  d  e  f  g  h  i  j  k  l  m  n  o  p  q  r  s  t  u  v  w  x  y  z
+<br>0  1  2  3  4  5  6  7  8  9  10
+</div>

data/styleguide/content/index.tpl

@@ -0,0 +1,44 @@
+---
+template: simple.tpl
+name: uSwitch living styleguide
+---
+<p>
+  The sum of our efforts towards style guidelines, a pattern library and an automated front-end. Made with &#10084; at <a href="http://www.uswitch.com" target="_blank"><strong class="us-color--blue">uSwitch.com</strong></a>
+</p>
+<div class="us-content-group mobile-bordered">
+  <div class="us-grid-row">
+    <div class="us-col-md-6">
+      <h3>Design guidelines</h3>
+      <p>uStyle includes documentation and guidelines relating to our core design principles. It is where we document everything that happens within our brand, UX and front-end development.</p>
+    </div>
+    <div class="us-col-md-6">
+      <h3>Automated development</h3>
+      <p>uStyle is a gem, a bower package, a npm package and static assets. This allows our team setup to choose how they wish to implement the core front-end of uSwitch. We've tried to be as accessible as possible.</p>
+    </div>
+  </div>
+</div>
+<div class="us-content-group mobile-bordered">
+  <div class="us-grid-row">
+    <div class="us-col-md-6">
+      <h3>Pattern library</h3>
+      <p>At its core, uStyle is a pattern library. It contains all current components and elements of the uSwitch UI. These are documented in the <a href="/pattern-library/">pattern library</a> section.</p>
+    </div>
+    <div class="us-col-md-6">
+      <h3>Designer + developer happiness</h3>
+      <p>Delivering designer + developer happiness is very important to us. uStyle provides a base for all our design and development work and allows our designers and developers to focus on the things that matter, whilst making their lives easier when prototyping.</p>
+    </div>
+  </div>
+</div>
+<div class="us-content-group">
+  <h2>The logo</h2>
+  <div class="us-grid-row">
+    <div class="us-col-md-2">
+      <span class="us-icon--notext us-icon--ustyle us-icon--large logo--ustyle"></span>
+    </div>
+    <div class="us-col-md-10">
+      <p>There is no reason for this logo other than it's funny and unicorns are all the rage just now.</p>
+
+      <p><strong>Disclaimer:</strong> uSwitch is not a unicorn company.
+    </div>
+  </div>
+</div>

data/styleguide/content/pattern-library/grid.tpl

@@ -0,0 +1,64 @@
+<div class="styleguide__block">
+  <p>
+    Our grid is a 12 column grid, with similar sizes to that of Bootstrap. We also adhere to the same naming standards for device breakpoints.
+  </p>
+  <ul>
+    <li>Default gutter width: <strong>15px either side</strong></li>
+    <li>Large container width: <strong>1170px</strong></li>
+    <li>Desktop container width: <strong>970px</strong></li>
+    <li>Tablet container width: <strong>770px</strong></li>
+  </ul>
+  <ul>
+    <li>The parent container is <code>.us-container</code>, you must have this to start building the uSwitch layouts.</li>
+    <li><code>.us-grid-row</code> is then used when you are building rows of columns (gives a negative margin to the container so they align correctly)</li>
+    <li>All grid class names are prefixed with <code>.us-col-</code></li>
+  </ul>
+</div>
+<div class="styleguide__block">
+  <h2 class="styleguide__block-title">Example</h2>
+  <p>Here is an example of a grid which will turn into 100% width columns on mobile.</p>
+  <div class="grid-example">
+    <div class="us-grid-row">
+      <div class="col-example us-col-md-2">.us-col-md-2</div>
+      <div class="col-example us-col-md-2">.us-col-md-2</div>
+      <div class="col-example us-col-md-4">.us-col-md-4</div>
+      <div class="col-example us-col-md-4">.us-col-md-4</div>
+    </div>
+    <div class="us-grid-row">
+      <div class="col-example us-col-md-8">.us-col-md-8</div>
+      <div class="col-example us-col-md-4">.us-col-md-4</div>
+    </div>
+    <div class="us-grid-row">
+      <div class="col-example us-col-md-6">.us-col-md-6</div>
+      <div class="col-example us-col-md-6">.us-col-md-6</div>
+    </div>
+  </div>
+  <pre><code class="html">
+&lt;div class=&quot;us-grid-row&quot;&gt;
+  &lt;div class=&quot;us-col-md-2&quot;&gt;.us-col-md-2&lt;/div&gt;
+  &lt;div class=&quot;us-col-md-2&quot;&gt;.us-col-md-2&lt;/div&gt;
+  &lt;div class=&quot;us-col-md-4&quot;&gt;.us-col-md-4&lt;/div&gt;
+  &lt;div class=&quot;us-col-md-4&quot;&gt;.us-col-md-4&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;us-grid-row&quot;&gt;
+  &lt;div class=&quot;us-col-md-8&quot;&gt;.us-col-md-8&lt;/div&gt;
+  &lt;div class=&quot;us-col-md-4&quot;&gt;.us-col-md-4&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;us-grid-row&quot;&gt;
+  &lt;div class=&quot;us-col-md-6&quot;&gt;.us-col-md-6&lt;/div&gt;
+  &lt;div class=&quot;us-col-md-6&quot;&gt;.us-col-md-6&lt;/div&gt;
+&lt;/div&gt;
+  </code></pre>
+</div>
+<div class="styleguide__block">
+  <h2 class="styleguide__block-title">Example with mobile columns</h2>
+    <div class="grid-example">
+      <div class="us-grid-row">
+        <div class="col-example us-col-xsm-6 us-col-md-2">.us-col-xsm-6.us-col-md-2</div>
+        <div class="col-example us-col-xsm-6 us-col-md-2">.us-col-xsm-6.us-col-md-2</div>
+        <div class="col-example us-col-sm-6 us-col-md-4">.us-col-sm-6.us-col-md-4</div>
+        <div class="col-example us-col-sm-6 us-col-md-4">.us-col-sm-6.us-col-md-4</div>
+      </div>
+    </div>
+  </div>
+</div>

data/styleguide/content/pattern-library/index.tpl

@@ -0,0 +1,92 @@
+---
+template: simple.tpl
+name: Introduction
+---
+<p>
+  Our pattern library comes as a easily distributed package, ready to use in multiple programming environments. It contains our basic CSS components and correct usage, as well as JavaScript components that are widely used across the website.
+</p>
+<a class="us-btn us-btn--small" href="http://github.com/uswitch/ustyle">View on github</a>
+<div class="us-content-group mobile-bordered">
+  <h2 class="trailered">Distribution methods</h2>
+  <div class="us-grid-row">
+    <div class="us-col-md-6 trailered">
+      <img src="/images/ruby-logo.png" alt="Ruby logo" class="distro-image">
+      <h3>Ruby gem</h3>
+      <p>uStyle was initially created as a gem. Some of the Sass functions rely on Ruby to run. You can install it via any Gemfile and it will install the required dependencies.</p>
+      <pre><code class="ruby">gem 'ustyle', git: "git@github.com:uswitch/ustyle.git"</code></pre>
+    </div>
+    <div class="us-col-md-6 trailered">
+      <img src="/images/bower-logo.png" alt="Bower logo" class="distro-image">
+      <h3>Bower package</h3>
+      <p>Install is as a bower package. This will pull down the original <code>.scss</code> files and compiled static CSS + JS.</p>
+      <pre><code class="javascript">
+        "dependencies": {
+          "ustyle": "git@github.com:uswitch/ustyle.git#~0.19.1"
+        }
+      </code></pre>
+    </div>
+  </div>
+</div>
+<div class="us-content-group mobile-bordered">
+  <div class="us-grid-row">
+    <div class="us-col-md-6 trailered">
+      <img src="/images/cloudfront-logo.png" alt="Cloudfront logo" class="distro-image">
+      <h3>Cloudfront</h3>
+      <p>Every time uStyle gets a new version, the version gets updated across our Cloudfront distributions.
+      <pre><code class="html">
+        &lt;!-- get latest --&gt;
+        &lt;link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' /&gt;
+        &lt;!-- get versioned --&gt;
+        &lt;link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/VERSION/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' /&gt;
+      </code></pre>
+    </div>
+    <div class="us-col-md-6">
+      <img src="/images/npm-logo.png" alt="NPM logo" class="distro-image">
+      <h3>NPM Package</h3>
+      <pre><code class="javascript">
+        "devDependencies": {
+          "ustyle": "git@github.com:uswitch/ustyle.git#~0.19.1"
+        }
+      </code></pre>
+    </div>
+  </div>
+</div>
+<div class="us-content-group mobile-bordered">
+  <h2>Browser support</h2>
+  <p>We use <a href="https://github.com/postcss/autoprefixer">Autoprefixer + Browserlist</a> to decide what vendor prefixes to apply to our <code>Sass</code> files. We have a slightly wider browser support than the default (<a href="https://github.com/ai/browserslist#browserslist-">here</a>). Currently we support all the way to IE8.</p>
+  <p>Below is what we support. Each line is the minimum version or % use based on CanIUse metrics</p>
+  <table class="pure-table pure-table-bordered">
+    <thead>
+      <tr>
+        <th>Browser</th>
+        <th>Minimum version supported</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Safari, Chrome</td>
+        <td>Last 5 versions</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>22</td>
+      </tr>
+      <tr>
+        <td>Opera</td>
+        <td>12.1</td>
+      </tr>
+      <tr>
+        <td>Internet Explorer</td>
+        <td>8 (unless stated)</td>
+      </tr>
+      <tr>
+        <td>Global usage</td>
+        <td>> 1%</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div class="us-content-group mobile-bordered">
+  <h2>Installation</h2>
+  <p>See our github for documentation on installing this across applications.</p>
+</div>

data/styleguide/partials/_footer.tpl

@@ -0,0 +1,8 @@
+<div class="container sidebar--push">
+  <p class="copyright">Copyright uSwitch Limited 2015. <a href="https://github.com/{{project.repository}}">Github</a></p>
+</div>
+ <script type="text/javascript" src='https://www.gstatic.com/charts/loader.js'>
+ </script>
+<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<script src="/js/app.js"></script>

data/styleguide/partials/_head.tpl

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]> ><! <![endif]-->
+<html class='no-js svg' lang='en'>
+  <!-- <![endif] -->
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+  <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+  <title>uStyle styleguide</title>
+  <link rel="stylesheet" href="/css/main.css" type="text/css" />
+  <!--[if lt IE 9]>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
+  <![endif] -->
+  <script>
+    (function(html){
+      html.className=html.className.replace(/\bno-js\b/,'js');
+    })(document.documentElement);
+  </script>
+</head>

data/styleguide/partials/_header.tpl

@@ -0,0 +1,7 @@
+<header class="ustyle__header">
+  <a class="logo" href="/">
+    <span class="logo__icon us-icon--notext us-icon--ustyle us-icon--typegrey us-icon--medium--mobile us-icon--large"></span>
+    uStyle
+  </a>
+  <a class="version" href="https://github.com/uswitch/ustyle/releases/tag/{{project.version}}">v{{project.version}}</a>
+</header>

data/styleguide/partials/_sidebar.tpl

@@ -0,0 +1,22 @@
+<a href="javascript:void(0);" class="nav-mobile js-toggle__link us-tablet--hidden" data-target="sidebar"><span class="nav-mobile__hamburger">Sidebar</span></a>
+<div class='sidebar'>
+  {{#navigation}}
+    <nav class="sidebar__nav {{activeClass this 'section'}}">
+      <a href="/{{this}}/" class="sidebar__nav-link js-sidebar-nav-link {{activeClass this 'section'}}">{{humanize this}}</a>
+      <nav class="sidebar__sub-nav">
+        {{#each ../pages}}
+          {{#isActive this.section ../this}}
+            <a class="sidebar__nav-link sidebar__nav-link--sub {{activeClass this.name 'name'}}" href="/{{../../this}}/{{page}}">{{name}}</a>
+          {{/isActive}}
+        {{/each}}
+        {{#isActive "pattern-library" this}}
+          <a class="sidebar__nav-link sidebar__nav-link--sub" href="/sass/" target="_blank">Sass doc</a>
+        {{/isActive}}
+      </nav>
+    </nav>
+  {{/navigation}}
+
+  <div class="made-at">
+    <a href="http://www.uswitch.com/tech/" target="_blank" class="us-icon--before us-icon--uswitch--before us-icon--custom--before us-icon--small--before--mobile us-icon--medium--before"><span class="us-color--blue">uSwitch tech creation.</span></a>
+  </div>
+</div>

data/styleguide/partials/colour.tpl

@@ -0,0 +1,24 @@
+<div class="styleguide__block" id="{{link}}">
+  <div class="styleguide__block-info">
+    <h2 class="styleguide__block-title">
+      {{name}}
+      <a href="https://github.com/uswitch/ustyle/tree/master/{{path}}" class="styleguide__file-link"><span class="us-icon--small us-icon--github us-icon--notext us-icon--custom">Github:</span> {{file}}</a>
+    </h2>
+    
+    {{{description}}}
+    <div class="us-grid-row">
+      {{#variable}}
+        <div class="colour us-col-md-4">
+          <div class="colour__block">
+            <div class="colour__hex" style='background: {{value}}; color: white;'>
+            </div>
+            <div class="colour__description">
+              <h4 class="colour__title">{{name}} - {{value}}</h4>
+              <span>{{description}}</span>
+            </div>
+          </div>
+        </div>
+      {{/variable}}
+    </div>
+  </div>
+</div>

data/styleguide/partials/icons.tpl

@@ -0,0 +1,28 @@
+<div class="styleguide__block styleguide__block--icons" id="{{link}}">
+  <h2 class="styleguide__block-title">
+    {{name}}
+    <a href="https://github.com/uswitch/ustyle/tree/master/{{path}}" class="styleguide__file-link"><span class="us-icon--small us-icon--github us-icon--notext us-icon--custom">Github:</span> <span class="us-tablet--inline">{{file}}</span></a>
+  </h2>
+
+  <div class="styleguide__description">
+    {{{description}}}
+  </div>
+
+  <h3 class="styleguide__block-small-title">Example</h3>
+  <div class="styleguide__block-examples">
+    <pre><code class="html">
+    {{#markup}}
+      {{~{escaped}}}
+    {{/markup}}
+    </code></pre>
+    <div class="us-clearfix">
+      {{#state}}
+        <div class="styleguide__block-example us-col-md-3 state">
+          {{{markup.example}}}
+          <div class="styleguide__block-example-class">{{name}}</div>
+        </div>
+      {{/state}}
+    </div>
+  </div>
+
+</div>

data/styleguide/partials/style_block.tpl

@@ -0,0 +1,44 @@
+<div class="styleguide__block" id="{{link}}">
+  <h2 class="styleguide__block-title">
+    {{name}}
+    <a href="https://github.com/uswitch/ustyle/tree/master/{{path}}" class="styleguide__file-link"><span class="us-icon--small us-icon--github us-icon--notext us-icon--custom">Github:</span> <span class="us-tablet--inline">{{file}}</span></a>
+  </h2>
+
+  <div class="styleguide__description">
+    {{{description}}}
+  </div>
+
+  {{#if state}}
+    <h4>States</h4>
+    <ul class="styleguide__block-states us-clearfix">
+      {{#state}}
+        <li class="name"><strong>{{name}}</strong> - {{description}}</li>
+      {{/state}}
+    </ul>
+  {{/if}}
+
+  <div class="styleguide__block-examples">
+    <h3 class="styleguide__block-small-title">Example</h3>
+    <div class="styleguide__block-example">
+      {{{markup.example}}}
+    </div>
+
+    {{#state}}
+      <div class="styleguide__block-example state-{{classSanitizer name}}">
+        {{{markup.example}}}
+        <div class="styleguide__block-example-class">{{name}}</div>
+      </div>
+    {{/state}}
+
+    <pre><code class="html">
+    {{#markup}}
+      {{~{escaped}}}
+    {{/markup}}
+    </code></pre>
+    {{#if javascript}}
+      <pre><code class="javascript">
+      {{~{javascript}}}
+      </code></pre>
+    {{/if}}
+  </div>
+</div>

data/styleguide/templates/simple.tpl

@@ -0,0 +1,15 @@
+{{> _head}}
+<body>
+  {{> _header}}
+  {{> _sidebar}}
+  <div id="wrapper" class="container header--push sidebar--push">
+    <div class="styleguide__hero">
+      <h1 class="styleguide__hero-heading">{{page.name}}</h1>
+    </div>
+    <div class="styleguide__content markdown styleguide us-col-lg-10">
+      {{{page.content}}}
+    </div>
+  </div>
+  {{> _footer}}
+</body>
+</html>

data/styleguide/templates/stats.tpl

@@ -0,0 +1,50 @@
+{{> _head}}
+<body>
+  {{> _header}}
+  {{> _sidebar}}
+  <div id="wrapper" class="container header--push sidebar--push">
+    <div class="styleguide__hero">
+      <h1 class="styleguide__hero-heading">{{page.name}}</h1>
+    </div>
+    <div class="styleguide__content markdown styleguide us-col-lg-10">
+      <script>
+        var reportData = {{{json page.content.report}}};
+      </script>
+      <div id="simplicity_chart" style="width: 100%; height: 500px;"></div>
+      <div class="us-padding-top--large" id="size_chart" style="width: 100%; height: 500px;"></div>
+      <div class="us-content-group table__container">
+        <h2>Breakdown of stats by uStyle release</h2>
+        <table class="pure-table pure-table-bordered pure-table-striped">
+          <thead>
+            <tr>
+              <th>Version</th>
+              <th>Selectors</th>
+              <th>Simplicity</th>
+              <th>Rules</th>
+              <th>Universal selectors</th>
+              <th>Media queries</th>
+              <th>Important keywords</th>
+              <th>Size</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each page.content.report}}
+              <tr>
+                <td><strong class="us-color--typecyan">{{this.version}}</strong></td>
+                <td>{{this.selectors}}</td>
+                <td>{{number this.simplicity}}</td>
+                <td>{{this.rules}}</td>
+                <td>{{this.universalSelectors}}</td>
+                <td>{{this.mediaQueries}}</td>
+                <td>{{this.importantKeywords}}</td>
+                <td>{{humanFileSize this.size}}</td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  {{> _footer}}
+</body>
+</html>

data/styleguide/templates/styleguide.tpl

@@ -0,0 +1,33 @@
+{{> _head}}
+<body>
+  {{> _header}}
+  {{> _sidebar}}
+  {{#page}}
+    <div id="wrapper" class="container sidebar--push header--push nav--push">
+      <div class="styleguide__hero">
+        <h1 class="styleguide__hero-heading">{{name}}</h1>
+      </div>
+        {{#if blocks}}
+          <nav class="nav--sub us-col-lg-2">
+            <div class="js-sticky">
+              <h4>Patterns</h4>
+              {{#blocks}}
+                <a class="nav__link" href="#{{link}}">{{name}}</a>
+              {{/blocks}}
+            </div>
+          </nav>
+        {{/if}}
+      <div class="us-col-lg-10 styleguide__content styleguide__content--w-sidebar">
+        {{#blocks}}
+          {{#if partial}}
+            {{partial partial}}
+          {{else}}
+            {{> style_block}}
+          {{/if}}
+        {{/blocks}}
+      </div>
+    </div>
+  {{/page}}
+  {{> _footer}}
+</body>
+</html>

data/tasks/publish.rake

@@ -0,0 +1,65 @@
+lib_path = File.join(File.dirname(__FILE__), 'lib')
+$:.unshift(lib_path) unless $:.include?(lib_path)
+
+require 'botoenv'
+Botoenv.load
+
+require 'ustyle'
+require 'ustyle/deploy'
+require 'fileutils'
+
+namespace :ustyle do
+  desc "Publishes uStyle v#{Ustyle::VERSION}"
+  task :publish => [ "git:add", "git:push",
+                     "deploy:images", "deploy:stylesheets"
+                    ] do
+    puts green("Publishing uStyle v#{Ustyle::VERSION}")
+  end
+end
+
+namespace :git do
+  task :add do
+    `git commit -am '#{Ustyle::VERSION}' && git tag -a v#{Ustyle::VERSION} -m '#{Ustyle::VERSION}'`
+  end
+
+  desc "Push version #{Ustyle::VERSION} to github"
+  task :push do
+    `git push && git push --tags`
+  end
+end
+
+namespace :deploy do
+  desc "Deploy stylesheets to S3"
+  task :stylesheets do
+    Dir["dist/*.{css,json,js}"].each do |file|
+      file_name = File.basename(file)
+      content_type = Ustyle.mime_type_for(file_name)
+      Ustyle.s3_upload( Ustyle.versioned_path(file_name), file, content_type )
+      Ustyle.s3_upload( "ustyle/#{file_name}", file, content_type )
+    end
+
+    Ustyle.invalidate([
+      "/s3/#{Ustyle::BUCKET}/ustyle/ustyle-latest.css",
+      "/s3/#{Ustyle::BUCKET}/ustyle/ustyle-content.css",
+      "/s3/#{Ustyle::BUCKET}/ustyle/ustyle-icons.css"
+    ])
+  end
+
+  desc "Deploy images to S3"
+  task :images do
+    images_dir = File.join Ustyle.assets_path, "images", "**", "*"
+    Dir[images_dir].each do |file|
+      next if File.directory?(file)
+      file_path = file.gsub(Regexp.new("#{Ustyle.assets_path}/"), "")
+      hashed_file = Ustyle.asset_digest(file_path)
+      Ustyle.s3_upload( Ustyle.versioned_path(hashed_file), file, Ustyle.mime_type_for(file))
+    end
+  end
+end
+
+def colorize(text, color_code)
+  "\e[#{color_code}m#{text}\e[0m"
+end
+
+def red(text); colorize(text, 31); end
+def green(text); colorize(text, 32); end