A universal design system used across Hafslund nett


11210.0.22 years ago4 years agoMinified + gzip package size for @hafslundnett/hdd-style in KB


Hafslund digital designsystem (Hdd)

npm version npm size Commitizen friendly githubActions

'Hafslund digital designsystem' is a design system that can be used across projects while maintaining consistancy. The project follows strict naming guidlines, your can read more about them in the wiki. Every component should be able to run in an isolated environment without depending on parent classes/elements.

For every used front-end framework a separate 'components' library should be created. Listed below are the already existing libraries. If you want to add your library to this list, please create a pull request.

Framework Version Repo
Angular 6.x 🚧 Alpha Github
Vue 2.x 🚧 Alpha Github


HDD-style is documented along with it´s corresponding components library(HAL) at:

The showoff website include all documentation off components with related examples. The showoff website can be generated/started by running:

  • yarn
  • yarn start

You need to have node and yarn installed in order to start the showoff website.

Publish new version

You need access to the Hafslund Nett NPM organisation

  • yarn build
  • npm publish

Code of conduct

We will behave ourselves if you behave yourselves. For more details see our code of conduct.


Please read through our contributing guidelines.


This project will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:


Releasing new versions and updating CDN

Azure CDN is used to host fonts and icons from the cdn/ folder. To update the contents of

  1. Check in the new files under cdn/.
  2. If this will be included in a new version of the package: Update the package version in package.json and the CDN-url in variables/fontawesome/_variables.scss. The three numbers after "hdd-style-release-" should match the package version. If the package version is 1.0.2, then the url bound to $fa-font-path should be https://hafslundnett.azureedge.net/hdd-style-release-1-0-2/icons.
  3. Check in and get your pull request accepted into develop.
  4. Create a new release-branch and push it to GitHub. The name of the branch should be on the format release/1.0.2, given that the package version is 1.0.2. This will start the hdd-style.release build, and upload the contents of cdn/ to Azure CDN.
  5. Continue to release the new version of hdd-style by packaging and uploading the new version to npm manually.
  6. When everything is ok, merge the release-branch into master, and draft a new release on GitHub.

Note: This process has room for improvements.


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.