Customise SGDS with Sass

Overview

Use Sass to customise how SGDS looks and behaves in your project


Working with SGDS's source files

If you installed sgds with NPM

The Sass source files for sgds can be found under node_modules/sgds-govtech/sass:

site-folder/
├── scss
│   └── custom.scss
└── node_modules/
    └── sgds-govtech/sass/
        └── sgds.scss

If you manually downloaded SGDS

If you've manually downloaded the Sass files and are not using a package manager, you can set up your code with the following folder structure:

site-folder/
├── scss
│   └── custom.scss
└── sgds/sass/
	└── sgds.scss

Importing and overriding SGDS styles

Import all styles:

// Version 1.0.24
@charset "utf-8";

// Override SGDS defaults
$primary: black;
$secondary: darkorange;
$warning: red;

// This must be overridden if you want to use icons! See below for more details
$sgds-font-path: "../../../fonts";

// Import all of sgds
@import "../node_modules/sgds-govtech/sgds/sass/sgds.scss";

// If using Webpack
@import "~sgds-govtech/sgds/sass/sgds.scss";

or import individual components as needed:

@charset "utf-8";

$primary: black;
$secondary: darkorange;
$warning: red;

// This must be overridden if you want to use icons! See below for more details
$sgds-font-path: "../../../fonts";

// Required sass files
@import "../node_modules/sgds-govtech/sgds/sass/sgds-customise/all";
@import "../node_modules/sgds-govtech/sgds/sass/sgds-base/all";

// Optional
@import "../node_modules/sgds-govtech/sgds/sass/sgds-components/sgds-masthead";
@import "../node_modules/sgds-govtech/sgds/sass/sgds-components/sgds-navbar";
@import "../node_modules/sgds-govtech/sgds/sass/sgds-components/sgds-side-navigation";
@import "../node_modules/sgds-govtech/sgds/sass/sgds-components/sgds-footer";
@import "../node_modules/sgds-govtech/sgds/sass/sgds-components/sgds-button";
@import "../node_modules/sgds-govtech/sgds/sass/sgds-components/sgds-accordion";

// If using Webpack
@import "~sgds-govtech/sgds/sass/...";

Overriding $sgds-font-path to properly load icons

If you are building a single-page application (such as React or Vue) and use Webpack to compile your Sass files into inline styles (using style-loader), you must override the $sgds-font-path variable when importing all styles (sgds/sass/sgds.scss) or sgds-icons (sgds/sass/sgds-icons). Otherwise you may encounter a build error stating that the path to the ../fonts folder cannot be resolved.

Explanation

When importing SGDS's Sass, Webpack has to resolve its fonts folder relative to the node module's sgds-icons folder in order to load inline styles correctly. This usually means that you would need to point Webpack to the correct fonts folder manually by overriding $sgds-font-path. For instance, with the following folder structure:

node_modules/
└── sgds-govtech/
    ├── fonts/
    │   └── font files
    └── sgds/
        └── sass/
            └── sgds-icons/

The path from sgds-icons/ to the fonts/ folder is ../../../fonts, which would be what $sgds-font-path must be set to.


The following default SGDS variables can be overridden:

Variable Default Value Type
$primary
#6037b3
Colours
$secondary
#3e69be
Colours
$yellow
#f5a623
Colours
$green
#008649
Colours
$cyan
#008196
Colours
$blue
#0070F2
Colours
$red
#d0021b
Colours
$family-sans-serif
"Lato", BlinkMacSystemFont, -apple-system, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif
Typography
$size-0
5.25rem
Typography
$size-1
3.375rem
Typography
$size-2
2.75rem
Typography
$size-3
2.8125rem
Typography
$size-4
1.625rem
Typography
$size-5
1.375rem
Typography
$size-6
1.3rem
Typography
$size-7
1.25rem
Typography
$size-8
1rem
Typography
$weight-light
300
Typography
$weight-normal
400
Typography
$weight-medium
500
Typography
$weight-semibold
600
Typography
$weight-bold
700
Typography
$weight-extrabold
800
Typography
$weight-black
900
Typography
$gap
32px
Responsiveness
$tablet
769px
Responsiveness
$desktop
960px + 2 * $gap
Responsiveness
$widescreen
1152px + 2 * $gap
Responsiveness
$fullhd
1344px + 2 * $gap
Responsiveness