CSS

Cascading style sheets (CSS) are used to style web content, for example setting text sizes, colours or spacing.

The prototype kit comes with the standard styles from NHS frontend (in GitHub).

However, if you need to modify existing styles or add new ones, you can do so by adding your own CSS.

The prototype kit uses Sass, which adds extra features to CSS.

Adding CSS used on multiple pages

If your CSS applies to multiple pages, add it to the bottom of the file at app/assets/sass/main.scss.

Do not edit the file at public/assets/sass/main.css because it’s deleted and rebuilt every time you make a change to your prototype.

For example, to make all your second level headings pink:

// Use the NHS.UK frontend library
@use "nhsuk-frontend/dist/nhsuk" as * with (
  $nhsuk-assets-path: "/nhsuk-frontend/assets/"
);

// Add your custom CSS/Sass styles below.

h2 {
  color: pink;
}

Using multiple files

If you have a very long main.scss file, you can split it up into multiple files and include them in main.scss using @forward.

Use an underscore (_) at the start of the filenames, for example, _admin.scss.

Load this file into your main.scss file without the underscore:

// Import NHS.UK frontend library
@use "nhsuk-frontend/dist/nhsuk" as * with (
  $nhsuk-assets-path: "/nhsuk-frontend/assets/"
);

// Add your custom CSS/Sass styles below.
@forward "admin";

Adding CSS to individual pages

Styles can also be added to individual page templates by using a <style> tag:

{% block bodyStart %}
<style type="text/css">
  body {
    background-color: pink;
  }
</style>
{% endblock%}