🚨 GOV.UK Frontend is in private beta and these instructions are subject to change. If you want to know more about how you can use GOV.UK Frontend, please get in touch with the Design System team at GDS. 🚨
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
You should start by familiarising yourself with the GOV.UK Design System, which contains guidance and examples of components, styles and patterns you can use to design government platforms and services.
There are 2 ways to use GOV.UK Frontend:
- we recommend using option 1, which requires using node package manager (NPM)
- you can also use option 2, which requires you to download the assets (CSS, JavaScript) from GitHub
To use GOV.UK Frontend with NPM you must:
- Install the long-term support (LTS) version of Node.js, which includes NPM.
- Create a package.json file if you don’t already have one. You can create a default
package.json
file by runningnpm init
from the root of your application.
GOV.UK Frontend is currently in private beta. You will need to log in to NPM using credentials provided by the Design System team.
Run the following command to log in:
npm login
Enter the username, password and email address you were provided with, when prompted.
You can install all components or one or more individual components depending on your needs.
To install all components, run:
npm install --save @govuk-frontend/all
To install individual components (for example, a button), run:
npm install --save @govuk-frontend/button
You can find a list of all components in the packages directory. Each component has a README with installation and usage instructions.
After you have installed GOV.UK Frontend the @govuk-frontend
package will appear in your node_modules
folder.
Import styles into your main Sass file.
To import all components, add the line:
@import "@govuk-frontend/all/all";
To import an individual component (for example, a button), add the line:
@import "@govuk-frontend/button/button";
To resolve your @import
declarations you should add node_modules
to your Sass include paths or assets paths in Ruby.
Below is a code sample you can add to your gulp configuration file using the gulp-sass package:
.pipe(sass({ includePaths: 'node_modules/' }))
To import images, configure your application to reference or copy the icons assets.
Below is a code sample you can add to your express.js configuration:
app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))
Copy and paste code from the examples in the GOV.UK Design System to use GOV.UK Frontend in your service.
Download the latest versions of the following assets and include them in your project:
Add the CSS and JavaScript code to your HTML template:
<!DOCTYPE html>
<head>
<title>Example</title>
<link rel="stylesheet" href="assets/govuk-frontend-[latest version].min.css">
<!--[if IE 8]>
<link rel="stylesheet" href="assets/govuk-frontend-oldie-[latest version].min.css">
<![endif]-->
</head>
<body>
<!-- Copy and paste component HTML-->
<button class="govuk-c-button">This is a button component</button>
<script src="assets/govuk-frontend-[latest version].min.js"></script>
</body>
</html>
Copy and paste code from the examples in the GOV.UK Design System to use GOV.UK Frontend in your service.
This project is licensed under the MIT License.
If you want to help us build GOV.UK Frontend, view our contribution guidelines.