SASS
Like Bootstrap 5, SGDS provides style customisation through SASS source files. For advanced use of variables, maps, mixins and functions, please refer to Bootstrap's documentation.
Pre-requisites
You would need to install SASS. Use SASS to customise how SGDS looks and behaves in your project.
Step 1: Local installation
npm i @govtechsg/sgds
Step 2: Import components
In your custom.scss, you can choose to include all sgds-theme files or pick the components you need. However do note that are some requirements and dependencies across the components as shown in the code snippet in method 2.
Method 1: Import whole SASS library
Code snippet to import the entire SASS library.
// Custom.scss
// Option A: Include all of SGDS theme
// Include any default variable overrides here
@import "~@govtechsg/sgds/sass/sgds.scss";
// Then add additional custom code here
Method 2: Import individual SASS component styling file
Below is an example of how you can include parts of SGDS
/// Custom.scss
// Option B: Include parts of SGDS
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "~@govtechsg/sgds/sass/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required SGDS stylesheets
@import "~@govtechsg/sgds/sass/variables";
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import "~@govtechsg/sgds/sass/mixins";
@import "~@govtechsg/sgds/sass/root";
// 6. Optionally include any other parts as needed
@import "~@govtechsg/sgds/sass/utilities";
@import "~@govtechsg/sgds/sass/reboot";
@import "~@govtechsg/sgds/sass/type";
@import "~@govtechsg/sgds/sass/images";
@import "~@govtechsg/sgds/sass/containers";
@import "~@govtechsg/sgds/sass/grid";
@import "~@govtechsg/sgds/sass/helpers";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "~@govtechsg/sgds/sass/utilities/api";
// 8. Add additional custom code here
If you are using Webpack, u can omit the node_modules directory
@import "~@govtechsg/sgds/sass/accordion";
Step 3: Start building your application
There are ready made components, patterns, layouts and templates to use. You may refer to the components page, patterns page, layouts page or templates page to copy the relevant HTML & CSS code.
Customisation (optional)
You can find the complete list of variables inside @govtechsg/sgds/sass/_variables.scss or in our SGDS github repo
Here's an example that changes the background-color and color for the body when importing and compiling sgds-theme via npm:
// Required
@import "~@govtechsg/sgds/sass/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
@import "~@govtechsg/sgds/sass/variables";
// Optional components here
@import "~@govtechsg/sgds/sass/accordion";
@import "~@govtechsg/sgds/sass/alert";
@import "~@govtechsg/sgds/sass/badge";
@import "~@govtechsg/sgds/sass/breadcrumb";
// etc
Last updated 04 June 2024