Installing the Design System

The Design System provides developers a collection of reusable HTML and CSS to build websites. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work

Install using npm

npm is a package manager for Node based projects. Design System maintains a package for you to utilize the compiled files on your project.

  • 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 3.10.10
  • To install the sgds-govtech package, navigate to your site folder using your terminal and run this command npm install sgds-govtech --save
  • This will generate node_modules/sgds-govtech in your site folder
    site/node_modules/sgds-govtech/
        ├── sass/
        ├── css/
        ├── fonts/
        ├── js/
  • The SASS(scss) source file is located here site/node_modules/sgds-govtech/sass/sgds.scss
  • Import the sgds.scss file into your own sass folder. Below is an example of how you might setup your main Sass file:
    @import site/node_modules/sgds-govtech/sass/sgds
        //your own css code..
  • You can find more information here on how to compile SASS into CSS

Install manually

We provide both minified CSS and the JavaScript files that you can use in a production environment or reduce the file size of your downloaded assets.

Download Design System 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
  • 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
  • The sgds SASS(scss) source file is located here site/node_modules/sgds-govetech/sgds.scss
  • For css, place the link tag between the html head tag
    <link rel="stylesheet" href="sitePath/css/sgds.css">
  • For js, place the script tag between the html head tag
    <script src="sitePath/js/sgds.js"></script>

Install the Sitefinity Theme

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

 Download Sitefinity package

All you have to do is copy the Sitefinity DesignSystem 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

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Tell us more