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/sgds-govtech@1.2.3/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/sgds-govtech@1.2.3/js/sgds.js"></script>
...
</body>
$ npm i sgds-govtech
import "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 devserver
Pull requests welcome!
v1.1.0
Released since 07 June 2019
-
Side Navigation
Deprecated
Side navigation with left borderNew
Added Collaspable Side Navigation
-
Table
New
Added Horizontal tableNew
Added Vertical header table
-
Hero
New
Added Hero with Dropdown ButtonNew
Added Hero with Hoverable Dropdown ButtonNew
Added Hero with Search Bar
-
Button
New
Added Secondary buttons
-
Form
New
Added example of a feedback form
-
Notification
New
Added Default notification (with and without icon)New
Added Default Toast notification (with and without icon)
-
Tab
New
Added modifiersis-centered
,is-small
,is-medium
,is-large