Add Boilerplate template

Changes from [govuk_template](https://github.com/alphagov/govuk_template): Breaking changes: - Removed stylesheets relating to `govuk_template.css`, we now recommend people bundle stylesheets in their application. - Removed stylesheets relating to `print`, we do this at a component level. - Removed stylesheets relating to `font`, we now have a [new font loading strategy](#726) that does not require a different bundle. - Removed `ie8` specific class being added to the `html` element, since we don't require functionality - Remove `ie.js`, used to shim HTML5 files, add JSON2 support, we now recommend people bundle in their application. - Removed functionality to remove `js-enabled` class if `window.GOVUK` is not defined, at the moment we can't guarantee that this global will be set with GOV.UK Frontend. See alphagov/govuk_template#248 for details on this feature. Features: - Added a main block, now skip link works by default, this block can be overridden. Patch: - Moved Skip link into it's own block, calling the [Skip link component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/skip-link) by default instead of being inlined. - Moved footer into it's own block, calling the [Footer component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/footer) by default instead of being inlined. - Moved header into it's own block, calling the [Header component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/header) by default instead of being inlined. - Changed the default `main` `id` to be `#main-content` to avoid being [styled by GOV.UK Elements](https://github.com/alphagov/govuk_elements/blob/8216538c1d2efb8b33372a22f28e1ea81d879ecd/assets/sass/elements/_layout.scss#L9).
alphagov · May 29, 2018 · 8f2aa43 · 8f2aa43
1 parent 2bb0dbd
commit 8f2aa43
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 31 deletions.
diff --git a/app/app.js b/app/app.js
@@ -17,7 +17,8 @@ const appViews = [
   configPaths.layouts,
   configPaths.partials,
   configPaths.examples,
-  configPaths.components
+  configPaths.components,
+  configPaths.src
 ]
 
 module.exports = (options) => {

diff --git a/app/views/examples/template/index.njk b/app/views/examples/template/index.njk
@@ -0,0 +1,67 @@
+{% extends "template.njk" %}
+
+{% set assetPath = '/assets/' %}
+
+{% block head %}
+  <!--[if !IE 8]><!-->
+    <link rel="stylesheet" href="/public/app.css">
+  <!--<![endif]-->
+  <!--[if IE 8]>
+    <link rel="stylesheet" href="/public/app-ie8.css">
+  <![endif]-->
+{% endblock %}
+
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "date-input/macro.njk" import govukDateInput %}
+{% from "button/macro.njk" import govukButton %}
+
+{% block content %}
+  {{ govukBackLink({
+  "text": "Back"
+  }) }}
+
+  <div class="govuk-main-wrapper">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <form action="/url/of/next/page" method="post">
+
+          {{ govukDateInput({
+            id: 'dob',
+            name: 'dob',
+            fieldset: {
+              legend: {
+                text: 'What is your date of birth?',
+                isPageHeading: true,
+                classes: 'govuk-fieldset__legend--xl'
+              }
+            },
+            hint: {
+              text: 'For example, 31 3 1980'
+            },
+            items:[
+              {
+                name: 'day'
+              },
+              {
+                name: 'month'
+              },
+              {
+                name: 'year'
+              }
+            ]
+            })
+          }}
+
+          {{ govukButton({
+            "text": "Continue"
+          }) }}
+        </form>
+
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
+{% block bodyEnd %}
+  <script src="/public/all.js"></script>
+{% endblock %}
diff --git a/app/views/layouts/_generic.njk b/app/views/layouts/_generic.njk
@@ -1,29 +1,27 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
+{% extends "template.njk" %}
+
+{% set pageTitle = "GOV.UK Frontend" %}
+
+{% block head %}
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>GOV.UK Frontend</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+
   <!--[if !IE 8]><!-->
     <link rel="stylesheet" href="/public/app.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
   <!--<![endif]-->
-  <!--[if lt IE 9]>
-  <script src="/vendor/html5-shiv/html5shiv.js"></script>
-  <![endif]-->
   <!--[if IE 8]>
-  <link rel="stylesheet" href="/public/app-ie8.css">
+    <link rel="stylesheet" href="/public/app-ie8.css">
   <![endif]-->
-  {% block styles %}
-  {% endblock %}
-</head>
-<body class="{% block bodyClasses %}{% endblock %}">
-  <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
-  {% block body %}
-    {% block content %}{% endblock %}
-  {% endblock %}
+
+  {% block styles %}{% endblock %}
+{% endblock %}
+
+{# Turn the header and footer off #}
+{% block header %}{% endblock %}
+{% block footer %}{% endblock %}
+
+{% block bodyEnd %}
   <script src="/public/all.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.min.js"></script>
   <!--[if lte IE 8]>
@@ -33,7 +31,5 @@
     var domReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
     domReady(iFrameResize({}, '.js-component-preview'))
   </script>
-  {% block scripts %}
-  {% endblock %}
-</body>
-</html>
+  {% block scripts %}{% endblock %}
+{% endblock %}
diff --git a/app/views/layouts/component-preview.njk b/app/views/layouts/component-preview.njk
@@ -1,12 +1,15 @@
 {% extends previewLayout + ".njk" %}
 
-{% block bodyClasses %}
+{% set bodyClasses %}
  {{ bodyClasses }}
-{% endblock %}
+{% endset %}
 
 {% block content %}
   <div class="app-whitespace-highlight">
     {{ componentView | safe }}
   </div>
+{% endblock %}
+
+{% block scripts %}
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.contentWindow.min.js"></script>
 {% endblock %}
diff --git a/app/views/layouts/full-width.njk b/app/views/layouts/full-width.njk
@@ -1 +1,5 @@
 {% extends "_generic.njk" %}
+
+{% block main %}
+  {% block content %}{% endblock %}
+{% endblock %}
diff --git a/app/views/layouts/layout.njk b/app/views/layouts/layout.njk
@@ -1,7 +1 @@
 {% extends "_generic.njk" %}
-
-{% block body %}
-  <div class="govuk-width-container">
-    {% block content %}{% endblock %}
-  </div>
-{% endblock %}
diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico
diff --git a/src/assets/images/govuk-apple-touch-icon-152x152.png b/src/assets/images/govuk-apple-touch-icon-152x152.png
diff --git a/src/assets/images/govuk-apple-touch-icon-167x167.png b/src/assets/images/govuk-apple-touch-icon-167x167.png
diff --git a/src/assets/images/govuk-apple-touch-icon-180x180.png b/src/assets/images/govuk-apple-touch-icon-180x180.png
diff --git a/src/assets/images/govuk-apple-touch-icon.png b/src/assets/images/govuk-apple-touch-icon.png
diff --git a/src/assets/images/govuk-mask-icon.svg b/src/assets/images/govuk-mask-icon.svg
diff --git a/src/assets/images/govuk-opengraph-image.png b/src/assets/images/govuk-opengraph-image.png
diff --git a/src/template.njk b/src/template.njk
@@ -0,0 +1,58 @@
+{% from "./components/skip-link/macro.njk" import govukSkipLink %}
+{% from "./components/header/macro.njk" import govukHeader %}
+{% from "./components/footer/macro.njk" import govukFooter %}
+
+{% block pageStart %}{% endblock %}
+<!DOCTYPE html>
+<html lang="{{ htmlLang | default('en') }}">
+  <head>
+    <meta charset="utf-8" />
+    <title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
+
+    <link rel="shortcut icon" href="{{ assetPath | default('assets/') }}images/favicon.ico" type="image/x-icon" />
+    <link rel="mask-icon" href="{{ assetPath | default('assets/') }}images/govuk-mask-icon.svg" color="#0b0c0c"> {# Hardcoded value of $govuk-black #}
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('assets/') }}images/govuk-apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('assets/') }}images/govuk-apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('assets/') }}images/govuk-apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" href="{{ assetPath | default('assets/') }}images/govuk-apple-touch-icon.png">
+
+    <meta name="theme-color" content="#0b0c0c" /> {# Hardcoded value of $govuk-black #}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {% block head %}{% endblock %}
+
+    {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
+    <meta property="og:image" content="{{ assetPath | default('assets/') }}images/govuk-opengraph-image.png">
+  </head>
+  <body class="{{ bodyClasses }}">
+    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    {% block bodyStart %}{% endblock %}
+
+    {% block skipLink %}
+      {{ govukSkipLink({
+        href: '#main-content',
+        text: 'Skip to main content'
+      }) }}
+    {% endblock %}
+
+    {% block header %}
+      {{ govukHeader({
+          containerClasses: 'govuk-width-container'
+      }) }}
+    {% endblock %}
+
+    {% block main %}
+      <main class="govuk-main" id="main-content" role="main">
+        <div class="govuk-width-container">
+          {% block content %}{% endblock %}
+        </div>
+      </main>
+    {% endblock %}
+
+    {% block footer %}
+      {{ govukFooter({}) }}
+    {% endblock %}
+
+    {% block bodyEnd %}{% endblock %}
+  </body>
+</html>