From 5973202b5c432b57abe21ee14e291b777e4f6e3e Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 30 Nov 2015 13:34:43 +0000
Subject: [PATCH 1/8] Copy styles from basic.scss in the govuk template

https://raw.githubusercontent.com/alphagov/govuk_template/master/source/
assets/stylesheets/_basic.scss
---
 public/sass/elements/base.scss | 173 +++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 public/sass/elements/base.scss

diff --git a/public/sass/elements/base.scss b/public/sass/elements/base.scss
new file mode 100644
index 000000000..ddb3f5e35
--- /dev/null
+++ b/public/sass/elements/base.scss
@@ -0,0 +1,173 @@
+html, body, button, input, table, td, th { font-family: $NTA-Light; }
+
+// basic styles for HTML5 and other elements
+html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+// HTML5 display definition
+main {
+  display: block;
+}
+
+// self clearing floats
+.group:before,
+.group:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    overflow: hidden;
+ }
+
+.group:after {
+    clear: both;
+}
+.group {
+    zoom: 1;
+}
+
+// make elements stick at top of viewport when scrolling
+.content-fixed {
+  top: 0;
+  position: fixed;
+}
+.shim {
+  display: block;
+}
+
+/*
+ * 1. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+html {
+  -webkit-text-size-adjust: 100%; /* 1 */
+  -ms-text-size-adjust: 100%; /* 1 */
+  // Set background colour to match footer background
+  background-color: $grey-8;
+}
+
+/*
+  Force the scrollbar to always display in IE10/11
+ */
+html {
+  -ms-overflow-style: scrollbar;
+}
+
+body {
+  background: $white;
+  color: $text-colour;
+  line-height: 1.5;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+ol, ul, nav ol, nav ul {
+  list-style: inherit;
+}
+
+fieldset {
+  border: none;
+  padding: 0;
+}
+
+a:link {
+  color: $link-colour;
+}
+
+a:visited {
+  color: $link-visited-colour;
+}
+
+a:hover {
+  color: $link-hover-colour;
+}
+
+a:active {
+  color: $link-active-colour;
+}
+
+a[rel="external"] {
+  @include external-link-default;
+  @include external-link-19;
+  @include media-down(mobile) {
+    @include external-link-16;
+  }
+}
+
+.external-link {
+  @include external-link-12-no-hover;
+  @include external-link-heading;
+}
+
+// adjustments to normalize.css
+
+/*
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ *    http://clagnut.com/blog/348/#c790
+ *    note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
+ *    http://snook.ca/archives/html_and_css/font-size-with-rem
+ * 2. Keeps page centred in all browsers regardless of content height
+ * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
+ *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
+ */
+
+html {
+  font-size: 62.5%; /* 1 */
+  overflow-y: scroll; /* 2 */
+  -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
+}
+
+/*
+ * 1. Font-size increased to compensate for change to html element font-size in
+ *    order to support beta typography which was set in ems
+ *    (62.5% * 160% = 100%)
+ * 2. Addresses margins handled incorrectly in IE6/7
+ */
+
+body {
+  font-size: 160%; /* 1 */
+  margin: 0; /* 2 */
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+img {
+  border: 0;
+}
+
+@include ie-lte(7) {
+  button {
+    overflow:visible;
+  }
+}
+
+abbr[title] {
+  cursor: help;
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: searchfield-cancel-button;
+  margin-right: 2px;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
\ No newline at end of file

From c87e7bda086aaac2ab3a69bf359c9a17e9a68608 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 30 Nov 2015 13:35:38 +0000
Subject: [PATCH 2/8] Copy styles from accessibility.scss in the govuk template

https://raw.githubusercontent.com/alphagov/govuk_template/master/source/
assets/stylesheets/_accessibility.scss
---
 public/sass/elements/base.scss | 102 +++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/public/sass/elements/base.scss b/public/sass/elements/base.scss
index ddb3f5e35..67e3b05ee 100644
--- a/public/sass/elements/base.scss
+++ b/public/sass/elements/base.scss
@@ -170,4 +170,106 @@ input[type="search"]::-webkit-search-cancel-button {
 
 input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
+}
+
+/* For image replacement */
+.ir {
+  display: block;
+  text-indent: -999em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  text-align: left;
+  direction: ltr;
+
+  br {
+    display: none;
+  }
+}
+
+/* Hide for both screenreaders and browsers */
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+/* Hide only visually, but have it available for screenreaders */
+.visually-hidden,
+.visuallyhidden {
+  position: absolute;
+  left: -9999em;
+
+  /*
+   * Extends the .visuallyhidden class to allow the element to be
+   * focusable when navigated to via the keyboard
+   */
+  &.focusable:active,
+  &.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+  }
+}
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible {
+  visibility: hidden;
+}
+
+/* Give a strong clear visual idea as to what is currently in focus */
+a {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
+}
+
+a:focus {
+  background-color: $focus-colour;
+  outline: 3px solid $focus-colour;
+}
+
+/* Make skiplinks visible when they are tabbed to */
+
+.skiplink {
+  position: absolute;
+  left: -9999em;
+}
+
+.skiplink:focus {
+  position: static;
+}
+
+#skiplink-container {
+  text-align: center;
+  background: $black;
+
+  div {
+    text-align: left;
+    margin: 0 auto;
+    max-width: 1020px;
+  }
+
+  .skiplink {
+    @include inline-block;
+    margin: 0.75em 0 0 30px;
+  }
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+button:focus,
+#global-header input:focus {
+  outline: 3px solid $focus-colour;
+}
+
+#global-header {
+  h1 a:focus {
+    background-color: transparent;
+    outline: none;
+  }
+
+  a:focus {
+    color: $black;
+  }
 }
\ No newline at end of file

From 5b5f7405cac9a0ae5d923d5c24b2f68a4d55d544 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 30 Nov 2015 13:48:48 +0000
Subject: [PATCH 3/8] Remove any govuk_template specific styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove any styles which relate to the govuk  template header, if not
using the govuk_template - these won’t be required.
---
 public/sass/elements/base.scss | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/public/sass/elements/base.scss b/public/sass/elements/base.scss
index 67e3b05ee..484d32071 100644
--- a/public/sass/elements/base.scss
+++ b/public/sass/elements/base.scss
@@ -258,18 +258,6 @@ a:focus {
 input:focus,
 textarea:focus,
 select:focus,
-button:focus,
-#global-header input:focus {
+button:focus {
   outline: 3px solid $focus-colour;
 }
-
-#global-header {
-  h1 a:focus {
-    background-color: transparent;
-    outline: none;
-  }
-
-  a:focus {
-    color: $black;
-  }
-}
\ No newline at end of file

From 4a38060b0d7af80c2cc417f1e83a2d3ef676b8d7 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 30 Nov 2015 14:01:29 +0000
Subject: [PATCH 4/8] Remove helper classes from the base stylesheet

Remove helper classes which are used only by the govuk_template:
.group (clearfix)
.content-fixed and .shim
.ir (for image replacement)
.invisible
.skiplink
---
 public/sass/elements/base.scss | 71 ----------------------------------
 1 file changed, 71 deletions(-)

diff --git a/public/sass/elements/base.scss b/public/sass/elements/base.scss
index 484d32071..f339d4f84 100644
--- a/public/sass/elements/base.scss
+++ b/public/sass/elements/base.scss
@@ -12,31 +12,6 @@ main {
   display: block;
 }
 
-// self clearing floats
-.group:before,
-.group:after {
-    content: "\0020";
-    display: block;
-    height: 0;
-    overflow: hidden;
- }
-
-.group:after {
-    clear: both;
-}
-.group {
-    zoom: 1;
-}
-
-// make elements stick at top of viewport when scrolling
-.content-fixed {
-  top: 0;
-  position: fixed;
-}
-.shim {
-  display: block;
-}
-
 /*
  * 1. Prevents iOS text size adjust after orientation change, without disabling
  *    user zoom.
@@ -172,20 +147,6 @@ input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-/* For image replacement */
-.ir {
-  display: block;
-  text-indent: -999em;
-  overflow: hidden;
-  background-repeat: no-repeat;
-  text-align: left;
-  direction: ltr;
-
-  br {
-    display: none;
-  }
-}
-
 /* Hide for both screenreaders and browsers */
 .hidden {
   display: none;
@@ -213,11 +174,6 @@ input[type="search"]::-webkit-search-decoration {
   }
 }
 
-/* Hide visually and from screenreaders, but maintain layout */
-.invisible {
-  visibility: hidden;
-}
-
 /* Give a strong clear visual idea as to what is currently in focus */
 a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
@@ -228,33 +184,6 @@ a:focus {
   outline: 3px solid $focus-colour;
 }
 
-/* Make skiplinks visible when they are tabbed to */
-
-.skiplink {
-  position: absolute;
-  left: -9999em;
-}
-
-.skiplink:focus {
-  position: static;
-}
-
-#skiplink-container {
-  text-align: center;
-  background: $black;
-
-  div {
-    text-align: left;
-    margin: 0 auto;
-    max-width: 1020px;
-  }
-
-  .skiplink {
-    @include inline-block;
-    margin: 0.75em 0 0 30px;
-  }
-}
-
 input:focus,
 textarea:focus,
 select:focus,

From 62767163f194446550134e9b6145748783d40f1e Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 30 Nov 2015 14:07:27 +0000
Subject: [PATCH 5/8] Move helper classes to the helpers partial

- Move helper class .hidden to the helpers partial
- Remove .visuallyhidden from the base partial as this already exists
in elements/helpers
---
 public/sass/elements/_helpers.scss |  7 +++++++
 public/sass/elements/base.scss     | 27 ---------------------------
 2 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/public/sass/elements/_helpers.scss b/public/sass/elements/_helpers.scss
index 68caab433..7c7eb5057 100644
--- a/public/sass/elements/_helpers.scss
+++ b/public/sass/elements/_helpers.scss
@@ -26,7 +26,14 @@
 
 }
 
+// Hide for both screenreaders and browsers
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
 // Hide, but not for screenreaders
+.visually-hidden,
 .visuallyhidden {
   position: absolute;
   overflow: hidden;
diff --git a/public/sass/elements/base.scss b/public/sass/elements/base.scss
index f339d4f84..1fd79ccf2 100644
--- a/public/sass/elements/base.scss
+++ b/public/sass/elements/base.scss
@@ -147,33 +147,6 @@ input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-/* Hide for both screenreaders and browsers */
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
-/* Hide only visually, but have it available for screenreaders */
-.visually-hidden,
-.visuallyhidden {
-  position: absolute;
-  left: -9999em;
-
-  /*
-   * Extends the .visuallyhidden class to allow the element to be
-   * focusable when navigated to via the keyboard
-   */
-  &.focusable:active,
-  &.focusable:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-  }
-}
-
 /* Give a strong clear visual idea as to what is currently in focus */
 a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);

From 1c2ff84fa0a784a4252ebf655ec0dd88fd21df9b Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 30 Nov 2015 14:21:09 +0000
Subject: [PATCH 6/8] Group related base styles

- Group styles for focus, links and external links
- Group all rules defined for html and body elements
- Use Sass comment format
---
 public/sass/elements/base.scss | 126 ++++++++++++++-------------------
 1 file changed, 54 insertions(+), 72 deletions(-)

diff --git a/public/sass/elements/base.scss b/public/sass/elements/base.scss
index 1fd79ccf2..6083fc905 100644
--- a/public/sass/elements/base.scss
+++ b/public/sass/elements/base.scss
@@ -12,25 +12,35 @@ main {
   display: block;
 }
 
-/*
- * 1. Prevents iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
+// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+//    http://clagnut.com/blog/348/#c790
+//    note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
+//    http://snook.ca/archives/html_and_css/font-size-with-rem
+// 2. Keeps page centred in all browsers regardless of content height
+// 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
+//    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
+// 4. Prevents iOS text size adjust after orientation change, without disabling user zoom.
+
 html {
-  -webkit-text-size-adjust: 100%; /* 1 */
-  -ms-text-size-adjust: 100%; /* 1 */
+  font-size: 62.5%;   // 1
+  overflow-y: scroll; // 2
+  -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -ms-text-size-adjust: 100%; // 4
   // Set background colour to match footer background
   background-color: $grey-8;
-}
-
-/*
-  Force the scrollbar to always display in IE10/11
- */
-html {
+  // Force the scrollbar to always display in IE10/11
   -ms-overflow-style: scrollbar;
 }
 
+// 1. Font-size increased to compensate for change to html element font-size in
+//    order to support beta typography which was set in ems
+//    (62.5% * 160% = 100%)
+// 2. Addresses margins handled incorrectly in IE6/7
+
 body {
+  font-size: 160%; // 1
+  margin: 0; // 2
   background: $white;
   color: $text-colour;
   line-height: 1.5;
@@ -48,65 +58,6 @@ fieldset {
   padding: 0;
 }
 
-a:link {
-  color: $link-colour;
-}
-
-a:visited {
-  color: $link-visited-colour;
-}
-
-a:hover {
-  color: $link-hover-colour;
-}
-
-a:active {
-  color: $link-active-colour;
-}
-
-a[rel="external"] {
-  @include external-link-default;
-  @include external-link-19;
-  @include media-down(mobile) {
-    @include external-link-16;
-  }
-}
-
-.external-link {
-  @include external-link-12-no-hover;
-  @include external-link-heading;
-}
-
-// adjustments to normalize.css
-
-/*
- * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
- *    http://clagnut.com/blog/348/#c790
- *    note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
- *    http://snook.ca/archives/html_and_css/font-size-with-rem
- * 2. Keeps page centred in all browsers regardless of content height
- * 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
- *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
- */
-
-html {
-  font-size: 62.5%; /* 1 */
-  overflow-y: scroll; /* 2 */
-  -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
-}
-
-/*
- * 1. Font-size increased to compensate for change to html element font-size in
- *    order to support beta typography which was set in ems
- *    (62.5% * 160% = 100%)
- * 2. Addresses margins handled incorrectly in IE6/7
- */
-
-body {
-  font-size: 160%; /* 1 */
-  margin: 0; /* 2 */
-}
-
 b,
 strong {
   font-weight: 600;
@@ -147,7 +98,7 @@ input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-/* Give a strong clear visual idea as to what is currently in focus */
+// Set focus styles
 a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
 }
@@ -163,3 +114,34 @@ select:focus,
 button:focus {
   outline: 3px solid $focus-colour;
 }
+
+// Link styles
+a:link {
+  color: $link-colour;
+}
+
+a:visited {
+  color: $link-visited-colour;
+}
+
+a:hover {
+  color: $link-hover-colour;
+}
+
+a:active {
+  color: $link-active-colour;
+}
+
+// External link styles
+a[rel="external"] {
+  @include external-link-default;
+  @include external-link-19;
+  @include media-down(mobile) {
+    @include external-link-16;
+  }
+}
+
+.external-link {
+  @include external-link-12-no-hover;
+  @include external-link-heading;
+}

From bc1a73e209fed116e32b13857f0a37e8ae1be580 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 30 Nov 2015 14:24:31 +0000
Subject: [PATCH 7/8] Remove normalize styles for input type="search"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If the govuk_template isn’t being used - there isn’t by default a
search box in the header.

Remove these styles as they should only be set once, in normalize.css,
as if required.
---
 public/sass/elements/base.scss | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/public/sass/elements/base.scss b/public/sass/elements/base.scss
index 6083fc905..42229c6f0 100644
--- a/public/sass/elements/base.scss
+++ b/public/sass/elements/base.scss
@@ -77,27 +77,6 @@ abbr[title] {
   cursor: help;
 }
 
-/*
- * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: searchfield-cancel-button;
-  margin-right: 2px;
-}
-
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
 // Set focus styles
 a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);

From bf0829f19c3da27d8feace576d718b3bbf1b54fb Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Mon, 30 Nov 2015 14:27:15 +0000
Subject: [PATCH 8/8] Make base.scss a partial and show how to import it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ensure the partial is commented out, as these styles are already set by
govuk_template - there’s no need to duplicate in govuk_elements.
---
 public/sass/elements/{base.scss => _base.scss} | 0
 public/sass/main.scss                          | 5 +++++
 2 files changed, 5 insertions(+)
 rename public/sass/elements/{base.scss => _base.scss} (100%)

diff --git a/public/sass/elements/base.scss b/public/sass/elements/_base.scss
similarity index 100%
rename from public/sass/elements/base.scss
rename to public/sass/elements/_base.scss
diff --git a/public/sass/main.scss b/public/sass/main.scss
index 7907d48af..be712aa6b 100644
--- a/public/sass/main.scss
+++ b/public/sass/main.scss
@@ -16,6 +16,11 @@
 
 // GOV.UK elements
 @import "elements/helpers";
+
+// Base styles, predefined by govuk_template
+// If you're not using govuk_template, uncomment the line below.
+// @import "elements/base";
+
 @import "elements/reset";
 @import "elements/elements-typography";
 @import "elements/layout";