From db48c8ff792468a1e6306d5eb45016288a1f8216 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Sat, 2 Jul 2016 22:41:01 +0100
Subject: [PATCH 1/4] Create a style guide route and template

---
 app/routes.js                    |   5 ++
 app/views/guide_style_guide.html | 108 +++++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 app/views/guide_style_guide.html

diff --git a/app/routes.js b/app/routes.js
index 39cdff942..ceef8ece1 100755
--- a/app/routes.js
+++ b/app/routes.js
@@ -10,6 +10,11 @@ module.exports = {
       res.redirect('/');
     });
 
+    app.get('/style-guide', function (req, res) {
+      var page_name = "Front-end style guide";
+      res.render('guide_style_guide', { 'page_name' : page_name });
+    });
+
     // Layout
     app.get('/layout', function (req, res) {
       var page_name = "Layout";
diff --git a/app/views/guide_style_guide.html b/app/views/guide_style_guide.html
new file mode 100644
index 000000000..2f7abddb7
--- /dev/null
+++ b/app/views/guide_style_guide.html
@@ -0,0 +1,108 @@
+{% extends "layout.html" %}
+
+{% block page_title %}Style Guide — GOV.UK elements{% endblock %}
+
+{% block content %}
+
+<main id="content" role="main" tabindex="-1">
+
+  {% include "includes/phase_banner_survey.html" %}
+  {% include "includes/breadcrumb.html" %}
+
+  <div class="grid-row">
+    <div class="column-one-quarter">
+
+      <h2 class="heading-small">Layout</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#page-width">Page width</a></li>
+        <li><a href="#screen-size">Screen size</a></li>
+        <li><a href="#layout-spacing">Spacing</a></li>
+        <li><a href="#layout-grid-unit-proportions">Grid unit proportions</a></li>
+      </ul>
+
+      <h2 class="heading-small">Typography</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#typography-font">Font</a></li>
+        <li><a href="#typography-headings">Headings</a></li>
+        <li><a href="#typography-lead-paragraph">Lead paragraph</a></li>
+        <li><a href="#typography-body-copy">Body copy</a></li>
+        <li><a href="#typography-links">Links</a></li>
+        <li><a href="#typography-lists">Lists</a></li>
+        <li><a href="#typography-inset-text">Inset text</a></li>
+        <li><a href="#typography-legal-text">Legal text</a></li>
+        <li><a href="#typography-hidden-text">Hidden text (progressive disclosure)</a></li>
+      </ul>
+
+      <h2 class="heading-small">Colour</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#colour-contrast">Colour contrast</a></li>
+        <li><a href="#colour-sass-variables">Sass variables</a></li>
+        <li><a href="#colour-status-colours">Status colours</a></li>
+        <li><a href="#colour-greyscale-palette">Greyscale palette</a></li>
+        <li><a href="#colour-extended-palette">Extended palette</a></li>
+        <li><a href="#examples">Examples</a></li>
+      </ul>
+
+      <h2 class="heading-small">Icons and images</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#icons">Icons</a></li>
+        <li><a href="#images">Images</a></li>
+      </ul>
+
+      <h2 class="heading-small">Data</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#data-table-numeric">Numeric tabular data</a></li>
+        <li><a href="#data-in-a-table">Data in a table</a></li>
+        <li><a href="#data-visualisation">Data visualisation</a></li>
+      </ul>
+
+      <h2 class="heading-small">Buttons</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#button-text">Button text</a></li>
+        <li><a href="#button-start-now">Start now button</a></li>
+        <li><a href="#button-alignment">Button alignment</a></li>
+        <li><a href="#button-disabled">Disabled buttons</a></li>
+        <li><a href="#creating-buttons">Creating buttons</a></li>
+      </ul>
+
+      <h2 class="heading-small">Form elements</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#form-optional-fields">Optional and mandatory fields</a></li>
+        <li><a href="#form-labels">Labels</a></li>
+        <li><a href="#form-fields">Form fields</a></li>
+        <li><a href="#form-focus-states">Form focus states</a></li>
+        <li><a href="#form-hint-text">Hint text</a></li>
+        <li><a href="#form-spacing">Spacing</a></li>
+        <li><a href="#form-fieldsets">Fieldsets</a></li>
+        <li><a href="#form-select-boxes">Select boxes</a></li>
+        <li><a href="#form-radio-buttons">Radio buttons</a></li>
+        <li><a href="#form-checkboxes">Checkboxes</a></li>
+        <li><a href="#form-toggle-content">Conditionally revealing content</a></li>
+      </ul>
+
+      <h2 class="heading-small">Errors and validation</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#one-question-per-page">Ask one question per page</a></li>
+        <li><a href="#summarise-errors">Summarise errors</a></li>
+        <li><a href="#highlight-errors">Highlight errors in forms</a></li>
+      </ul>
+
+      <h2 class="heading-small">Alpha and beta banners</h2>
+      <ul class="list list-underline font-xsmall">
+        <li><a href="#alpha-banner">Alpha banner</a></li>
+        <li><a href="#beta-banner">Beta banner</a></li>
+        <li><a href="#creating-phase-banners">Creating phase banners</a></li>
+      </ul>
+
+    </div>
+    <div class="column-two-thirds">
+      <h1 class="heading-xlarge no-top-margin">
+        <span class="heading-secondary">GOV.UK elements</span>
+        Front-end style guide
+      </h1>
+
+    </div>
+  </div>
+
+</main><!-- / #content -->
+{% endblock %}

From 1a55adca100234ad6a60f24ac60e83917a6b5bf4 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Sat, 2 Jul 2016 22:41:14 +0100
Subject: [PATCH 2/4] Add list styles for the style guide navigation

---
 public/sass/elements-page.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/public/sass/elements-page.scss b/public/sass/elements-page.scss
index c99812f28..39f51ee59 100644
--- a/public/sass/elements-page.scss
+++ b/public/sass/elements-page.scss
@@ -44,6 +44,22 @@
   margin-bottom: ($gutter*1.5);
 }
 
+.list-underline {
+  border-top: 1px solid #bfc1c3;
+}
+
+.list-underline li {
+  border-bottom: 1px solid #bfc1c3;
+  padding: 2px 0 3px 0;
+}
+
+.list-underline a {
+  text-decoration: none;
+}
+
+.no-top-margin {
+  margin-top: 0;
+}
 
 // Example boxes
 // ==========================================================================

From ed284fef4419e7c51423e60f4b4c5379e7dbc042 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Sat, 2 Jul 2016 23:08:09 +0100
Subject: [PATCH 3/4] Add content from all sections

---
 app/views/guide_style_guide.html | 1289 ++++++++++++++++++++++++++++++
 1 file changed, 1289 insertions(+)

diff --git a/app/views/guide_style_guide.html b/app/views/guide_style_guide.html
index 2f7abddb7..4cb27b05a 100644
--- a/app/views/guide_style_guide.html
+++ b/app/views/guide_style_guide.html
@@ -101,6 +101,1295 @@ <h1 class="heading-xlarge no-top-margin">
         Front-end style guide
       </h1>
 
+<h3 class="heading-medium" id="page-width">Page width</h3>
+  <div class="text">
+    <p>
+      The default maximum page width is 1020px, but go wider if the content requires it.
+    </p>
+    <p>
+      <a href="#layout-grid-unit-proportions">Use a grid</a> to lay out your content. To prevent long lines of text, content should sit in a column which is two-thirds of the page width.
+    </p>
+    <p>
+      Long lines reduce legibility, so all lines of text should be no longer than 70 to 80 characters.
+    </p>
+  </div>
+
+  <h3 class="heading-medium" id="screen-size">Screen size</h3>
+  <div class="text">
+    <p>
+      Design for small screens first using a single column layout.
+    </p>
+     <p>
+      Optimise for different screen sizes, but don’t make assumptions about what devices people are using.
+    </p>
+  </div>
+
+  <h3 class="heading-medium" id="layout-spacing">Spacing</h3>
+  <ul class="list list-bullet text">
+    <li>spacing between elements is usually 5px, 10px, 15px or multiples of 15px</li>
+    <li>gutters are 15px for smaller screens and 30px for larger screens</li>
+  </ul>
+
+  <div class="example example-images">
+    {% include "snippets/layout_spacing.html" %}
+  </div>
+
+  <h3 class="heading-medium" id="layout-grid-unit-proportions">Grid unit proportions</h3>
+  <ul class="list list-bullet text">
+    <li>introduce columns as the content requires it – base column ratios on halves, thirds or quarters of the page width</li>
+    <li>for screen breakpoints use media queries &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_conditionals.scss">_conditionals.scss</a> file</li>
+  </ul>
+
+<h4 class="heading-medium">Halves</h4>
+<div class="example example-grid">
+  {% include "snippets/layout_grid_halves.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/layout_grid_halves.html" %}
+</code>
+</pre>
+
+<h4 class="heading-medium">Thirds</h4>
+<div class="example example-grid">
+  {% include "snippets/layout_grid_thirds.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/layout_grid_thirds.html" %}
+</code>
+</pre>
+
+<h4 class="heading-medium">Two thirds / One third</h4>
+<div class="example example-grid">
+  {% include "snippets/layout_grid_thirds_two_thirds_one_third.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/layout_grid_thirds_two_thirds_one_third.html" %}
+</code>
+</pre>
+
+<h4 class="heading-medium">One third / Two thirds</h4>
+<div class="example example-grid">
+  {% include "snippets/layout_grid_thirds_one_third_two_thirds.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/layout_grid_thirds_one_third_two_thirds.html" %}
+</code>
+</pre>
+
+<h4 class="heading-medium">Quarters</h4>
+<div class="example example-grid">
+  {% include "snippets/layout_grid_quarters.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/layout_grid_quarters.html" %}
+</code>
+</pre>
+
+<h3 class="heading-medium" id="typography-font">Font</h3>
+  <div class="text">
+    <p>
+      Use the GDS Transport Website font in Light and Bold. It's licensed for use on the GOV.UK domains only.
+    </p>
+    <p>
+      For services publicly available on different domains, use an alternative typeface like Arial.
+    </p>
+  </div>
+
+  <h3 class="heading-medium" id="typography-headings">
+    Headings
+  </h3>
+
+  <ul class="list list-bullet text">
+    <li>use GDS Transport Website Bold</li>
+    <li>use sentence case for headings</li>
+    <li>use headings consistently to create a clear hierarchy</li>
+  </ul>
+
+<div class="example">
+  {% include "snippets/typography_headings_example.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_headings.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="typography-lead-paragraph">
+    Lead paragraph
+  </h3>
+
+  <ul class="list list-bullet">
+    <li>use 24px for a lead paragraph</li>
+    <li>there should only be one lead paragraph per page</li>
+  </ul>
+
+<div class="example">
+  <div class="text">
+    {% include "snippets/typography_lead_paragraph_example.html" %}
+  </div>
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_lead_paragraph.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="typography-body-copy">
+    Body copy
+  </h3>
+
+  <ul class="list list-bullet text">
+    <li>use GDS Transport Website Light</li>
+    <li>avoid using bold and italics</li>
+    <li>use 19px for body copy &ndash; 16px for smaller screens</li>
+    <li>use smaller sizes only if there's a user need (eg 16px, 14px, 12px)</li>
+    <li>make sure lines of text don't exceed 75 characters, as they become harder to read beyond that point</li>
+  </ul>
+
+<div class="example">
+  <div class="text">
+    {% include "snippets/typography_paragraphs_example.html" %}
+  </div>
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_paragraphs.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="typography-links">Links</h3>
+  <ul class="list list-bullet text">
+    <li>links within body copy should be blue and underlined</li>
+    <li>links without surrounding text should not have a full stop at the end</li>
+    <li>link colours can be found in the <a href="/colour">colour palette</a></li>
+  </ul>
+
+<div class="example">
+  <div class="text">
+    {% include "snippets/typography_links.html" %}
+  </div>
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_links.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="typography-lists">Lists</h3>
+  <p class="text">
+    List items start with a lowercase letter and have no full stop at the end.
+  </p>
+
+<div class="example">
+  {% include "snippets/typography_lists.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_lists.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="typography-inset-text">Inset text</h3>
+  <p class="text">
+    Use bordered inset text to draw attention to important content on the page.
+  </p>
+
+<div class="example">
+  <div class="text">
+    {% include "snippets/typography_inset_text.html" %}
+  </div>
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_inset_text.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="typography-legal-text">Legal text</h3>
+  <p class="text">
+    Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence.
+  </p>
+
+<div class="example">
+  <div class="text">
+    {% include "snippets/typography_legal_text.html" %}
+  </div>
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_legal_text.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="typography-hidden-text">Hidden text (progressive disclosure)</h3>
+  <p class="text">
+    Use this to make your page easier to scan,
+    only showing contextual information when required.
+  </p>
+  <p class="text">
+    Click on "Help with nationality" to see how this works.
+  </p>
+
+<div class="example">
+  {% include "snippets/typography_progressive_disclosure.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_progressive_disclosure.html" %}
+</code>
+</pre>
+
+  <div class="panel panel-border-wide text">
+    <p>
+      If you're using the HTML5 details and summary elements, you'll need a polyfill for <a href="http://caniuse.com/#feat=details" rel="external">not-so-modern browsers</a>.
+    </p>
+    <p>
+      You'll need to ensure that your markup matches the example above.
+      <a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js">GOV.UK elements uses this polyfill</a>.
+    </p>
+    <p>
+      <a href="/typography/example-details-summary/">Take a look at example page</a> which demonstrates conditionally revealing information, using the HTML5 details and summary elements.
+    </p>
+  </div>
+
+  <h3 class="heading-medium" id="colour-contrast">Colour contrast</h3>
+  <p class="text">
+    The colour contrast ratio for text and interactive elements should be at least 4.5:1 <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="external">as recommended by the W3C</a>. Test your service to meet this standard.
+  </p>
+
+  <h3 class="heading-medium"  id="colour-sass-variables">Sass variables</h3>
+  <p class="text">
+    Use Sass variables in case colour values need to be updated &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss" rel="external">colours.scss</a> file.
+  </p>
+
+  <div class="example">
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Text</h4>
+
+      <div class="swatch swatch-text-colour"></div>
+      <ul>
+        <li><b>#0B0C0C</b></li>
+        <li>$text-colour</li>
+      </ul>
+
+      <div class="swatch swatch-text-secondary"></div>
+      <ul>
+        <li><b>#6F777B</b></li>
+        <li>$secondary-text-colour</li>
+      </ul>
+
+      <div class="swatch swatch-page-colour"></div>
+
+      <ul>
+        <li><b>#FFFFFF</b></li>
+        <li>$page-colour</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Links</h4>
+
+      <div class="swatch swatch-link-colour"></div>
+      <ul>
+        <li><b>#005ea5</b></li>
+        <li>$link-colour</li>
+      </ul>
+
+      <div class="swatch swatch-link-colour-hover"></div>
+      <ul>
+        <li><b>#2b8cc4</b></li>
+        <li>$link-hover-colour</li>
+      </ul>
+
+      <div class="swatch swatch-link-colour-visited"></div>
+      <ul>
+        <li><b>#4c2c92</b></li>
+        <li>$link-visited-colour</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Backgrounds</h4>
+
+      <div class="swatch swatch-border-colour"></div>
+      <ul>
+        <li><b>#BFC1C3</b></li>
+        <li>$border-colour</li>
+      </ul>
+
+      <div class="swatch swatch-panel-colour"></div>
+      <ul>
+        <li><b>#DEE0E2</b></li>
+        <li>$panel-colour</li>
+      </ul>
+
+      <div class="swatch swatch-highlight-colour"></div>
+      <ul>
+        <li><b>#F8F8F8</b></li>
+        <li>$highlight-colour</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Buttons</h4>
+
+      <div class="swatch swatch-button-colour"></div>
+      <ul>
+        <li><b>#00823B</b></li>
+        <li>$button-colour</li>
+      </ul>
+
+      <div class="swatch swatch-green"></div>
+      <ul>
+        <li><b>#006435</b></li>
+        <li>$green (hover colour)</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Focus</h4>
+      <div class="swatch swatch-yellow"></div>
+      <ul>
+        <li><b>#FFBF47</b></li>
+        <li>$focus-colour</li>
+      </ul>
+    </div>
+
+  </div>
+
+  <h3 class="heading-medium" id="colour-status-colours">Status colours</h3>
+  <div class="example">
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-alpha"></div>
+      <ul>
+        <li><b>#d53880</b></li>
+        <li>$alpha-colour</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-beta"></div>
+      <ul>
+        <li><b>#f47738</b></li>
+        <li>$beta-colour</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-discovery"></div>
+      <ul>
+        <li><b>#912b88</b></li>
+        <li>$discovery-colour</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-live"></div>
+      <ul>
+        <li><b>#85994b</b></li>
+        <li>$live-colour</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-error"></div>
+      <ul>
+        <li><b>#B10E1E</b></li>
+        <li>$error-colour</li>
+      </ul>
+    </div>
+
+  </div>
+
+  <h3 class="heading-medium" id="colour-greyscale-palette">Greyscale palette</h3>
+  <div class="example">
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-black"></div>
+      <ul>
+        <li><b>#0B0C0C</b></li>
+        <li>$black</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-grey-1"></div>
+      <ul>
+        <li><b>#6F777B</b></li>
+        <li>$grey-1</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-grey-2"></div>
+      <ul>
+        <li><b>#BFC1C3</b></li>
+        <li>$grey-2</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-grey-3"></div>
+      <ul>
+        <li><b>#DEE0E2</b></li>
+        <li>$grey-3</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <div class="swatch swatch-grey-4"></div>
+      <ul>
+        <li><b>#F8F8F8</b></li>
+        <li>$grey-4</li>
+      </ul>
+    </div>
+
+  </div>
+
+  <h3 class="heading-medium" id="colour-extended-palette">Extended palette</h3>
+  <ul class="list list-bullet text">
+    <li>used for graphs and supporting material</li>
+    <li>for tints of the extended palette use 50% or 25%</li>
+    <li>for departmental colours
+     &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/colours/_organisation.scss" rel="external">organisation.scss file</a></li>
+  </ul>
+
+  <div class="example">
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Purple</h4>
+
+      <div class="swatch swatch-purple"></div>
+      <ul>
+        <li><b>#2e358b</b></li>
+        <li>$purple</li>
+      </ul>
+
+      <h4 class="heading-small">Mauve</h4>
+
+      <div class="swatch swatch-mauve"></div>
+      <ul>
+        <li><b>#6f72af</b></li>
+        <li>$mauve</li>
+      </ul>
+
+      <h4 class="heading-small">Fuschia</h4>
+
+      <div class="swatch swatch-fuschia"></div>
+      <ul>
+        <li><b>#912b88</b></li>
+        <li>$fuschia</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Pink</h4>
+
+      <div class="swatch swatch-pink"></div>
+      <ul>
+        <li><b>#d53880</b></li>
+        <li>$pink</li>
+      </ul>
+
+      <h4 class="heading-small">Baby pink</h4>
+
+      <div class="swatch swatch-baby-pink"></div>
+      <ul>
+        <li><b>#f499be</b></li>
+        <li>$baby-pink</li>
+      </ul>
+
+      <h4 class="heading-small">Red</h4>
+
+      <div class="swatch swatch-red"></div>
+      <ul>
+        <li><b>#b10e1e</b></li>
+        <li>$red</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Mellow red</h4>
+
+      <div class="swatch swatch-mellow-red"></div>
+      <ul>
+        <li><b>#df3034</b></li>
+        <li>$mellow-red</li>
+      </ul>
+
+      <h4 class="heading-small">Orange</h4>
+
+      <div class="swatch swatch-orange"></div>
+      <ul>
+        <li><b>#f47738</b></li>
+        <li>$orange</li>
+      </ul>
+
+      <h4 class="heading-small">Brown</h4>
+
+      <div class="swatch swatch-brown"></div>
+      <ul>
+        <li><b>#b58840</b></li>
+        <li>$brown</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Yellow</h4>
+
+      <div class="swatch swatch-yellow"></div>
+      <ul>
+        <li><b>#ffbf47</b></li>
+        <li>$yellow</li>
+      </ul>
+
+      <h4 class="heading-small">Green</h4>
+
+      <div class="swatch swatch-green"></div>
+      <ul>
+        <li><b>#006435</b></li>
+        <li>$green</li>
+      </ul>
+
+      <h4 class="heading-small">Grass green</h4>
+
+      <div class="swatch swatch-grass-green"></div>
+      <ul>
+        <li><b>#85994b</b></li>
+        <li>$grass-green</li>
+      </ul>
+    </div>
+
+    <div class="swatch-wrapper">
+      <h4 class="heading-small">Turquoise</h4>
+
+      <div class="swatch swatch-turquoise"></div>
+      <ul>
+        <li><b>#28a197</b></li>
+        <li>$turquoise</li>
+      </ul>
+
+      <h4 class="heading-small">Light blue</h4>
+
+      <div class="swatch swatch-light-blue"></div>
+      <ul>
+        <li><b>#2b8cc4</b></li>
+        <li>$light-blue</li>
+      </ul>
+
+      <h4 class="heading-small">GOV.UK blue</h4>
+
+      <div class="swatch swatch-govuk-blue"></div>
+      <ul>
+        <li><b>#005ea5</b></li>
+        <li>$govuk-blue</li>
+      </ul>
+
+    </div>
+
+  </div>
+
+  <p>
+    <a href="https://designpatterns.hackpad.com/Colour-PDuGV42pJqx" rel="external">
+      Discuss colour on the design patterns Hackpad
+    </a>
+  </p>
+
+  <h3 class="heading-medium" id="examples">Examples</h3>
+  <h4 class="heading-small">Transaction end page</h4>
+
+  <div class="example">
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+        <h1 class="heading-xlarge">
+          Example service name
+        </h1>
+
+        <div class="govuk-box-highlight">
+          <h2 class="bold-large">
+            Application complete
+          </h2>
+          <p>
+            Your reference number is </br>
+            <strong class="heading-medium">HDJ2123F</strong>
+          </p>
+        </div>
+
+        <p>
+          We have sent you a confirmation email.
+        </p>
+
+        <h2 class="heading-medium">
+          What happens next?
+        </h2>
+        <p>
+          We've sent your application to Hackney Electoral Register Office.
+        </p>
+        <p>
+          They will contact you either to confirm your registration, or to ask for more information.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <h3 class="heading-medium" id="icons">Icons</h3>
+  <ul class="list list-bullet text">
+    <li>
+      if icons are needed ensure they are clear, simple and accompanied by relevant text
+    </li>
+    <li>
+      don’t hide functionality under icons
+    </li>
+  </ul>
+
+  <p class="text">
+    GOV.UK standard icons are provided, as well as organisation crests and media player icons &ndash; find these in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/tree/master/images" rel="external">images folder</a>.
+  </p>
+
+  <h4 class="heading-small">Legal text</h4>
+  <p class="text">
+    Use bold text with an exclamation icon if there are legal consequences - for example, a fine or prison sentence.
+  </p>
+
+<div class="example">
+  <div class="text">
+    {% include "snippets/typography_legal_text.html" %}
+  </div>
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/typography_legal_text.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="images">Images</h3>
+  <p>
+    If images are needed they should be landscape, 3:2 aspect ratio.
+  </p>
+
+  <div class="example example-images">
+    <div class="grid-row">
+      <div class="column-one-half">
+        <img src="/public/images/examples/3by2.jpg" alt="3:2">
+      </div>
+      <div class="column-one-half">
+        <img src="/public/images/examples/pm.jpg" alt="">
+      </div>
+    </div>
+  </div>
+
+  <h3 class="heading-medium" id="examples">Examples</h3>
+  <ul class="list list-bullet">
+    <li><a href="/icons-images/example-icons/">Example page: Icons in the GOV.UK frontend toolkit</a></li>
+  </ul>
+
+  <h3 class="heading-medium" id="data-table-numeric">Numeric tabular data</h3>
+  <ul class="text list list-bullet">
+    <li>when comparing rows of numbers, align numbers to the right in table cells</li>
+    <li>use the GOV.UK frontend toolkit's <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/docs/mixins.md#tabular-numbers" rel="external">tabular numbers</a> to allow numbers of the same width to be more easily compared</li>
+  </ul>
+
+<div class="example">
+  {% include "snippets/data_table_numeric.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/data_table_numeric.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="data-in-a-table">Data in a table</h3>
+  <p>
+    Not all content in tables should be right aligned.
+  </p>
+
+<div class="example">
+  {% include "snippets/data_table.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/data_table.html" %}
+</code>
+</pre>
+
+<p>
+  <a href="https://designpatterns.hackpad.com/Tables-AXM1FinduJR" rel="external">
+    Discuss tables on the design patterns Hackpad
+  </a>
+</p>
+
+  <h3 class="heading-medium" id="data-visualisation">Data visualisation</h3>
+  <ul class="list list-bullet text">
+    <li>data is recommended as an alternative to using images</li>
+    <li>for screen readers, ensure the data value appears first so it makes sense when read aloud</li>
+  </ul>
+
+  <div class="example">
+    <div class="grid-row">
+      <div class="column-one-half">
+
+        <div class="data">
+          <h2 class="bold-xxlarge">24</h2>
+          <p class="bold-xsmall">Ministerial departments</p>
+        </div>
+
+      </div>
+      <div class="column-one-half">
+
+        <div class="data">
+          <h2 class="bold-xxlarge">80px</h2>
+          <p class="bold-xsmall">16px</p>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="example">
+    <div class="grid-row">
+      <div class="column-one-half">
+
+        <div class="data">
+          <h2 class="bold-xlarge">56/154</h2>
+          <p class="bold-xsmall">on GOV.UK</p>
+        </div>
+
+      </div>
+      <div class="column-one-half">
+
+        <div class="data">
+          <h2 class="bold-xlarge">48px</h2>
+          <p class="bold-xsmall">16px</p>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <h3 class="heading-medium" id="examples">Examples</h3>
+  <ul class="list list-bullet">
+    <li>
+      <a href="https://www.gov.uk/pay-leave-for-parents/y/yes/2013-1-2/employee/employee/yes/yes/122.00-week/yes/yes/yes/122.00-week/yes" rel="external">
+        see an example of table usage on GOV.UK
+      </a>
+    </li>
+    <li>
+      <a href="https://www.gov.uk/performance/carers-allowance/volumetrics" rel="external">
+        see an example of numeric table usage on GOV.UK
+      </a>
+    </li>
+  </ul>
+
+<h3 class="heading-medium" id="button-text">Button text</h3>
+  <p class="text">
+    Button text should be short and describe the action the button performs.
+  </p>
+
+<div class="example">
+  {% include "snippets/buttons_button.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/buttons_button.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="button-start-now">Start now button</h3>
+  <p class="text">
+    Launch your service with a Start now button.
+  </p>
+
+<div class="example">
+  {% include "snippets/buttons_button_start_now.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/buttons_button_start_now.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="button-alignment">Button alignment</h3>
+  <p class="text">
+    Align the primary action button to the left edge of your form, in the user's line of sight.
+  </p>
+
+  <div class="example example-button">
+
+    <form action="/" method="post" class="form">
+      <div class="form-group">
+        <label for="form-email-address-1" class="form-label">Email address</label>
+        <input type="text" class="form-control" id="form-email-address-1">
+      </div>
+      <div class="form-group">
+        <button class="button">Save and continue</button>
+      </div>
+    </form>
+
+  </div>
+
+  <h3 class="heading-medium" id="button-disabled">Disabled buttons</h3>
+  <p>
+    Disabled buttons should be set at 50% opacity.
+  </p>
+
+<div class="example">
+  <button class="button" disabled="disabled">Primary button</button>
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/buttons_button_disabled.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="creating-buttons">Creating buttons</h3>
+  <p class="text">
+    Use the GOV.UK Sass button mixin &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/design-patterns/_buttons.scss" rel="external">buttons.scss</a> file.
+  </p>
+
+  <div class="example example-button">
+    <div class="grid-row">
+      <div class="column-one-third">
+
+        <button class="button">Save and continue</button>
+
+      </div>
+      <div class="column-one-third">
+
+        <div class="swatch-wrapper">
+          <h4 class="heading-small">Button</h4>
+          <div class="swatch swatch-button-colour"></div>
+          <ul>
+            <li><b>#00823B</b></li>
+            <li>$button-colour</li>
+          </ul>
+        </div>
+
+      </div>
+      <div class="column-one-third">
+
+        <div class="swatch-wrapper">
+          <h4 class="heading-small">Focus</h4>
+          <div class="swatch swatch-yellow"></div>
+          <ul>
+            <li><b>#FFBF47</b></li>
+            <li>$focus-colour</li>
+          </ul>
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+
+  <p>
+    <a href="https://designpatterns.hackpad.com/Navigation-buttons-continue-next-previous-zoP1sKiW3y4" rel="external">
+      Discuss navigation buttons on the design patterns Hackpad
+    </a>
+  </p>
+
+
+<h3 class="heading-medium" id="form-optional-fields">Optional and mandatory fields</h3>
+  <ul class="text list list-bullet">
+    <li>only ask for the information you absolutely need</li>
+    <li>if you do ask for optional information, mark the labels of optional fields with '(optional)'</li>
+    <li>don't mark mandatory fields with asterisks</li>
+  </ul>
+
+  <h3 class="heading-medium" id="form-labels">Labels</h3>
+  <ul class="text list list-bullet">
+    <li>all form fields should be given labels</li>
+    <li>don't hide labels, unless the surrounding context makes them unnecessary</li>
+    <li>labels should be aligned above their fields</li>
+    <li>label text should be short, direct and in sentence case</li>
+    <li>avoid colons at the end of labels</li>
+    <li>labels should be associated with form fields using the <code class="code">for</code> attribute</li>
+  </ul>
+  <div class="example">
+    {% include "snippets/form_labels.html" %}
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_labels.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="form-fields">Form fields</h3>
+  <div class="text">
+    <p>
+      Make field widths proportional to the input they take.
+    </p>
+    <p>
+      Ensure that users can enter the information they need at smaller screen sizes.
+    </p>
+    <p>
+      Snap form fields to 100% width at smaller screen sizes.
+    </p>
+  </div>
+
+  <p>
+    <a href="https://designpatterns.hackpad.com/Text-boxes-imgij2JcsHO" rel="external">
+      Discuss form fields on the design patterns Hackpad
+    </a>
+  </p>
+
+  <h3 class="heading-medium" id="form-focus-states">Form focus states</h3>
+  <div class="text">
+    <p>
+      All elements use the yellow focus style as a highlight, as either a fill or 3px outline.
+    </p>
+    <p>
+      Click on the label "Full name" or inside the form field to show the focus state.
+    </p>
+  </div>
+
+  <div class="example">
+    {% include "snippets/form_focus.html" %}
+  </div>
+
+  <h3 class="heading-medium"  id="form-hint-text">Hint text</h3>
+  <ul class="list list-bullet text">
+    <li>don't use placeholder text in form fields, as this will disappear once content is entered into the form field</li>
+    <li>use hint text for supporting contextual help, this will always be shown</li>
+    <li>hint text should sit above a form field</li>
+    <li>ensure hint text can be read correctly by screen readers</li>
+  </ul>
+
+  <div class="example">
+    {% include "snippets/form_hint_text.html" %}
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_hint_text.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="form-spacing">Spacing between form elements</h3>
+  <p class="text">
+    Ensure there is sufficient spacing between form elements.
+  </p>
+
+  <div class="example">
+    {% include "snippets/form_spacing.html" %}
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_spacing.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="form-fieldsets">Fieldsets and legends</h3>
+  <p class="text">
+    Use fieldsets to group related form controls. The first element inside a fieldset must be a <code class="code">legend</code> element which describes the group.
+  </p>
+
+  <h3 class="heading-medium" id="form-select-boxes">Select boxes</h3>
+  <p class="text">
+    Avoid using select boxes (drop-down lists) - use radio buttons or checkboxes instead.
+  </p>
+
+  <p>
+    <a href="https://designpatterns.hackpad.com/Select-boxes-KzQ1IRd07HL" rel="external">
+      Discuss select boxes on the design patterns Hackpad
+    </a>
+  </p>
+
+  <h3 class="heading-medium" id="form-radio-buttons">Radio buttons</h3>
+  <ul class="list list-bullet text">
+    <li>use these to let users choose a single option from a list</li>
+    <li>for more than two options, radio buttons should be stacked</li>
+    <li>radio buttons with large hit areas are easier to select with a mouse or touch devices</li>
+  </ul>
+
+  <h4 class="heading-small">Inline radio buttons</h4>
+  <div class="example">
+    <form>
+      {% include "snippets/form_radio_buttons_inline.html" %}
+    </form>
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_radio_buttons_inline.html" %}
+</code>
+</pre>
+
+  <h4 class="heading-small">Stacked radio buttons</h4>
+  <div class="example">
+    <form>
+      {% include "snippets/form_radio_buttons.html" %}
+    </form>
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_radio_buttons.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="form-checkboxes">Checkboxes</h3>
+  <ul class="list list-bullet text">
+    <li>use these to select either on/off toggles or multiple selections</li>
+    <li>make it clear with words when users can select one or multiple options</li>
+  </ul>
+
+  <h4 class="heading-small">Stacked checkboxes</h4>
+  <div class="example">
+    <form>
+      {% include "snippets/form_checkboxes.html" %}
+    </form>
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_checkboxes.html" %}
+</code>
+</pre>
+
+  <h4 class="heading-small">Inline checkboxes</h4>
+  <ul class="list list-bullet text">
+    <li>large hit areas aren't always appropriate</li>
+    <li>only pre-select options if there's a strong, user-centred reason to</li>
+  </ul>
+
+  <div class="example">
+    <form>
+      {% include "snippets/form_checkbox_native.html" %}
+    </form>
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_checkbox_native.html" %}
+</code>
+</pre>
+
+<p>
+  <a href="https://designpatterns.hackpad.com/Radio-buttons-and-checkboxes-8eBuLm9eRaz" rel="external">
+    Discuss radio buttons and checkboxes on the design patterns Hackpad
+  </a>
+</p>
+
+  <h3 class="heading-medium" id="form-toggle-content">
+    Conditionally revealing content
+  </h3>
+  <ul class="list list-bullet text">
+    <li>reveal additional questions, depending on the context</li>
+    <li>a left border is used to emphasise this supporting information</li>
+  </ul>
+
+  <h4 class="heading-small" id="form-toggle-content-radios">
+    Radio buttons
+  </h4>
+  <div class="text">
+    <p>Choose an option below to see how this works.</p>
+  </div>
+
+  <div class="example">
+    <form>
+      {% include "snippets/form_inset_radios.html" %}
+    </form>
+  </div>
+
+  <div class="panel panel-border-wide text">
+    <p>
+      A grey left hand border is used to visually connect the revealed content with the question above.
+    </p>
+  </div>
+
+<pre>
+<code class="language-markup">
+  <div class="panel panel-border-narrow"></div>
+</code>
+</pre>
+
+  <div class="text">
+    <p>
+      The <a href="/typography/#typography-inset-text">inset text section</a> has more information on where and how to use panels (content with a grey left hand border).
+    </p>
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_inset_radios.html" %}
+</code>
+</pre>
+
+  <p class="text">
+     In the code snippet above, the <code class="language-markup">data-target=""</code> attribute is present on every label, as each option reveals an extra field.
+  </p>
+
+  <h4 class="heading-small" id="form-toggle-content-checkboxes">
+    Checkboxes
+  </h4>
+  <p>
+    Click on "Citizen of a different country" to see how this works.
+  </p>
+  <div class="example">
+    <form>
+      {% include "snippets/form_inset_checkboxes.html" %}
+    </form>
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_inset_checkboxes.html" %}
+</code>
+</pre>
+
+  <p>
+    <a href="https://designpatterns.hackpad.com/Conditional-form-fields-powy4GQmLIx" rel="external">
+      Discuss conditional form fields on the design patterns Hackpad
+    </a>
+  </p>
+
+  <h3 class="heading-medium" id="examples">Examples</h3>
+  <ul class="list list-bullet">
+    <li><a href="/form-elements/example-form-elements/">form elements</a></li>
+    <li><a href="/form-elements/example-date/">date pattern</a></li>
+    <li><a href="/form-elements/example-radios-checkboxes/">radio buttons and checkboxes</a></li>
+  </ul>
+
+  <h3 class="heading-medium" id="one-question-per-page">Ask one question per page</h3>
+  <div class="text">
+  <p>
+    Recovering from errors can be hard for users, especially if a page contains multiple errors.
+  </p>
+  <p>
+    Simplify forms by rewriting and where possible, splitting long forms across multiple pages - with each page asking a single question.
+  </p>
+  </div>
+
+  <h3 class="heading-medium" id="summarise-errors">
+    Summarise errors at the top of the page
+  </h3>
+
+  <p class="text lead-in">
+    You must:
+  </p>
+
+  <ul class="text list list-bullet">
+    <li>show an error summary at the top of the page</li>
+    <li>include a heading to alert the user to the error</li>
+    <li>link to each of the problematic questions</li>
+  </ul>
+
+  <h4 class="heading-small">Error message and summary box</h4>
+<div class="example example-error">
+  {% include "snippets/form_error_radio_show_errors.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_error_radio_show_errors.html" %}
+</code>
+</pre>
+
+  <div class="panel panel-border-narrow">
+    <h3 class="heading-small">
+      The error summary must appear at the top of the page, so it is visible when the page is refreshed and is immediately read out by assistive technology.
+    </h3>
+  </div>
+
+  <h3 class="heading-medium" id="highlight-errors">Highlight errors in forms</h3>
+
+  <p class="lead-in">
+    For each error:
+  </p>
+
+  <ul class="list list-bullet text">
+    <li>write a message that helps the user to understand why the error occurred and what to do about it</li>
+    <li>put the message in the <code class="code">&lt;label&gt;</code> or <code class="code">&lt;legend&gt;</code> for the question,
+    after the question text, in red</li>
+    <li>use a red border to visually connect the message and the question it belongs to</li>
+    <li>if the error relates to specific text fields within the question, give these a red border as well</li>
+  </ul>
+
+  <p class="text">
+    For red, use the <code class="code">$error-colour</code> Sass variable &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss" rel="external">colours.scss</a> file.
+  </p>
+
+<div class="example example-error">
+  {% include "snippets/form_error_multiple_show_errors.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/form_error_multiple_show_errors.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="examples">Examples</h3>
+  <ul class="list list-bullet">
+    <li>
+      <a href="/errors/example-form-validation-single-question-radio">
+        form validation - single question
+      </a>
+    </li>
+    <li>
+      <a href="/errors/example-form-validation-multiple-questions">
+        form validation - multiple questions
+      </a>
+    </li>
+  </ul>
+
+<h3 class="heading-medium" id="alpha-banner">Alpha banner</h3>
+<div class="example">
+  {% include "snippets/phase_banner_alpha.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/phase_banner_alpha.html" %}
+</code>
+</pre>
+
+<h3 class="heading-medium" id="beta-banner">Beta banner</h3>
+<div class="example">
+  {% include "snippets/phase_banner_beta.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/phase_banner_beta.html" %}
+</code>
+</pre>
+
+  <h3 class="heading-medium" id="creating-phase-banners">Creating alpha and beta banners</h3>
+  <p class="text">
+    Use the GOV.UK Sass phase banner mixin &ndash; find this in the GOV.UK frontend toolkit <a href="https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/design-patterns/_alpha-beta.scss">alpha-beta.scss</a> file.
+  </p>
+
     </div>
   </div>
 

From eb786c9a0e38d492239a64eb5694bbbc63c74f8c Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Sat, 2 Jul 2016 23:08:50 +0100
Subject: [PATCH 4/4] Outdent navigation, keep a full width main content area

---
 app/views/guide_style_guide.html  | 4 ++--
 public/sass/elements-page.scss    | 6 ++++++
 public/sass/elements/_layout.scss | 4 ++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/views/guide_style_guide.html b/app/views/guide_style_guide.html
index 4cb27b05a..ef59cc2c7 100644
--- a/app/views/guide_style_guide.html
+++ b/app/views/guide_style_guide.html
@@ -10,7 +10,7 @@
   {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
-    <div class="column-one-quarter">
+    <div class="column-one-quarter outdent-navigation">
 
       <h2 class="heading-small">Layout</h2>
       <ul class="list list-underline font-xsmall">
@@ -95,7 +95,7 @@ <h2 class="heading-small">Alpha and beta banners</h2>
       </ul>
 
     </div>
-    <div class="column-two-thirds">
+    <div class="column-full">
       <h1 class="heading-xlarge no-top-margin">
         <span class="heading-secondary">GOV.UK elements</span>
         Front-end style guide
diff --git a/public/sass/elements-page.scss b/public/sass/elements-page.scss
index 39f51ee59..6ec2c55f4 100644
--- a/public/sass/elements-page.scss
+++ b/public/sass/elements-page.scss
@@ -17,6 +17,12 @@
   }
 }
 
+.outdent-navigation {
+  @include media(tablet) {
+    margin-left: -25%;
+  }
+}
+
 // Increase spacing above headings
 .heading-xlarge {
   @include media(tablet) {
diff --git a/public/sass/elements/_layout.scss b/public/sass/elements/_layout.scss
index a08d88095..81c2cec32 100644
--- a/public/sass/elements/_layout.scss
+++ b/public/sass/elements/_layout.scss
@@ -60,3 +60,7 @@
 .column-two-thirds {
   @include grid-column(2 / 3);
 }
+
+.column-full {
+  @include grid-column(1);
+}