Getting started as a Developer

Helsinki Design System provides a collection of ready-made components for building accessible websites and applications that are in line with the Helsinki City Design Language.

The approved implementation techniques in the City of Helsinki are React, WordPress, and Drupal. Currently, HDS offers implementation in HTML and React only. If your project is using WordPress or Drupal, please refer below for more information.

Getting started

1. Have a look at Helsinki Design System in GitHub. It is recommended to read the repository README first and then take a peek at the hds-react and hds-core packages.
2. Explore the Components documentation and HDS storybook to see what is available and how to use them.
3. If you want to contribute, see the Contributing page for more information. Please follow the Git Feature Branch Workflow.
4. Take a look at Develop with Helsinki site for practical details for developing open source code for the City of Helsinki.

Core styles

The Core package provides Helsinki brand colours, typography, and base styles as CSS styles, and variables. Basic components are also available in HDS Core.

React components

Helsinki Design System React library provides a collection of React components for building websites and applications. Using these components will help developers to rapidly create user interfaces that are in line with the Helsinki City Design Language as well as accessible and consistent in behaviour across applications.

Using the React component library

Install the package

yarn add hds-react

Import components

import { TextInput } from "hds-react";

or

import { TextInput } from "hds-react/components/TextInput";

Server-side rendering

Using server-side rendering? Check our guideline on how to use HDS React components with server-side rendering.

Supporting disabled JavaScript

JavaScript is required to be enabled in the web browser to guarantee full functionality of Helsinki city's web services. Refer to the Noscript guide on how to provide a fallback.

WordPress and Drupal

While HDS does not currently offer WordPress or Drupal implementations, HDS cooperates with multiple WordPress and Drupal projects in the City of Helsinki. Many of these projects have already implemented HDS components which can be reused in other projects.

If your project is using either WordPress or Drupal, please contact ketu@hel.fi to learn about available implementations that follow HDS.