Install directly in browsers using a free and highly available CDN:
CSS
<head>
...
<!-- jsDelivr --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@govtechsg/sgds@1.4.0/css/sgds.css"/><!-- Or unpkg --><linkrel="stylesheet"href="https://unpkg.com/@govtechsg/sgds@1.4.0/css/sgds.css"/>
...
</head>
JavaScript
Certain components of SGDS make use of
JavaScript, with jQuery as an external dependency. If you only need the
visual parts of SGDS (i.e. css), you do not need to import the following.
<body>
...
<!-- Make sure jQuery is loaded before sgds.js --><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><!-- jsDelivr --><script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds@1.4.0/js/sgds.js"></script><!-- Or unpkg --><script src="https://unpkg.com/@govtechsg/sgds@1.4.0/js/sgds.js"></script>
...
</body>
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/sgds in your current folder:
If you use a module bundler like Webpack, import sgds in your entry point:
import"@govtechsg/sgds/css/sgds.css";import"@govtechsg/sgds/js/sgds";// Do not use with other web frameworks!
*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
.
Install manually
You can download minified sgds CSS and JavaScript files and host them yourself
in your production environment.
Extract and copy the files and folders into a relevant place in your
project’s code base
Reference the CSS and JavaScript files in each HTML page or templates in
your project, same as above. Note that
certain components of SGDS make use of
JavaScript, with jQuery as an external dependency.
<head>
...
<linkrel="stylesheet"href="/my/static/files/css/sgds.css"/></head><body>
...
<!-- Make sure jQuery is included before sgds.js --><script src="/my/static/files/jquery-3.5.1.min.js"></script><script src="/my/static/files/js/sgds.js"></script></body>
Open source
The SGDS source is written in Sass and JavaScript. Usage and development
instructions can be found at
https://github.com/govtechsg/sgds. Bug reports and pull requests are also welcome!