Getting started


Standard components for all gov.sg web services

As defined in the Digital Service Standards


Installing SGDS

Install directly in browsers using a free and highly available CDN:
CSS
<head>
    ...
    <!-- jsDelivr -->
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/sgds-govtech@1.3.7/css/sgds.css"
    />
    <!-- Or unpkg -->
    <link rel="stylesheet" href="https://unpkg.com/sgds-govtech@1.3.7/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.4.1.min.js"></script>

    <!-- jsDelivr -->
    <script src="https://cdn.jsdelivr.net/npm/sgds-govtech@1.3.7/js/sgds.js"></script>
    <!-- Or unpkg -->
    <script src="https://unpkg.com/sgds-govtech@1.3.7/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 for your frontend, such as Webpack.

  • Install Node.js here
  • To see if npm is installed, open your preferred command line tool and type in npm -v. This should print the npm version number that look something like this 6.10.0
  • To install the sgds-govtech package, navigate to your site's codebase folder using your terminal and run this command: npm install sgds-govtech
  • This will download sgds into node_modules/sgds-govtech in your current folder:
    site/node_modules/sgds-govtech/ 
      ├── css/
      ├── fonts/
      ├── js/
    You can then load these assets into your frontend projects.
  • If you use a module bundler like Webpack, import sgds in your entry point:
    import "sgds-govtech/css/sgds.css"; 
    import "sgds-govtech/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.

Download SGDS package

  • The zip package contains the following files:

    css/sgds.css

    js/sgds.js

    fonts/sgds-icons.svg

    fonts/sgds-icons.wott

    fonts/sgds-icons.ttf

    sgds/sass/...(source files for advanced usage)

  • 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>
        ...
        <link rel="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.4.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!


Content Management Systems

Install Sitefinity Resource Package

The Sitefinity resource package is in the pilot phase, your valuable feedback will help us in improving it.

 Download Sitefinity resource package

All you have to do is copy the Sitefinity resource package folder and paste into your ProjectName / ResourcePackage folder and rebuild the project.

The Sitefinity DesignSystem resource package consist of:

  1. SGDS Stylesheet
    /DesignSystem/assets/dist/css/sgds.css
  2. SGDS Javascript
    /DesignSystem/assets/dist/js/sgds.js
  3. SGDS Icon Library
    /DesignSystem/assets/dist/fonts/
  4. SGDS Grid System Template
    /DesignSystem/GridSystem/Templates
    • Section template
      sgds-section.html
    • Container template
      sgds-container.html
    • Grid Columns
      sgds-grid-x.html
  5. Master layout with the DSS compliant Mandatory components
    /DesignSystem/MVC/Views/Layouts
    • Gov.sg masthead
    • Navigation bar widget
      /DesignSystem/MVC/Views/Navigation/NavigationView.sgds.cshtml
    • Footer

Install Wordpress

The Wordpress theme is in the pilot phase, your valuable feedback will help us in improving it.

 Download Wordpress Theme

Adding the Wordpress theme to your project:

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. Use the Upload link in the top links row to upload the Wordpress theme that you have previously downloaded to your machine.
  4. To activate the Theme click the Activate button.