Add boilerplate template #731

NickColley · 2018-05-29T17:54:52Z

I have tested this by integrating the template within our own review application, and in the GOV.UK Design System.

Default example

Custom example

Template area documentation

Changes from 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 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 Degrade gracefully when external JS can’t be loaded govuk_template#248 for details on this feature.

Features:

Added a headIcon block, which allows you to override icons, useful for unbranded layouts
Allow changing the theme-color, useful for unbranded layouts.
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 by default instead of being inlined.
Moved footer into it's own block, calling the Footer component by default instead of being inlined.
Moved header into it's own block, calling the Header component by default instead of being inlined.
Changed the default main id to be #main-content to avoid being styled by GOV.UK Elements.

https://trello.com/c/UcWg3ro2/290-epic-allow-a-user-to-set-up-an-app-without-govuk-template-eg-boilerplate

NickColley · 2018-05-30T12:27:57Z

GOV.UK Template sets a grey background so the footer does not cut off.

We could do the same, or do something like a box-shadow, ::after element that extends to the bottom of the page.

Alternatively, template could have it's own CSS?

Update:

Resolved this by following the same approach as GOV.UK Template for now.

Potentially using CSS Grid might be more appropriate later on.

NickColley · 2018-05-30T16:42:49Z

I'm planning on moving the template areas example into the design system when we document this for consumption.

kr8n3r · 2018-05-31T08:55:04Z

src/template.njk

+
+{% block pageStart %}{% endblock %}
+<!DOCTYPE html>
+<html lang="{{ htmlLang | default('en') }}" class="govuk-template">


how does one extend this to add custom classes or ie specific classes?

Makes sense, I'll add that feature

kr8n3r · 2018-05-31T09:50:35Z

changelog 📓

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).

Inspired by the GOV.UK Prototype Kit: https://govuk-prototype-kit.herokuapp.com/docs/examples/template-partial-areas We may want to move this into the GOV.UK Design System website.

This is consistent with the original GOV.UK Template approach. - We need to reset default margins set by user-agents - We need to set background-colors

36degrees · 2018-05-31T09:57:24Z

src/template.njk

+    <meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" /> {# Hardcoded value of $govuk-black #}
+
+    {% block headIcons %}
+      <link rel="shortcut icon" href="{{ assetPath | default('assets/') }}images/favicon.ico" type="image/x-icon" />


I think all of the default asset paths should be /assets, with a leading slash so they resolve from the domain root. For example, at the minute the paths in the example resolve to e.g. /examples/assets/images/favicon.ico

Resolved assets not resolving from the domain root

alex-ju

Looks good to me 🚀

alex-ju · 2018-05-31T10:06:01Z

app/views/examples/template-custom/index.njk

+        },
+        {
+          "href": "#3",
+          "text": "Contactez nous"


Not a blocker: Hyphenate (Contactez-nous) as in Aidez-moi

alex-ju · 2018-05-31T10:13:22Z

app/views/examples/template-custom/index.njk

+    tag: {
+      text: "alpha"
+    },
+    html: 'C\'est un nouveau service - vos <a class="govuk-link" href="#"> commentaires </a> nous aideront à l\'améliorer.'


Not a blocker: the anchor element has extra spaces before and after the text. If you update don't forget to update the test too.

Also splits template example into two

kr8n3r

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 29, 2018 17:55 Inactive

NickColley force-pushed the add-boilerplate branch from 4282842 to 8f2aa43 Compare May 29, 2018 17:56

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 29, 2018 17:56 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 30, 2018 11:25 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 30, 2018 12:46 Inactive

NickColley force-pushed the add-boilerplate branch from 1d2fe1c to 72bd736 Compare May 30, 2018 12:49

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 30, 2018 12:49 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 30, 2018 12:57 Inactive

NickColley force-pushed the add-boilerplate branch from 68bd122 to 5d7dc15 Compare May 30, 2018 13:07

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 30, 2018 13:07 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 30, 2018 14:33 Inactive

NickColley force-pushed the add-boilerplate branch from 705869f to 4370679 Compare May 30, 2018 14:37

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 30, 2018 14:37 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 30, 2018 16:29 Inactive

NickColley changed the title ~~WIP: Add boilerplate template~~ Add boilerplate template May 30, 2018

kr8n3r reviewed May 31, 2018

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 31, 2018 09:45 Inactive

NickColley added 9 commits May 31, 2018 10:51

Use template.njk for the review application

2631e23

Add template example for review application

72adc7f

Allow overriding of theme-color and icons in <head>

a11eb64

Add template areas page

cbd5f2a

Inspired by the GOV.UK Prototype Kit: https://govuk-prototype-kit.herokuapp.com/docs/examples/template-partial-areas We may want to move this into the GOV.UK Design System website.

Remove redundant header footer example

132c8f7

Remove global from review application

51f3028

Add styles for template

5924ed5

This is consistent with the original GOV.UK Template approach. - We need to reset default margins set by user-agents - We need to set background-colors

Update footer to use canvas background variable

b6bb23a

NickColley force-pushed the add-boilerplate branch from 0aacb01 to b6e51e8 Compare May 31, 2018 09:54

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 31, 2018 09:54 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 31, 2018 09:56 Inactive

36degrees previously requested changes May 31, 2018

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 31, 2018 10:06 Inactive

alex-ju reviewed May 31, 2018

View reviewed changes

NickColley force-pushed the add-boilerplate branch from efd7031 to 3e2cd9e Compare May 31, 2018 10:22

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-731 May 31, 2018 10:22 Inactive

NickColley added 4 commits May 31, 2018 11:23

Add tests for template

cccb7d3

Also splits template example into two

Allow additional classes applied to the html element

c9331b5

Update CHANGELOG

4bb0f5d

Ensure assets resolve from the domain root.

ddf78a5

NickColley force-pushed the add-boilerplate branch from 3e2cd9e to ddf78a5 Compare May 31, 2018 10:23

govuk-design-system-ci deployed to govuk-frontend-review-pr-731 May 31, 2018 10:23 View deployment

kr8n3r approved these changes May 31, 2018

View reviewed changes

NickColley merged commit 35a41ab into master May 31, 2018

NickColley deleted the add-boilerplate branch May 31, 2018 11:41

NickColley mentioned this pull request May 31, 2018

Release v0.0.31-alpha #739

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add boilerplate template #731

Add boilerplate template #731

NickColley commented May 29, 2018 •

edited

Loading

NickColley commented May 30, 2018 •

edited

Loading

NickColley commented May 30, 2018

kr8n3r May 31, 2018

NickColley May 31, 2018

kr8n3r commented May 31, 2018

36degrees May 31, 2018

alex-ju left a comment

alex-ju May 31, 2018

alex-ju May 31, 2018

kr8n3r left a comment

Add boilerplate template #731

Add boilerplate template #731

Conversation

NickColley commented May 29, 2018 • edited Loading

NickColley commented May 30, 2018 • edited Loading

NickColley commented May 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kr8n3r commented May 31, 2018

Choose a reason for hiding this comment

alex-ju left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kr8n3r left a comment

Choose a reason for hiding this comment

NickColley commented May 29, 2018 •

edited

Loading

NickColley commented May 30, 2018 •

edited

Loading