Active Travel England templates and styles for digital services.
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 | 6.0.0 |
The page template combines the boilerplate markup and components needed for a basic ATE page. It includes:
- everything from the GOV.UK page template
- the ATE favicon, and other related theme icons
- the ATE header component and ATE footer component
Use in a Nunjuncks template:
{% extends "ate/template.njk" %}The template supports all the GOV.UK page template blocks and options.
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.
Install ATE Frontend:
npm install @active-travel-england/ate-frontendThis will also install GOV.UK Frontend and GOV.UK One Login service header that are used by ATE Frontend.
Configure Nunjucks to find the components by adding the template paths:
nunjucks.configure([
// GOV.UK Frontend templates
"node_modules/govuk-frontend/dist",
// ATE Frontend templates
"node_modules/@active-travel-england/ate-frontend/dist",
]);Configure your application to serve the assets. For example, using Express:
// GOV.UK Frontend assets
app.use("/assets", express.static("node_modules/govuk-frontend/dist/govuk/assets"));
// ATE Frontend assets
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 if your project uses Sass.
Configure your application to serve the styles. For example, using Express:
// GOV.UK Frontend styles with ATE branding
app.use("/styles/govuk-frontend-ate.min.css", express.static("node_modules/@active-travel-england/ate-frontend/dist/ate/govuk-frontend-ate.min.css"));
// GOV.UK One Login service header styles with ATE branding
app.use("/styles/govuk-one-login-service-header-ate.min.css", express.static("node_modules/@active-travel-england/ate-frontend/dist/ate/govuk-one-login-service-header-ate.min.css"));
// ATE Frontend styles
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 files to your pages:
<head>
<!-- GOV.UK Frontend styles with ATE branding -->
<link rel="stylesheet" href="/styles/govuk-frontend-ate.min.css">
<!-- GOV.UK One Login service header styles with ATE branding -->
<link rel="stylesheet" href="/styles/govuk-one-login-service-header-ate.min.css">
<!-- ATE Frontend styles -->
<link rel="stylesheet" href="/styles/ate-frontend.min.css">
</head>Alternatively, import the styles to build them yourself:
// Configure GOV.UK Frontend settings for ATE branding
@use "ate/settings";
$govuk-font-family: settings.$ate-font-family;
$govuk-functional-colours: settings.$ate-functional-colours;
// GOV.UK Frontend styles
@import "govuk";
// GOV.UK One Login service header styles
@import "service-header";
// ATE Frontend styles
@import "ate";Build the CSS using the following load paths:
- GOV.UK Frontend:
node_modules/govuk-frontend/dist - GOV.UK One Login service header:
node_modules/@govuk-one-login/service-header/dist/styles - ATE Frontend:
node_modules/@active-travel-england/ate-frontend/dist
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
-
Plugin dependencies are only installed transitively when using the UI. 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.