Merge pull request #131 from alphagov/copy-base-styles-from-govuk-tem…

…plate

Copy base styles from govuk template

public/sass/elements/_base.scss

@@ -0,0 +1,126 @@
+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;
+}
+
+// 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 {
+  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
+  -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;
+  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;
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+img {
+  border: 0;
+}
+
+@include ie-lte(7) {
+  button {
+    overflow:visible;
+  }
+}
+
+abbr[title] {
+  cursor: help;
+}
+
+// Set focus styles
+a {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
+}
+
+a:focus {
+  background-color: $focus-colour;
+  outline: 3px solid $focus-colour;
+}
+
+input:focus,
+textarea:focus,
+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;
+}

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;

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";