ustyle 1.8.7 → 1.10.0

data/lib/ustyle/version.rb

@@ -1,4 +1,4 @@
 module Ustyle
-  version = "1.8.7"
+  version = "1.10.0"
   VERSION = version
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ustyle",
-  "version": "1.8.7",
+  "version": "1.10.0",
   "description": "A living styleguide and pattern library by uSwitch.",
   "keywords": [
     "css",
@@ -32,7 +32,7 @@
   ],
   "repository": "uswitch/ustyle",
   "scripts": {
-    "test": "grunt test"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
     "async": "^0.9.0",

data/styleguide/assets/sass/main.scss

@@ -2,14 +2,9 @@ $hero-padding-top: 1em;
 $icons: (
   alarm
   android
-  angry
-  apple
   arrow-circle
-  arrow-up-left
   arrow-up
   arrow-down
-  barchart
-  blackberry
   book
   bookmark
   breadcrumb
@@ -23,8 +18,6 @@ $icons: (
   cog
   credit-card
   cross
-  desktop
-  doc
   dual-fuel
   electric-light
   envelope
@@ -39,23 +32,19 @@ $icons: (
   google
   google-brand
   graph-up
-  happy
   home
   hot
   info
   kettle
   key
-  laptop
   lock
   magnify-in
-  magnify-out
   magnify
   menu
   message
   mobile
   monthly-dd
   network
-  neutral
   no-exit
   pdf
   pencil
@@ -65,18 +54,15 @@ $icons: (
   piggy-bank
   pin
   pound-note
-  power
   present
   print
   quarterly-dd
   question-circle
-  question
   quote
   recycle
   remove
   renewable
   results
-  sad
   save
   share
   sim
@@ -89,7 +75,6 @@ $icons: (
   star
   starline-half
   starline
-  tablet
   talk
   tick-circle
   tick
@@ -99,18 +84,13 @@ $icons: (
   uswitch
   variable
   warning-circle
-  warning
   wifi
   wiki
-  windows
-  wondering
-  world
   xml
   play
-  controller
   pound-circle
   ustyle
-) !default;
+);
 
 $needs-font: true;
 $load-icons: true;

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

@@ -19,38 +19,162 @@
   height: 128px;
 }
 
-
 // Logo states
 
-.logo-state {
+.logo__state {
+  position: relative;
   display: inline-block;
   padding: 18px;
+  margin-bottom: 10px;
 
-  .us-icon--uswitch {
-    vertical-align: middle;
+  + p {
+    color: $c-typegrey-2;
+  }
+}
+
+.logo__sizing {
+  position: absolute;
+  top: 50%;
+  right: -60px;
+  margin-top: -16px;
+
+  &:before {
+    position: absolute;
+    top: 50%;
+    left: -10px;
+    width: 2px;
+    background-color: $c-red;
+    content: "";
+  }
+
+  &.h92:before {
+    height: 92px;
+    margin-top: -45px;
+  }
+
+  &.h64:before {
+    height: 64px;
+    margin-top: -32px;
+  }
+
+  &.h70:before {
+    height: 70px;
+    margin-top: -35px;
+  }
+
+  &.h35:before {
+    height: 35px;
+    margin-top: -17px;
+  }
+}
+
+.logo__vertical {
+  svg {
+    width: 100%;
+    height: 100%;
+    max-width: 150px;
+    max-height: 150px;
+  }
+
+  &--alternate {
+    svg {
+      max-width: 100px;
+      max-height: 92px;
+    }
+  }
+
+  &--alternate-min {
+    svg {
+      max-height: 70px;
+    }
+  }
+}
+
+.logo__horizontal {
+  padding: 18px 40px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    max-width: 250px;
+    max-height: 100px;
+  }
+
+  &--alternate {
+    svg {
+      max-height: 64px;
+    }
+  }
+
+  &--alternate-min {
+    svg {
+      max-height: 35px;
+    }
   }
 }
 
-.logo--blue {
-  border: 2px dotted $c-blue;
+.logo--blue,
+.logo--cyan {
+  fill: $c-blue;
+}
+
+.logo-white,
+.logo--bwblack {
+  fill: #fff;
+}
+
+.logo--blue,
+.logo--bwwhite {
+  border: 1px solid $c-typegrey-2;
 }
 
 .logo--white {
   background-color: $c-blue;
+  fill: #fff;
 }
 
-.logo-spacer {
+.logo--cyan {
+  background-color: $c-cyan;
+}
+
+.logo--bwwhite {
+  fill: #000;
+}
+
+.logo--bwblack {
+  background-color: #000;
+}
+
+.logo__spacer--vertical,
+.logo__spacer--horizontal {
   position: relative;
-  border: 1px dashed $c-red;
 
   &:before {
     position: absolute;
     top: 0;
     left: 0;
-    width: 18px;
+    width: 25px;
     height: 100%;
     text-align: center;
     background-color: $c-cyan-light;
     content: "s";
   }
 }
+
+.logo__spacer--horizontal {
+  &:before {
+    width: 40px;
+  }
+}
+
+.logo__svg--hidden {
+  display: none;
+}
+
+.logo__icon-standalone {
+  display: inline-block;
+  padding: $gutter-width/2.5;
+  line-height: 1;
+  background-color: $c-blue;
+  border-radius: 22px;
+}

data/styleguide/content/brand/index.md

@@ -41,7 +41,7 @@ We are connected to the individual needs of our customers. In fact, we work to u
 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.
+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 brought 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/logo.tpl

@@ -1,22 +1,41 @@
+<ul class='table-of-contents'>
+  <li><a href="#orientation">Orientation</a></li>
+  <li><a href="#colour">Colour</a></li>
+  <li><a href="#exclusion-zone">Exclusion zone</a></li>
+  <li><a href="#alternate-logo">Alternate logo (small)</a></li>
+  <li><a href="#minimum-sizes">Minimum sizes</a></li>
+  <li><a href="#icon-only">Icon only</a></li>
+  <li><a href="#usage-rules">Usage rules</a></li>
+</ul>
 <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 class="us-col-12">
+      <h3 id="orientation">Orientation</h3>
+      <p>
+        We've made our logo available in vertical and horizontal formats to
+        allow for flexibility in various layouts. Choose the format that best
+        suits the usage.
+      </p>
     </div>
-    <div class="us-col-6">
+  </div>
+  <div class="us-grid-row">
+    <div class="us-col-12">
       <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 class="logo__state logo__vertical logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
           </div>
+          <p>
+            Vertical orientation
+          </p>
         </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 class="logo__state logo__horizontal logo--blue">
+            <svg><use xlink:href="#uicon-logo"/></svg>
           </div>
+          <p>
+            Horizontal orientation
+          </p>
         </div>
       </div>
     </div>
@@ -25,14 +44,77 @@
 
 <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 class="us-col-12">
+      <h3 id="colour">Colour</h3>
+      <p>
+        Our logo should only appear in our approved colours. The brand blue logo
+        is the preferred version. It can also be displayed on a cyan background.
+      </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 class="us-grid-row">
+    <div class="us-col-12">
+      <div class="us-grid-row">
+        <div class="us-col-4">
+          <div class="logo__state logo__vertical logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+          <p>
+            Brand blue is the preferred version of the logo.
+          </p>
+        </div>
+        <div class="us-col-4">
+          <div class="logo__state logo__vertical logo--white">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+          <p>
+            Alternatively it can also be used in white on dark backgrounds.
+          </p>
+        </div>
+        <div class="us-col-4">
+          <div class="logo__state logo__vertical logo--cyan">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+          <p>
+            It can also be used on a cyan background.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <p>
+        The black and white versions of our logo should only be used when colour
+        reproduction is not available. Choose the option that will provide the
+        most contrast with the background.
+      </p>
+    </div>
+  </div>
+
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <div class="us-grid-row">
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal logo--bwwhite">
+            <svg><use xlink:href="#uicon-logo"/></svg>
+          </div>
+          <p>
+            The black logo is for use on light backgrounds where colour
+            reproduction is not available.
+          </p>
+        </div>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal logo--bwblack">
+            <svg><use xlink:href="#uicon-logo"/></svg>
+          </div>
+          <p>
+            The white logo is for use on dark backgrounds where colour
+            reproduction is not available.
+          </p>
+        </div>
       </div>
     </div>
   </div>
@@ -40,63 +122,139 @@
 
 <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 class="us-col-12">
+      <h3 id="exclusion-zone">Exclusion Zone</h3>
+      <p>
+        Always leave plenty of room around the logo. This will enable it to
+        feature prominently without clutter.
+      </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 class="us-grid-row">
+    <div class="us-col-12">
+      <div class="us-grid-row">
+        <div class="us-col-6">
+          <div class="logo__state logo__vertical logo__spacer--vertical logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+        </div>
+        <br>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal logo__spacer--horizontal logo--white">
+            <svg><use xlink:href="#uicon-logo"/></svg>
+          </div>
+        </div>
+      </div>
+      <p>
+        The 'S' from our wordmark can be used to measure out the exclusion zone.
+      </p>
     </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 class="us-col-12">
+      <h3 id="alternate-logo">Alternate logo for use at smaller sizes</h3>
+      <p>
+        An alternative version of our logo must be used when it's being displayed
+        at smaller sizes. It ensures that the arrowhead, a key element of our
+        brand, remains clear and prominent.
+      </p>
+    </div>
+  </div>
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <div class="us-grid-row">
+        <div class="us-col-6">
+          <div class="logo__state logo__vertical--alternate logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical-small"/>
+            <div class="logo__sizing h92">92px</div>
+          </div>
+          <p>
+            Use the alternative version of the vertical logo when using at a
+            height of 92px or less.
+          </p>
+        </div>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal--alternate logo--white">
+            <svg><use xlink:href="#uicon-logo-small"/></svg>
+            <div class="logo__sizing h64">64px</div>
+          </div>
+          <p>
+            Use the alternate version of the horizontal logo when using at a
+            height of 64px or less.
+          </p>
+        </div>
+      </div>
     </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 class="us-col-12">
+      <h3 id="minimum-sizes">Minimum Size</h3>
+      <p>To ensure legibility of our logo, it must not be used below the
+        minimum size.</p>
+      <div class="us-col-6">
+          <div class="logo__state logo__vertical--alternate-min logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical-small"/>
+            <div class="logo__sizing h70">70px</div>
+          </div>
+          <p>
+            The minimum height that the vertical logo may be used at is 70px.
+          </p>
+        </div>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal--alternate-min logo--white">
+            <svg><use xlink:href="#uicon-logo-small"/></svg>
+            <div class="logo__sizing h35">35px</div>
+          </div>
+          <p>
+            The minimum height that the horizontal logo may be used at is 35px.
+          </p>
+        </div>
+      </div>
     </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 class="us-col-12">
+      <h3 id="icon-only">Icon only</h3>
+      <p>
+        Our icon and wordmark must always be used together. The only
+        exceptions are our app icon, website favicon and awards logos. Do not
+        separate the icon and wordmark in any other instances.
+      </p>
+      <div class="logo__icon-standalone us-margin-bottom">
+        <div class="us-icon--uswitch us-icon--large us-icon--white us-icon--notext"></div>
+      </div>
+      <p>
+        The icon may only be used separately from the wordmark in approved
+        situations, such as our app icon.
+      </p>
+
+      <p><strong>Do not separate the elements in any other situations.</strong></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 class="us-col-12">
+      <h3 id="usage-rules">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>
 </div>

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

@@ -3,15 +3,15 @@
     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>
+    <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>
+    <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">

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

@@ -3,9 +3,9 @@ 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.
+  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="http://github.com/uswitch/ustyle">View on github</a>
+<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">
@@ -18,7 +18,7 @@ name: Introduction
     <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>
+      <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"
@@ -88,5 +88,5 @@ name: Introduction
 </div>
 <div class="us-content-group mobile-bordered">
   <h2>Installation</h2>
-  <p>See our github for documentation on installing this across applications.</p>
+  <p>See our <a href="https://github.com/uswitch/ustyle">GitHub</a> for documentation on installing this across applications.</p>
 </div>