Skip to content
This repository has been archived by the owner on Jun 25, 2024. It is now read-only.

Latest commit

 

History

History
209 lines (133 loc) · 7.87 KB

import-assets.md

File metadata and controls

209 lines (133 loc) · 7.87 KB

Import CSS, assets and JavaScript

When importing CSS, assets and JavaScript for CCS Frontend, you will also need to import them for GOV.UK Frontend too. A guide for this can be found on the GOV.UK Frontend website.

CSS

Import all the CSS

To import all the Sass rules from CCS Frontend, add the following to your Sass file:

@import "node_modules/ts-ccs-frontend/ccs/all";

Import specific parts of the CSS

If you want to improve how quickly your service’s pages load in browsers, you can import only the Sass rules you need.

  1. Import node_modules/ts-ccs-frontend/ccs/base in your Sass file.
  2. Import the parts of the CSS you need.

For example, add the following to your Sass file to import the CSS you need for a basic CCS page.

@import "node_modules/ts-ccs-frontend/ccs/base";

@import "node_modules/ts-ccs-frontend/ccs/components/footer/index";
@import "node_modules/ts-ccs-frontend/ccs/components/header/index";

You can remove lines that import parts of the CSS you do not need.

You do not need /index at the end of your component imports if you’re using Dart Sass, LibSass 3.6.0 or higher, or Ruby Sass 3.6.0 or higher.

Import an individual component’s CSS using a single import

You can also import a component and all its dependencies without importing node_modules/ts-ccs-frontend/ccs/base first.

To import the header component for example, add the following to your Sass file:

@import "node_modules/ts-ccs-frontend/ccs/components/header/header";

Simplify Sass import paths

If you want to make Sass import paths shorter, add node_modules/ts-ccs-frontend to either your:

  • Sass load paths
  • assets paths if you use Ruby in your project

You can then import without using node_modules/ts-ccs-frontend/ in your import path. For example:

@import "ccs/components/header/header";

Override with your own CSS

If you want to override CCS Frontend’s styles with your own styles, @import CCS Frontend’s styles before your own Sass rules.

Silence deprecation warnings from dependencies in Dart Sass

If you’re using Dart Sass 1.33.0 or greater, you may see deprecation warnings when compiling your Sass. For example:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

We’re currently unable to fix these deprecation warnings without breaking support for LibSass. However, you can silence the warnings caused by CCS Frontend and other dependencies. Make sure you’re using Dart Sass 1.35.0 or greater, and then if you’re:

You’ll still see deprecation warnings if you’re using / for division in your own Sass code.

Image assets

To use the image assets from CCS Frontend, you can either:

  • serve the assets from the CCS Frontend assets folder - recommended
  • copy the image files into your application

Serve the assets from the CCS Frontend assets folder - recommended

Set up your routing so that requests for files in <YOUR-SITE-URL>/assets are served from /node_modules/ts-ccs-frontend/ccs/assets.

For example if you’re using express.js, add the following to your app.js file:

var path = require('path');
app.use('/assets', express.static(path.join(__dirname, '/node_modules/ts-ccs-frontend/ccs/assets')))

Copy the image files into your application

If you decide to copy the assets instead, copy the:

  • /node_modules/ts-ccs-frontend/ccs/assets/images folder to <YOUR-APP>/assets/images

You should use an automated task or your build pipeline to copy the files, so your project folder stays up to date when we update CCS Frontend.

If you have your own folder structure

If you use a different folder structure than <YOUR-APP>/assets/images, you can set Sass variables so that Sass builds the CSS to point to your folders.

Set $ccs-images-path before the @import line in your Sass file. For example:

$ccs-images-path: "/<YOUR-IMAGES-FOLDER>/";

You can also use your own function to generate paths, for example if you’re using asset-pipeline in sass-rails. Set the $ccs-image-url-function variable to the name of your function.

JavaScript

To import the JavaScript from CCS Frontend, you can either:

  • add CCS Frontend’s JavaScript file to your HTML
  • import the JavaScript using a bundler like Webpack

Add the JavaScript file to your HTML

If you decide to add the JavaScript to your HTML, first either:

  • set up your routing so that requests for the JavaScript file are served from node_modules/ts-ccs-frontend/ccs/all.js
  • copy the node_modules/ts-ccs-frontend/ccs/all.js file into your application

Then import the JavaScript file before the closing </body> tag of your HTML page or page template, and run the initAll function to initialise all the components.

<body>
...
  <script src="<YOUR-APP>/<YOUR-JS-FILE>.js"></script>
  <script>
    window.CCSFrontend.initAll()
  </script>
</body>

Import JavaScript using a bundler

If you decide to import using a bundler, use import to import all of CCS Frontend’s components, then run the initAll function to initialise them:

import { initAll } from 'ts-ccs-frontend'
initAll()

If you’re using a bundler that uses CommonJS like Browserify, you should use require:

const CCSFrontend = require('ts-ccs-frontend')
CCSFrontend.initAll()

Select and initialise part of a page

If you update a page with new markup, for example a modal dialogue box, you can run initAll with a scope parameter to initialise the components on part of a page.

For example:

  <script>
    var $modal = document.querySelector('.modal')
    window.CCSFrontend.initAll({
      scope: $modal
    })
  </script>

If your JavaScript is not working properly

If your site has a Content Security Policy (CSP), the CSP may block the inline JavaScript in the page template. You may see a warning like the following in your browser’s developer tools:

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'".

To unblock inline JavaScript, do one of the following:

  • include a hash (recommended)
  • use a nonce

Make sure you understand the security implications of using either option, as wrong implementation could affect your service’s security. If you’re not sure what to do, talk to a security expert.

Use a hash to unblock inline JavaScript

You can unblock inline JavaScript by including the following hash in your CSP:

sha256-+6WnXIl4mbFTCARd8N3COQmT3bJJmo32N8q8ZSQAIcU=

You do not need to make any changes to the HTML.

Learn more about Content Security Policy on the MDN Web Docs website.

Use a nonce attribute to unblock inline JavaScript

If you're unable to use the hash in your CSP, you can also use a nonce on inline JavaScript.

However, you should provide a nonce that hostile actors cannot guess. Otherwise, they could easily find a way around your CSP.

You should use a value which is:

  • unique for each HTTP response
  • generated using a cryptographically-secure random generator
  • at least 32 characters for hex, or 24 characters for base64

Make sure your script tags do not have any untrusted or unescaped variables.

If you're using the Nunjucks page template, you can add the nonce attribute by setting the cspNonce variable.