sanjaypoyzer / 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 or GOV.UK Notify.

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 Elements, GOV.UK Frontend Toolkit and GOV.UK Template are vendored using Bower into /components. If you are not using middleman, it is strongly recommended that you do not do this – there are much better ways to install these dependencies, which can be found in their respective READMEs.

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