SGDS is a frontend framework that aims to provide a beautiful common visual language and user experience for visitors of Singapore Government websites. It provides designers and developers with customisable components to help them easily implement the Singapore Government's Digital Service Standards.
<head>
...
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/css/sgds.css"
/>
...
</head>Certain components of SGDS makes use of JavaScript, with jQuery as an external dependency. If you only need the visual parts of SGDS, you do not need to import this.
<body>
...
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/sgds.js"></script>
...
</body>$ npm i sgds-govtechimport "sgds-govtech/css/sgds.css";
import "sgds-govtech/js/sgds"; // Do not use with other web frameworks**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-react and sgds-govtech-vue.
See docs.
- Ruby, Bundler, then Jekyll
- Nodejs, NPM
To spin up a live-reloading Jekyll + Webpack development server at localhost:4000:
$ npm install
$ npm run devserverPull requests welcome!
v1.1.0
Released since 07 June 2019
-
Side Navigation
DeprecatedSide navigation with left borderNewAdded Collaspable Side Navigation
-
Table
NewAdded Horizontal tableNewAdded Vertical header table
-
Hero
NewAdded Hero with Dropdown ButtonNewAdded Hero with Hoverable Dropdown ButtonNewAdded Hero with Search Bar
-
Button
NewAdded Secondary buttons
-
Form
NewAdded example of a feedback form
-
Notification
NewAdded Default notification (with and without icon)NewAdded Default Toast notification (with and without icon)
-
Tab
NewAdded modifiersis-centered,is-small,is-medium,is-large