ustyle 1.3.6

data/styleguide/assets/sass/modules/_styleguide.scss

@@ -0,0 +1,134 @@
+$styleguide-block-padding: $gutter-width*2;
+$styleguide-separator-color: $c-bggrey;
+$styleguide-block-border-color: $c-bordergrey;
+
+.styleguide {
+  &__hero {
+    padding: 2em $gutter-width / 2;
+    margin-right: - $gutter-width / 2;
+    margin-left: - $gutter-width/2;
+    color: #fff;
+    background-color: $c-navy;
+
+    @include respond-to($sidebar-breakpoint, true) {
+      padding: 2em $gutter-width/2;
+    }
+
+    @include respond-to(desktop, true) {
+      padding-left: $gutter-width;
+      margin-left: - $gutter-width/2;
+    }
+  }
+
+  &__hero-heading {
+    margin-bottom: 0;
+  }
+
+  &__block {
+    @extend %clearfix;
+    position: relative;
+    padding-bottom: $styleguide-block-padding / 1.5;
+    border-bottom: 1px solid $styleguide-separator-color;
+
+    + .styleguide__block {
+      padding-top: $styleguide-block-padding / 2;
+    }
+  }
+
+  &__header {
+    padding-top: $styleguide-block-padding/2;
+    padding-bottom: $styleguide-block-padding/2;
+
+    @include respond-to(tablet, true) {
+      padding-top: $styleguide-block-padding/2;
+    }
+  }
+
+  &__title {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    color: $c-navy;
+  }
+
+  &__description {
+    color: $c-typegrey-2;
+  }
+
+  &__content {
+    padding-top: $gutter-width;
+
+    @include respond-to(desktop, true) {
+      &--w-sidebar {
+        border-right: 1px solid $c-keylinegrey;
+      }
+    }
+  }
+
+  &__file-link {
+    @include link-colors($c-typegrey, $c-typecyan);
+    display: inline-block;
+    padding: 5px 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.25;
+    text-decoration: none;
+    vertical-align: middle;
+    background-color: $c-bggrey;
+    border-radius: 2px;
+  }
+
+  &__block-title {
+    position: relative;
+    margin-bottom: $gutter-width/2;
+    color: $c-navy;
+  }
+
+  &__block-small-title {
+    padding: $gutter-width/2 $gutter-width/2 0 $gutter-width/2;
+    margin-bottom: 0;
+    font-size: 1.125em;
+    color: $c-typegrey-2;
+    text-transform: uppercase;
+  }
+
+  &__block-examples {
+    border: 1px solid $styleguide-block-border-color;
+    border-radius: 3px;
+  }
+
+  &__block-example {
+    @extend %clearfix;
+    position: relative;
+    padding: $gutter-width $gutter-width/2;
+
+    + &__block-example {
+      border-top: 1px dashed darken($styleguide-separator-color, 10%);
+    }
+  }
+
+  &__block-example-class {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 0 8px;
+    font-size: .85em;
+    color: $c-typegrey;
+    background-color: $c-bggrey;
+  }
+
+  &__block-states {
+    padding-left: 0;
+    margin-top: 0;
+    color: lighten($c-typegrey, 10%);
+    list-style: none;
+
+    li:before {
+      display: inline-block;
+      margin: 0 .35em;
+      font-size: 1.4em;
+      font-weight: normal;
+      color: $c-bordergrey;
+      content: "\203A";
+    }
+  }
+}

data/styleguide/assets/sass/modules/_table.scss

@@ -0,0 +1,3 @@
+.table__container {
+  overflow-x: scroll;
+}

data/styleguide/assets/sass/modules/_tooltip.scss

@@ -0,0 +1,9 @@
+.tooltip-demo {
+  position: relative;
+  padding: 1em;
+  border: 1px dashed $c-inputgrey;
+
+  @include respond-to(tablet, true) {
+    width: 50%;
+  }
+}

data/styleguide/assets/sass/modules/_typography.scss

@@ -0,0 +1,14 @@
+.font-chars {
+  margin-bottom: 2em;
+  font-size: 1.75em;
+  line-height: 2;
+  color: $c-typegrey-2;
+
+  &--bold {
+    @include bold-font;
+  }
+
+  &--italic {
+    @include italic-font;
+  }
+}

data/styleguide/assets/sass/modules/_version.scss

@@ -0,0 +1,11 @@
+.version {
+  display: inline-block;
+  padding: 3px;
+  margin-left: 10px;
+  font-size: .75em;
+  line-height: 1.4;
+  color: $c-typegrey-2;
+  vertical-align: middle;
+  background-color: $c-bggrey;
+  border-radius: 2px;
+}

data/styleguide/assets/sass/structure/_base.scss

@@ -0,0 +1,18 @@
+$container-width: 90%;
+
+html {
+  @include respond-to(mobile) {
+    font-size: $base-font-size * .875;
+  }
+}
+
+.container {
+  @extend %clearfix;
+  position: relative;
+  padding-right: $gutter-width / 2;
+  padding-left: $gutter-width / 2;
+}
+
+.content {
+  padding-top: $gutter-width;
+}

data/styleguide/assets/sass/structure/_header.scss

@@ -0,0 +1,12 @@
+.ustyle__header {
+  @extend %clearfix;
+  z-index: 15;
+  padding: .55em;
+
+  @include respond-to(tablet, true) {
+    position: fixed;
+    width: $sidebar-width;
+    padding: 1.45em .55em;
+    border-right: 1px solid $c-bordergrey;
+  }
+}

data/styleguide/assets/sass/vendor/_highlight.scss

@@ -0,0 +1,139 @@
+pre {
+  display: block;
+  padding: 1.5em;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: Consolas,"Liberation Mono", Menlo, Courier, monospace;
+  font-size: .9em;
+  line-height: 1.4;
+  color: $c-typegrey;
+  background: #fafafa;
+  border-top: 1px solid $c-bordergrey;
+
+  code {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    max-width: initial;
+    overflow: initial;
+    line-height: inherit;
+    color: $c-typegrey;
+    word-wrap: normal;
+    background: none;
+    border: 0;
+  }
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #999988;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #009999;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+  color: deeppink;
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+  color: #990000;
+  font-weight: bold;
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #445588;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: $c-blue;
+  font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: $c-typecyan;
+}
+
+.hljs-regexp {
+  color: #009926;
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073;
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+  color: #0086b3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #ffdddd;
+}
+
+.hljs-addition {
+  background: #ddffdd;
+}
+
+.diff .hljs-change {
+  background: #0086b3;
+}
+
+.hljs-chunk {
+  color: #aaaaaa;
+}

data/styleguide/assets/sass/vendor/_pure-table.scss

@@ -0,0 +1,75 @@
+.pure-table {
+    /* Remove spacing between table cells (from Normalize.css) */
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+    border: 1px solid #cbcbcb;
+}
+
+.pure-table caption {
+    color: #000;
+    font: italic 85%/1 arial, sans-serif;
+    padding: 1em 0;
+    text-align: center;
+}
+
+.pure-table td,
+.pure-table th {
+    border-left: 1px solid #cbcbcb;/*  inner column border */
+    border-width: 0 0 0 1px;
+    font-size: inherit;
+    margin: 0;
+    overflow: visible; /*to make ths where the title is really long work*/
+    padding: 0.5em 1em; /* cell padding */
+}
+
+/* Consider removing this next declaration block, as it causes problems when
+there's a rowspan on the first cell. Case added to the tests. issue#432 */
+.pure-table td:first-child,
+.pure-table th:first-child {
+    border-left-width: 0;
+}
+
+.pure-table thead {
+    background-color: #e0e0e0;
+    color: #000;
+    text-align: left;
+    vertical-align: bottom;
+}
+
+/*
+striping:
+   even - #fff (white)
+   odd  - #f2f2f2 (light gray)
+*/
+.pure-table td {
+    background-color: transparent;
+}
+.pure-table-odd td {
+    background-color: #f2f2f2;
+}
+
+/* nth-child selector for modern browsers */
+.pure-table-striped tr:nth-child(2n-1) td {
+    background-color: #f2f2f2;
+}
+
+/* BORDERED TABLES */
+.pure-table-bordered td {
+    border-bottom: 1px solid #cbcbcb;
+}
+.pure-table-bordered tbody > tr:last-child > td {
+    border-bottom-width: 0;
+}
+
+
+/* HORIZONTAL BORDERED TABLES */
+
+.pure-table-horizontal td,
+.pure-table-horizontal th {
+    border-width: 0 0 1px 0;
+    border-bottom: 1px solid #cbcbcb;
+}
+.pure-table-horizontal tbody > tr:last-child > td {
+    border-bottom-width: 0;
+}

data/styleguide/content/brand/index.md

@@ -0,0 +1,47 @@
+---
+name: Framework
+---
+
+## We believe in simplicity.
+
+That’s why we’ve made these guidelines really simple. They inform the way we look, feel, behave and sound as a company. They help ensure we remain consistent, impactful and recognisable across all of our communications.
+
+### Our values
+- Fairness
+- Knowledge
+- Clarity
+- Confidence
+- Possibilities
+
+### Our mission
+Using our expansive market knowledge and customer insight, we want to provide a simple, relevant service allowing customers to switch with minimal hassle.
+
+### Our ambition
+To be the UK’s leading comparison site for all consumers who wish to make their money go further.
+
+### Our vision
+We are the comparison service of choice – because we make it relevant, personal and simple to use for consumers and partners.
+
+### Our benefit
+We help our customers feel like life just keeps on switching for the better, allowing their time and money to be spent on what really matters.
+
+### Our personality
+- Expert
+- Frank
+- Connected
+- Human
+- Advisory
+
+## Brand positioning
+
+### Intuitive and focused
+We are connected to the individual needs of our customers. In fact, we work to understand them better than anyone. We use masses of customer data, constantly capturing more and more to continually improve the relevance of our advice. Add that to our commitment to ensure ours is the most simple and comprehensive switching service available, and our customers can find clarity in a confusing marketplace and build confidence in our brand.
+
+### Authoritative and directional
+We know what we’re talking about because we’re experts in what we do. We can demonstrate an unparalleled in-depth and connected understanding of our customers, the economy, household finances and the industries in which we operate. We’re always frank. We fight for what we believe is fair. And we do what we believe is right to build respect and trust.
+
+### Personal and engaging
+We are a human brand that talks to our customers, not preaches. We treat them like knowledgeable peers. Always consistent in our tone, look and customer experience across all touch points. To make things easy to understand, information is visualised and bought to life, enabling our customers to see how they can save money or get better value for money.
+
+### Experimental and bold
+We are pro-active, always adapting and pre-empting changes in customer mood and wider markets in which we exist. It lets our customers connect and interact with us with confidence.And we are proud of our BETA mindset. We stay agile, but we never look unpredictably experimental. Rather, we are open, current, honest, committed and consistent with our advice

data/styleguide/content/brand/language.md

@@ -0,0 +1,102 @@
+## How does a brilliantly simple brand sound?
+
+Think of our tone of voice as a natural extension of our values and personality. We might not mention them in our copy, but their ‘feel’ should come across in every word, sentence and paragraph.
+
+#### Table of contents
+1. [Tone of voice](#tone-of-voice)
+2. [Writing tips](#writing-tips)
+3. [Writing conventions](#writing-conventions)
+
+## Tone of voice
+
+1. **Expert** - We have a deep understanding of people, household finances and the industries in which we operate. Be confident and authoritative.
+2. **Human** - We always talk on the same level as our customers. Be friendly and conversational, never patronising.
+3. **Connected** - We are seamlessly synchronised with the wider world and financial one. Be timely, knowledgeable and accurate.
+4. **Frank** - We speak truthfully and with insight. Be honest and transparent.
+5. **Advisory** - We make a positive impact on the lives of our customers. Be empowering and informative.
+
+## Writing tips
+
+### Write like you speak
+Write as if the reader is in front of you. It’ll make your words sound more natural and believable.
+
+### Jargon-free zone
+Leave the corporate words to the boardroom. Everyday words are much better. They’re easier to read and get our message across quicker.
+
+### Statistical value
+Well-placed stats and relevant data really add weight to what we’re saying. But use them sparingly, and only if it really merits it.
+
+### Be active
+Use an active voice rather than a passive one. This means writing sentences this way round: ‘The customers were saving money.’ Rather than this way round: ‘Money was being saved by the customers.
+
+### Consistency is key
+We all need to speak and write the same way, otherwise it waters down our brand and weakens our position.
+
+### Headlines
+Keep them short. The longer a headline is, the less likely it is to be read. So don’t write it in four words if you can do it in three.
+
+### Less is more
+Short copy gets read. Long copy doesn’t. Get to the point as quick as possible. Otherwise you’ll lose the reader.
+
+### Be purposeful and actionable
+Content should always be actionable. You’ve given the customer relevant information, now tell them what they can do with it.
+
+### Once is enough
+Say it once and say it well. Repetition makes copy boring and overly long, and creeps in when we’re not confident about what we’re saying.
+
+### Snack-sized copy
+If you have a lot of information to get across, use bullet points or sub-headings to break it up. But don’t use too many bullets or make them too long or it will defeat the objective.
+
+### Go with the flow
+Do your words trip off the tongue? There’s one way to find out. Read them out loud and you’ll soon find out where it’s not flowing.
+
+## Writing conventions
+
+### Abbreviations
+
+For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.
+
+### Ampersands (&)
+
+For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.
+
+### Apostrophes
+Avoid common misuse of apostrophes:
+
+- Mixing up it’s (it is) and its (possessive)
+- Using to denote plural: DVD’s (wrong) vs DVDs (correct)
+- When writing Dos and Don’ts (not Do’s and Don’ts)
+- When writing decades 1990s (not 1990’s); the ’80s (not the 80’s)
+
+### British English
+
+Use the British ‘s’ in words such as ‘realise’, and ‘specialise’, rather than the American ‘z’.
+
+### Capital letters
+
+Never use all capital letters. Headlines follow usual sentence structure, with only the first word and proper nouns utilising capitals.
+
+### Company names and references
+
+Follow punctuation and capitalisation of company names and products as they are branded.
+> Example: E.ON, iPhone, iSaver
+
+When referencing a company in a news or guide, remember to always keep them in the singular.
+> Example: BT is launching a new ... (not BT are launching a new ...)
+
+### Contractions
+
+Our tone of voice is friendly and familiar, so it’s fine to use contractions like ‘they’ll’, ‘it’ll’, ‘isn’t’.
+
+### Dashes and hyphens
+If you use a dash within a sentence to create emphasis, then use a long em dash – rather than a hyphen.
+Compound adjectives before a noun generally use a hyphen (e.g. ‘the well-organised energy provider’). After a noun, they should be separated (e.g. ‘the energy provider was well organised’).
+
+### Exclamation marks
+Use sparingly.
+
+### Full stops
+Don’t use full stops at the end of headlines.
+
+### Legals, disclaimers and caveats
+Superscript numbering should be used when there is more than one caveat, however, when there is only one caveat in a communication, an asterisk (*) should be used.

data/styleguide/content/brand/logo.tpl

@@ -0,0 +1,102 @@
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <div class="us-col-6">
+      <h3>Variations</h3>
+      <p>Primary logo  - can be used in either brand blue #174695 or as a white out version (see below for usage on different background colours)</p>
+    </div>
+    <div class="us-col-6">
+      <div class="us-grid-row">
+        <div class="us-col-6">
+          <h5>Blue logo</h5>
+          <div class="logo-state logo--blue">
+            <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--large"></span>
+          </div>
+        </div>
+        <div class="us-col-6">
+          <h5>White logo</h5>
+          <div class="logo-state logo--white">
+            <span class="us-icon--notext us-icon--uswitch us-icon--white us-icon--large"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <div class="us-col-6">
+      <h3>Spacing</h3>
+      <p>Every time our logo appears, there should always be minimum clear space around it.This can be worked out by taking the width of the left stem (see ‘S’ in the diagram), and applying it around the logo. This area should always be kept clear.</p>
+    </div>
+    <div class="us-col-6">
+      <p><strong>s</strong> = The width of the left stem of the U.</p>
+      <div class="logo-state logo-spacer">
+        <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--large"></span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <div class="us-col-6">
+      <h3>Sizing</h3>
+      <p>Our logo comes in 3 different sizes through our SVG/PNG icon system.</p>
+    </div>
+    <div class="us-col-6">
+      <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--small"></span>
+      <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--medium"></span>
+      <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--large"></span>
+    </div>
+  </div>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <div class="us-col-6">
+      <h3>Usage rules</h3>
+      <p>Please make sure you’re not tempted to do any of the following to the logo:</p>
+      <ul>
+        <li>Change elements of it</li>
+        <li>Outline or put a keyline around it</li>
+        <li>Use a different blue</li>
+        <li>Use a gradient or tint</li>
+        <li>Rotate the logo</li>
+      </ul>
+    </div>
+    <div class="us-col-6"></div>
+  </div>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <div class="us-col-6">
+      <h3>Blue logo placement</h3>
+      <p>Our blue logo can be placed on a white or light-coloured background, or even on simple photography. However, it should not be placed on a dark or contrasting blue, as it doesn’t stand out so well. The same goes for complex imagery and gradients.</p>
+    </div>
+    <div class="us-col-6"></div>
+  </div>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <div class="us-col-6">
+      <h3>White logo placement</h3>
+      <p>Our white logo can be placed over any of the uSwitch blues, or dark-coloured backgrounds, and even on simple photography. However, it should not be placed on a light colour or complex imagery as it doesn’t stand out so well..</p>
+    </div>
+    <div class="us-col-6"></div>
+  </div>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <div class="us-col-6">
+      <h3>Partner / Off site usage</h3>
+      <p>For off-site and partner use we have a logo variant that includes the site URL. The same usage guidelines apply</p>
+    </div>
+    <div class="us-col-6">
+      <span class="us-icon--before us-icon--uswitch--before us-icon--custom--before us-icon--large--before"><strong class="us-color--blue">uSwitch.com</strong></span>
+    </div>
+  </div>
+</div>