Add govuk-template-flask-skeleton

assets/stylesheets/govuk_template/_accessibility.scss

@@ -0,0 +1,101 @@
+/* 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;
+  }
+}

assets/stylesheets/govuk_template/_basic.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;
+}

assets/stylesheets/govuk_template/_core-print.scss

@@ -0,0 +1,88 @@
+/* Global print stylesheet */
+
+/* reset everything */
+* {
+  background: transparent;
+  color: black;
+  text-shadow: none;
+  filter:none;
+  -ms-filter: none;
+}
+
+body {
+  @include core-14;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+a, a:visited {
+  word-wrap: break-word;
+}
+
+a[href^="/"]:after {
+  content: " (https://www.gov.uk" attr(href) ")";
+  font-size: 90%;
+}
+
+a[href^="http://"]:after,
+a[href^="https://"]:after {
+  content: " (" attr(href) ")";
+  font-size: 90%;
+}
+
+a[href^="javascript:"]:after,
+a[href^="#"]:after {
+    content: "";
+}
+
+img { max-width: 100% !important; }
+
+select { background: white; }
+
+#global-header {
+  color: #000;
+  font-weight: bold;
+  font-size: 24px;
+  margin-bottom: 1em;
+
+  #logo {
+    @include core-48;
+    font-size: 28pt;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+
+    img {
+      width: 46px;
+      height: 40px;
+      padding-right: 6px;
+      display: block;
+      float: left;
+    }
+  }
+
+  .content {
+    margin: 0!important;
+  }
+
+  a, a:visited {
+    text-decoration: none;
+  }
+  a:after {
+    content: "";
+  }
+
+  img {
+    border: 0;
+    vertical-align: middle;
+  }
+
+}
+
+/* hide the unnecessary page elements */
+body footer,
+.visuallyhidden,
+#global-cookie-message,
+#skiplink-container {
+  display: none !important;
+}

assets/stylesheets/govuk_template/_footer.scss

@@ -0,0 +1,179 @@
+/* Global footer */
+
+#footer {
+  background-color: $grey-8;
+  border-top: 1px solid $grey-6;
+
+  .footer-wrapper {
+    @include outer-block;
+    padding-top: 20px;
+    @include media(tablet) {
+      padding-top: 60px;
+    }
+    background-color: $grey-8;
+    margin: 0 auto;
+  }
+
+  a {
+    color: $grey-3;
+
+    &:hover {
+      color: $grey-1;
+    }
+  }
+
+  h2 {
+    @include core-24;
+    font-weight: bold;
+    color: $grey-1;
+    margin: 0;
+
+    a {
+      color: inherit;
+    }
+  }
+
+  .footer-meta {
+    @include inner-block;
+    @extend %contain-floats;
+    padding-bottom: 60px;
+    clear: both;
+    font-size: 0;
+    color: $grey-3;
+
+    .footer-meta-inner {
+      display: inline-block;
+      vertical-align: bottom;
+      width: 100%;
+
+      @include media(tablet) {
+        width: 75%;
+      }
+
+      @include ie-lte(7) {
+        float: left;
+        display: block;
+      }
+
+      ul {
+        @include core-16($line-height: (24/16), $line-height-640: (24/16));
+        display: inline-block;
+        list-style: none;
+        margin: 0 0 1.5em 0;
+        padding: 0;
+
+        @include media(tablet) {
+          margin: 0 0 1em 0;
+        }
+
+        li {
+          display: inline-block;
+          margin: 0 15px 0 0;
+
+          @include ie-lte(7) {
+            display: inline;
+            margin-right: 0;
+            padding-right: 15px;
+          }
+        }
+      }
+
+      .open-government-licence {
+        clear: left;
+        position: relative;
+
+        @include media(tablet) {
+          padding-left: 53px;
+        }
+
+        @include ie(6) {
+          zoom: 1;
+        }
+
+        .logo {
+          margin-bottom: 1em;
+          padding-top: 0;
+          @include media(tablet) {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 41px;
+            height: 100%;
+          }
+
+          a {
+            display: block;
+            width: 41px;
+            height: 17px;
+            overflow:hidden;
+            text-indent: -999em;
+            background: image-url("/static/images/open-government-licence.png") 0 0 no-repeat;
+            @include device-pixel-ratio() {
+              background-image: image-url("/static/images/open-government-licence_2x.png");
+              background-size: 41px 17px;
+            }
+          }
+        }
+
+        p {
+          @include core-16;
+          margin: 0;
+          padding-top: 0.1em;
+        }
+      }
+    }
+
+    .copyright {
+      @include core-16;
+
+      margin: 30px 0 0 0;
+      width: 100%;
+      display: block;
+
+      @include media(tablet) {
+        display: inline-block;
+        text-align: inherit;
+        width: 25%;
+        padding-top: 15px;
+        margin-top: 0;
+      }
+
+      @include ie-lte(7) {
+        float: right;
+        height: 150px;
+        width: 24%;
+      }
+
+      a {
+        display: block;
+
+        background-image: url("/static/images/govuk-crest.png"); 
+        background-repeat: no-repeat;
+        background-position: 50% 0%;
+
+        @include media(tablet) {
+          background-position: 100% 0%;
+        }
+
+        @include device-pixel-ratio() {
+          background-image: url("/static/images/govuk-crest-2x.png");
+          background-size: 125px 102px;
+        }
+
+        @include ie(6) {
+          background-image: image-url("/static/images/govuk-crest-ie.png");
+        }
+
+        text-align: center;
+        text-decoration: none;
+
+        @include media(tablet) {
+          text-align: right;
+        }
+
+        padding: 115px 0 0 0;
+
+      }
+    }
+  }
+}

assets/stylesheets/govuk_template/_header.scss

@@ -0,0 +1,273 @@
+/* @import '_shims'; */
+/* @import '_conditionals'; */
+/* @import '_measurements'; */
+
+#global-header {
+  background-color: $black;
+  width: 100%;
+
+  .header-wrapper {
+    background-color: $black;
+    max-width: 990px;
+    margin: 0 auto;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    @extend %contain-floats;
+    @include media(tablet){
+      padding-left: $gutter-half;
+      padding-right: $gutter-half;
+    }
+    @include ie-lte(8) {
+      width: 990px;
+    }
+
+    .header-global {
+      @extend %contain-floats;
+      .header-logo {
+        @extend %contain-floats;
+        float: left;
+
+        @include media(desktop){
+          width: 33.33%;
+        }
+        @media screen and (max-width: 379px) {
+          width: auto;
+          float: none;
+        }
+
+        .content {
+          margin: 0 15px;
+        }
+      }
+      .header-logo {
+        margin: 5px 0 2px;
+      }
+    }
+  }
+  &.with-proposition {
+    .header-wrapper {
+      .header-global {
+        @include media(desktop){
+          float: left;
+          width: 33.33%;
+
+          .header-logo,
+          .site-search {
+            width: 100%;
+          }
+        }
+      }
+      .header-proposition {
+        @include media(desktop){
+          width: 66.66%;
+          float: left;
+        }
+        .content {
+          margin: 0 15px;
+        }
+      }
+    }
+  }
+
+  #logo {
+    float: left;
+    position: relative;
+    top: -1px;
+
+    height: 30px;
+    overflow: visible;
+    vertical-align: baseline;
+
+    color: $white;
+    font-weight: bold;
+    font-size: 30px;
+    line-height: 1em;
+    text-decoration: none;
+    text-rendering: optimizeLegibility;
+    margin-bottom: -3px;
+    padding-top: 2px;
+    border-bottom: 1px solid transparent;
+
+    background: image-url('/static/images/gov.uk_logotype_crown.png') no-repeat;
+    background-size: 35px 31px;
+    background-position: 0 0;
+    @include ie-lte(8) {
+      background-image: image-url('/static/images/gov.uk_logotype_crown-1x.png');
+    }
+
+    img {
+      position: relative;
+      top: -2px;
+
+      width: 35px;
+      height: 31px;
+
+      padding-right: 6px;
+
+      float: left;
+      display: inline;
+      line-height: inherit;
+      border: none;
+
+      /* visibility: hidden; */
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      border-bottom-color: $white;
+    }
+
+    &:active {
+      color: $light-blue;
+    }
+  }
+  .header-proposition {
+    padding-top: 10px;
+    @include media(desktop){
+      padding-top: 0;
+    }
+    #proposition-name {
+      @include core-24;
+      font-weight: bold;
+      color: $white;
+      text-decoration: none;
+    }
+    a#proposition-name:hover {
+      text-decoration: underline;
+    }
+    a.menu {
+      @include core-16;
+      color: $white;
+      display: block;
+      float: right;
+      text-decoration: none;
+      padding-top: 6px;
+      @include media(desktop){
+        display: none;
+      }
+      &:hover {
+        text-decoration: underline;
+      }
+      &:after {
+        display: inline-block;
+        font-size: 8px;
+        height: 8px;
+        padding-left: 5px;
+        vertical-align: middle;
+        content: " \25BC";
+      }
+      &.js-hidden:after {
+        content: " \25B2";
+      }
+    }
+    #proposition-menu {
+      margin-top: 5px;
+
+      // Some headers (Whitehall) don't have a propsition name, offset as if they did.
+      &.no-proposition-name {
+        @include media(desktop){
+          margin-top: 37px;
+          // 37px is the amount of margin required to line up the nav list with the top of the search box
+        }
+      }
+    }
+    #proposition-link,
+    #proposition-links {
+      clear: both;
+      @extend %contain-floats;
+      margin: 2px 0 0 0;
+      padding: 0;
+
+      .js-enabled & {
+        display: none;
+        @include media(desktop){
+          display: block;
+        }
+        &.js-visible {
+          display: block;
+        }
+      }
+
+      li {
+        float: left;
+        width: 50%;
+        padding: 3px 0;
+        border-bottom: 1px solid $grey-2;
+
+        @include media(desktop){
+          display: block;
+          width: auto;
+          padding: 0 15px 0 0;
+          border-bottom: 0;
+
+          &.clear-child {
+            clear: left;
+          }
+        }
+      }
+
+      a {
+        color: $white;
+        text-decoration: none;
+        @include bold-14;
+
+        @include media(desktop) {
+          @include bold-16;
+          line-height: 23px;
+        }
+
+        &:hover {
+          text-decoration: underline;
+        }
+        &.active {
+          color: $proposition-active-nav;
+        }
+        &:focus {
+          color: $black;
+        }
+      }
+    }
+
+    #proposition-link {
+      float: right;
+      line-height: 22px;
+      .js-enabled & {
+        display:block;
+      }
+      @include media(desktop) {
+        float:none;
+      }
+    }
+  }
+}
+
+/* Global header bar */
+
+#global-header-bar {
+  @extend %site-width-container;
+  height: 10px;
+  background-color: $govuk-blue;
+  @include ie-lte(8) {
+    font-size: 0;
+  }
+}
+
+/* Global cookie message */
+
+.js-enabled #global-cookie-message {
+  display: none; /* shown with JS, always on for non-JS */
+}
+
+#global-cookie-message {
+  width: 100%;
+  background-color: $light-blue-25;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  p {
+    @extend %site-width-container;
+    @include core-16;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

assets/stylesheets/govuk_template/govuk-template-ie6.scss

@@ -0,0 +1,5 @@
+$is-ie: true;
+$ie-version: 6;
+$mobile-ie6: false;
+
+@import "govuk-template";

assets/stylesheets/govuk_template/govuk-template-ie7.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 7;
+
+@import "govuk-template";

assets/stylesheets/govuk_template/govuk-template-ie8.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 8;
+
+@import "govuk-template";

assets/stylesheets/govuk_template/govuk-template-print.scss

@@ -0,0 +1,18 @@
+// PRINT STYLESHEET COMPILER
+
+// STYLEGUIDE
+// Mixins to be shared across gov.uk sites. Anything set in these
+// files can be used in the view files.
+
+$is-print: true;
+@import "styleguide/print";
+@import "govuk_frontend_toolkit/stylesheets/typography";
+
+// OUTPUT
+// The following files and inline CSS will form the output of print.css
+
+html {
+  font-size: 62.5%;
+}
+    
+@import "core-print";

assets/stylesheets/govuk_template/govuk-template.scss

@@ -0,0 +1,24 @@
+/* govuk_frontend_toolkit includes */
+@import "../govuk_frontend_toolkit/stylesheets/colours";
+@import "../govuk_frontend_toolkit/stylesheets/conditionals";
+@import "../govuk_frontend_toolkit/stylesheets/css3";
+@import "../govuk_frontend_toolkit/stylesheets/device-pixels";
+@import "../govuk_frontend_toolkit/stylesheets/typography";
+@import "../govuk_frontend_toolkit/stylesheets/grid_layout";
+@import "../govuk_frontend_toolkit/stylesheets/design-patterns/_buttons";
+
+// Edited version of govuk_elements repo
+// https://github.com/alphagov/govuk_elements
+@import "../govuk_elements/main";
+
+/* local styleguide includes */
+@import "styleguide/colours";
+@import "styleguide/conditionals2";
+
+// basic styles for HTML5 and other elements
+@import "basic";
+@import "accessibility";
+@import "header";
+@import "footer";
+
+

assets/stylesheets/govuk_template/styleguide/_colours.scss

@@ -0,0 +1,16 @@
+// Based on GOV.UK brand blue but slightly lighter so it hits contrast on the
+// black header bar when used as copy colour.
+$proposition-active-nav: #1d8feb;
+
+
+/* Old depricated greys, new things should use the toolkit greys */
+$grey-0: #0b0c0c;
+$grey-1: #171819;
+$grey-2: #2e3133;
+$grey-3: #454a4c;
+$grey-4: #5c6366;
+$grey-5: #8a9499;
+$grey-6: #a1acb2;
+$grey-7: #b8c6cc;
+$grey-8: #DEE0E2;
+$grey-9: #eaedef;

assets/stylesheets/govuk_template/styleguide/_conditionals2.scss

@@ -0,0 +1,21 @@
+// Media query helpers. These make producing IE layouts
+// super easy.
+
+// These are desktop and down media queries
+
+
+$is-ie: false !default;
+
+@mixin media-down($size: false, $max-width: false, $min-width: false) {
+  @if $is-ie == false {
+    @if $size == mobile {
+      @media (max-width: 640px){
+        @content;
+      }
+    } @else if $size == tablet {
+      @media (max-width: 800px){
+        @content;
+      }
+    }
+  }
+}

assets/stylesheets/govuk_template/styleguide/_print.scss

@@ -0,0 +1,24 @@
+// Print helpers. These make producing print layouts
+// super easy.
+
+// The base css you write should be for screen. You can
+// then add print styles on top.
+//
+// Usage:
+//
+//   table th {
+//     border: 1px solid;
+//     background-color: #ddd;
+//
+//     @include print{
+//       background-color: white;
+//     }
+//   }
+
+$is-print: false !default;
+
+@mixin print {
+  @if $is-print {
+    @content;
+  }
+}