reustyle 2.0.7

data/styleguide/content/language/microcopy.md

@@ -0,0 +1,170 @@
+---
+name: Microcopy
+---
+
+## Microcopy
+
+*Anything shorter than a paragraph is classified as microcopy. Think anything from tooltips to button text.* 
+
+<ul class='table-of-contents'>
+<li><a href="#Help text/tool tips">Help text/tool tips</a></li>
+<li><a href="#Badge/label/USP">Badge/label/USP</a></li>
+<li><a href="#Product info">Product info</a></li>
+<li><a href="#Small print">Small print</a></li>
+<li><a href="#Caveats">Caveats</a></li>
+<li><a href="#Button text">Button text</a></li>
+<li><a href="#CTAs">CTAs</a></li>
+<li><a href="#Form text, form labels">Form text, form labels</a></li>
+<li><a href="#Placeholder text for fields">Placeholder text for fields</a></li>
+<li><a href="#Error text">Error text</a></li>
+</ul>
+
+<span id="Help text/tool tips"></span>
+**Help text/tool tips** 
+
+<img alt="image" class="us-img--full trailered" src="/images/tooltip.png">
+
+Tooltips are an interruption, use them sparingly (or not at all).  
+
+Keep the tooltip text concise. Tooltips are perfect for short sentences and sentence fragments; large blocks of text can be overwhelming and should be avoided.
+
+Tooltip text must be informative. Don't make it obvious or just repeat what is already on the screen. Because tooltip text isn't always visible, it should be supplemental info that users don't have to read.  
+
+<span id="Badge/label/USP"></span>
+**Badge/label/USP**
+
+<img alt="image" class="us-img--full trailered" src="/images/badge-label-usp.png">
+
+Very short text (1-4 words max) to distinguish products from one another and highlight features of a product that are otherwise not included on the results table. Annotated versions are paired with a descriptive line.
+
+Should be written in sentence case, not upper case. The label should be 1-4 words, while descriptive lines should be as concise as possible without wrapping on any device.
+
+Must be quantifiable facts about a product, deal or plan  be honest and as descriptive as possible. No exclamation points.
+
+<span id="Product info"></span>
+**Product info**
+
+Summary of product features relevant to users. Must be concise, relevant and quantifiable facts about a product, deal or plan – be honest and as descriptive as possible
+
+Be consistent in the way and the order information is presented and the types of information shown. Second person is ok (e.g. “More people in your region switched to this plan than any other”)
+
+<span id="Small print"></span>
+**Small print**
+
+<img alt="image" class="us-img--full trailered" src="/images/tsandcs.png">
+
+Small print reassures users and is vital for transparency.  
+
+As long as any compliance rules are taken into account, you should treat this copy like any other, and have a responsibility to make this text as comprehensible as possible to a user
+
+<span id="Caveats"></span>
+**Caveats** 
+
+<img alt="image" class="us-img--full trailered" src="/images/caveat.png">
+
+Small print text to back up any absolute claims (i.e. savings figures), denoted with an asterisk, followed by an anchor and double-anchor for further caveats. The caveat must appear on the same page as the symbol. 
+
+<ul>
+<li>For the first caveat on a page use \*</li>
+<li>For the second use &#8224;</li>
+<li>And for the third, use &#8225;</li>
+</ul>
+
+Examples of when caveats are required...
+
+<ul>
+	<li>Get the best iPhone deal with uSwitch*</li>
+	<li>Get the cheapest iPhone deal with uSwitch&#8224;</li>
+</ul>
+
+And when they're not required...
+<ul>
+	<li>Find a better energy deal</li>
+	<li>How to find the best iphone deal</li>
+</ul>
+
+<span id="Button text"></span>
+**Button text**
+
+Very short (1-3 words) actionable description of what happens when the button clicked, namely, what's on the next page. 
+
+Button text should “keep its promise” and properly set up expectations of what comes next
+
+It should be concise (1-3 words), should not contain exclamation points, should feel actionable (e.g. “buy” “switch” “get” “apply” “compare”), and can make use of urgency (e.g. “today” “now”)
+
+First person can be used (e.g. “Tell me more”).
+
+<span id="CTAs"></span>
+**CTAs** 
+
+<div class="us-grid-row">
+  <div class="us-col-md-10">
+    <img alt="image" class="us-img--full trailered" src="/images/CTAs.png">
+  </div>
+</div>
+
+An introduction to button text, usually one to two lines, that provides a reason to click the accompanying button
+
+This is only used on editorial pages. Sentence case should be used, no exclamation points, and the text must relate to the button and its action. A CTA should not end with punctuation (unlike a standard paragraph).
+
+Should not be more than two lines, usually made up of a title and copy.
+
+<span id="Form text, form labels"></span>
+**Form text, form labels** 
+
+Description of what information is required from the user. Always aim for clarity and be consistent – if using questions ('Where do you live?') or statements ('Address')
+
+Second person is acceptable, and use tool tips to explain any terms that may be unfamiliar
+
+Form label naming conventions:
+- First name 
+- Last name
+- Date of birth 
+- Email 
+- Password
+- Postcode 
+- Address 
+- Main account holder’s name
+- Driver’s name
+- Employment status
+- Annual income (before tax)
+
+<span id="Placeholder text for fields"></span>
+**Placeholder text for fields** 
+
+Pre-populated text in a field that is supposed to serve as an example or a necessary instruction. 
+
+We only use placeholder text for instructions, as a last resort, when we have no space for labels, or for email/password. 
+
+Symbols can be used (e.g. £ ) and we use sentence case. Our standard placeholder text is:
+
+- Please select
+- Enter postcode
+- DD/MM/YYYY
+- Email address
+- Password
+
+<span id="Error text"></span>
+**Error text**
+
+<img alt="image" class="us-img--full trailered" src="/images/error-texts.png">
+
+Text that is triggered by a user trying to move forward without providing requested info.
+
+Error text should be as specific and as useful/helpful as possible, but should also be short; sentence fragments are acceptable.
+
+Never be alarming, technical, or condescending (in life, but especially when it comes to error text)
+
+<span id="H1"></span>
+**H1** 
+
+Short description of the page, at a glance. 
+
+This text should be genuinely helpful, in sentence case, and should be kept as short as possible.
+
+<span id="H1"></span>
+**Introductory text**
+
+A short (two lines at most) introduction that follows on from the H1. Describes the following content and encourages the user to read on, and provides as much relevant information as possible. 
+
+This text should be genuinely helpful, sentence case, and should tell the user whether they are in the right place. 

data/styleguide/content/language/tone.md

@@ -0,0 +1,135 @@
+---
+name: uSwitch tone of voice 
+---
+
+Here at uSwitch, we offer everyone ‘Supportive Switching’.
+
+That means we’re not just passively comparing prices, we’re actively enabling and supporting the decision to switch.
+
+What we write, the way we speak to customers and every conversation we have must give people clear, timely and relevant information. And we should communicate that information in a simple but attractive way.
+
+With the right tone of voice, our words create a decisive moment: we take people from passively knowing they should switch to actively having the confidence to make the right switch
+
+
+
+<ul class='table-of-contents'>
+<li><a href="#Three core principles">Three core principles</a></li>
+<li><a href="#Framework"> Tone framework</a></li>
+<li><a href="#Empathetic">Principle 1: Empathetic</a></li>
+<li><a href="#Expert">Principle 2: Expert</a></li>
+<li><a href="#Empowering">Principle 3: Empowering</a></li>
+
+</ul>
+
+<span id="Three core principles"></span>
+## 3 core principles of the uSwitch tone of voice
+
+**- Empathetic**  
+**- Expert**  
+**- Empowering**  
+
+To give people the support they need to switch, we need to be able to deliver the right kind of message at the right time. That means our voice needs to be able to flex from simply informative – for example when we’re describing features of a product – to inspirational, when people are at the decisive moment and need extra encouragement to switch.  
+
+The trick is to strike the right balance. Our three core principles will help us do this, guiding our communications and making sure that we deliver each message in the most appropriate way.  
+
+Everything we say should always carry some elements of our core principles in varying degrees. The following framework is designed to make sure we get the balance right.  
+
+
+<span id="Framework"></span>
+## Tone framework  
+
+Our three principles work together, and we adjust the emphasis and balance depending on who we’re talking to, why and when.  
+
+One voice principle doesn’t exclude another; it’s how we mix them that gives uSwitch a rounded and distinctive voice.   
+
+And, as with people, we’re not one thing all the time, or everything at once — but we have a consistent basis that’s us. For uSwitch, that means we’re always Empathetic. We dial up and down the Expert and Empowering qualities of our voice as needed.   
+
+The key thing is to think about the main reason(s) to communicate – and use the principles accordingly.  
+
+<img alt="image" class="us-img--full trailered" src="/images/tone-framework.png">
+
+<span id="Empathetic"></span>
+## Principle 1: Empathetic 
+
+**Being empathetic means being:**  
+- Positive  
+- Encouraging  
+- Relevant  
+
+Our experience gives us insight and understanding, so being Empathetic means our writing is practical, good humoured and down to earth.  
+
+Being empathetic also means we don’t make assumptions about what people know and don’t know. 
+We shouldn’t assume confidence either. We show people that we understand what’s important to them and talk about topics and issues that are directly relevant to them.  
+
+When we write or speak, our language is outgoing and conversational, positive but never over the top.  
+
+We want people to know they can rely on us to find the switch that’s right for them -  and support them through it.  
+
+**How we show empathy in our writing**  
+
+1.  Use active, direct and positive language.  
+2. Companies don’t show empathy, people do. We should always sound like a person – if you wouldn’t say it like that, don’t write it like that.  
+3. Whether verbal or written, we should build a dialogue with customers, using relevant questions and topics of interest to engage people.  
+4. Focus on answers not problems (but don’t gloss over issues and concerns).  
+5. Make it personal by using ‘you’ as much as ‘we’.  
+6. Don’t use the passive voice unless it’s absolutely necessary to make your point. 
+Using slang that’s accepted and understood can help connect. But be careful; we don’t want to alienate audiences by using jargon or patronising language – nor by trying to ‘talk cool’ to younger audiences.  
+7. Put yourself in your customer’s shoes (and be honest). Would that headline you’re writing entice you to click on it? Is that error text going to provide support or only create more questions?   
+
+<span id="Expert"></span>
+## Principle 2: Expert  
+
+**Being expert means being:**  
+- Trusted  
+- Clear  
+- Accessible  
+
+It’s our responsibility to direct people to the information or product that’s relevant for them. So we make information quick and easy to find, and ensure the pros and cons for switching are obvious and understandable.  
+
+We don’t blind with science and we don’t dumb down. We give information succinctly and simply — but never rush the conversation.  
+
+At all times we are scrupulously balanced, accurate and honest, and this reassures people by clearly showing that we know what we’re talking about.  
+
+**How we show expertise in our writing**  
+
+1.  Be relevant and accurate with facts and figures, and get the punctuation and spelling right. Even small mistakes undermine what you’re saying.  
+2. Write succinctly and use simple sentence structures. Our prime objective is always that our audience understands us. In that way, we make complex topics simple, concise and accessible. Remember: simple isn’t simplistic; it’s just the easiest way to ensure we’re understood.  
+3. Too many facts at once can be counterproductive. Don’t overload people with unnecessary detail. Get to the point, avoiding verbal padding and meaningless phrases.  
+4. Don’t close down conversations – always have alternative options.  
+5. Avoid marketing speak and sales patter.   
+6. Don’t hide important facts. Start with what’s most relevant and individually important to your customer or audience.  
+
+<span id="Empowering"></span>
+## Principle 3: Empowering  
+
+**Being empowering means being:**
+- Inspiring  
+- Energetic  
+- Credible  
+
+We write and speak to inform and change minds, giving people the straightforward facts and, in turn, the confidence they need to switch.  
+
+Our explanations and opinions should challenge, involve, entertain, pleasantly surprise and convince  – we’re good company.   
+
+The facts and figures are important, and we know them inside and out. But we make them more compelling by putting them in context, helping people see what switching could mean for them — whether that’s finally feeling in control of their household bills or that much closer to their dream holiday savings goal.  
+
+We know who we are and what we’re about. So we believe wholeheartedly in what we do, knowing that it benefits everyone. So we’re never afraid to show our enthusiasm and commitment in our writing.  
+
+**How we empower with our writing:**  
+
+1. Wherever possible, lead with emotional benefits that customers will be able to identify with – particularly at headline level. Look for familiar or universal situations related to our subject matter.   
+2. Use real-life examples and stories wherever possible – they’re more convincing than anything you could invent.  
+3. Don’t overpromise or over-exaggerate; there’s no need.   
+4. Refresh your vocabulary and thinking; don’t keeping saying the same things in the same way
+Have an opinion and be prepared to defend it.  
+5. Don’t be afraid to (politely and tactfully) challenge or say no. The customer is not always right but our advice should be.  
+6. Be direct and positive but not flippant. Never forget that switching is a big step for many
+Bring a sense of humour where it’s appropriate –  wit is a great connector.  
+7. Focus on wants and needs, not just prices.  
+
+
+
+
+
+
+

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,88 @@
+---
+template: simple.tpl
+name: Introduction
+---
+<p>
+  Our pattern library comes as an 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="https://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 it 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 IE9.</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, Opera</td>
+        <td>Last 5 versions</td>
+      </tr>
+      <tr>
+        <td>Firefox</td>
+        <td>ESR</td>
+      </tr>
+      <tr>
+        <td>Internet Explorer</td>
+        <td>10</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 <a href="https://github.com/uswitch/ustyle">GitHub</a> 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 2016 - 2017. <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.min.js"></script>

data/styleguide/partials/_head.tpl

@@ -0,0 +1,26 @@
+<!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' />
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+  <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
+  <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">
+  <link rel="manifest" href="/images//manifest.json">
+  <link rel="mask-icon" href="/images//safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="theme-color" content="#ffffff">
+  <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,37 @@
+<header class="ustyle__header">
+  <a class="logo" href="/">
+    <svg class="us-icon--large us-icon--ustyle us-icon--medium--mobile logo__icon" role="img">
+      <use xlink:href="/images/icons.svg#icon-ustyle"></use>
+    </svg>
+    uStyle
+  </a>
+  <a class="version" href="https://github.com/uswitch/ustyle/releases/tag/v{{project.version}}">v{{project.version}}</a>
+  <svg class="logo__svg--hidden" xmlns="http://www.w3.org/2000/svg">
+    <symbol viewBox="0 0 100 100" id="uicon-logo-icon">
+    <title>logo-icon</title><path d="M26.9 51.662V12.174H.9v38.771c0 24.61 20.095 46.167 44.695 46.896 13.28.393 25.36-4.881 34.012-13.584C55.435 96.47 26.9 78.67 26.9 51.662z"/><path d="M80.9 2.138L62.733 22.174H67.9v29.378c0 13.905-13.365 24.176-26.722 19.468C58.871 92.463 93.9 79.992
+    93.9 52.023V22.174h5.2L80.9 2.138z"/></symbol>
+    <symbol viewBox="0 0 276 64" id="uicon-logo-small">
+      <title>logo-small</title>
+      <path d="M126.4 30.198c7.366 1.542 12.7 4.554 12.7 11.9 0 14.392-26.962 17.714-30.9-.5l6.5-3.3c2.337 13.174 17 10.584 17 4 0-9.031-21.8-3.134-21.8-18.1 0-7.129 6.539-10.6 13.7-10.6 7.4 0 12.3 3.3 14.8 10l-5.8 3.4c-3.022-8.689-11.392-7.304-13.8-5.9-2.502 1.668-4.384 6.921 7.6 9.1zM164.4 25.798l4.9 18.5 4.5-18.5h6.8l-7.7 27.6h-6.8l-5-18.9-5.1 18.9h-6.8l-7.7-27.6h6.8l4.5 18.5 4.9-18.5h6.7zM185.1 53.398v-27.6h7.1v27.6h-7.1zM197.1 31.498v-5.7h4.2v-7.4h7v7.4h6v5.7h-6v12.5c0 3.65 2.521 4.537 5.8 3.6l.7 5.8c-3.717 1.327-13.5 2.387-13.5-7.9v-14h-4.2zM239.2 42.498l5.7 3.7c-4.859 9.904-17.173 9.809-23.3 3.9-8.049-7.762-4.282-25 10.4-25 5.483 0 10.565 2.375 12.7 7.5l-5.8 3.8c-3.452-7.643-14.2-5.67-14.2 3.3 0 8.306 8.37 9.425 11.7 6.7 1-.9 2-2.2 2.8-3.9zM275.6 34.798v18.6h-7v-15.9c0-7.019-7.634-7.057-10.4-3.6-2.456 2.645-1.9 4.895-1.9 19.6h-7v-39h7v15.7c5.119-7.912 19.3-7.012 19.3 4.6z"/>
+      <circle cx="188.5" cy="17.798" r="4"/>
+      <path d="M77.8 42.898v-17.1h7v15.5c0 4.2 1.9 6.3 5.6 6.3 4.184 0 6.4-3.501 6.4-7.6v-14.2h7v27.6h-7v-3.8c-4.505 8.061-19 5.517-19-6.7z"/><path d="M17 34.2V8H0v25.6c0 26.622 32.502 39.889 51.402 21.1C35.893 62.409 17.546 51.556 17 34.2z"/>
+      <path d="M51.5.3L37.738 15H43v19.3c0 8.307-8.053 15.305-17.607 12.4C37.082 60.497 60 52.572 60 34.3V15h5.464L51.5.3z"/>
+    </symbol>
+    <symbol viewBox="0 0 115 100" id="uicon-logo-vertical-small">
+      <title>logo-vertical-small</title>
+      <path d="M44.57 35.053V9.456H27.674v25.597C27.674 51.566 41.108 65 57.621 65c8.274 0 15.775-3.374 21.201-8.819-15.699 7.913-34.252-3.612-34.252-21.128z"/><path d="M79.12 1L65.443 15.705h5.228v19.349c0 8.95-8.877 15.299-17.366 12.314C64.814 61.28 87.568 53.17 87.568 35.053V15.705h5.38L79.12 1z"/><path d="M24.57 83.925c3.086 1.957 11.376 1.2 11.376 8.237 0 6.858-9.901 8.793-14.639 4.895-1.575-1.295-2.58-3.02-3.015-5.175l3.699-1.865c1.362 7.518 9.76 6.072 9.76 2.3 0-5.13-12.464-1.831-12.464-10.381 0-4.116 3.707-6.092 7.833-6.092 4.247 0 7.066 1.906 8.454 5.719l-3.295 1.927c-1.68-4.961-6.411-4.182-7.91-3.357-1.49.82-1.462 2.738.201 3.792zM50.451 82.775l2.828 10.568 2.549-10.568h3.885l-4.382 15.789h-3.885l-2.891-10.847-2.922 10.847h-3.885l-4.382-15.789h3.885L43.8 93.343l2.828-10.568h3.823zM62.303 98.564V82.775h4.041v15.789h-4.041zM69.174 86.039v-3.264h2.424v-4.258h4.01v4.258h3.45v3.264h-3.45c0 6.922-.925 10.516 3.357 9.231l.373 3.295a8.04 8.04 0 0 1-2.673.435c-6.213 0-5.066-4.812-5.066-12.961h-2.425zM93.281 92.348l3.264 2.114c-2.864 5.728-9.885 5.596-13.334 2.238-4.788-4.662-2.209-14.36 5.937-14.36 3.198 0 6.032 1.333 7.242 4.289l-3.295 2.176c-2.033-4.421-8.174-3.236-8.174 1.865 0 4.748 4.658 5.405 6.683 3.87.641-.488 1.201-1.218 1.677-2.192zM114.125 98.564h-4.01v-9.107c0-3.961-4.211-4.121-5.968-2.114-1.404 1.605-1.088 2.75-1.088 11.22h-4.01V76.279h4.01v8.983c2.435-3.752 7.407-3.564 9.558-1.414 1.953 1.951 1.508 3.463 1.508 14.716zM66.513 78.167c0 3.004-4.547 3.007-4.547 0 0-3.004 4.547-3.007 4.547 0zM.875 92.566v-9.791h4.01c0 9.123-.832 12.495 3.201 12.495 2.348 0 3.668-1.947 3.668-4.351v-8.143h4.01v15.789h-4.01v-2.181C9.221 100.961.875 99.543.875 92.566z"/>
+    </symbol>
+    <symbol viewBox="0 0 155 130" id="uicon-logo-vertical">
+      <title>logo-vertical</title>
+      <path d="M60.365 44.556V10.675H38.001v33.881c0 35.254 42.846 52.904 67.7 27.966-20.78 10.471-45.336-4.783-45.336-27.966z"/><path d="M106.095 1.756l-15.627 17.19h4.445v25.61c0 11.846-11.749 20.249-22.986 16.299 15.233 18.415 45.35 7.681 45.35-16.299v-25.61h4.472l-15.654-17.19z"/><path d="M32.197 105.52c0 5.067 9.591 3.423 14.388 7.801 4.895 4.469 2.434 14.923-8.625 14.923-7.164 0-11.266-3.856-12.391-9.427l4.899-2.47c.85 4.693 3.335 7.04 7.451 7.04 6.033 0 6.793-5.169 3.746-7.019-3.928-2.385-14.779-1.714-14.779-10.724 0-5.452 4.91-8.069 10.374-8.069 5.626 0 9.359 2.525 11.198 7.575l-4.364 2.552c-2.225-6.57-8.492-5.539-10.477-4.446-.947.521-1.42 1.276-1.42 2.264zM68.163 106.755l3.746 13.997 3.376-13.997h5.146l-5.805 20.913H69.48L65.652 113.3l-3.87 14.367h-5.146l-5.805-20.913h5.146l3.376 13.997 3.746-13.997h5.064zM83.862 127.668v-20.913h5.352v20.913h-5.352zM92.963 111.077v-4.323h3.211v-5.64h5.311v5.64h4.57v4.323h-4.57c0 9.834-.763 12.474 2.676 12.474.631 0 1.221-.082 1.77-.247l.494 4.364c-2.828.99-10.251 1.739-10.251-6.052v-10.539h-3.211zM124.892 119.434l4.323 2.799c-4.942 9.884-20.79 7.291-20.79-5.022 0-12.705 16.876-14.415 20.584-5.352l-4.364 2.882c-2.67-5.807-10.827-4.333-10.827 2.47 0 6.289 6.169 7.158 8.851 5.125.851-.644 1.592-1.612 2.223-2.902zM152.5 113.547v14.12h-5.311v-12.062c0-5.212-5.553-5.486-7.904-2.799-1.864 2.13-1.441 3.663-1.441 14.861h-5.311V98.151h5.311v11.897c3.964-6.108 14.656-5.169 14.656 3.499zM89.438 100.652c0 3.979-6.022 3.983-6.022 0 0-3.979 6.022-3.983 6.022 0zM2.5 119.722v-12.968h5.311v11.774c0 6.014 5.792 5.531 7.76 3.17 1.727-2.074 1.338-3.52 1.338-14.944h5.311v20.913h-5.311v-2.889c-3.355 6.064-14.409 4.186-14.409-5.056z"/>
+    </symbol>
+    <symbol viewBox="0 0 395 90" id="uicon-logo">
+      <title>logo</title>
+      <path d="M165.9 32.9c0 12.477 31.8 3.962 31.8 26.1 0 21.377-39.296 25.32-44.5-.7l9.3-4.7c1.6 8.9 6.4 13.4 14.2 13.4 5.51 0 10.5-2.536 10.5-7.6 0-10.251-17.499-6.79-26.7-15.1-3.2-2.8-4.7-6.5-4.7-11.1 0-10.393 9.181-15.4 19.7-15.4 10.7 0 17.8 4.8 21.3 14.4l-8.3 4.9c-2.2-6.6-6.7-10-13.2-10-4.301 0-9.4 1.485-9.4 5.8zm68.5 2.4l7.1 26.7 6.4-26.7h9.8l-11.1 39.8h-9.8l-7.3-27.4-7.4 27.4h-9.8l-11.1-39.8h9.8l6.4 26.7 7.1-26.7h9.9zm29.9 39.8V35.3h10.2v39.8h-10.2zm17.3-31.6v-8.2h6.1V24.6h10.1v10.7h8.7v8.2h-8.7v18.1c0 5.28 3.474 6.471 8.5 5.1l.9 8.3c-6.694 2.231-19.5 2.53-19.5-11.5v-20h-6.1zm60.8 15.9l8.2 5.3c-3.8 7.6-10 11.4-18.7 11.4-28.132 0-27.906-42-.1-42 8.113 0 15.323 3.359 18.3 10.8l-8.3 5.5c-5.22-11.186-20.6-8.019-20.6 4.7 0 11.691 11.601 13.774 16.9 9.8 1.7-1.2 3.1-3 4.3-5.5zM395 48.2v26.9h-10.1c0-25.062.616-26.29-2.1-29.2-4.008-4.294-15.7-2.968-15.7 9v20.2H357V18.9h10.1v22.7c7.633-11.688 27.9-9.813 27.9 6.6z"/>
+      <circle cx="269.2" cy="23.7" r="5.7"/>
+      <path d="M109.3 60V35.3h10.1v22.4c0 6.1 2.7 9.1 8.1 9.1 5.917 0 9.2-4.869 9.2-11V35.3h10.1v39.8h-10.1v-5.5c-6.328 11.484-27.4 8.041-27.4-9.6z"/>
+      <path d="M24.4 47.7v-38H0v37c0 38.509 46.725 57.775 73.9 30.6-22.32 11.16-48.688-4.7-49.5-29.6z"/>
+      <path d="M74.3 0l-17 18.8h4.9v28c0 13.107-13.176 22.193-25.1 17.8 16.21 19.706 48.297 8.966 49.5-16.3V18.9h4.9L74.3 0z"/>
+    </symbol>
+  </svg>
+</header>

data/styleguide/partials/_sidebar.tpl

@@ -0,0 +1,27 @@
+<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="https://www.uswitch.com/vacancies/" target="_blank">
+      <svg role="img" class="us-icon--before us-icon--uswitch us-icon--custom us-icon--small--mobile us-icon--medium">
+      <use xlink:href="/images/icons.svg#icon-uswitch"></use>
+      </svg>
+      <span class="us-color--blue">uSwitch is hiring.</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"><svg class="us-icon--small us-icon--github"><use xlink:href="/images/icons.svg#icon-github">Github:</use></svg> {{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-color: {{value}};'>
+            </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"><svg class="us-icon--small us-icon--github"><use xlink:href="/images/icons.svg#icon-github">Github:</use></svg> <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>