HTML & CSS

SGDS library is built on Bootstrap 5, it offers CSS styles directly applied to HTML elements and CSS tokens for modular customisation.

Step 1: Install SGDS library

@govtechsg/sgds uses bootstrap-icons for certain components like Form but it is not ship with it. Install bootstrap-icons or use CDN if you need it. Please refer to bootstrap-icons for usage instructions.

Method 1: Local installation

npm i @govtechsg/sgds bootstrap-icons

Import SGDS style library and bootstrap icons in your entry point

import "@govtechsg/sgds/css/sgds.css";
import "bootstrap-icons/font/bootstrap-icons.css";

If you plan to use components that require interactions e.g. accordion and tooltips, you would need to import the javascript file from bootstrap library, as shown below, on top of the SGDS style library.

import * as bootstrap from 'bootstrap';

Method 2: Using CDN

Include this code into your applications index.html to load the SGDS style library and the javascript file

<head>
  ...
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@govtechsg/sgds@2.2.0/css/sgds.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
  ...
</head>

<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
</body>

Step 2: Start building your application

There are ready made components, patterns, layouts and templates to use. You may refer to the components page, patterns page, layouts page or templates page to copy the relevant HTML & CSS code.

Last updated 28 May 2024