Customise SGDS with Sass

You can 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/...";

If you want to use icons, you must override the $sgds-font-path variable depending on your site or application's structure.

Overriding $sgds-font-path to properly load icons

Depending on how your site or application is hosted, you would need to correct the $sgds-font-path variable so that your generated css/styles can load SGDS icons correctly.


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