From bc4e3185c764f94b27862e368bed0b6f1c528b34 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Thu, 1 Jun 2017 13:14:47 +0100
Subject: [PATCH 1/2] Move the breadcrumb outside the main element

Add a site-wrapper container, move the breadcrumb outside the main
element.
---
 app/views/guide_alpha_beta.html    | 4 +---
 app/views/guide_buttons.html       | 4 +---
 app/views/guide_colour.html        | 4 +---
 app/views/guide_data.html          | 4 +---
 app/views/guide_errors.html        | 4 +---
 app/views/guide_form_elements.html | 4 +---
 app/views/guide_icons_images.html  | 4 +---
 app/views/guide_layout.html        | 4 +---
 app/views/guide_typography.html    | 4 +---
 app/views/index.html               | 5 +----
 app/views/layout.html              | 7 +++++++
 11 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/app/views/guide_alpha_beta.html b/app/views/guide_alpha_beta.html
index 8017e7942..fe42f539c 100755
--- a/app/views/guide_alpha_beta.html
+++ b/app/views/guide_alpha_beta.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Alpha and beta banners — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Alpha and beta banners
diff --git a/app/views/guide_buttons.html b/app/views/guide_buttons.html
index d2f575aab..ba43d81a5 100755
--- a/app/views/guide_buttons.html
+++ b/app/views/guide_buttons.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Buttons — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Buttons
diff --git a/app/views/guide_colour.html b/app/views/guide_colour.html
index 2999e6a01..61d6780ef 100755
--- a/app/views/guide_colour.html
+++ b/app/views/guide_colour.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Colour — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Colour
diff --git a/app/views/guide_data.html b/app/views/guide_data.html
index 992d484a4..9bd84cba9 100755
--- a/app/views/guide_data.html
+++ b/app/views/guide_data.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Data — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Data
diff --git a/app/views/guide_errors.html b/app/views/guide_errors.html
index 18c6db611..58eb713cb 100755
--- a/app/views/guide_errors.html
+++ b/app/views/guide_errors.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Errors and validation — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Errors and validation
diff --git a/app/views/guide_form_elements.html b/app/views/guide_form_elements.html
index 0d8b0b2cc..b5098deb1 100755
--- a/app/views/guide_form_elements.html
+++ b/app/views/guide_form_elements.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Form elements — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Form elements
diff --git a/app/views/guide_icons_images.html b/app/views/guide_icons_images.html
index 430f86144..08271cde6 100755
--- a/app/views/guide_icons_images.html
+++ b/app/views/guide_icons_images.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Icons and images — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Icons and images
diff --git a/app/views/guide_layout.html b/app/views/guide_layout.html
index feb99e16f..76eb45078 100755
--- a/app/views/guide_layout.html
+++ b/app/views/guide_layout.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Layout — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Layout
diff --git a/app/views/guide_typography.html b/app/views/guide_typography.html
index fdb9cd2f2..9bb0f183b 100755
--- a/app/views/guide_typography.html
+++ b/app/views/guide_typography.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Typography — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Typography
diff --git a/app/views/index.html b/app/views/index.html
index 5fe216c01..5b008df68 100755
--- a/app/views/index.html
+++ b/app/views/index.html
@@ -4,12 +4,9 @@
   GOV.UK elements
 {% endblock %}
 
-{% block content %}
-
+{% block main_content %}
 <main class="elements-index" id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <div class="grid-row">
     <div class="column-two-thirds">
 
diff --git a/app/views/layout.html b/app/views/layout.html
index e8a393582..5d5599be2 100755
--- a/app/views/layout.html
+++ b/app/views/layout.html
@@ -10,6 +10,13 @@
   {% include "includes/elements_tracking.html" %}
 {% endblock %}
 
+{% block content %}
+<div class="site-wrapper">
+  {% include "includes/breadcrumb.html" %}
+  {% block main_content %}{% endblock %}
+</div>
+{% endblock %}
+
 {% block cookie_message %}
   <p>{{cookieText | safe }}</p>
 {% endblock %}

From e8c625a398210fee925c63f83f692210aab796e0 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Thu, 1 Jun 2017 13:18:47 +0100
Subject: [PATCH 2/2] Add styles for the new site wrapper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rather than make a breaking change to govuk-elements-sass by removing
@extend %site-width-container from the #content area, instead -
override it in the documentation styles. Not pretty, but I’d prefer not
to make a breaking change for a fix to govuk_elements (the app).
---
 assets/sass/elements-documentation.scss | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/assets/sass/elements-documentation.scss b/assets/sass/elements-documentation.scss
index 37fe801a4..95ee5752e 100644
--- a/assets/sass/elements-documentation.scss
+++ b/assets/sass/elements-documentation.scss
@@ -16,9 +16,21 @@
 
 // ==========================================================================
 // Elements page styles
+// These are example styles, used only for the elements pages
 // ==========================================================================
 
-// These are example styles, used only for the elements pages
+// Add a class to wrap the <main> element
+// This is so the breadcrumb can sit outside <main>
+.site-wrapper {
+  @extend %site-width-container;
+
+  // Override margins set on #content
+  // This is a kludge to prevent a breaking change to govuk_elements_sass
+  // where @extend %site-width-container; is set for #content, so we need to override its margins
+  #content {
+    margin: 0;
+  }
+}
 
 .elements-index {
   // Reduce top and bottom margins