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 31, 2018 · ce755c7 · ce755c7
1 parent ed8607f
commit ce755c7
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 0 deletions.
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 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>