Get one GOV.UK Frontend component working in your application, so you can test everything works before you add more components or styles.
You will need to do all the following steps to get your component working.
- Install GOV.UK Frontend.
- Add the HTML for a component to your application.
- Get the CSS working.
- Get the font and images working.
If you’ve installed using precompiled files, get started with a basic page instead.
2. Add the HTML for a component to your application
Go to the example accordion component on the GOV.UK Design System website, then copy the HTML.
Paste the HTML into a page or template in your application.
3. Get the CSS working
Add the following to the main Sass file in your project, so your Sass compiler adds all of GOV.UK Frontend’s styles to your CSS file.
Add your CSS file to your page layout if you need to. For example:
<head> ... <link rel="stylesheet" href="<YOUR-CSS-FILE>.css"> </head>
Run your application and check that the accordion displays correctly.
There are also different ways you can import GOV.UK Frontend’s CSS.
4. Get the font and images working
Your component will not use the right font or images until you’ve added GOV.UK Frontend’s assets to your application.
Copy the following 2 folders:
Run your application, then use the Fonts tab in Firefox Page Inspector to check the accordion is using the GDS Transport font.
In your live application, we recommend using an automated task or your build pipeline instead of copying the files manually.
Add the following to the top of the
<body>section of your page template:
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
Import the file before the closing
</body>tag of your page template, then run the
initAllfunction to initialise all the components. For example:
Run your application and check it works the same way as the Design System accordion example, by selecting the buttons and checking the accordion shows and hides sections.
In your live application:
- you must use
- we recommend using an automated task or your build pipeline instead of copying the files manually
You can now get the full code for page layouts and other components from the Design System website.