Developers

Gov Design System CE simplifies the implementation and utilization of its components across various frameworks or even without any framework. This is achieved through the utilization of standardized web platform APIs and Web Components.

Installation ​

Each of the usage options installs the following packages.

• @gov-design-system-ce/styles
• @gov-design-system-ce/icons
• @gov-design-system-ce/fonts

Styles ​

To ensure proper functionality, the following styles must be imported from the @gov-design-system-ce package into your project.

/* Variables. */
@import "@gov-design-system-ce/styles/lib/tokens.css";
/* General settings. */
@import "@gov-design-system-ce/styles/lib/styles.css";
/* Styles for basic layout and containers. */
@import "@gov-design-system-ce/styles/lib/layout.css";
/* Styles of individual components. */
@import "@gov-design-system-ce/styles/lib/components.css";
/* Separated styles for individual design. */
@import "@gov-design-system-ce/styles/lib/components/*.css";

Icons ​

Icons from the @gov-design-system-ce/icons package must be copied into your project directory.

For instance, the NPM copyfiles package can handle it.

npm install copyfiles --save-dev

{
  "scripts": {
    "copy:icons": "copyfiles --flat ./node_modules/@gov-design-system-ce/icons/lib/components/* YOUR_PATH_TO_ICONS && copyfiles --flat ./node_modules/@gov-design-system-ce/icons/lib/complex/* YOUR_PATH_TO_ICONS"
  }
}

Fonts ​

It may be necessary to copy individual fonts from the @gov-design-system-ce/fonts package into your project directory and reference them accordingly. It depends on chosen bundler.

{
  "scripts": {
    "copy:fonts": "copyfiles --flat ./node_modules/@gov-design-system-ce/fonts/lib/* YOUR_PATH_TO_ASSETS"
  }
}

Next, link the fonts to your project. The example below uses SCSS. However, you can use any preprocessor.

/* The public path to your fonts. */
$gov-font-path: "/assets/fonts";
$version: "0.0.1";
@import "@gov-design-system-ce/fonts/libs/roboto";

Config ​

The design system offers a basic configuration to influence its behavior.

window.GOV_DS_CONFIG = {
    canValidateWcagOnRender: true,
    // ...
}

canValidateWcagOnRender ​

Default value: false

When set to true, the components will validate their accessibility settings and print any errors to your console browser. Be sure to have this option turned off in production mode.

iconsLazyLoad ​

Default value: true

Icons in the gov-icon component will be downloaded and displayed only when they are displayed in the viewport.

iconsPath ​

Default value: ./assets/icons

This setting can be adjusted depending on your project's directory structure.

Use of the Gov Design System CE ​

Supported browsers ​

• Edge - last 3 versions
• Chrome - last 10 versions
• Firefox - last 10 versions
• Safari - last 3 versions
• iOS - last 3 versions
• Android - version 6 and later