Add govuk-template-flask-skeleton

.gitignore

@@ -55,4 +55,11 @@ docs/_build/
 
 # PyBuilder
 target/
-.idea/
+.idea/
+
+# cache and static rebuild files
+assets/stylesheets/govuk_template/.sass-cache/
+.sass-cache/
+cache/
+static/stylesheets/govuk-template*
+static/css*

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "assets/govuk_frontend_toolkit"]
+	path = assets/govuk_frontend_toolkit
+	url = git@github.com:alphagov/govuk_frontend_toolkit.git

Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem 'sass'

Gemfile.lock

@@ -0,0 +1,13 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    sass (3.4.19)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  sass
+
+BUNDLED WITH
+   1.10.6

README

@@ -0,0 +1,24 @@
+This Python app creates a frontend skeleton based on Flask, Flask-Assets and the govuk_frontend_toolkit (and GOV.UK template). This renders pages with the GOV.UK style. Webpages can be coded using styles from GOV.UK Elements.
+
+govuk_frontend_toolkit is pulled in as a git submodule.
+To get the contents of the submodule run the following git commands.
+git submodule init
+git submodule update
+
+INSTALLATION
+
+In a virtual environment, install the Python requirements:
+pip install -r requirements.txt
+
+You will need sass installed:
+bundle install
+
+RUNNING THE APP
+
+To run the app:
+python app.py
+
+Initial URL -
+http://localhost:5000/helloworld
+
+(template for this page lives in /templates/hello-world.html, which adds a content block to govuk_template.html)

README.md

@@ -1,4 +1,4 @@
-https://travis-ci.org/alphagov/notify-admin-frontend.svg
+https://travis-ci.org/alphagov/notificiations-admin.svg
 
 # notifications-admin
 Application to handle the admin functions of the notifications application.

app.py

@@ -0,0 +1,107 @@
+import os
+from flask import Flask, render_template
+from flask.ext import assets
+from flask.ext.assets import Environment, Bundle
+#from flask.ext.scss import Scss
+#from flask.ext.sass import sass
+from webassets.filter import get_filter
+
+
+app = Flask(__name__)
+#Scss(app, static_dir='static', asset_dir='assets/stylesheets')
+#sass(app, input_dir='assets/stylesheets', output_dir='static')
+
+# debug mode - switch to False for production
+app.config['ASSETS_DEBUG'] = True
+
+env = assets.Environment(app)
+
+# debug mode - switch to True for production
+env.config['cache'] = False
+env.config['manifest'] = False
+
+env.config['sass_bin'] = '/Users/rebeccalaw/.rbenv/shims/sass'
+
+# Tell flask-assets where to look for our sass files.
+env.load_path = [
+    os.path.join(os.path.dirname(__file__), 'assets/stylesheets'),
+    os.path.join(os.path.dirname(__file__), 'assets'),
+    os.path.join(os.path.dirname(__file__), 'assets/stylesheets/stylesheets/govuk_frontend_toolkit'),
+    os.path.join(os.path.dirname(__file__), 'assets/stylesheets/govuk_template')
+
+]
+
+
+scss = get_filter('scss', as_output=True)
+
+env.register(
+    'css_all',
+    assets.Bundle(
+        'main.scss',
+        filters='scss',
+        output='css_all.css'
+    )
+)
+
+env.register(
+    'css_govuk-template',
+    assets.Bundle(
+        'govuk_template/govuk-template.scss',
+        filters='scss',
+        output='stylesheets/govuk-template.css'
+    )
+)
+
+env.register(
+    'css_govuk-template-ie6',
+    assets.Bundle(
+        'govuk_template/govuk-template-ie6.scss',
+        filters='scss',
+        output='stylesheets/govuk-template-ie6.css'
+    )
+)
+
+env.register(
+    'css_govuk-template-ie7',
+    assets.Bundle(
+        'govuk_template/govuk-template-ie7.scss',
+        filters='scss',
+        output='stylesheets/govuk-template-ie7.css'
+    )
+)
+
+env.register(
+    'css_govuk-template-ie8',
+    assets.Bundle(
+        'govuk_template/govuk-template-ie8.scss',
+        filters='scss',
+        output='stylesheets/govuk-template-ie8.css'
+    )
+)
+
+env.register(
+    'css_govuk-template-print',
+    assets.Bundle(
+        'govuk_template/govuk-template-print.scss',
+        filters='scss',
+        output='stylesheets/govuk-template-print.css'
+    )
+)
+
+
+@app.route("/")
+def index():
+    return render_template('index.html')
+
+@app.route("/govuk")
+def govuk():
+    return render_template('govuk_template.html')
+
+@app.route("/helloworld")
+def helloworld():
+    return render_template('hello-world.html')
+
+
+
+if __name__ == "__main__":
+    app.run(debug=True)

app/__init__.py

@@ -10,4 +10,3 @@ def create_app():
     application.register_blueprint(main_blueprint)
 
     return application
-

app/main/views/index.py

@@ -4,4 +4,3 @@ from app.main import main
 @main.route('/index')
 def index():
     return 'Hello from notifications-admin'
-

assets/javascripts/govuk-template.js

@@ -0,0 +1,112 @@
+(function () {
+  "use strict"
+  var root = this;
+  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  /*
+    Cookie methods
+    ==============
+
+    Usage:
+
+      Setting a cookie:
+      GOVUK.cookie('hobnob', 'tasty', { days: 30 });
+
+      Reading a cookie:
+      GOVUK.cookie('hobnob');
+
+      Deleting a cookie:
+      GOVUK.cookie('hobnob', null);
+  */
+  GOVUK.cookie = function (name, value, options) {
+    if(typeof value !== 'undefined'){
+      if(value === false || value === null) {
+        return GOVUK.setCookie(name, '', { days: -1 });
+      } else {
+        return GOVUK.setCookie(name, value, options);
+      }
+    } else {
+      return GOVUK.getCookie(name);
+    }
+  };
+  GOVUK.setCookie = function (name, value, options) {
+    if(typeof options === 'undefined') {
+      options = {};
+    }
+    var cookieString = name + "=" + value + "; path=/";
+    if (options.days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000));
+      cookieString = cookieString + "; expires=" + date.toGMTString();
+    }
+    if (document.location.protocol == 'https:'){
+      cookieString = cookieString + "; Secure";
+    }
+    document.cookie = cookieString;
+  };
+  GOVUK.getCookie = function (name) {
+    var nameEQ = name + "=";
+    var cookies = document.cookie.split(';');
+    for(var i = 0, len = cookies.length; i < len; i++) {
+      var cookie = cookies[i];
+      while (cookie.charAt(0) == ' ') {
+        cookie = cookie.substring(1, cookie.length);
+      }
+      if (cookie.indexOf(nameEQ) === 0) {
+        return decodeURIComponent(cookie.substring(nameEQ.length));
+      }
+    }
+    return null;
+  };
+}).call(this);
+(function () {
+  "use strict"
+  var root = this;
+  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  GOVUK.addCookieMessage = function () {
+    var message = document.getElementById('global-cookie-message'),
+        hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null);
+
+    if (hasCookieMessage) {
+      message.style.display = 'block';
+      GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 });
+    }
+  };
+}).call(this);
+(function() {
+  "use strict"
+
+  // add cookie message
+  if (window.GOVUK && GOVUK.addCookieMessage) {
+    GOVUK.addCookieMessage();
+  }
+
+  // header navigation toggle
+  if (document.querySelectorAll && document.addEventListener){
+    var els = document.querySelectorAll('.js-header-toggle'),
+        i, _i;
+    for(i=0,_i=els.length; i<_i; i++){
+      els[i].addEventListener('click', function(e){
+        e.preventDefault();
+        var target = document.getElementById(this.getAttribute('href').substr(1)),
+            targetClass = target.getAttribute('class') || '',
+            sourceClass = this.getAttribute('class') || '';
+
+        if(targetClass.indexOf('js-visible') !== -1){
+          target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''));
+        } else {
+          target.setAttribute('class', targetClass + " js-visible");
+        }
+        if(sourceClass.indexOf('js-hidden') !== -1){
+          this.setAttribute('class', sourceClass.replace(/(^|\s)js-hidden(\s|$)/, ''));
+        } else {
+          this.setAttribute('class', sourceClass + " js-hidden");
+        }
+      });
+    }
+  }
+}).call(this);
+
+
+

assets/javascripts/ie.js

@@ -0,0 +1,512 @@
+/*
+ HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+
+(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
+a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
+c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
+"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
+for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
+/*
+ HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+
+(function(j,f){function s(a,b){var c=a.createElement("p"),m=a.getElementsByTagName("head")[0]||a.documentElement;c.innerHTML="x<style>"+b+"</style>";return m.insertBefore(c.lastChild,m.firstChild)}function o(){var a=d.elements;return"string"==typeof a?a.split(" "):a}function n(a){var b=t[a[u]];b||(b={},p++,a[u]=p,t[p]=b);return b}function v(a,b,c){b||(b=f);if(e)return b.createElement(a);c||(c=n(b));b=c.cache[a]?c.cache[a].cloneNode():y.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);
+return b.canHaveChildren&&!z.test(a)?c.frag.appendChild(b):b}function A(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();a.createElement=function(c){return!d.shivMethods?b.createElem(c):v(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+o().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(d,b.frag)}
+function w(a){a||(a=f);var b=n(a);if(d.shivCSS&&!q&&!b.hasCSS)b.hasCSS=!!s(a,"article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}");e||A(a,b);return a}function B(a){for(var b,c=a.attributes,m=c.length,f=a.ownerDocument.createElement(l+":"+a.nodeName);m--;)b=c[m],b.specified&&f.setAttribute(b.nodeName,b.nodeValue);f.style.cssText=a.style.cssText;return f}function x(a){function b(){clearTimeout(d._removeSheetTimer);c&&c.removeNode(!0);
+c=null}var c,f,d=n(a),e=a.namespaces,j=a.parentWindow;if(!C||a.printShived)return a;"undefined"==typeof e[l]&&e.add(l);j.attachEvent("onbeforeprint",function(){b();var g,i,d;d=a.styleSheets;for(var e=[],h=d.length,k=Array(h);h--;)k[h]=d[h];for(;d=k.pop();)if(!d.disabled&&D.test(d.media)){try{g=d.imports,i=g.length}catch(j){i=0}for(h=0;h<i;h++)k.push(g[h]);try{e.push(d.cssText)}catch(n){}}g=e.reverse().join("").split("{");i=g.length;h=RegExp("(^|[\\s,>+~])("+o().join("|")+")(?=[[\\s,>+~#.:]|$)","gi");
+for(k="$1"+l+"\\:$2";i--;)e=g[i]=g[i].split("}"),e[e.length-1]=e[e.length-1].replace(h,k),g[i]=e.join("}");e=g.join("{");i=a.getElementsByTagName("*");h=i.length;k=RegExp("^(?:"+o().join("|")+")$","i");for(d=[];h--;)g=i[h],k.test(g.nodeName)&&d.push(g.applyElement(B(g)));f=d;c=s(a,e)});j.attachEvent("onafterprint",function(){for(var a=f,c=a.length;c--;)a[c].removeNode();clearTimeout(d._removeSheetTimer);d._removeSheetTimer=setTimeout(b,500)});a.printShived=!0;return a}var r=j.html5||{},z=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,
+y=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q,u="_html5shiv",p=0,t={},e;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";q="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}e=b}catch(d){e=q=!0}})();var d={elements:r.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",
+version:"3.6.2",shivCSS:!1!==r.shivCSS,supportsUnknownElements:e,shivMethods:!1!==r.shivMethods,type:"default",shivDocument:w,createElement:v,createDocumentFragment:function(a,b){a||(a=f);if(e)return a.createDocumentFragment();for(var b=b||n(a),c=b.frag.cloneNode(),d=0,j=o(),l=j.length;d<l;d++)c.createElement(j[d]);return c}};j.html5=d;w(f);var D=/^$|\b(?:all|print)\b/,l="html5shiv",C=!e&&function(){var a=f.documentElement;return!("undefined"==typeof f.namespaces||"undefined"==typeof f.parentWindow||
+"undefined"==typeof a.applyElement||"undefined"==typeof a.removeNode||"undefined"==typeof j.attachEvent)}();d.type+=" print";d.shivPrint=x;x(f)})(this,document);
+
+
+/*
+    json2.js
+    2011-10-19
+
+    Public Domain.
+
+    NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+
+    See http://www.JSON.org/js.html
+
+
+    This code should be minified before deployment.
+    See http://javascript.crockford.com/jsmin.html
+
+    USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
+    NOT CONTROL.
+
+
+    This file creates a global JSON object containing two methods: stringify
+    and parse.
+
+        JSON.stringify(value, replacer, space)
+            value       any JavaScript value, usually an object or array.
+
+            replacer    an optional parameter that determines how object
+                        values are stringified for objects. It can be a
+                        function or an array of strings.
+
+            space       an optional parameter that specifies the indentation
+                        of nested structures. If it is omitted, the text will
+                        be packed without extra whitespace. If it is a number,
+                        it will specify the number of spaces to indent at each
+                        level. If it is a string (such as '\t' or '&nbsp;'),
+                        it contains the characters used to indent at each level.
+
+            This method produces a JSON text from a JavaScript value.
+
+            When an object value is found, if the object contains a toJSON
+            method, its toJSON method will be called and the result will be
+            stringified. A toJSON method does not serialize: it returns the
+            value represented by the name/value pair that should be serialized,
+            or undefined if nothing should be serialized. The toJSON method
+            will be passed the key associated with the value, and this will be
+            bound to the value
+
+            For example, this would serialize Dates as ISO strings.
+
+                Date.prototype.toJSON = function (key) {
+                    function f(n) {
+                        // Format integers to have at least two digits.
+                        return n < 10 ? '0' + n : n;
+                    }
+
+                    return this.getUTCFullYear()   + '-' +
+                         f(this.getUTCMonth() + 1) + '-' +
+                         f(this.getUTCDate())      + 'T' +
+                         f(this.getUTCHours())     + ':' +
+                         f(this.getUTCMinutes())   + ':' +
+                         f(this.getUTCSeconds())   + 'Z';
+                };
+
+            You can provide an optional replacer method. It will be passed the
+            key and value of each member, with this bound to the containing
+            object. The value that is returned from your method will be
+            serialized. If your method returns undefined, then the member will
+            be excluded from the serialization.
+
+            If the replacer parameter is an array of strings, then it will be
+            used to select the members to be serialized. It filters the results
+            such that only members with keys listed in the replacer array are
+            stringified.
+
+            Values that do not have JSON representations, such as undefined or
+            functions, will not be serialized. Such values in objects will be
+            dropped; in arrays they will be replaced with null. You can use
+            a replacer function to replace those with JSON values.
+            JSON.stringify(undefined) returns undefined.
+
+            The optional space parameter produces a stringification of the
+            value that is filled with line breaks and indentation to make it
+            easier to read.
+
+            If the space parameter is a non-empty string, then that string will
+            be used for indentation. If the space parameter is a number, then
+            the indentation will be that many spaces.
+
+            Example:
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}]);
+            // text is '["e",{"pluribus":"unum"}]'
+
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
+            // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
+
+            text = JSON.stringify([new Date()], function (key, value) {
+                return this[key] instanceof Date ?
+                    'Date(' + this[key] + ')' : value;
+            });
+            // text is '["Date(---current time---)"]'
+
+
+        JSON.parse(text, reviver)
+            This method parses a JSON text to produce an object or array.
+            It can throw a SyntaxError exception.
+
+            The optional reviver parameter is a function that can filter and
+            transform the results. It receives each of the keys and values,
+            and its return value is used instead of the original value.
+            If it returns what it received, then the structure is not modified.
+            If it returns undefined then the member is deleted.
+
+            Example:
+
+            // Parse the text. Values that look like ISO date strings will
+            // be converted to Date objects.
+
+            myData = JSON.parse(text, function (key, value) {
+                var a;
+                if (typeof value === 'string') {
+                    a =
+/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
+                    if (a) {
+                        return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+                            +a[5], +a[6]));
+                    }
+                }
+                return value;
+            });
+
+            myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
+                var d;
+                if (typeof value === 'string' &&
+                        value.slice(0, 5) === 'Date(' &&
+                        value.slice(-1) === ')') {
+                    d = new Date(value.slice(5, -1));
+                    if (d) {
+                        return d;
+                    }
+                }
+                return value;
+            });
+
+
+    This is a reference implementation. You are free to copy, modify, or
+    redistribute.
+*/
+
+/*jslint evil: true, regexp: true */
+
+/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
+    call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
+    getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
+    lastIndex, length, parse, prototype, push, replace, slice, stringify,
+    test, toJSON, toString, valueOf
+*/
+
+
+// Create a JSON object only if one does not already exist. We create the
+// methods in a closure to avoid creating global variables.
+
+var JSON;
+if (!JSON) {
+    JSON = {};
+}
+
+(function () {
+    'use strict';
+
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10 ? '0' + n : n;
+    }
+
+    if (typeof Date.prototype.toJSON !== 'function') {
+
+        Date.prototype.toJSON = function (key) {
+
+            return isFinite(this.valueOf())
+                ? this.getUTCFullYear()     + '-' +
+                    f(this.getUTCMonth() + 1) + '-' +
+                    f(this.getUTCDate())      + 'T' +
+                    f(this.getUTCHours())     + ':' +
+                    f(this.getUTCMinutes())   + ':' +
+                    f(this.getUTCSeconds())   + 'Z'
+                : null;
+        };
+
+        String.prototype.toJSON      =
+            Number.prototype.toJSON  =
+            Boolean.prototype.toJSON = function (key) {
+                return this.valueOf();
+            };
+    }
+
+    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        gap,
+        indent,
+        meta = {    // table of character substitutions
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        rep;
+
+
+    function quote(string) {
+
+// If the string contains no control characters, no quote characters, and no
+// backslash characters, then we can safely slap some quotes around it.
+// Otherwise we must also replace the offending characters with safe escape
+// sequences.
+
+        escapable.lastIndex = 0;
+        return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
+            var c = meta[a];
+            return typeof c === 'string'
+                ? c
+                : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+        }) + '"' : '"' + string + '"';
+    }
+
+
+    function str(key, holder) {
+
+// Produce a string from holder[key].
+
+        var i,          // The loop counter.
+            k,          // The member key.
+            v,          // The member value.
+            length,
+            mind = gap,
+            partial,
+            value = holder[key];
+
+// If the value has a toJSON method, call it to obtain a replacement value.
+
+        if (value && typeof value === 'object' &&
+                typeof value.toJSON === 'function') {
+            value = value.toJSON(key);
+        }
+
+// If we were called with a replacer function, then call the replacer to
+// obtain a replacement value.
+
+        if (typeof rep === 'function') {
+            value = rep.call(holder, key, value);
+        }
+
+// What happens next depends on the value's type.
+
+        switch (typeof value) {
+        case 'string':
+            return quote(value);
+
+        case 'number':
+
+// JSON numbers must be finite. Encode non-finite numbers as null.
+
+            return isFinite(value) ? String(value) : 'null';
+
+        case 'boolean':
+        case 'null':
+
+// If the value is a boolean or null, convert it to a string. Note:
+// typeof null does not produce 'null'. The case is included here in
+// the remote chance that this gets fixed someday.
+
+            return String(value);
+
+// If the type is 'object', we might be dealing with an object or an array or
+// null.
+
+        case 'object':
+
+// Due to a specification blunder in ECMAScript, typeof null is 'object',
+// so watch out for that case.
+
+            if (!value) {
+                return 'null';
+            }
+
+// Make an array to hold the partial results of stringifying this object value.
+
+            gap += indent;
+            partial = [];
+
+// Is the value an array?
+
+            if (Object.prototype.toString.apply(value) === '[object Array]') {
+
+// The value is an array. Stringify every element. Use null as a placeholder
+// for non-JSON values.
+
+                length = value.length;
+                for (i = 0; i < length; i += 1) {
+                    partial[i] = str(i, value) || 'null';
+                }
+
+// Join all of the elements together, separated with commas, and wrap them in
+// brackets.
+
+                v = partial.length === 0
+                    ? '[]'
+                    : gap
+                    ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
+                    : '[' + partial.join(',') + ']';
+                gap = mind;
+                return v;
+            }
+
+// If the replacer is an array, use it to select the members to be stringified.
+
+            if (rep && typeof rep === 'object') {
+                length = rep.length;
+                for (i = 0; i < length; i += 1) {
+                    if (typeof rep[i] === 'string') {
+                        k = rep[i];
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            } else {
+
+// Otherwise, iterate through all of the keys in the object.
+
+                for (k in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, k)) {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            }
+
+// Join all of the member texts together, separated with commas,
+// and wrap them in braces.
+
+            v = partial.length === 0
+                ? '{}'
+                : gap
+                ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
+                : '{' + partial.join(',') + '}';
+            gap = mind;
+            return v;
+        }
+    }
+
+// If the JSON object does not yet have a stringify method, give it one.
+
+    if (typeof JSON.stringify !== 'function') {
+        JSON.stringify = function (value, replacer, space) {
+
+// The stringify method takes a value and an optional replacer, and an optional
+// space parameter, and returns a JSON text. The replacer can be a function
+// that can replace values, or an array of strings that will select the keys.
+// A default replacer method can be provided. Use of the space parameter can
+// produce text that is more easily readable.
+
+            var i;
+            gap = '';
+            indent = '';
+
+// If the space parameter is a number, make an indent string containing that
+// many spaces.
+
+            if (typeof space === 'number') {
+                for (i = 0; i < space; i += 1) {
+                    indent += ' ';
+                }
+
+// If the space parameter is a string, it will be used as the indent string.
+
+            } else if (typeof space === 'string') {
+                indent = space;
+            }
+
+// If there is a replacer, it must be a function or an array.
+// Otherwise, throw an error.
+
+            rep = replacer;
+            if (replacer && typeof replacer !== 'function' &&
+                    (typeof replacer !== 'object' ||
+                    typeof replacer.length !== 'number')) {
+                throw new Error('JSON.stringify');
+            }
+
+// Make a fake root object containing our value under the key of ''.
+// Return the result of stringifying the value.
+
+            return str('', {'': value});
+        };
+    }
+
+
+// If the JSON object does not yet have a parse method, give it one.
+
+    if (typeof JSON.parse !== 'function') {
+        JSON.parse = function (text, reviver) {
+
+// The parse method takes a text and an optional reviver function, and returns
+// a JavaScript value if the text is a valid JSON text.
+
+            var j;
+
+            function walk(holder, key) {
+
+// The walk method is used to recursively walk the resulting structure so
+// that modifications can be made.
+
+                var k, v, value = holder[key];
+                if (value && typeof value === 'object') {
+                    for (k in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+
+
+// Parsing happens in four stages. In the first stage, we replace certain
+// Unicode characters with escape sequences. JavaScript handles many characters
+// incorrectly, either silently deleting them, or treating them as line endings.
+
+            text = String(text);
+            cx.lastIndex = 0;
+            if (cx.test(text)) {
+                text = text.replace(cx, function (a) {
+                    return '\\u' +
+                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+
+// In the second stage, we run the text against regular expressions that look
+// for non-JSON patterns. We are especially concerned with '()' and 'new'
+// because they can cause invocation, and '=' because it can cause mutation.
+// But just to be safe, we want to reject all unexpected forms.
+
+// We split the second stage into 4 regexp operations in order to work around
+// crippling inefficiencies in IE's and Safari's regexp engines. First we
+// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
+// replace all simple value tokens with ']' characters. Third, we delete all
+// open brackets that follow a colon or comma or that begin the text. Finally,
+// we look to see that the remaining characters are only whitespace or ']' or
+// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
+
+            if (/^[\],:{}\s]*$/
+                    .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
+                        .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+                        .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+// In the third stage we use the eval function to compile the text into a
+// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
+// in JavaScript: it can begin a block or an object literal. We wrap the text
+// in parens to eliminate the ambiguity.
+
+                j = eval('(' + text + ')');
+
+// In the optional fourth stage, we recursively walk the new structure, passing
+// each name/value pair to a reviver function for possible transformation.
+
+                return typeof reviver === 'function'
+                    ? walk({'': j}, '')
+                    : j;
+            }
+
+// If the text is not JSON parseable, then a SyntaxError is thrown.
+
+            throw new SyntaxError('JSON.parse');
+        };
+    }
+}());
+
+

assets/stylesheets/govuk_elements/elements-page-ie6.scss

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

assets/stylesheets/govuk_elements/elements-page-ie7.scss

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

assets/stylesheets/govuk_elements/elements-page-ie8.scss

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

assets/stylesheets/govuk_elements/elements-page.scss

@@ -0,0 +1,380 @@
+@import "main";
+
+// ==========================================================================
+// Elements page styles
+// ==========================================================================
+
+// These are example styles, used only for the elements pages
+
+.elements-index {
+  // Reduce top and bottom margins
+  .heading-medium {
+    margin: 1em 0 0 0;
+  }
+  // Add spacing above
+  .divider {
+    margin-top: 4em;
+  }
+}
+
+// Increase spacing above headings
+.heading-xlarge {
+  @include media(tablet) {
+    margin-top: em(60, 48);
+    margin-bottom: em(30, 48);
+  }
+}
+
+// Page contents
+.heading-contents {
+  margin-top: 3em;
+}
+
+.list-contents li {
+  @include core-16;
+}
+
+// Use for paragraphs before lists
+.lead-in {
+  margin-bottom: 0;
+}
+
+// Lists
+.list-bullet {
+  margin-bottom: ($gutter*1.5);
+}
+
+
+// Example boxes
+// ==========================================================================
+
+.example {
+  @extend %contain-floats;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid $grey-2;
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+
+  padding-top: $gutter;
+  padding-right: $gutter-half;
+  padding-bottom: $gutter-half;
+  padding-left: $gutter-half;
+
+  @include media(tablet) {
+    padding-top: $gutter*1.5;
+    padding-right: $gutter;
+    padding-bottom: $gutter;
+    padding-left: $gutter;
+  }
+
+  &:before {
+    content: "EXAMPLE";
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    padding: em(4) em(15) em(4) em(15);
+
+    @include core-14;
+    background: $grey-2;
+    color: white;
+  }
+
+  // Blue text for heading sizes
+  .highlight {
+    font-style: normal;
+    color: $hm-government;
+  }
+
+  // Fix grid layout within example boxes for IE7 and below
+  // where box-sizing isn't supported: http://caniuse.com/#search=box-sizing
+  @mixin example-box-column($width) {
+    width: (($site-width - $gutter) * $width) - $gutter;
+  }
+
+  @include ie-lte(7){
+
+    // Set example box width to 900px (removing left and right padding)
+    $example-box-width: $site-width - ($gutter * 2);
+    width: $example-box-width;
+
+    // Recalculate grid column widths
+    .column-quarter {
+      @include example-box-column( 1/4 );
+    }
+    .column-half {
+      @include example-box-column( 1/2 );
+    }
+    .column-third {
+      @include example-box-column( 1/3 );
+    }
+    .column-two-thirds {
+      @include example-box-column( 2/3 );
+    }
+
+    // Scale images to fit grid columns
+    img {
+      width: 100%;
+    }
+  }
+
+}
+
+
+// 1. Layout
+// ==========================================================================
+
+.example-grid p {
+  width: 100%;
+  background: file-url("examples/grid.png") 0 0 repeat;
+  margin-bottom: 0;
+  height: 30px;
+  @include media(tablet) {
+    height: 60px;
+  }
+  overflow: hidden;
+  text-indent: -999em;
+}
+
+
+// 2. Typography
+// ==========================================================================
+
+
+// 3. Colour
+// ==========================================================================
+
+// Colour swatches
+.swatch {
+  width: 60px;
+  height: 60px;
+  @include border-radius(100%);
+  @include media(mobile) {
+    clear: both;
+    float: left;
+    margin-right: $gutter-half;
+    margin-bottom: $gutter-half;
+  }
+  @include media(tablet) {
+    margin: 0 auto $gutter-half auto;
+  }
+}
+
+// Sass list for colour palette
+$palette: (
+  ("purple", $purple),
+  ("mauve", $mauve),
+  ("fuschia", $fuschia),
+  ("pink", $pink),
+  ("baby-pink", $baby-pink),
+  ("red", $red),
+  ("mellow-red", $mellow-red),
+  ("orange", $orange),
+  ("brown", $brown),
+  ("yellow", $yellow),
+  ("green", $green),
+  ("grass-green", $grass-green),
+  ("turquoise", $turquoise),
+  ("light-blue", $light-blue)
+);
+
+@mixin color-swatches {
+  @each $color in $palette {
+    $color-name: nth($color, 1);
+    $color-var: nth($color, 2);
+    .swatch-#{$color-name} {
+      background-color: $color-var;
+    }
+  }
+}
+
+// Generate swatch classes for each colour in palette list
+@include color-swatches;
+
+.swatch-alpha {
+  background-color: $alpha-colour;
+}
+
+.swatch-beta {
+  background-color: $beta-colour;
+}
+
+.swatch-discovery {
+  background-color: $discovery-colour;
+}
+
+.swatch-live {
+  background-color: $live-colour;
+}
+
+.swatch-error {
+  background-color: $error-colour;
+}
+
+.swatch-focus {
+  background-color: $focus-colour;
+}
+
+.swatch-button-colour {
+  background-color: $button-colour;
+}
+
+.swatch-black {
+  background-color: $black;
+}
+
+.swatch-grey-1 {
+  background-color: $grey-1;
+}
+
+.swatch-grey-2 {
+  background-color: $grey-2;
+}
+
+.swatch-grey-3 {
+  background-color: $grey-3;
+}
+
+.swatch-grey-4 {
+  background-color: $grey-4;
+}
+
+.swatch-white {
+  background-color: $white;
+  border: 1px solid $grey-3;
+}
+
+.swatch-text-colour {
+  background-color: $text-colour;
+}
+
+.swatch-text-secondary {
+  background-color: $secondary-text-colour;
+}
+
+.swatch-page-colour {
+  background-color: $page-colour;
+  border: 1px solid $grey-3;
+}
+
+.swatch-button-colour {
+  background-color: $button-colour;
+}
+
+.swatch-link-colour {
+ background-color: $link-colour;
+}
+
+.swatch-link-colour-visited {
+ background-color: $link-visited-colour;
+}
+
+.swatch-link-colour-hover {
+ background-color: $link-hover-colour;
+}
+
+.swatch-border-colour {
+  background-color: $border-colour;
+}
+
+.swatch-panel-colour {
+  background-color: $panel-colour;
+}
+
+.swatch-highlight-colour {
+  background-color: $highlight-colour;
+}
+
+// Colour swatch layout
+.swatch-wrapper {
+  @include media(tablet) {
+    float: left;
+    width: 20%;
+    text-align: center;
+  }
+
+  .heading-small {
+    margin-bottom: em(10);
+  }
+
+  ul {
+    padding-bottom: $gutter-half;
+    @include media(mobile) {
+      min-height: 50px;
+      padding-top: 10px;
+    }
+  }
+  li {
+    @include core-16;
+  }
+  b {
+  font-weight: bold;
+  text-transform: uppercase;
+  }
+}
+
+
+// 4. Images and icons
+// ==========================================================================
+
+.example-images img {
+  max-width: 100%;
+  vertical-align: top;
+}
+
+
+// 5. Data
+// ==========================================================================
+
+.data .bold-xlarge,
+.data .bold-xxlarge {
+  line-height: 0.8;
+}
+
+.example .data p {
+  margin-bottom: 0;
+}
+
+
+// 6. Forms
+// ==========================================================================
+
+
+// 7. Buttons
+// ==========================================================================
+
+// Increase spacing under buttons in example boxes
+.example-button .button {
+  margin-bottom: 15px;
+}
+
+// Remove top margin from "Creating buttons" example
+.example-button .heading-small {
+  margin-top: 0;
+}
+
+// Make swatch wrapper full width for "Creating buttons" example
+.example-button .swatch-wrapper {
+  width: 100%;
+}
+
+// Remove bottom padding to keep "Creating buttons" example
+.example-button ul {
+  padding-bottom: 0;
+}
+
+
+// 9. Alpha beta banners
+// ==========================================================================
+
+// Alpha
+.phase-banner-alpha {
+  @include phase-banner($state: alpha);
+}
+
+// Beta
+.phase-banner-beta {
+  @include phase-banner($state: beta);
+}

assets/stylesheets/govuk_elements/elements/_breadcrumb.scss

@@ -0,0 +1,50 @@
+// Global breadcrumb from Alphagov - static
+// https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/helpers/_header.scss#L224
+// Modified to use the new grid layout mixins
+
+#global-breadcrumb {
+
+  @extend %grid-row;
+
+  ol {
+
+    @include grid-column(1);
+    padding-top: 0.75em;
+    padding-bottom: 0.75em;
+
+    li {
+
+      @include core-16;
+      float: left;
+
+      background-image: file-url("separator.png");
+      @include device-pixel-ratio() {
+        background-image: file-url("separator-2x.png");
+        background-size: 6px 11px;
+      }
+
+      background-position: 100% 50%;
+      background-repeat: no-repeat;
+
+      list-style: none;
+
+      margin-right: 0.5em;
+      margin-bottom: 0.4em;
+      margin-left: 0;
+      padding-right: 1em;
+
+      a {
+        color: $text-colour;
+      }
+
+      strong {
+        font-weight: normal;
+      }
+
+      &:last-child {
+        background-image: none;
+        margin-right: 0
+      }
+    }
+  }
+}

assets/stylesheets/govuk_elements/elements/_buttons.scss

@@ -0,0 +1,51 @@
+// Buttons
+// ==========================================================================
+
+.button {
+  @include button ($button-colour);
+  @include box-sizing (border-box);
+  margin: 0 $gutter-half $gutter-half 0;
+  padding: em(10) em(15) em(5) em(15);
+  vertical-align: top;
+  @include media (mobile) {
+    width: 100%;
+  }
+}
+
+// Fix unwanted button padding in Firefox
+.button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.button:focus {
+  outline: 3px solid $focus-colour;
+}
+
+// Disabled buttons
+.button[disabled="disabled"] {
+  background: $button-colour;
+}
+
+.button[disabled="disabled"]:focus {
+  outline: none;
+}
+
+// Start now buttons
+.button-start,
+.button-get-started {
+  @include bold-24;
+  background-image: file-url("icons/icon-pointer.png");
+  background-repeat: no-repeat;
+  background-position: 100% 50%;
+  padding: em(7) em(41) em(4) em(16);
+
+  @include device-pixel-ratio {
+    background-image: file-url("icons/icon-pointer-2x.png");
+    background-size: 30px 19px;
+  }
+
+  @include ie(6) {
+    background-image: file-url("icons/icon-pointer-2x.png");
+  }
+}

assets/stylesheets/govuk_elements/elements/_components.scss

@@ -0,0 +1,9 @@
+// Box with turquoise background and white text
+// Used for transaction end pages, and Bank Holidays
+.govuk-box-highlight {
+  margin: 1em 0 1em 0;
+  padding: 2em 0 1em 0;
+  color: $white;
+  background: $turquoise;
+  text-align: center;
+}

assets/stylesheets/govuk_elements/elements/_details.scss

@@ -0,0 +1,34 @@
+// Details
+// ==========================================================================
+
+details {
+  display: block;
+
+  summary {
+    display: inline-block;
+    color: $govuk-blue;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: em(5);
+
+    &:hover {
+      color: $link-hover-colour;
+    }
+
+    &:focus {
+      outline: 3px solid $focus-colour;
+    }
+  }
+
+  // Underline only summary text (not the arrow)
+  .summary {
+    text-decoration: underline;
+  }
+
+  // Match fallback arrow spacing with -webkit default
+  .arrow {
+    margin-right: .35em;
+    font-style: normal;
+  }
+
+}

assets/stylesheets/govuk_elements/elements/_elements-typography.scss

@@ -0,0 +1,276 @@
+// Typography
+// ==========================================================================
+
+// Increase the base font size to 19px for the main content area
+// Using the core-19 mixin from the govuk_toolkit _typography.scss file
+
+main {
+  @include core-19;
+  -webkit-font-smoothing: antialiased;
+}
+
+// Core font sizes
+.font-xxlarge {
+  @include core-80;
+}
+
+.font-xlarge {
+  @include core-48;
+}
+
+.font-large {
+  @include core-36;
+}
+
+.font-medium {
+  @include core-24;
+}
+
+.font-small {
+  @include core-19;
+}
+
+.font-xsmall {
+  @include core-16;
+}
+
+// Bold font sizes
+.bold-xxlarge {
+  @include bold-80();
+}
+
+.bold-xlarge {
+  @include bold-48();
+}
+
+.bold-large {
+  @include bold-36();
+}
+
+.bold-medium {
+  @include bold-24();
+}
+
+.bold-small {
+  @include bold-19();
+}
+
+.bold-xsmall {
+  @include bold-16();
+}
+
+// Common heading sizes
+// Using the bold-xx mixins from the govuk_toolkit _typography.scss file
+// Spacing is set in em, using the px to em function in the elements _helpers.scss file
+
+// Headings
+.heading-xlarge {
+  @include bold-48();
+
+  margin-top: em(15, 32);
+  margin-bottom: em(30, 32);
+
+  @include media(tablet) {
+    margin-top: em(30, 48);
+    margin-bottom: em(60, 48);
+  }
+
+  .heading-secondary {
+    @include heading-27();
+
+    display: block;
+    color: $secondary-text-colour;
+  }
+
+}
+
+.heading-large {
+  @include bold-36();
+
+  margin-top: em(25, 24);
+  margin-bottom: em(10, 24);
+
+  @include media(tablet) {
+    margin-top: em(45, 36);
+    margin-bottom: em(20, 36);
+  }
+
+  .heading-secondary {
+    @include heading-24();
+
+    display: block;
+    color: $secondary-text-colour;
+  }
+
+}
+
+.heading-medium {
+  @include bold-24();
+
+  margin-top: em(25, 20);
+  margin-bottom: em(10, 20);
+
+  @include media(tablet) {
+    margin-top: em(45, 24);
+    margin-bottom: em(20, 24);
+  }
+
+}
+
+.heading-small {
+  @include bold-19();
+
+  margin-top: em(10, 16);
+  margin-bottom: em(5, 16);
+
+  @include media(tablet) {
+    margin-top: em(20, 19);
+  }
+
+}
+
+// Text
+p {
+  margin-top: em(5, 16);
+  margin-bottom: em(20, 16);
+
+  @include media(tablet) {
+    margin-top: em(5);
+    margin-bottom: em(20);
+  }
+
+}
+
+// Lede, or intro text
+.lede {
+  @include core-24;
+}
+
+// Set a max-width for text blocks
+// Less than 75 characters per line of text
+.text {
+  max-width: 30em;
+}
+
+.text-secondary {
+  color: $secondary-text-colour;
+}
+
+// Link styles
+.link {
+  color: $link-colour;
+  text-decoration: underline;
+}
+
+.link:visited {
+  color: $link-visited-colour;
+}
+
+.link:hover {
+  color: $link-hover-colour;
+}
+
+.link:active {
+  color: $link-colour;
+}
+
+// Back link styles - with left pointing arrow
+
+.link-back {
+  @include inline-block;
+  position: relative;
+
+  @include core-16;
+
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+  padding-left: 14px;
+
+  color: $black;
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: $black;
+  }
+
+  text-decoration: none;
+  border-bottom: 1px solid $black;
+
+  // Back arrow - left pointing black arrow
+  &::before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+
+    border-top: 5px solid transparent;
+    border-right: 6px solid #0b0c0c;
+    border-bottom: 5px solid transparent;
+
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -6px;
+  }
+
+  // Improve arrow shape in Firefox
+  @-moz-document url-prefix() {
+    &::before {
+      border-top: 5px dotted rgba(255, 0, 0, 0);
+      border-bottom: 5px dotted rgba(255, 0, 0, 0);
+    }
+  }
+
+  // Fallback
+  // IE8 doesn't support rgba and only supports the single colon syntax for :before
+  // IE7 doesn't support pseudo-elements, let's fallback to an image instead.
+  // Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
+  @include ie-lte(8) {
+   background: file-url("icon-arrow-left.png") no-repeat 0 4px;
+  }
+
+}
+
+// Code styles
+.code {
+  color: black;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+
+  color: $black;
+  background-color: $highlight-colour;
+  border: 1px solid $border-colour;
+  padding: 4px 4px 2px 4px;
+}
+
+// Horizontal rule style
+hr {
+  display: block;
+  background: $border-colour;
+  border: 0;
+  height: 1px;
+  margin-top: $gutter;
+  margin-bottom: $gutter;
+  padding: 0;
+  @include ie-lte(7) {
+    color: $border-colour;
+  }
+}

assets/stylesheets/govuk_elements/elements/_forms.scss

@@ -0,0 +1,225 @@
+// Forms
+// ==========================================================================
+
+// Contents:
+//
+// 1. Helpers
+// 2. Form wrappers
+// 3. Form labels
+// 4. Form hints
+// 5. Form controls
+// 6. Form control widths
+
+// 1. Helpers
+// ==========================================================================
+
+// Fieldset is used to group more than one .form-group
+fieldset {
+  @extend %contain-floats;
+  width: 100%;
+}
+
+// Fix left hand gap in IE7 and below
+@include ie-lte(7) {
+  legend {
+    margin-left: -7px;
+  }
+}
+
+// Remove margin under textarea in Chrome and FF
+textarea{
+  display: block;
+}
+
+
+// 2. Form wrappers
+// ==========================================================================
+
+// Form group is used to wrap label and input pairs
+.form-group {
+  @extend %contain-floats;
+  @include box-sizing(border-box);
+
+  float: left;
+  width: 100%;
+
+  margin-bottom: $gutter-half;
+
+  @include media(tablet) {
+    margin-bottom: $gutter;
+  }
+}
+
+// Form group related is used to reduce the space between label and input pairs
+.form-group-related {
+  margin-bottom: 10px;
+
+  @include media(tablet) {
+    margin-bottom: 20px;
+  }
+}
+
+// Form group compound is used to reduce the space between label and input pairs
+.form-group-compound {
+  margin-bottom: 10px;
+}
+
+
+// 3. Form labels
+// ==========================================================================
+
+// Form labels, or for legends styled to look like labels
+// TODO: Amend so there is only one label style
+.form-label,
+.form-label-bold {
+  display: block;
+  color: $text-colour;
+}
+
+.form-label {
+  @include core-19;
+}
+
+.form-label-bold {
+  @include bold-19;
+}
+
+// Add spacing under spans within labels
+legend {
+  .form-label,
+  .form-label-bold {
+    padding-bottom: 7px;
+  }
+}
+
+// Remove spacing when error messages are shown
+// TODO: Move into /forms/_form-validation.scss
+.error legend {
+  .form-label,
+  .form-label-bold {
+    padding-bottom: 0;
+  }
+}
+
+// Used for the 'or' in between block label options
+.form-block {
+  @extend %contain-floats;
+  float: left;
+  width: 100%;
+
+  margin-top: -5px;
+  margin-bottom: 5px;
+
+  @include media(tablet) {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+}
+
+// 4. Form hints
+// ==========================================================================
+
+// Form hints and example text are light grey and sit above a form control
+.form-hint {
+  @include core-19;
+  display: block;
+  color: $secondary-text-colour;
+  font-weight: normal;
+  margin-bottom: 5px;
+}
+
+
+// 5. Form controls
+// ==========================================================================
+
+// By default, form controls are 50% width for desktop,
+// and 100% width for mobile
+.form-control {
+  @include box-sizing(border-box);
+  @include core-19;
+  width: 100%;
+
+  padding: 4px;
+  background-color: $white;
+  border: 2px solid $grey-1;
+
+  // TODO: Remove 50% width set for tablet and up
+  // !! BREAKING CHANGE !!
+  @include media(tablet) {
+    width: 50%;
+  }
+
+}
+
+// Radio buttons
+.form-radio {
+  display: block;
+  margin: 10px 0;
+
+  input {
+    vertical-align: middle;
+    margin: -4px 5px 0 0;
+  }
+}
+
+// Checkboxes
+.form-checkbox {
+  display: block;
+  margin: $gutter-half 0;
+
+  input {
+    vertical-align: middle;
+    margin: -2px 5px 0 0;
+  }
+}
+
+
+// 6. Form control widths
+// ==========================================================================
+
+// TODO: Update these
+// Form control widths
+
+.form-control-3-4 {
+  width: 100%;
+
+  @include media(tablet) {
+    width: 75%;
+  }
+}
+
+.form-control-2-3 {
+  width: 100%;
+  @include media(tablet) {
+    width: 66.66%;
+  }
+}
+
+.form-control-1-2 {
+  width: 100%;
+
+  @include media(tablet) {
+    width: 50%;
+  }
+}
+
+.form-control-1-3 {
+  width: 100%;
+  @include media(tablet) {
+    width: 33.33%;
+  }
+}
+
+.form-control-1-4 {
+  width: 100%;
+  @include media(tablet) {
+    width: 25%;
+  }
+}
+
+.form-control-1-8 {
+  width: 100%;
+  @include media(tablet) {
+    width: 12.5%;
+  }
+}

assets/stylesheets/govuk_elements/elements/_helpers.scss

@@ -0,0 +1,44 @@
+// Helpers
+// ==========================================================================
+
+// Path to assets for use with file-url() is not already defined
+@if ($path == false) {
+  $path: "/public/images/";
+}
+
+// Return ems from a pixel value
+// This assumes a base of 19px
+@function em($px, $base: 19) {
+  @return ($px / $base) + em;
+}
+
+// Want to see how the grid works?
+// add this class to the body to see how grid padding is set
+.example-highlight-grid {
+  .grid-row {
+    background: $grey-2;
+  }
+
+  .column-highlight {
+    background: $grey-3;
+    width: 100%;
+  }
+
+}
+
+// Hide, but not for screenreaders
+.visuallyhidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
+// Hide, only when JavaScript is enabled
+.js-enabled .js-hidden {
+  display: none;
+}

assets/stylesheets/govuk_elements/elements/_icons.scss

@@ -0,0 +1,244 @@
+// GOV.UK icons
+
+.icon {
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.icon-calendar {
+  width: 27px;
+  height: 27px;
+  background-image: file-url("icons/icon-calendar.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-calendar-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-download {
+  width: 30px;
+  height: 39px;
+  background-image: file-url("icons/icon-file-download.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-file-download-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-important {
+  width: 34px;
+  height: 34px;
+  background-image: file-url("icons/icon-important.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-important-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-information {
+  width: 27px;
+  height: 27px;
+  background-image: file-url("icons/icon-information.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-information-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-locator {
+  width: 26px;
+  height: 36px;
+  background-image: file-url("icons/icon-locator.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-locator-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-search {
+  width: 30px;
+  height: 22px;
+  background-color: $black;
+  background-image: file-url("icons/icon-search.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-search-2x.png");
+    background-size: 100%;
+  }
+}
+
+// GOV.UK arrow icons
+.icon-pointer {
+  width: 30px;
+  height: 19px;
+  background-color: $black;
+  background-image: file-url("icons/icon-pointer.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-pointer-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-pointer-black {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-pointer-black.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-pointer-black-2x.png");
+    background-size: 100%;
+  }
+}
+
+// GOV.UK external link icons
+// TODO (Are these provided by the template?)
+
+// GOV.UK step icons
+.icon-step-1 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-1.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-1-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-2 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-2.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-2-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-3 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-3.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-3-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-4 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-4.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-4-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-5 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-5.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-5-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-6 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-6.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-6-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-7 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-7.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-7-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-8 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-8.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-8-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-9 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-9.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-9-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-10 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-10.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-10-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-11 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-11.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-11-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-12 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-12.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-12-2x.png");
+    background-size: 100%;
+  }
+}
+
+.icon-step-13 {
+  width: 23px;
+  height: 23px;
+  background-image: file-url("icons/icon-steps/icon-step-13.png");
+
+  @include device-pixel-ratio() {
+    background-image: file-url("icons/icon-steps/icon-step-13-2x.png");
+    background-size: 100%;
+  }
+}

assets/stylesheets/govuk_elements/elements/_layout.scss

@@ -0,0 +1,63 @@
+// Layout
+// ==========================================================================
+
+// Content
+// ==========================================================================
+
+// Content wraps the entire site content block
+#content {
+  @extend %site-width-container;
+  @extend %contain-floats;
+  padding-bottom: $gutter;
+
+  @include media(desktop) {
+    padding-bottom: $gutter*3;
+  }
+}
+
+
+// Phase banner
+// ==========================================================================
+
+.phase-banner {
+  @include phase-banner(alpha);
+}
+
+
+// Grid layout
+// ==========================================================================
+
+// Usage:
+// For two equal columns
+
+// <div class="grid-row">
+//   <div class="column-half">
+//
+//   </div>
+//   <div class="column-half">
+//
+//   </div>
+// </div>
+
+// Use .grid-row to define a row for grid columns to sit in
+.grid-row {
+  @extend %grid-row;
+}
+
+// Use .grid-column to create a grid column with 15px gutter
+// By default grid columns break to become full width at tablet size
+.column-quarter {
+  @include grid-column(1/4);
+}
+
+.column-half {
+  @include grid-column(1/2);
+}
+
+.column-third {
+  @include grid-column(1/3);
+}
+
+.column-two-thirds {
+  @include grid-column(2/3);
+}

assets/stylesheets/govuk_elements/elements/_lists.scss

@@ -0,0 +1,36 @@
+// Lists
+// ==========================================================================
+
+ul,
+ol {
+  list-style-type: none;
+  padding: 0;
+}
+
+// Bulleted lists
+.list-bullet {
+  list-style-type: disc;
+  padding-left: 20px;
+}
+
+// Numbered lists
+.list-number {
+  list-style-type: decimal;
+  padding-left: 20px;
+  
+  @include ie-lte(7) {
+    padding-left: 28px;
+  }
+}
+
+.list-bullet,
+.list-number {
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
+
+.list-bullet li,
+.list-number li {
+  margin-bottom: 5px;
+}
+

assets/stylesheets/govuk_elements/elements/_panels.scss

@@ -0,0 +1,31 @@
+// Panels
+// ==========================================================================
+
+// Indented panels with a grey left hand border
+.panel-indent {
+  @extend %contain-floats;
+  clear: both;
+  border-left: 5px solid $border-colour;
+
+  padding: em(15,19);
+  margin-bottom: em(15,19);
+
+  :first-child {
+    margin-top: 0;
+  }
+
+  :only-child,
+  :last-child {
+    margin-bottom: 0;
+  }
+
+}
+
+.panel-indent-info {
+  border-left-width: 10px;
+}
+
+// Indented panels within form groups
+.form-group .panel-indent {
+  padding-bottom: 0;
+}

assets/stylesheets/govuk_elements/elements/_reset.scss

@@ -0,0 +1,33 @@
+// Reset
+// ==========================================================================
+// flatten all browser defaults and styles inherited from gov.uk template
+
+/* Borrowed from http://meyerweb.com/eric/tools/css/reset/ */
+div, span,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+input, textarea,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-weight: normal;
+}

assets/stylesheets/govuk_elements/elements/_tables.scss

@@ -0,0 +1,32 @@
+// Tables
+// ==========================================================================
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+
+  th,
+  td {
+    @include core-16;
+    padding: em(12, 16) em(20, 16) em(9, 16) 0;
+
+    text-align: left;
+    color: $black;
+    border-bottom: 1px solid $border-colour;
+  }
+
+  th {
+    font-weight: 700;
+    // Right align headings for numeric content
+    &.numeric {
+      text-align: right;
+    }
+  }
+
+  // Use tabular numbers for numeric table cells
+  td.numeric {
+    @include core-16($tabular-numbers: true);
+    text-align: right;
+  }
+}

assets/stylesheets/govuk_elements/elements/forms/_form-block-labels.scss

@@ -0,0 +1,70 @@
+// Large hit area
+// Radio buttons & checkboxes
+
+// By default, block labels stack vertically
+.block-label {
+
+  display: block;
+  float: none;
+  clear: left;
+  position: relative;
+
+  background: $panel-colour;
+  border: 1px solid $panel-colour;
+  padding: (18px $gutter $gutter-half $gutter*1.8);
+
+  margin-bottom: 10px;
+  cursor: pointer; // Encourage clicking on block labels
+
+  @include media(tablet) {
+    float: left;
+    // width: 25%; - Test : check that text within labels will wrap
+  }
+
+  // Absolutely position inputs within label, to allow text to wrap
+  input {
+    position: absolute;
+    top: 15px;
+    left: $gutter-half;
+    cursor: pointer;
+    margin: 0;
+    width: 29px;
+    height: 29px;
+    @include ie(8) {
+      top: 12px;
+    }
+  }
+
+  // Change border on hover
+  &:hover {
+    border-color: $black;
+  }
+}
+
+.block-label:last-child {
+  margin-bottom: 0;
+}
+
+// To stack horizontally, use .inline on parent, to sit block labels next to each other
+.inline .block-label {
+  clear: none;
+  margin-right: 10px;
+}
+
+// Selected and focused states
+
+// Add selected state
+.js-enabled label.selected {
+  background: $white;
+  border-color: $black;
+}
+
+// Add focus to block labels
+.js-enabled label.focused {
+  outline: 3px solid $focus-colour;
+}
+
+// Remove focus from radio/checkboxes
+.js-enabled .focused input:focus {
+  outline: none;
+}

assets/stylesheets/govuk_elements/elements/forms/_form-date.scss

@@ -0,0 +1,38 @@
+// Date pattern
+
+// Hide the 'spinner' for webkit
+// and also for Firefox
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.form-date {
+
+  .form-group {
+    float: left;
+    width: 50px;
+
+    margin-right: 20px;
+    margin-bottom: 0;
+    clear: none;
+
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    input {
+      width: 100%;
+    }
+  }
+
+  .form-group-year {
+    width: 70px;
+  }
+}

assets/stylesheets/govuk_elements/elements/forms/_form-validation.scss

@@ -0,0 +1,104 @@
+// Form validation
+// ==========================================================================
+
+// Using the classname .error as it's shorter than .validation and easier to type!
+.error {
+
+  // Ensure the .error class is applied to .form-group, otherwide box-sizing(border-box) will need to be used
+  // @include box-sizing(border-box);
+  margin-right: 15px;
+
+  // Error messages should be red and bold
+  .error-message {
+    color: $error-colour;
+    font-weight: bold;
+  }
+
+  // Form inputs should have a red border
+  .form-control {
+    border: 4px solid $error-colour;
+  }
+
+  .form-hint {
+    margin-bottom: 0;
+  }
+
+}
+
+.error,
+.error-summary {
+
+  // Add a red border to the left of the field
+  border-left: 4px solid $error-colour;
+  padding-left: 10px;
+
+  @include media(tablet) {
+    border-left: 5px solid $error-colour;
+    padding-left: $gutter-half;
+  }
+}
+
+.error-message {
+  @include core-19;
+
+  display: block;
+  clear: both;
+
+  margin: 0;
+  padding: 5px 0 7px 0;
+}
+
+// Summary of multiple error messages
+.error-summary {
+
+  // Error summary has a border on all sides
+  border: 4px solid $error-colour;
+
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+
+  padding: $gutter-half 10px;
+
+  @include media(tablet) {
+    border: 5px solid $error-colour;
+
+    margin-top: $gutter;
+    margin-bottom: $gutter;
+
+    padding: 20px $gutter-half $gutter-half $gutter-half;
+  }
+
+  @include ie-lte(6) {
+    zoom: 1;
+  }
+
+  // Use the GOV.UK outline focus style
+  &:focus {
+    outline: 3px solid $focus-colour;
+  }
+
+  .error-summary-heading {
+    margin-top: 0;
+  }
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  .error-summary-list {
+    padding-left: 0;
+
+    li {
+
+      @include media(tablet) {
+        margin-bottom: 5px;
+      }
+    }
+
+    a {
+      color: $error-colour;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+}

assets/stylesheets/govuk_elements/main-ie6.scss

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

assets/stylesheets/govuk_elements/main-ie7.scss

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

assets/stylesheets/govuk_elements/main-ie8.scss

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

assets/stylesheets/govuk_elements/main.scss

@@ -0,0 +1,28 @@
+// GOV.UK front end toolkit
+// Sass mixins and variables
+// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
+
+
+@import "../../govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
+@import "../../govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
+
+// GOV.UK elements
+@import "elements/helpers";
+@import "elements/reset";
+@import "elements/elements-typography";
+@import "elements/layout";
+
+@import "elements/forms";
+@import "elements/forms/form-block-labels";
+@import "elements/forms/form-date";
+@import "elements/forms/form-validation";
+
+@import "elements/tables";
+@import "elements/lists";
+@import "elements/details";
+@import "elements/panels";
+@import "elements/buttons";
+@import "elements/icons";
+
+@import "elements/components";
+@import "elements/breadcrumb";

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_colours.scss

@@ -0,0 +1,112 @@
+// Colours for the site, as per:
+// http://alphagov.github.com/design/gov.uk.colours/
+
+// Departmental colours
+$attorney-generals-office: #9f1888;
+$cabinet-office: #005abb;
+$civil-service: #af292e;
+$department-for-business-innovation-skills: #003479;
+$department-for-communities-and-local-government: #00857e;
+$department-for-culture-media-sport: #d40072;
+$department-for-education: #003a69;
+$department-for-environment-food-rural-affairs: #898700;
+$department-for-international-development: #002878;
+$department-for-transport: #006c56;
+$department-for-work-pensions: #00beb7;
+$department-of-energy-climate-change: #009ddb;
+$department-of-health: #00ad93;
+$foreign-commonwealth-office: #003e74;
+$government-equalities-office: #9325b2;
+$hm-government: #0076c0;
+$hm-revenue-customs: #009390;
+$hm-treasury: #af292e;
+$home-office: #9325b2;
+$ministry-of-defence: #4d2942;
+$ministry-of-justice: #231f20;
+$northern-ireland-office: #002663;
+$office-of-the-advocate-general-for-scotland: #002663;
+$office-of-the-leader-of-the-house-of-lords: #9c132e;
+$scotland-office: #002663;
+// Note: the 'the' part here will get dropped
+$the-office-of-the-leader-of-the-house-of-commons: #317023;
+$uk-export-finance: #005747;
+$uk-trade-investment: #C80651;
+$wales-office: #a33038;
+
+// Brand colours
+$govuk-blue: #005ea5;
+$mainstream-brand: $govuk-blue;
+
+// Standard palette, colours
+$purple: #2e358b;
+$purple-50: #9799c4;
+$purple-25: #d5d6e7;
+$mauve: #6f72af;
+$mauve-50: #b7b9d7;
+$mauve-25: #e2e2ef;
+$fuschia: #912b88;
+$fuschia-50: #c994c3;
+$fuschia-25: #e9d4e6;
+$pink: #d53880;
+$pink-50: #eb9bbe;
+$pink-25: #f6d7e5;
+$baby-pink: #f499be;
+$baby-pink-50: #faccdf;
+$baby-pink-25: #fdebf2;
+$red: #b10e1e;
+$red-50: #d9888c;
+$red-25: #efcfd1;
+$mellow-red: #df3034;
+$mellow-red-50: #ef9998;
+$mellow-red-25: #f9d6d6;
+$orange: #f47738;
+$orange-50: #fabb96;
+$orange-25: #fde4d4;
+$brown: #b58840;
+$brown-50: #dac39c;
+$brown-25: #f0e7d7;
+$yellow: #ffbf47;
+$yellow-50: #ffdf94;
+$yellow-25: #fff2d3;
+$grass-green: #85994b;
+$grass-green-50: #c2cca3;
+$grass-green-25: #e7ebda;
+$green: #006435;
+$green-50: #7fb299;
+$green-25: #cce0d6;
+$turquoise: #28a197;
+$turquoise-50: #95d0cb;
+$turquoise-25: #d5ecea;
+$light-blue: #2b8cc4;
+$light-blue-50: #96c6e2;
+$light-blue-25: #d5e8f3;
+
+// Standard palette, greys
+$black: #0b0c0c;
+$grey-1: #6f777b;
+$grey-2: #bfc1c3;
+$grey-3: #dee0e2;
+$grey-4: #f8f8f8;
+$white: #fff;
+
+// Semantic colour names
+$link-colour: $govuk-blue;
+$link-active-colour: #2e8aca;
+$link-hover-colour: #2e8aca;
+$link-visited-colour: #4c2c92;
+$button-colour: #00823b;
+$focus-colour: $yellow;
+$text-colour: $black;             // Standard text colour
+$secondary-text-colour: $grey-1;  // Section headers, help text etc.
+$border-colour: $grey-2;          // Borders, seperators, rules, keylines etc.
+$panel-colour: $grey-3;           // Related links panel, page footer etc.
+$canvas-colour: $grey-4;          // Page background
+$highlight-colour: $grey-4;       // Table stripes etc.
+$page-colour: $white;             // The page
+$discovery-colour: $fuschia;      // Discovery badges and banners
+$alpha-colour: $pink;             // Alpha badges and banners
+$beta-colour: $orange;            // Beta badges and banners
+$live-colour: $grass-green;       // Live badges and banners
+$banner-text-colour: #000;        // Text colour for Alpha & Beta banners
+$error-colour: $red;              // Error text and border colour
+$error-background: #fef7f7;       // Error background colour

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_conditionals.scss

@@ -0,0 +1,85 @@
+// Media query helpers. These make producing IE layouts
+// super easy.
+
+// The base css you write should be for mobile. You can
+// then add desktop styles on top.
+//
+// Usage:
+//
+//   div.columns {
+//     border: 1px solid;
+//
+//     @include media(desktop){
+//       width: 30%;
+//       float: left;
+//     }
+//     @include ie-lte(8) {
+//       something to fix visual bugs in old IE
+//     }
+//     @include ie(6) {
+//       padding: 0;
+//     }
+//   }
+
+
+$is-ie: false !default;
+$mobile-ie6: true !default;
+
+@-ms-viewport {
+  width: device-width;
+}
+
+@-o-viewport {
+  width: device-width;
+}
+
+@mixin media($size: false, $max-width: false, $min-width: false, $ignore-for-ie: false) {
+  @if $is-ie and ($ignore-for-ie == false) {
+    @if $size != mobile {
+      @if ($ie-version == 6 and $mobile-ie6 == false) or $ie-version > 6 {
+        @content;
+      }
+    }
+  } @else {
+    @if $size == desktop {
+      @media (min-width: 769px){
+        @content;
+      }
+    } @else if $size == tablet {
+      @media (min-width: 641px){
+        @content;
+      }
+    } @else if $size == mobile {
+      @media (max-width: 640px){
+        @content;
+      }
+    } @else if $max-width != false {
+      @media (max-width: $max-width){
+        @content;
+      }
+    } @else if $min-width != false {
+      @media (min-width: $min-width){
+        @content;
+      }
+    } @else {
+      @media (min-width: $size){
+        @content
+      }
+    }
+  }
+}
+
+@mixin ie-lte($version) {
+  @if $is-ie {
+    @if $ie-version <= $version {
+      @content;
+    }
+  }
+}
+@mixin ie($version) {
+  @if $is-ie {
+    @if $ie-version == $version {
+      @content;
+    }
+  }
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_css3.scss

@@ -0,0 +1,86 @@
+// CSS 3 mixins
+
+// This file includes mixins for CSS properties that require vendor prefixes.
+
+// Please add more mixins here as you need them, rather than adding them to
+// your application - this lets us manage them in one place.
+
+// You can use the @warn directive to deprecate a mixin where the property
+// no longer needs prefixes.
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius; // Chrome 4.0, Safari 3.1 to 4.0, Mobile Safari 3.2, Android Browser 2.1
+     -moz-border-radius: $radius; // Firefox 2.0 to 3.6
+          border-radius: $radius;
+}
+
+@mixin box-shadow($shadow) {
+  -webkit-box-shadow: $shadow; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0
+     -moz-box-shadow: $shadow; // Firefox 3.5 to 3.6
+          box-shadow: $shadow;
+}
+
+@mixin scale($x, $y, $transform-origin: 50% 50% 0) {
+  // $x and $y should be numeric values without units
+  -webkit-transform: scale($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1
+     -moz-transform: scale($x, $y); // Firefox 3.5 to 15.0
+      -ms-transform: scale($x, $y); // IE9 only
+          transform: scale($x, $y);
+
+  -webkit-transform-origin: $transform-origin; // Chrome, Safari 3.1
+     -moz-transform-origin: $transform-origin; // Firefox 10 to 15.0
+      -ms-transform-origin: $transform-origin; // IE9
+          transform-origin: $transform-origin;
+}
+
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y); // Still in use now, started at: Chrome 4.0, Safari 3.1, Mobile Safari 3.2, Android 2.1
+     -moz-transform: translate($x, $y); // Firefox 3.5 to 15.0
+      -ms-transform: translate($x, $y); // IE9 only
+       -o-transform: translate($x, $y); // Opera 10.5 to 12.0
+          transform: translate($x, $y);
+}
+
+@mixin gradient($from, $to) {
+  // Creates a vertical gradient where $from is the colour at the top of the element
+  // and $to is the colour at the bottom. The top colour is used as a background-color
+  // for browsers that don't support gradients.
+  background-color: $from;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); // Safari 4.0 to 5.1, Chrome 1.0 to 10.0, old deprecated syntax
+  background-image: -webkit-linear-gradient($from, $to); // Chrome 10.0 to 25.0, Safari 5.1 to 6.0, Mobile Safari 5.0 to 6.1, Android Browser 4.0 to 4.3
+  background-image:    -moz-linear-gradient($from, $to); // Firefox 3.6 to 15.0
+  background-image:      -o-linear-gradient($from, $to); // Opera 11.1 to 12.0
+  background-image:         linear-gradient($from, $to);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}',GradientType=0 ); // IE6 to IE9
+}
+
+@mixin transition($property, $duration, $function, $delay: 0s) {
+  -webkit-transition: ($property $duration $function $delay); // Chrome 4.0 to 25.0, Safari 3.1 to 6.0, Mobile Safari 3.2 to 6.1, Android Browser 2.1 to 4.3
+     -moz-transition: ($property $duration $function $delay); // Firefox 4.0 to 15.0
+       -o-transition: ($property $duration $function $delay); // Opera 10.5 to 12.0
+          transition: ($property $duration $function $delay);
+}
+
+@mixin box-sizing($type) {
+  // http://www.w3.org/TR/css3-ui/#box-sizing
+  // $type can be one of: content-box | padding-box | border-box | inherit
+  -webkit-box-sizing: $type; // Chrome 4.0 to 9.0, Safari 3.1 to 5.0, Mobile Safari 3.2 to 4.3, Android Browser 2.1 to 3.0
+     -moz-box-sizing: $type; // Firefox 2.0 to 28.0, Firefox for Android 26.0 onwards
+          box-sizing: $type;
+}
+
+@mixin appearance($appearance) {
+  -webkit-appearance: $appearance;
+     -moz-appearance: $appearance;
+}
+
+@mixin calc($property, $calc) {
+  #{$property}: -webkit-calc(#{$calc}); // Chrome 19.0 to 25.0, Safari 6.0, Mobile Safari 6.0 to 6.1
+  #{$property}:         calc(#{$calc});
+}
+
+@mixin opacity($trans) {
+  zoom: 1;
+  filter: unquote('alpha(opacity=' + ($trans * 100) + ')'); // IE6 to IE8
+  opacity: $trans;
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_device-pixels.scss

@@ -0,0 +1,11 @@
+@mixin device-pixel-ratio($ratio: 2) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (  -o-min-device-pixel-ratio: #{($ratio*10)}/10),
+  only screen and (     min-device-pixel-ratio: $ratio),
+  only screen and (             min-resolution: #{($ratio*96)}dpi),
+  only screen and (             min-resolution: #{$ratio}dppx) { 
+    @content;
+  }
+}
+

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_font_stack.scss

@@ -0,0 +1,44 @@
+//  GOV.UK font stacks, referred to in typography.scss
+
+
+//  Font stack weirdness
+//
+//  To ensure embedded fonts fall back to appropriate
+//  system fonts (eg, bold embedded font falls back to
+//  bold system font, without anyone getting horrible
+//  artificially emboldened weights) we're setting
+//  the font-stack in a font-face declaration rather
+//  than with the usual font-family.
+
+// New Transport Light
+
+$NTA-Light:
+  "nta", 
+  Arial,
+  sans-serif;
+
+// New Transport Light with Tabular
+
+$NTA-Light-Tabular:
+  "ntatabularnumbers",
+  "nta", 
+  Arial,
+  sans-serif;
+
+// Helvetica Regular
+
+@font-face {
+  font-family: GDS-Logo;
+  src: local("HelveticaNeue"),
+       local("Helvetica Neue"),
+       local("Arial"),
+       local("Helvetica");
+}
+
+$Helvetica-Regular:
+  "GDS-Logo",
+  sans-serif;
+
+// Font reset for print
+
+$Print-reset: sans-serif;

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_grid_layout.scss

@@ -0,0 +1,128 @@
+@import '_conditionals.scss';
+@import '_css3.scss';
+@import '_measurements.scss';
+@import '_shims.scss';
+
+$site-width: 960px;
+
+// An extendable selector to wrap your entire site content block
+// It limits the sites width to be 960px wide and maintains consistent margins
+// on the site of the page and shrinks the margins for mobile.
+//
+// Usage:
+//
+// #page-container {
+//   @extend %site-width-container;
+// }
+
+%site-width-container {
+  max-width: $site-width;
+  @include ie-lte(8){
+    width: $site-width;
+  }
+
+  margin: 0 $gutter-half;
+  @include media(tablet){
+    margin: 0 $gutter;
+  }
+  @include media($min-width: ($site-width + $gutter * 2)){
+    margin: 0 auto;
+  }
+}
+
+// An extendable selector to outdent to the full page-width
+// So that you can create elements that take up the gutters on the side of the
+// page and butt up to the edge of the browser on smaller screens (rather than
+// leaving a gutter at the edge of the page).
+//
+// Usage:
+//
+// .hero-image-container {
+//   @extend %outdent-to-full-width;
+// }
+%outdent-to-full-width {
+  margin-left: -$gutter-half;
+  margin-right: -$gutter-half;
+  @include media(tablet){
+    margin-left: -$gutter;
+    margin-right: -$gutter;
+  }
+}
+
+// An extendable selector to define a row for grid columns to sit in
+//
+// Usage:
+//
+// .grid-row {
+//   @extend %grid-row;
+// }
+
+%grid-row {
+  @extend %contain-floats;
+  margin: 0 (-$gutter-half);
+}
+
+// A mixin for a grid column
+// Creates a cross browser grid column with a standardised gutter between the
+// columns. Widths should be defined as fractions of the full desktop width
+// they want to fill. By default they break to become full width at tablet size
+// but that can be configured to be desktop using the `$full-width` argument.
+//
+// Usage:
+//
+//   .column-quarter {
+//     @include grid-column( 1/4 );
+//   }
+//   .column-half {
+//     @include grid-column( 1/2 );
+//   }
+//   .column-third {
+//     @include grid-column( 1/3 );
+//   }
+//   .column-two-thirds {
+//     @include grid-column( 2/3 );
+//   }
+//   .column-desktop-third {
+//     @include grid-column( 1/3, $full-width: desktop );
+//   }
+
+@mixin grid-column($width, $full-width: tablet, $float: left) {
+  @include media($full-width){
+    float: $float;
+    width: percentage($width);
+  }
+  @include ie-lte(7){
+    width: (($site-width + $gutter) * $width) - $gutter;
+  }
+
+  padding: 0 $gutter-half;
+  @include box-sizing(border-box);
+}
+
+
+// OLD deprecated grid mixins
+// You should migrate to the mixins above in the future
+
+// Outer block sets a max width
+@mixin outer-block {
+  @warn "The @mixin outer-block is deprecated and should be updated to use new grid helpers";
+  margin: 0 auto;
+  width: auto;
+  max-width: 960 + $gutter*2;
+  @extend %contain-floats;
+  @include ie-lte(8) {
+    width: 1020px;
+  }
+}
+
+// Inner block sets either margin or padding
+// to align content with header and footer
+@mixin inner-block($margin-or-padding: padding) {
+  @warn "The @mixin inner-block is deprecated and should be updated to use new grid helpers";
+  #{$margin-or-padding}-left: $gutter-half;
+  #{$margin-or-padding}-right: $gutter-half;
+  @include media(tablet) {
+    #{$margin-or-padding}-left: $gutter;
+    #{$margin-or-padding}-right: $gutter;
+  }
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_helpers.scss

@@ -0,0 +1,16 @@
+// Base font size in pixels
+$base-font-size: 16;
+
+// Convert pixels to em
+@function pem($px, $base: $base-font-size) {
+
+  @if (unitless($px)) {
+    $px: $px * 1px;
+  }
+
+  @if (unitless($base)) {
+    $base: $base * 1px;
+  }
+
+  @return $px / $base * 1em;
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_measurements.scss

@@ -0,0 +1,14 @@
+// Measurements used across GOV.UK
+
+$full-width: 100%;
+$one-quarter: $full-width/4;
+$one-third: $full-width/3;
+$half: $full-width/2;
+$two-thirds: ($full-width)-($one-third);
+$three-quarters: ($full-width)-($one-quarter);
+
+$gutter: 30px;
+$gutter-one-quarter: $gutter/4;
+$gutter-one-third: $gutter/3;
+$gutter-half: $gutter/2;
+$gutter-two-thirds: $gutter - $gutter-one-third;

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_shims.scss

@@ -0,0 +1,54 @@
+// Cross-browser shims
+// Ways of normalising properties across browsers.
+
+@import "_conditionals";
+
+// From: https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
+
+// Usage:
+//
+// @include inline-block
+// or
+// @include inline-block("250px")
+//
+// which gives a min-height to the inline-block elements.
+
+
+@mixin inline-block($min-height: "") {
+  display: -moz-inline-stack;
+  display: inline-block;
+
+  @if $min-height != "" {
+    min-height: $min-height;
+  }
+
+  @include ie-lte(7) {
+    zoom: 1;
+    display: inline;
+  }
+
+  @include ie(6) {
+    @if $min-height != "" {
+      height: $min-height;
+    }
+  }
+}
+
+
+// Contain floats usage:
+//
+// .this-has-floated-children {
+//  @extend %contain-floats;
+// }
+
+
+%contain-floats {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+  @include ie-lte(7) {
+    zoom: 1;
+  }
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_typography.scss

@@ -0,0 +1,311 @@
+@import '_font_stack.scss';
+@import '_conditionals.scss';
+@import '_device-pixels.scss';
+@import '_url-helpers.scss';
+
+//  GOV.UK typography palettes
+
+//  ANATOMY OF A TYPE STYLE
+//  -----------------------
+//  These are a collection of graphic styles. They are deliberately
+//  abstracted from semantic HTML context to enable flexible re-use.
+//  Although there is a lot of duplication within this file, as long
+//  as you GZIP your CSS it shouldnt cause any bloat.
+
+
+// CORE FONTS - NEW TRANSPORT
+
+$is-print: false !default;
+
+@mixin _core-font-generator($font-size: 19px, $font-size-640: 16px, $font-size-print: 14pt, $line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
+  @if $tabular-numbers == true {
+    font-family: $NTA-Light-Tabular;
+  } @else if $is-print {
+    font-family: $Print-reset;
+  } @else {
+    font-family: $NTA-Light;
+  }
+  font-size: $font-size-640;
+  line-height: $line-height-640;
+  font-weight: $font-weight;
+  text-transform: none;
+  @include media(tablet) {
+    font-size: $font-size;
+    line-height: $line-height;
+  }
+  @if $is-print {
+    font-size: $font-size-print;
+  }
+}
+
+
+@mixin core-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 80px;
+  $font-size-640: 53px;
+  $font-size-print: 28pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 48px;
+  $font-size-640: 32px;
+  $font-size-print: 18pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 36px;
+  $font-size-640: 24px;
+  $font-size-print: 18pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 27px;
+  $font-size-640: 20px;
+  $font-size-print: 16pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 24px;
+  $font-size-640: 18px;
+  $font-size-print: 16pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 19px;
+  $font-size-640: 16px;
+  $font-size-print: 14pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 16px;
+  $font-size-640: 14px;
+  $font-size-print: 12pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin core-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false, $font-weight: 400) {
+  $font-size: 14px;
+  $font-size-640: 12px;
+  $font-size-print: 11pt;
+  @include _core-font-generator($font-size, $font-size-640, $font-size-print, $line-height, $line-height-640, $tabular-numbers, $font-weight);
+}
+
+@mixin bold-80($line-height: (80 / 80), $line-height-640: (55 / 53), $tabular-numbers: false) {
+  @include core-80($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-48($line-height: (50 / 48), $line-height-640: (35 / 32), $tabular-numbers: false) {
+  @include core-48($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-36($line-height: (40 / 36), $line-height-640: (25 / 24), $tabular-numbers: false) {
+  @include core-36($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-27($line-height: (30 / 27), $line-height-640: (20 / 18), $tabular-numbers: false) {
+  @include core-27($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-24($line-height: (30 / 24), $line-height-640: (24 / 20), $tabular-numbers: false) {
+  @include core-24($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-19($line-height: (25 / 19), $line-height-640: (20 / 16), $tabular-numbers: false) {
+  @include core-19($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-16($line-height: (20 / 16), $line-height-640: (16 / 14), $tabular-numbers: false) {
+  @include core-16($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin bold-14($line-height: (20 / 14), $line-height-640: (15 / 12), $tabular-numbers: false) {
+  @include core-14($line-height, $line-height-640, $tabular-numbers: $tabular-numbers, $font-weight: 700);
+}
+
+@mixin heading-80($tabular-numbers: false) {
+  @include core-80($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet){
+    padding-top: 6px;
+    padding-bottom: 14px;
+  }
+}
+
+@mixin heading-48($tabular-numbers: false) {
+  @include core-48($tabular-numbers: $tabular-numbers);
+
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  @include media(tablet){
+    padding-top: 7px;
+    padding-bottom: 13px;
+  }
+}
+
+@mixin heading-36($tabular-numbers: false) {
+  @include core-36($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet){
+    padding-top: 6px;
+    padding-bottom: 9px;
+  }
+}
+
+@mixin heading-27($tabular-numbers: false) {
+  @include core-27($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet){
+    padding-top: 4px;
+    padding-bottom: 6px;
+  }
+}
+
+@mixin heading-24($tabular-numbers: false) {
+  @include core-24($tabular-numbers: $tabular-numbers);
+
+  padding-top: 9px;
+  padding-bottom: 6px;
+
+  @include media(tablet){
+    padding-top: 6px;
+    padding-bottom: 4px;
+  }
+}
+
+@mixin copy-19($tabular-numbers: false) {
+  @include core-19($tabular-numbers: $tabular-numbers);
+
+  padding-top: 2px;
+  padding-bottom: 8px;
+
+  @include media(tablet){
+    padding-top: 0;
+    padding-bottom: 5px;
+  }
+}
+
+@mixin copy-16($tabular-numbers: false) {
+  @include core-16($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet){
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+
+@mixin copy-14($tabular-numbers: false) {
+  @include core-14($tabular-numbers: $tabular-numbers);
+
+  padding-top: 8px;
+  padding-bottom: 7px;
+
+  @include media(tablet){
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+
+// External link styles for all font sizes
+
+// Private mixin for use solely by those below
+
+@mixin external-link-size($content, $top, $top-hover: top) {
+  &:after {
+    content: $content;
+    background-position: right $top;
+  }
+
+  @if $top-hover == top {
+    $top-hover: $top;
+  }
+
+  &:hover:after {
+    background-position: right $top-hover;
+  }
+}
+
+@mixin external-link-12-no-hover {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0px);
+}
+
+@mixin external-link-12 {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0\A0\A0", $top: 0px, $top-hover: -388px);
+}
+
+@mixin external-link-13-no-hover {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px);
+}
+
+@mixin external-link-13 {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px, $top-hover: -387px);
+}
+
+@mixin external-link-14 {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 1px, $top-hover: -387px);
+}
+
+@mixin external-link-14-bold-no-hover {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 2px);
+}
+
+@mixin external-link-16 {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0", $top: 3px, $top-hover: -385px);
+}
+
+@mixin external-link-16-bold-no-hover {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 3px);
+}
+
+@mixin external-link-19-no-hover {
+  @include external-link-size($content: "\A0\A0\A0\A0", $top: 6px);
+}
+
+@mixin external-link-19 {
+  @include external-link-size($content: "\A0\A0\A0\A0", $top: 6px, $top-hover: -382px);
+}
+
+@mixin external-link-19-bold-no-hover {
+  @include external-link-size($content: "\A0\A0\A0\A0\A0\A0", $top: 6px);
+}
+
+@mixin external-link-default {
+  &:after {
+    background-image: file-url("external-links/external-link.png");
+    background-repeat: no-repeat;
+
+    @include device-pixel-ratio() {
+      background-image: file-url("external-links/external-link-24x24.png");
+      background-size: 12px 400px;
+    }
+  }
+}
+
+@mixin external-link-heading {
+  &:after {
+    background-image: file-url("external-links/external-link-black-12x12.png");
+    background-repeat: no-repeat;
+
+    @include device-pixel-ratio() {
+      background-image: file-url("external-links/external-link-black-24x24.png");
+      background-size: 12px 400px;
+    }
+  }
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/_url-helpers.scss

@@ -0,0 +1,16 @@
+// URL Helpers
+
+$path: false !default;
+
+// A function which can either output a image-url to be used with the Rails
+// Asset Pipeline or Compass or a plain url which is prefixed with a defined
+// path variable.
+@function file-url($file) {
+  $url: '';
+  @if $path {
+    $url: url($path+$file);
+  } @else {
+    $url: image-url($file);
+  }
+  @return $url;
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/design-patterns/_alpha-beta.scss

@@ -0,0 +1,72 @@
+@import "../_colours";
+@import "../_typography";
+@import "../_shims";
+@import "../_grid_layout";
+
+// Phase banner usage:
+//
+// .phase-banner {
+//    @include phase-banner($state: beta);
+// }
+
+@mixin phase-banner($state: alpha) {
+  padding: 10px 0 8px 0;
+  @include media(tablet) {
+    padding-bottom: 10px;
+  }
+  border-bottom: 1px solid $border-colour;
+
+  p {
+    margin: 0;
+    color: $banner-text-colour;
+    @include core-16;
+  }
+
+  .phase-tag {
+    @include phase-tag($state);
+  }
+
+  span {
+    vertical-align: top;
+
+    @include media(tablet) {
+      vertical-align: baseline;
+    }
+  }
+}
+
+// Phase tag usage:
+//
+// Alpha
+// .phase-tag {
+//    @include phase-tag;
+// }
+//
+// Beta
+// .phase-tag {
+//    @include phase-tag(beta);
+// }
+
+@mixin phase-tag($state: alpha) {
+  @include inline-block;
+  vertical-align: top;
+
+  @include media(tablet){
+    vertical-align: baseline;
+  }
+
+  margin: 0 8px 0 0;
+  padding: 2px 5px 0;
+
+  @include bold-16($line-height: 20/16);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-decoration: none;
+
+  color: #fff;
+  @if $state == alpha {
+    background-color: $alpha-colour;
+  } @else if $state == beta {
+    background-color: $beta-colour;
+  }
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/design-patterns/_buttons.scss

@@ -0,0 +1,142 @@
+@import '../_shims.scss';
+@import '../_css3.scss';
+@import '../_conditionals.scss';
+@import '../_colours.scss';
+
+// Mixin and defaults for making buttons on GOV.UK services.
+
+// For guidance, see: https://www.gov.uk/service-manual/design-and-content/resources/buttons.html
+
+// Example usage:
+
+// .button{
+//   @include button;
+// }
+// .button-secondary{
+//   @include button($grey-3);
+// }
+// .button-warning{
+//   @include button($red);
+// }
+
+
+@mixin button($colour: $button-colour){
+  // Colour
+  background-color: $colour;
+
+  // Size and shape
+  position: relative;
+  @include inline-block;
+  padding: 0.3em 0.6em 0.2em 0.6em;
+  border: none;
+  @include border-radius(0);
+  -webkit-appearance: none;
+
+  // Bottom edge effect
+  @include box-shadow(0 2px 0 darken($colour, 15%));
+  @include ie-lte(8) {
+    border-bottom: 2px solid darken($colour, 15%);
+  }
+
+  // Text
+  font-size: 1em; // inherit from parent
+  line-height: 1.25;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+
+  // Interaction
+  cursor: pointer;
+  &:visited{
+    background-color: $colour;
+  }
+  &:hover,
+  &:focus {
+    background-color: darken($colour, 5%);
+  }
+  &:active {
+    top: 2px;
+    @include box-shadow(0 0 0 $colour);
+  }
+
+  // Disabled button styles
+  &.disabled,
+  &[disabled="disabled"],
+  &[disabled] {
+    @include opacity(0.5);
+    &:hover{
+      cursor: default;
+      background-color: $colour;
+    }
+    &:active {
+      top: 0;
+      @include box-shadow(0 2px 0 darken($colour, 15%));
+      @include ie-lte(8) {
+        border-bottom: 2px solid darken($colour, 15%);
+      }
+    }
+  }
+
+  // Set text colour depending on background colour
+  @if lightness($colour) < 50% {
+    color: $white;
+    &:link,
+    &:hover,
+    &:focus,
+    &:visited{
+      color: $white;
+    }
+  } @else {
+    color: $text-colour;
+    &:link,
+    &:hover,
+    &:focus,
+    &:visited{
+      color: $text-colour;
+    }
+  }
+
+  // making the click target bigger than the button
+  // (and fill the space made when the button moves)
+  &:before {
+    content: "";
+    height: 110%;
+    width: 100%;
+    display: block;
+    background: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  &:active:before {
+    top: -10%;
+    height: 120%;
+
+    // IE6 ignores the :before psuedo-class but applies the block to :active
+    // It therefore needs to be reset
+    @include ie(6) {
+      top: auto;
+      height: 100%;
+    }
+  }
+
+  // Reset styles applied to external links
+  &[rel="external"]:after {
+    display: none;
+    content: none;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  // Fixes a bug where IE puts a black border around certain elements
+  @include ie-lte(8) {
+    &[type="submit"],
+    &[type="reset"],
+    &[type="button"] {
+      filter:chroma(color=#000000);
+    }
+
+    &[type=submit].button {
+      filter: none;
+    }
+  }
+}

assets/stylesheets/govuk_frontend_toolkit/stylesheets/design-patterns/_media-player.scss

@@ -0,0 +1,235 @@
+@import '../_colours';
+@import '../_url-helpers';
+
+// Player overrides
+
+@mixin media-player {
+  display: block;
+  overflow: hidden;
+  margin: 30px 0;
+
+  &.player-wide {
+    min-width: 580px;
+  }
+
+  span {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .video {
+    position: relative;
+    z-index: 3000;
+
+    iframe {
+      display: block;
+    }
+  }
+
+  .logo {
+    display: none;
+  }
+
+  .control-bar {
+    position: relative;
+    width: 100%;
+    height: 60px;
+    border-bottom: 1px solid $border-colour;
+
+    button {
+      background: transparent;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    button, a {
+      &:focus {
+        background-color: orange;
+        outline: none;
+      }
+    }
+
+    .player-controls {
+      .play, .pause {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 40px;
+        height: 40px;
+        overflow: hidden;
+        text-indent: -5000%;
+        background-repeat: no-repeat;
+        background-position: center left;
+      }
+
+      .play {
+        background-image: file-url('player-icon-play.png');
+      }
+
+      .pause {
+        background-image: file-url('player-icon-pause.png');
+      }
+
+      .rewind, .forward {
+        position: absolute;
+        top: 0;
+        z-index: 30;
+        height: 20px;
+        width: 40px;
+        overflow: hidden;
+        text-indent: -5000%;
+        background-repeat: no-repeat;
+        background-position: center left;
+      }
+
+      .rewind {
+        left: 0;
+        background-image: file-url('player-icon-rewind.png');
+      }
+
+      .forward {
+        left: 100%;
+        margin-left: -40px;
+        background-image: file-url('player-icon-forward.png');
+      }
+    }
+
+    .volume-controls {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      height: 40px;
+      width: 180px;
+      overflow: visible;
+
+      .mute {
+        position: absolute;
+        bottom: 0;
+        left: 120px;
+        height: 40px;
+        width: 50px;
+        padding-top: 1px;
+        font-size: 14px;
+        line-height: 40px;
+        text-align: center;
+      }
+
+      .muted {
+        color: $light-blue;
+
+        ~ * {
+          opacity: 0.333;
+        }
+
+        ~ .vol-display {
+          text-decoration: line-through;
+        }
+      }
+
+      .muted::after {
+        content: "d";
+      }
+
+      .vol-down, .vol-up {
+        position: absolute;
+        bottom: 0;
+        height: 40px;
+        width: 60px;
+        padding-top: 2px;
+        font-size: 24px;
+        line-height: 40px;
+        text-align: center;
+        z-index: 10;
+
+        &:hover, &:focus {
+          color: $light-blue;
+        }
+      }
+
+      .vol-down {
+        text-align: left;
+        padding-left: 10px;
+        left: 0;
+      }
+
+      .vol-up {
+        text-align: right;
+        padding-right: 10px;
+        left: 60px;
+      }
+
+      .vol-display {
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        height: 40px;
+        width: 0;
+        padding-left: 35px;
+        overflow: visible;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 40px;
+        background-repeat: no-repeat;
+        background-position: center left;
+        background-image: file-url('player-icon-volume.png');
+      }
+    }
+
+    .current-time {
+      position: absolute;
+      bottom: 0;
+      left: 50px;
+      height: 40px;
+      font-size: 14px;
+      line-height: 40px;
+      font-weight: bold;
+    }
+
+    .duration-time {
+      display: none;
+      position: absolute;
+      bottom: 0;
+      right: 10px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .ui-slider {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 20px;
+      overflow: hidden;
+      background: $border-colour;
+
+      .progress-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        padding-bottom: 1px;
+        background: $light-blue;
+      }
+
+      .ui-slider-handle {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        padding-bottom: 1px;
+        width: 20px;
+        color: rgba(0,0,0,0.5);
+        z-index: 10;
+      }
+    }
+  }
+
+  .ui-helper-hidden-accessible {
+    position: absolute;
+    left: -5000%;
+  }
+}

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;
+  }
+}

assets/stylesheets/main.scss

@@ -0,0 +1,34 @@
+// Edited version of govuk_frontend_toolkit
+// https://github.com/alphagov/govuk_frontend_toolkit/
+@import "govuk_frontend_toolkit/stylesheets/conditionals";
+@import "govuk_frontend_toolkit/stylesheets/shims";
+@import "govuk_frontend_toolkit/stylesheets/measurements";
+@import "govuk_frontend_toolkit/stylesheets/css3";
+@import "govuk_frontend_toolkit/stylesheets/colours";
+@import "govuk_frontend_toolkit/stylesheets/typography";
+@import "govuk_frontend_toolkit/stylesheets/grid_layout";
+@import "govuk_frontend_toolkit/stylesheets/url-helpers";
+@import "govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
+@import "govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
+
+// Edited version of govuk_template repo
+// https://github.com/alphagov/govuk_template
+@import "govuk_template/govuk-template";
+@import "govuk_template/govuk-template-ie6";
+@import "govuk_template/govuk-template-ie7";
+@import "govuk_template/govuk-template-ie8";
+@import "govuk_template/govuk-template-print";
+
+// Edited version of govuk_elements repo
+// https://github.com/alphagov/govuk_elements
+@import "govuk_elements/elements/reset";
+@import "govuk_elements/elements/buttons";
+@import "govuk_elements/elements/details";
+@import "govuk_elements/elements/elements-typography";
+@import "govuk_elements/elements/forms";
+@import "govuk_elements/elements/helpers";
+@import "govuk_elements/elements/icons";
+@import "govuk_elements/elements/layout";
+@import "govuk_elements/elements/lists";
+@import "govuk_elements/elements/panels";
+@import "govuk_elements/elements/tables";

requirements.txt

@@ -1,2 +1,3 @@
 Flask==0.10.1
-Flask-Script==2.0.5
+Flask-Script==2.0.5
+Flask-Assets==0.11

setup.cfg

@@ -0,0 +1,2 @@
+[pep8]
+max-line-length = 120

static/fonts-ie8.css.erb

@@ -0,0 +1,29 @@
+/* The below comment needs a ! so that the copyright message doesn't get removed during the minification step. See: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#comments */
+
+/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
+
+@font-face {
+  font-family: 'nta';
+  src: url(<%= asset_path "fonts/GDSTransportWebsite.eot" %>#) format('embedded-opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'nta';
+  src: url(<%= asset_path "fonts/GDSTransportWebsite-Bold.eot" %>#) format('embedded-opentype');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'ntatabularnumbers';
+  src: url(<%= asset_path "fonts/GDSTransportTabular-Light.eot" %>#) format('embedded-opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'ntatabularnumbers';
+  src: url(<%= asset_path "fonts/GDSTransportTabular-Bold.eot" %>#) format('embedded-opentype');
+  font-weight: bold;
+}

templates/govuk_template.html

@@ -0,0 +1,141 @@
+{% block top_of_page %}{% endblock %}
+<!DOCTYPE html>
+<!--[if lt IE 9]><html class="lte-ie8" lang="{{ html_lang|default('en') }}"><![endif]-->
+<!--[if gt IE 8]><!--><html lang="{{ html_lang|default('en') }}"><!--<![endif]-->
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
+    <title>{% block page_title %}GOV.UK - The best place to find government services and information{% endblock %}</title>
+
+    <script type="text/javascript">
+      (function(){if(navigator.userAgent.match(/IEMobile\/10\.0/)){var d=document,c="appendChild",a=d.createElement("style");a[c](d.createTextNode("@-ms-viewport{width:auto!important}"));d.getElementsByTagName("head")[0][c](a);}})();
+    </script>
+{% assets "css_govuk-template" %}
+    <!--[if gt IE 8]><!--><link href="{{ ASSET_URL }}" media="screen" rel="stylesheet" type="text/css" /><!--<![endif]-->
+{% endassets %}
+{% assets "css_govuk-template-ie6" %}
+    <!--[if IE 6]><link href="{{ ASSET_URL }}" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
+{% endassets %}
+{% assets "css_govuk-template-ie7" %}
+    <!--[if IE 7]><link href="{{ ASSET_URL }}" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
+{% endassets %}
+{% assets "css_govuk-template-ie8" %}
+    <!--[if IE 8]><link href="{{ ASSET_URL }}" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
+{% endassets %}
+{% assets "css_govuk-template" %}
+    <link href="{{ ASSET_URL }}" media="print" rel="stylesheet" type="text/css" />
+{% endassets %}
+
+    <!--[if IE 8]>
+    <script type="text/javascript">
+      (function(){if(window.opera){return;}
+       setTimeout(function(){var a=document,g,b={families:(g=
+       ["nta"]),urls:["/static/stylesheets/fonts-ie8.css?0.16.0"]},
+       c="/static/javascripts/vendor/goog/webfont-debug.js?0.16.0",d="script",
+       e=a.createElement(d),f=a.getElementsByTagName(d)[0],h=g.length;WebFontConfig
+       ={custom:b},e.src=c,f.parentNode.insertBefore(e,f);for(;h=h-1;a.documentElement
+       .className+=' wf-'+g[h].replace(/\s/g,'').toLowerCase()+'-n4-loading');},0)
+      })()
+    </script>
+    <![endif]-->
+    <!--[if gte IE 9]><!-->
+      <link href="/static/stylesheets/fonts.css?0.16.0" media="all" rel="stylesheet" type="text/css" />
+    <!--<![endif]-->
+
+
+    <!--[if lt IE 9]>
+      <script src="/static/javascripts/ie.js?0.16.0" type="text/javascript"></script>
+    <![endif]-->
+
+    <link rel="shortcut icon" href="/static/images/favicon.ico?0.16.0" type="image/x-icon" />
+
+    <!-- Size for iPad and iPad mini (high resolution) -->
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/static/images/apple-touch-icon-152x152.png?0.16.0">
+    <!-- Size for iPhone and iPod touch (high resolution) -->
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/static/images/apple-touch-icon-120x120.png?0.16.0">
+    <!-- Size for iPad 2 and iPad mini (standard resolution) -->
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/static/images/apple-touch-icon-76x76.png?0.16.0">
+    <!-- Default non-defined size, also used for Android 2.1+ devices -->
+    <link rel="apple-touch-icon-precomposed" href="/static/images/apple-touch-icon-60x60.png?0.16.0">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:image" content="/static/images/opengraph-image.png?0.16.0">
+
+    {% block head %}{% endblock %}
+  </head>
+
+  <body class="{% block body_classes %}{% endblock %}">
+    <script type="text/javascript">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+
+    {% block body_start %}{% endblock %}
+
+    <div id="skiplink-container">
+      <div>
+        <a href="#content" class="skiplink">{{ skip_link_message|default('Skip to main content') }}</a>
+      </div>
+    </div>
+
+    <div id="global-cookie-message">
+      
+        {% block cookie_message %}{% endblock %}
+      
+    </div>
+    <!--end global-cookie-message-->
+
+    
+    <header role="banner" id="global-header" class="{% block header_class %}{% endblock %}">
+      <div class="header-wrapper">
+        <div class="header-global">
+          <div class="header-logo">
+            <a href="{{ homepage_url|default('https://www.gov.uk') }}" title="{{ logo_link_title|default('Go to the GOV.UK homepage') }}" id="logo" class="content">
+              <img src="/static/images/gov.uk_logotype_crown.png?0.16.1" width="35" height="31" alt=""> {{ global_header_text|default('GOV.UK') }}
+            </a>
+          </div>
+          {% block inside_header %}{% endblock %}
+        </div>
+        {% block proposition_header %}{% endblock %}
+      </div>
+    </header>
+    <!--end header-->
+    
+
+    {% block after_header %}{% endblock %}
+
+    <div id="global-header-bar"></div>
+    <!--end global-header-bar-->
+    <main id="content" role="main" class="page-container">
+    {% block content %}{% endblock %}
+    </main>
+    <footer class="group js-footer" id="footer" role="contentinfo">
+
+      <div class="footer-wrapper">
+        {% block footer_top %}{% endblock %}
+
+        <div class="footer-meta">
+          <div class="footer-meta-inner">
+            {% block footer_support_links %}{% endblock %}
+
+            <div class="open-government-licence">
+              <p class="logo"><a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a></p>
+              
+                {% block licence_message %}<p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>{% endblock %}
+              
+            </div>
+          </div>
+
+          <div class="copyright">
+            <a href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">{{ crown_copyright_message|default('&copy; Crown copyright')|safe }}</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+    <!--end footer-->
+
+    <div id="global-app-error" class="app-error hidden"></div>
+
+    <script src="/static/javascripts/govuk-template.js?0.16.0" type="text/javascript"></script>
+
+    {% block body_end %}{% endblock %}
+  </body>
+</html>

templates/hello-world.html

@@ -0,0 +1,17 @@
+{% extends "govuk_template.html" %}
+
+{% block page_title %}
+Hello world!
+{% endblock %}
+
+{% block content %}
+
+<div class="grid-row">
+	<div class="column-two-thirds">
+		<h1 class="heading-xlarge">Hello world!</h1>
+
+		<p>Hello world.</p>
+	</div>
+</div>
+
+{% endblock %}

templates/index.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+{% assets "css_all" %}
+    <style type="text/css" src="{{ ASSET_URL }}"></style>
+{% endassets %}
+</head>
+<body>
+<h1>hi</h1>
+</body>
+</html>