-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html.md.erb
70 lines (52 loc) · 4 KB
/
index.html.md.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
---
title: Install using precompiled files
weight: 11
old_paths:
- /installing-from-dist/index.html
---
# Try GOV.UK Frontend using precompiled files
You can install GOV.UK Frontend by copying our CSS, JavaScript and asset files into your project. If you install this way, you can try GOV.UK Frontend in your application without having to make many changes.
<%= warning_text('In your live application, you should <a href="/installing-with-npm/">install with Node.js package manager (npm)</a> instead.
') %>
## What you cannot do with the precompiled files
You’ll not be able to:
- change [Sass settings](../sass-api-reference/), for example override colours or set your own font
- use the Nunjucks code from the [Design System website](https://design-system.service.gov.uk/) to add components
- import an individual component’s CSS or JavaScript
- use GOV.UK Frontend's colours or mixins in your custom code
## Copy and install the precompiled files
1. Download the `release-<VERSION-NUMBER>.zip` file at the bottom of the [latest GOV.UK Frontend release note](https://github.com/alphagov/govuk-frontend/releases/latest).
2. Unzip the zip file.
3. Copy the `assets` folder to the root of your project’s public folder. This is so, for example, `<YOUR-SITE-URL>/assets/images/govuk-crest.png` shows the `govuk-crest.png` image in your users’ browsers.
4. Copy the `.css` and `.css.map` files to a stylesheets folder in the root of your project’s public folder. This is so, for example, `<YOUR-SITE-URL>/stylesheets/govuk-frontend-<VERSION-NUMBER>.min.css` shows the CSS file in your users’ browsers.
5. Copy the `.js` and `.js.map` files to a JavaScripts folder in the root of your project’s public folder. This is so, for example, `<YOUR-SITE-URL>/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js` shows the JavaScript file in your users’ browsers.
## Create an example page to check for errors
1. Create a page in your project using the following HTML (in your live application, you should use the [Design System page template](https://design-system.service.gov.uk/styles/page-template/) instead):
```html
<!DOCTYPE html>
<html lang="en" class="govuk-template">
<head>
<title>Example - GOV.UK</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="manifest" href="/assets/manifest.json">
<link rel="stylesheet" href="/stylesheets/govuk-frontend-<VERSION-NUMBER>.min.css">
</head>
<body class="govuk-template__body">
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- component HTML -->
<script type="module" src="/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/govuk-frontend-<VERSION-NUMBER>.min.js'
initAll()
</script>
</body>
</html>
```
2. Replace `<VERSION-NUMBER>` so the 3 filenames match the files you [copied from GOV.UK Frontend's GitHub repo](#copy-and-install-the-precompiled-files).
3. Go to the [example accordion component](https://design-system.service.gov.uk/components/accordion/#accordion-example) on the Design System website and copy the HTML from the first example.
4. Replace `<!-- component HTML -->` with the accordion HTML you copied.
5. Run your application and check for errors in the browser console - it should work the same way as the [Design System accordion example](https://design-system.service.gov.uk/components/accordion/default/index.html) by selecting the buttons and checking the accordion ‘shows’ and ‘hides’ sections.
You can now get the full code for page layouts and other components from the [Design System website](https://design-system.service.gov.uk/).
If the accordion does not work, you can find out more about how to import GOV.UK Frontend's CSS and JavaScript in:
- [Import CSS](../import-css/)
- [Import JavaScript](../import-javascript/)