This guidance will enable you to use DfE Frontend in your product. It assumes you've got a working knowledge of using packages and working with code.

Follow the guidance for getting the prototype kit set up on your device before following these steps.

This guidance is accurate up to and including version 13.16.2 of the GOV.UK Prototype kit.

If something doesn't work contact DesignOps for help so we can understand the problem and improve guidance where possible.

Install the package

DfE Frontend is available in the npm (Node Package Manager) registry. You can install it using the npm install command in your terminal.

1. Install

npm install dfe-frontend

CSS, Javascript, and logo files

Go to the app/assets/sass folder and open the application.scss file

2. application.scss

Add this line to the top of the file. This needs to come before any other code you add to this file.

@import 'node_modules/dfe-frontend/packages/dfefrontend';

Javascript

Copy the dfefrontend.js file from the /node_modules/dfe-frontend/dist/ folder and put into your /assets/js folder.

Your paths might be different for your local javascript files, for example, a public folder or static files folder.

You need to include the javascript reference in your main layout. Find the scripts section and replace with the following code.

Go to the app/views/layouts folder and open the main.html file

3. main.html

Add this code to the bottom of the file.

{% block scripts %}
  {{ super() }}
  <script src="/assets/js/dfefrontend.min.js"></script>
{% endblock %}

Copy the logo files

There might not be an /app/assets/images folder, so create this first.

4. Copy image assets

From

/node_modules/dfe-frontend/packages/assets/dfe-logo.png
/node_modules/dfe-frontend/packages/assets/dfe-logo-alt.png

To

/app/assets/images

Changing the page width

DfE Frontend uses a 1200px page width vs the 960px of GOV.UK.

To take advantage of the 1200px width in your main, override the width in your .scss file.

5. Set page width to 1200px

After your scss imports, add:

.govuk-width-container { @include govuk-width-container; }

Run your app

This is assuming you're using the GOV.UK prototype kit. You'll need to do your own checks on your app depending on your code and build process.

6. Run your app

In your terminal, run the command:

npm run dev

Your code should build, check for any messages, and your app should load at http://localhost:3000

You're good to go

You will now be able to use DfE styles and components in your product.

Used correctly, this package will not interfere with govuk- scoped styles and components. All DfE Frontend styles are scoped to dfe-.

Making your service look like a DfE service

There are strict rules on how your service should look, depending on where it's provided.

The following sections should be your next steps if you're providing your service on education.gov.uk.