Install directly in browsers using a free and highly available CDN:
Install using npm
Frontend developers can use npm to download sgds and use it as a dependency in their projects. Using npm is especially useful when using a module bundler or build tool, such as Webpack.
- Install Node.js, which includes an installation of npm.
Install sgds by navigating to your site's codebase folder using
your terminal and run:
npm install sgds-govtech
This will download sgds into
node_modules/@govtechsg/sgdsin your current folder:* SGDS Sass source files, for advanced usage.
- If you use a module bundler like Webpack, import sgds in your entry point: *Note that usage with frameworks such as React, Vue or Angular is discouraged since they manipulate the DOM in their own environments. Framework-specific implementations are in early development and can be found at sgds-govtech-react and sgds-govtech-vue .
The zip package contains the following files:
- Extract and copy the files and folders into a relevant place in your project’s code base
sgds/sass/...(source files for advanced usage)
Content Management Systems
Install Sitefinity Resource Package
All you have to do is copy the
Sitefinity resource package folder and paste into your
ProjectName / ResourcePackage folder and rebuild the
The Sitefinity DesignSystem resource package consist of:
SGDS Icon Library
SGDS Grid System Template
- Section template
Master layout with the
DSS compliant Mandatory components
- Gov.sg masthead
Navigation bar widget
Install WordpressDownload Wordpress Theme
Adding the Wordpress theme to your project:
- Log in to the WordPress Administration Panels.
- Select the Appearance panel, then Themes.
- Use the Upload link in the top links row to upload the Wordpress theme that you have previously downloaded to your machine.
- To activate the Theme click the Activate button.