Installation

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.

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.

CSS, Javascript, and logo files

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

Javascript

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

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

Copy the logo files

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

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.

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.

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