Overview
Advanced customisation with Sass
We highly recommend that you customise your site, by extending base SGDS classes using separate CSS or Sass files.
This way, your site will automatically inherit non-conflicting fixes and improvements made to SGDS without breaking existing styles.
Here are the items you’ll need:
Note: Links that contain the JS tags contain interactive elements that require JavaScript.
If you are using a JavaScript framework, check out the framework-specific helper libraries:
Component reference
Component reference is helpful for you to implement layouts, elements and components, using our CSS class and modifiers.
Each page provides you with comprehensive usage instructions, examples and guidelines.
Standard Components
Standard components aid users in basic site identification and navigation. They should be present in all .gov.sg websites as stated in the Digital Service Standards.
Layout
CSS classes are used for composing your site layout. Over here, you can also find the breakpoints that we use for desktop and mobile devices.
General
Common components that can be used individually or grouped to form patterns and templates. For example, you can group the hero with cards to build a landing page.
Form
Form components and guidelines for the collection of user input.
Helpers
Helper classes to help you alter the style of almost any component.