Installation

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.11/css/sgds.css"
    />
    <!-- Or unpkg -->
    <link rel="stylesheet" href="https://unpkg.com/sgds-govtech@1.3.11/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.11/js/sgds.js"></script>
    <!-- Or unpkg -->
    <script src="https://unpkg.com/sgds-govtech@1.3.11/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, such as Webpack.

  • Install Node.js, which includes an installation of npm.
  • Install sgds by navigating to your site's codebase folder using your terminal and run: 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/
      ├── * sgds/sass/
    * SGDS Sass source files, for advanced usage.
  • 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.