You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
excerpt: "To load the CSS from MoJ Frontend, you can either add MoJ Frontend and GOV.UK Frontend’s CSS files to your HTML or load the CSS into your own Sass file."
10
+
---
11
+
12
+
To use the CSS from MoJ Frontend and GOV.UK Frontend, you can either:
13
+
14
+
- add MoJ Frontend and GOV.UK Frontend’s CSS files to your HTML
15
+
- load the CSS files into your own Sass file
16
+
17
+
## Add the CSS file to your HTML
18
+
19
+
If you decide to add the CSS to your HTML, you can do one of the following:
20
+
21
+
- serve the CSS files from the combined stylesheets folders – recommended
22
+
- copy the CSS files into your application
23
+
24
+
## Serve the CSS files from the combined stylesheets folders – recommended
25
+
26
+
Set up your routing so requests for the CSS files in `<YOUR-SITE-URL>/stylesheets` are served from both `/node_modules/govuk-frontend/dist/govuk` and `/node_modules/@ministryofjustice/frontend/moj`.
27
+
28
+
For example if you’re using [express.js](https://expressjs.com/), add the following to your `app.js` file:
If you decide to copy the CSS files instead, copy both `/node_modules/@ministryofjustice/frontend/moj/moj-frontend.min.css` and `/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css` into `<YOUR-APP>/stylesheets` and link the CSS files using the example above.
51
+
52
+
You should use an automated task or your build pipeline to copy the files, so your project folder stays up to date when updates to MoJ Frontend and GOV.UK Frontend are released.
53
+
54
+
## Load using Sass
55
+
56
+
To load all the Sass rules from both MoJ Frontend and GOV.UK Frontend, add the following to your Sass file:
If you want to make Sass load paths shorter, add both `node_modules/@ministryofjustice/frontend` and `node_modules/govuk-frontend/dist` to either your:
-[assets paths](http://guides.rubyonrails.org/asset_pipeline.html#search-paths) if you use Ruby in your project
79
+
80
+
For example, using the Sass compiler:
81
+
82
+
```js
83
+
compile('src/stylesheets/application.scss', {
84
+
loadPaths: [
85
+
'node_modules/@ministryofjustice/frontend',
86
+
'node_modules/govuk-frontend/dist',
87
+
],
88
+
quietDeps:true
89
+
})
90
+
```
91
+
92
+
You can then load stylesheets without using `node_modules/@ministryofjustice/frontend` and `node_modules/govuk-frontend/dist` in your paths:
93
+
94
+
```scss
95
+
@forward"govuk";
96
+
@forward"moj/all";
97
+
```
98
+
99
+
## Override with your own CSS
100
+
101
+
If you want to override MoJ Frontend’s styles with your own styles, `@forward` MoJ Frontend’s styles before your own Sass rules.
102
+
103
+
## Silence deprecation warnings from dependencies in Dart Sass
104
+
105
+
You may see deprecation warnings when compiling your Sass. For example:
106
+
107
+
```console
108
+
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
109
+
```
110
+
111
+
We’re currently unable to fix deprecation warnings from MoJ Frontend. However, you can silence the warnings by following the [Silence deprecation warnings from dependencies in Dart Sass](https://frontend.design-system.service.gov.uk/import-css/#simplify-sass-import-paths) guidance from GOV.UK Frontend.
excerpt: "To use the font and image assets from MoJ Frontend and GOV.UK Frontend, you can either serve the assets from the combined assets folders or copy the font and image files into your application"
10
+
---
11
+
12
+
To use the font and image assets from MoJ Frontend and GOV.UK Frontend, you can either:
13
+
14
+
- serve the assets from the combined assets folders – recommended
15
+
- copy the font and image files into your application
16
+
17
+
## Serve the assets from the combined assets folders – recommended
18
+
19
+
Set up your routing so requests for files in `<YOUR-SITE-URL>/assets` are served from both `/node_modules/govuk-frontend/dist/govuk/assets` and `/node_modules/@ministryofjustice/frontend/moj/assets`.
20
+
21
+
For example if you’re using [express.js](https://expressjs.com/), add the following to your `app.js` file:
## Copy the font and image files into your application
31
+
32
+
If you decide to copy the assets instead, copy the:
33
+
34
+
-`/node_modules/@ministryofjustice/frontend/moj/assets/images` contents to `<YOUR-APP>/assets/images`
35
+
-`/node_modules/govuk-frontend/dist/govuk/assets/images` contents to `<YOUR-APP>/assets/images`
36
+
-`/node_modules/govuk-frontend/dist/govuk/assets/fonts` contents to `<YOUR-APP>/assets/fonts`
37
+
38
+
You should use an automated task or your build pipeline to copy the files, so your project folder stays up to date when updates to MoJ Frontend and GOV.UK Frontend are released.
39
+
40
+
### If you have your own folder structure
41
+
42
+
If you use a different folder structure than `<YOUR-APP>/assets/images` and `<YOUR-APP>/assets/fonts`, you can set Sass variables so that Sass builds the CSS to point to your folders.
43
+
44
+
Set one of the following with a `@use` line in your Sass file:
45
+
46
+
-`$govuk-assets-path`
47
+
-`$govuk-images-path` and `$govuk-fonts-path`
48
+
49
+
Set the `$govuk-assets-path` variable if your `font` and `image` folders have the same parent folder. For example:
You can also use the option to [try using precompiled files](/production/installing-compiled/) to test how MoJ Frontend works in your application.
20
24
21
-
To start using MoJ styles, components and patterns contained here, you’ll need to include MoJ Frontend in your project.
22
-
23
-
### Option 1: install using npm
24
-
25
-
We recommend [installing MoJ Frontend using npm](/production/installing-with-npm/). Using this option, you will be able to:
26
-
27
-
- selectively include the CSS or JavaScript for individual components
28
-
- build your own styles or components based on the palette or typography and spacing mixins
29
-
- customise the build (for example, overriding colours or enabling global styles)
30
-
- use the component Nunjucks templates
31
-
32
-
You will also need to [set up JavaScript](/production/setting-up-javascript/) if you want to use any interactive components.
33
-
34
-
### Option 2: include compiled files
35
-
36
-
If your project does not use npm, or if you want to try out MoJ Frontend in your project without installing it through npm, you can [download and include compiled stylesheets, JavaScript and the asset files](/production/installing-compiled/).
37
-
38
-
Using this option, you will be able to include all the CSS and JavaScript of GOV.UK Frontend in your project.
39
-
40
-
You will not be able to:
41
-
42
-
- selectively include the CSS or JavaScript for individual components
43
-
- build your own styles or components based on the palette or typography and spacing mixins
44
-
- customise the build, for example, overriding colours or enabling global styles
45
-
- use the component Nunjucks templates
25
+
There are live examples of MoJ Frontend components, and guidance on using them in your service, in the [MoJ Design System](/).
excerpt: "If your project does not use npm (or you want to try out MoJ Frontend without installing it through npm) download and include compiled stylesheets."
@@ -17,72 +17,60 @@ You can install MoJ Frontend using the compiled files released with each version
17
17
- customise the build, for example, overriding colours or enabling global styles
18
18
- use the component Nunjucks templates
19
19
20
-
In a live application, we recommend that you [install with npm](/production/installing-with-npm/) instead. This will allow you to better integrate the library and more easily upgrade.
In your live application, you should <a href="/production/installing-with-npm/">install with Node.js package manager (npm)</a> instead.
25
+
</strong>
26
+
</div>
21
27
22
-
## Copy the files
23
-
24
-
1. Download the `release-<VERSION-NUMBER>.zip` file at the bottom of the [latest MoJ Frontend release note](https://github.com/ministryofjustice/moj-frontend/releases/latest).
25
-
2. Unzip the zip file.
26
-
3. Copy the `assets` folder to the root of your project’s public folder, so that for example `<YOUR-SITE-URL>/assets/images/moj-logotype-crest.png` shows the `images/moj-logotype-crown.png` image in your users’ browsers.
27
-
4. Copy the 2 `.css` files to a stylesheets folder in the root of your project’s public folder, so that for example `<YOUR-SITE-URL>/stylesheets/moj-frontend.min.css` shows the CSS file in your users’ browsers.
28
-
5. Copy the `.js` file to a JavaScript folder in the root of your project’s public folder, so that for example `<YOUR-SITE-URL>/javascript/moj-frontend.min.js` shows the JavaScript file in your users’ browsers.
29
-
30
-
## Check an example page
31
-
32
-
### With the GOV.UK Design System
28
+
## Copy and install the precompiled files
33
29
34
30
1. Follow [the instructions for installing the GOV.UK Design System](https://frontend.design-system.service.gov.uk/install-using-precompiled-files/)
35
-
2. Add `link` tags for the MoJ Frontend CSS, alongside the GOV.UK ones in the `head`:
3. Add `script` tags for the MoJ Frontend JavaScript, alongside the GOV.UK at the bottom of the `body`. This includes jQuery, which is a dependency of MoJ Frontend.
2. Download the `release-<VERSION-NUMBER>.zip` file at the bottom of the [latest MoJ Frontend release note](https://github.com/ministryofjustice/moj-frontend/releases/latest).
32
+
3. Unzip the zip file.
33
+
4. Copy the `assets` folder to the root of your project’s public folder, so that for example `<YOUR-SITE-URL>/assets/images/moj-logotype-crest.png` shows the `images/moj-logotype-crown.png` image in your users’ browsers.
34
+
5. Copy the `.css` file to a stylesheets folder in the root of your project’s public folder, so that for example `<YOUR-SITE-URL>/stylesheets/moj-frontend.min.css` shows the CSS file in your users’ browsers.
35
+
6. Copy the `.js` file to a JavaScript folder in the root of your project’s public folder, so that for example `<YOUR-SITE-URL>/javascripts/moj-frontend.min.js` shows the JavaScript file in your users’ browsers.
51
36
52
-
### Without the GOV.UK Design System
37
+
##Update your example page to check for errors
53
38
54
-
It is unlikely that you would ever want to install the MoJ Design System alone, but if so you can follow the guide below to check that it is working.
55
-
56
-
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):
39
+
1. Update the example page in your project to match 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):
2. Go to the [Add another component](/components/add-another/) on the Design System website and copy the HTML from the first example.
70
+
2. Replace `<VERSION-NUMBER>` so the 5 filenames match the files you [copied from MoJ Frontend and GOV.UK Frontend's GitHub repos](#copy-and-install-the-precompiled-files).
71
+
72
+
3. Go to the [add another component](/components/add-another/) on the Design System website and copy the HTML from the first example.
85
73
86
-
3. Replace `<!-- component HTML -->` with the accordion HTML you copied.
74
+
4. Replace `<!-- component HTML -->` with the add another HTML you copied.
87
75
88
-
4. Run your application - you can check it works the same way as the [Add another component example](/examples/add-another/) by clicking the "Add another person" button.
76
+
5. Run your application - you can check it works the same way as the [add another component example](/examples/add-another/) by clicking the "Add another person" button.
0 commit comments