Install DfE Frontend

This guidance will enable you to use DfE Frontend into the GOV Prototype Kit. 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.

Install the package

DfE Frontend is available in the npm registry. You can install it using the npm install command in your terminal.

CSS, Javascript, and logo files

Add the following to the top of your application.scss file after the line
@import 'node_modules/govuk-frontend/dist/govuk/all';

Javascript

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

{% block scripts %}
  {{ super() }}
  <script src="/node_modules/dfe-frontend-alpha/dist/dfefrontend.min.js"></script>
{% endblock %}

Copy the logo files

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

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.

• Using the Inter font in your product
• Use the DfE Header to brand your product correctly