Merge pull request #622 from alphagov/css-changes

Update content for sass modules

Author: domoscargin

netlify.toml

@@ -19,6 +19,11 @@
   to = "/configure-components/"
   status = 301
 
+[[redirects]]
+  from = "/import-css/"
+  to = "/include-css/"
+  status = 301
+
 # Asset filenames with fingerprint hashes (which at the minute is only the font
 # from GOV.UK Frontend) are given an 'infinite' max-age and treated as
 # immutable.

source/import-css/index.html.md.erb

@@ -11,10 +11,14 @@ To use the font and image assets from GOV.UK Frontend, you can either:
 - copy the font and image files into your application
 
 ## Serve the assets from the GOV.UK Frontend assets folder - recommended
+- serve the assets from the GOV.UK Frontend assets folder (recommended)
+- copy the font and image files into your application
+
+## Serve the assets from the GOV.UK Frontend assets folder
 
 Set up your routing so requests for files in `<YOUR-SITE-URL>/assets` are served from `/node_modules/govuk-frontend/dist/govuk/assets`.
 
-For example if you're using [express.js](https://expressjs.com/), add the following to your `app.js` file:
+For example if you use the web framework [Express.js](https://expressjs.com/), add the following to your `app.js` file:
 
 ```javascript
 const path = require('path');
@@ -23,7 +27,7 @@ app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-fron
 
 ## Copy the font and image files into your application
 
-If you decide to copy the assets instead, copy the:
+If you decide to copy the assets instead, copy these 3 items:
 
 - `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
 - `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`
@@ -33,24 +37,23 @@ You should use an automated task or your build pipeline to copy the files, so yo
 
 ### If you have your own folder structure
 
-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.
-
-Set one of the following before the `@import` line in your Sass file:
-
-- `$govuk-assets-path`
-- `$govuk-images-path` and `$govuk-fonts-path`
+If you use a different folder structure than `<YOUR-APP>/assets/images` and `<YOUR-APP>/assets/fonts`, you can [configure GOV.UK Frontend](/include-css/#configure-gov-uk-frontend) so that Sass builds the CSS according to your folder structure.
 
-Set the `$govuk-assets-path` variable if your `font` and `image` folders have the same parent folder. For example:
+Configure the [`$govuk-assets-path`](/sass-api-reference/#govuk-assets-path) variable if your `font` and `image` folders have the same parent folder. For example:
 
 ```scss
-$govuk-assets-path: "/<YOUR-ASSETS-FOLDER>/";
+@use "node_modules/govuk-frontend/dist/govuk" as * with (
+  $govuk-assets-path: "/<YOUR-ASSETS-FOLDER>/"
+);
 ```
 
-Set the `$govuk-images-path` and `$govuk-fonts-path` variables if your `font` and `image` folders have different parent folders. For example:
+Configure the [`$govuk-images-path`](/sass-api-reference/#govuk-images-path) and [`$govuk-fonts-path`](/sass-api-reference/#govuk-fonts-path) variables if your `font` and `image` folders have different parent folders. For example:
 
 ```scss
-$govuk-images-path: "/<YOUR-IMAGES-FOLDER>/";
-$govuk-fonts-path: "/<YOUR-FONTS-FOLDER>/";
+@use "node_modules/govuk-frontend/dist/govuk" as * with (
+  $govuk-images-path: "/<YOUR-IMAGES-FOLDER>/",
+  $govuk-fonts-path: "/<YOUR-FONTS-FOLDER>/"
+);
 ```
 
-You can also use your own function to generate paths, for example if you're using `asset-pipeline` in [sass-rails](https://github.com/rails/sass-rails). Set the `$govuk-image-url-function` and `$govuk-font-url-function` variables to the name of your function.
+You can also use your own function to generate paths, for example if you’re using `asset-pipeline` in [sass-rails](https://github.com/rails/sass-rails). Configure the [`$govuk-image-url-function`](/sass-api-reference/#govuk-image-url-function) and [$govuk-font-url-function](/sass-api-reference/#govuk-font-url-function) variables with the function you need to use.

source/import-font-and-images-assets/index.html.md.erb

@@ -9,6 +9,6 @@ prevent_indexing: true
 
 This content has moved. You can now find out how to import CSS, assets and javascript as 3 separate pages in the following locations:
 
-- [Import CSS](../import-css/)
+- [Import CSS](../include-css/)
 - [Import font and images assets](../import-font-and-images-assets/)
 - [Import JavaScript](../import-javascript/)