reustyle 2.0.7

data/styleguide/content/brand/logo.tpl

@@ -0,0 +1,279 @@
+<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>
+  <li><a href="#logo-downloads">Logo Downloads</a></li>
+</ul>
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <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>
+  <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--blue">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+          <p>
+            Vertical orientation
+          </p>
+        </div>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal logo--blue">
+            <svg><use xlink:href="#uicon-logo"/></svg>
+          </div>
+          <p>
+            Horizontal orientation
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <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>
+
+  <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>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <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>
+
+  <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-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 h98">98px</div>
+          </div>
+          <p>
+            Use the alternative version of the vertical logo when using at a
+            height of 98px 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>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <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 h50">50px</div>
+          </div>
+          <p>
+            The minimum height that the vertical logo may be used at is 50px.
+          </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 h25">25px</div>
+          </div>
+          <p>
+            The minimum height that the horizontal logo may be used at is 25px.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <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">
+        <svg role="image" class="us-icon--large us-icon--white us-icon--notext">
+          <use xlink:href="/images/icons.svg#icon-uswitch"></use>
+        </svg>
+      </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>
+</div>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <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>
+
+<div class="us-content-group">
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <h3 id="logo-downloads">Logo Downloads</h3>
+      <p>
+        Here you can download the standard and smaller versions of the uSwitch
+        logo. Each .zip file comes with .eps, .svg and .svg versions of the logo.
+      </p>
+      <ul>
+        <li><a href='https://s3-eu-west-1.amazonaws.com/uswitch-assets-eu/ustyle-assets/logo/Standard+logo+assets.zip'>Standard Logo</a></li>
+        <li><a href='https://s3-eu-west-1.amazonaws.com/uswitch-assets-eu/ustyle-assets/logo/Small+logo+assets.zip'>Logo for smaller sizes</a></li>
+      </ul>
+    </div>
+  </div>
+</div>

data/styleguide/content/design/accessibility-testing.md

@@ -0,0 +1,82 @@
+Everyone experiences disability at some point in their life, whether permanent
+(blindness, deafness, motor impairment) or temporary (fatigue, migraines, a broken arm).
+These things may make the things we build difficult to use.
+
+Below, you'll find recommended tools and processes that will help make it easier
+for folk to use the things we build without frustration.
+
+The web is for everyone, and it is our job to make sure that everyone can access it.
+
+## Recommended (Free) Tools
+
+* [Pa11y Dashboard]
+* [aXe Chrome Extension]
+* [tota11y]
+* [Lighthouse]
+* [a11y]
+
+## How to test
+
+### Using automated tools
+
+There are a lot of options, both free and paid for, to automatically test the
+accessibility of our products. From the most basic like [tota11y] and [a11y]
+, to
+the more involved like Chrome’s Accessibility Audit tool and aXe. These tools can
+provide a great overview of where we might be going wrong, and even suggest ways
+to improve.
+
+But with great power, comes great responsibility. We cannot rely on automated tool
+to help us find and fix all the issues.
+[GDS discovered](https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage)
+that even a tool like Chrome's Accessibility auditor only surface 17% of accessibility issues.
+
+Just because a tool says something is broken, we should still manually test to
+prove it is. These automated tools provide solutions, but they are neither the
+only or the most suitable solution for our users.
+
+### Manual Testing
+
+Nothing really beats manual testing. The more you do this, the easier you’ll find
+it to spot potential accessibility errors.
+
+#### Keyboard Only
+
+* Can the page be navigated just by using a keyboard?
+* Can you TAB to all interactive elements (links, buttons, form inputs) and interact
+with such elements using traditional keys (ESC, Arrows)?
+* When TABbing, do you lose track of where the keyboard is focused, suggesting that
+there are hidden elements on the page you shouldn’t be able to navigate to?
+
+#### Screen Readers
+
+Use a screen reader like [NVDA](https://www.nvaccess.org/),
+[JAWS](http://www.freedomscientific.com/Products/Blindness/Jaws), or
+[VoiceOver](https://www.apple.com/accessibility/mac/vision/) to go through your
+web page.
+
+* Can you access and understand all of the content someone not using a screen reader can?
+* Does the hierarchy of the content make sense?
+* Can one easily navigate to different landmarks on the page
+(e.g header, navigation, main content, supplementary content like an aside or footer)?
+
+Note that you shouldn’t sink time into becoming an expert with a screen reader.
+Unless you use a screen reader every day and have a legitimate need to do so, you
+are unlikely to ever use a screen reader how they should be used.
+
+It's important to note here that you cannot truly say your product is accessible
+until you've tested them with folk who benefit from this work.
+
+---
+
+For more about how we can make uSwitch and the world more accessible, check out
+our blog posts on [quick wins](https://labs.uswitch.com/four-accessibility-wins/)
+and [how to perform an accessibility audit](https://labs.uswitch.com/how-to-do-an-accessibility-audit/).
+
+Check out our tips on [usability testing](../design/validating-designs.html), too.
+
+[Pa11y Dashboard]: https://github.com/pa11y/dashboard
+[aXe Chrome Extension]: https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd
+[tota11y]: https://khan.github.io/tota11y/
+[Lighthouse]: https://github.com/GoogleChrome/lighthouse
+[a11y]: https://www.npmjs.com/package/a11y