Active Travel England templates and styles for the web.
The following version matrix details the compatibility between this project and other frontend components:
| ATE Frontend | GOV.UK Frontend | GOV.UK One Login Service Header |
|---|---|---|
| 0.1.0 (unreleased) | 6.1.0 | 5.0.0 (uses GOV.UK Frontend 5.13.0) |
This project provides the following components.
The ATE header component tell users that they're using an ATE service. It replaces the GOV.UK logo in the GOV.UK header with the ATE logo.
Use with the Nunjucks macro:
{% from "ate/components/ate-header/macro.njk" import ateHeader %}
{{ ateHeader({}) }}The macro supports all the GOV.UK header options, plus:
| Name | Type | Description |
|---|---|---|
assetPath |
string | Specify a path to the ATE Frontend assets. |
The ATE footer component provides copyright, licensing and other information about your service. It removes the GOV.UK logo from the GOV.UK footer.
Use with the Nunjucks macro:
{% from "ate/components/ate-footer/macro.njk" import ateFooter %}
{{ ateFooter({}) }}The macro supports all the GOV.UK footer options.
The ATE service header component tell users that they're logged into an ATE service. It replaces the GOV.UK logo in the GOV.UK One Login service header with the ATE logo.
Use with the Nunjucks macro:
{% from "ate/components/ate-service-header/macro.njk" import ateServiceHeader %}
{{ ateServiceHeader({}) }}The macro supports all the GOV.UK One Login service header options, plus:
| Name | Type | Description |
|---|---|---|
assetPath |
string | Specify a path to the ATE Frontend assets. |
Install ATE Frontend to use the templates and styles in your Node.js project.
To install ATE Frontend:
npm install @active-travel-england/ate-frontendConfigure Nunjucks to find the components by adding the template path:
nunjucks.configure([
"node_modules/@active-travel-england/ate-frontend/dist"
]);Configure your application to serve the assets. For example, using Express:
app.use("/assets", express.static("node_modules/@active-travel-england/ate-frontend/dist/ate/assets"));Use this path when configuring the component option assetPath in your templates. For example:
{{ ateHeader({
assetPath: "/assets"
}) }}You can either use the prebuilt files or build them yourself in your project.
To use the prebuilt files:
-
Configure your application to serve the styles. For example, using Express:
app.use("/styles/ate-frontend.min.css", express.static("node_modules/@active-travel-england/ate-frontend/dist/ate/ate-frontend.min.css"));
-
Add the CSS file to your pages:
<head> <link rel="stylesheet" href="/styles/ate-frontend.min.css"> </head>
Alternatively, if your project already uses Sass then import the styles to build them yourself:
@import "node_modules/@active-travel-england/ate-frontend/dist/ate";This project can also be used as a plugin for the GOV.UK Prototype Kit.
-
Install ATE Frontend:
npm install @active-travel-england/ate-frontend
-
Install the GOV.UK One Login service header that is used by ATE Frontend:
npm install @govuk-one-login/service-header
-
Configure the GOV.UK Frontend settings for ATE branding by creating
app/assets/sass/settings.scss:@use "node_modules/@active-travel-england/ate-frontend/dist/ate/settings"; $govuk-font-family: settings.$ate-font-family; $govuk-functional-colours: settings.$ate-functional-colours;
-
Change the default layout
app/views/layouts/main.htmlto use the ATE branding:-{% extends "govuk-prototype-kit/layouts/govuk-branded.njk" %} +{% extends "ate/layouts/prototype/template.njk" %}
Templates are used to create pages. This plugin provides the following templates:
- Blank ATE page - uses the ATE header and footer
- Blank ATE service page - uses the ATE service header and footer
Learn how to create pages from templates in a prototype.
Layouts are used to share a common design across pages. This plugin provides the following layouts:
ate/layouts/prototype/template.njk- uses the ATE header and footerate/layouts/prototype/service-template.njk- uses the ATE service header and footer
These layouts support all the GOV.UK page template blocks and options, specifically:
| Name | Type | Description |
|---|---|---|
opengraphImageUrl |
Variable | Specify an absolute URL to the ATE Frontend Open Graph image ate-icons/ate-opengraph-image.png |
themeColor |
Variable | Defaults to the DfT organisation colour |
Learn how to use layouts in a prototype.
To build the package:
npm run buildThe package files are in the directory dist.