Singapore Government Design System

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.

Installation

Browsers

CSS

<head>
    ...
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/sgds-govtech@1.2.3/css/sgds.css"
    />
    ...
</head>

JavaScript

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

$ npm i sgds-govtech

Webpack

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.

Usage

See docs.

Development

Requirements

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!

Patch Notes

v1.1.0

Released since 07 June 2019

Side Navigation
- Deprecated Side navigation with left border
- New Added Collaspable Side Navigation
Table
- New Added Horizontal table
- New Added Vertical header table
Hero
- New Added Hero with Dropdown Button
- New Added Hero with Hoverable Dropdown Button
- New 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 modifiers is-centered, is-small, is-medium , is-large

weijunyu / sgds