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/@govtechsg/sgds/sass:

site-folder/
├── scss
│   └── custom.scss
└── node_modules/
    └── @govtechsg/sgds/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/@govtechsg/sgds/sass/sgds.scss";

// If using Webpack
@import "~@govtechsg/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/@govtechsg/sgds/sass/sgds-customise/all";
@import "../node_modules/@govtechsg/sgds/sass/sgds-base/all";

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

// If using Webpack
@import "~@govtechsg/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/
└── @govtechsg/sgds/
    ├── 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.

For more information, see the sass-loader documentation

---

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