alphagov/product-page-example

This is an example product page for use by GaaP products.

Product Page Example

This repository contains a number of components that can be used to build 'product pages' for GOV.UK Products like GOV.UK Pay, GOV.UK Notify and GOV.UK Registers.

It is also a middleman site for the sole purpose of providing an example of how to use the components to build a site. You do not have to use middleman to build your product page.

This shares a number of components and design considerations with the tech docs template, which may also be useful for product teams.

Components

For documentation on each component, read the comments at the top of each component's stylesheet:

• Breadcrumbs
• Content Section
• Full Width Form
• GOV.UK Logo
• Header
• Hero 'Alternative Action'
• Hero Button
• Masthead
• Phase Banner
• Related Items
• Skip Link
• Sub Navigation

Usage

For now, please copy the Sass and Javsacript for the components that you require into your own project, and use your own asset pipeline to e.g. compile the Sass files into CSS.

Because each product team have their own tech stack, making these dependencies available in a more automated way that worked for everyone was not part of the MVP, but it's something we're looking at for the future.

Frontend Dependencies

GOV.UK Frontend and GaaP Analytics are included using NPM and bundled in on build. You can include more NPM modules easily by installing them as a dependency and including paths to them. This works because within config.rb sprockets is instructed to look within node_modules/.

Getting started with Google Analytics

To get started with Google Analytics you will need an account and a tracking ID you can get these by talking to the GaaP programme team. The analytics ID is then set within config.rb.

To learn about how to get started with event tracking head over to GaaP Analytics.

Running Example Locally

If you wish to run the example in your own browser, you'll need to run the following commands from the root of this project:

• bundle install to install middleman and its dependencies
• npm install to install the frontend dependencies
• bundle exec middleman server - to start middleman's built in server
• open http://localhost:4567 - to open the example in your browser

product-page-example's Issues

Mobile margin / padding fixes

From @dashouse:

.breadcrumbs (< 640px) – remove margin-bottom (might still be needed when in blue header)
.sub-navigation (< 640px) – remove margin-top
.header__navigation ul (< 640px) – increase margin-bottom to 8px;

Reliance on (retired) GOV.UK Frontend Toolkit

Given GOV.UK Design System is the newer, maintained product, it would be best if this template was built on top of it, not the Frontend Toolkit.

It looks like this repo isn't under active maintenance, but I thought it worth noting - maybe something in the README would warn future users?

Notably, this repo has been a huge boon for us, and helped us get up and running quickly - I'm grateful for its existence, but would like make future users aware of this issue.

<ul>'s within content are indented

When adding a list it appears indented. Not aligned with http://govuk-elements.herokuapp.com/typography/#typography-lists

Deploy script can't see manifest.yml

Because the deploy script is in a subfolder, when you run it, it can't see any parameters set in manifest.yml. I found this out because it wasn't taking the app name from manifest.yml. Suggest putting deploy script in root folder.

Typographic inconsistencies with GOV.UK elements

Looks to me as if the font sizes are a little bit different from GOV.UK Elements

Headings (Elements): 48 / 36 / 24 / 19
Headings (Product page example computed): 48 / 38 / 28.5 / 22.23

There are also some examples in the prototype of where the .heading-medium (etc) classes from GOV.UK Elements come in useful in regards to margins. Below is (roughly) the same markup with the right using a .heading-medium class which applies the larger margins.

(Low priority, just to bring in-line)

Buttons don't use nta font-family

The buttons on GOV.UK Elements use the "nta" font family, but buttons in the product page don't.

As far as I can tell this is because _core.scss doesn't include the input rule defined in govuk_template's _basic.scss.

Credit to eagle-eyed @christopherthomasdesign for noticing the difference!

Transition to GOV.UK Design System from legacy systems

Transition this template from toolkit, elements and template (which are deprecated) over to GOV.UK Design System (govuk-frontend)

Header alignment

The GOV.UK Crown and text isn't positioned as per GOV.UK / Service Manual / Service Toolkit

Breadcrumb fixes

From @dashouse:

padding on .breadcrumbs is uneven on top & bottom, go for 10px on both
.breadcrumbs ol – line-height 25px (may require reduction in padding to compensate for height increase)?

Hero should have a 50%/50% breakpoint, allow image out of order

From @dashouse:

Content / Illustration should go 50% / 50% at mid size breakpoint before stacking. On the prototype I have a grid override "product-overview-intro-….” for this
"column-two-thirds product-overview-intro-text"
"column-one-third product-overview-intro-image"

Ideally I’d like this image to be inserted between the h1 and the .hero__description when it breaks to one column. Could we use (https://github.com/filamentgroup/AppendAround) ?

Do we treat the Verify logo example as an entirely separate use case?

Use more representative sub navigation example

From @dashouse:

These are here for sub level pages not for jump links within content, could potentially be used for either but will require the active state for the sub-nav and create fourth level breadcrumb