Youforce Design System Styles

Youforce Design System Styles is based on the Visma Unified Design (VUD) system, forked and maintained for Youforce products.

Original VUD documentation: For the upstream VUD release notes and documentation, go to https://documentation.vud.visma.com/weblibrary/latest/index.php.

Installation

Install the styles package via NPM:

npm i @youforce/design-system-styles

Install the icons package:

npm i @youforce/design-system-icons

Documentation

View the component library and documentation in Storybook:

Youforce Design System Storybook

Tokens

Spacing

After importing the library CSS, spacing tokens are available as CSS custom properties:

.card {
	padding: var(--spacing-16);
	gap: var(--spacing-8);
}

About this fork

This repository is a fork of the Visma Unified Design (VUD) library, maintained specifically for Youforce products. The styles themselves remain compatible with VUD v1.8.4.

Upstream VUD resources:

Main VUD HUB address

The main documentation hub is located at: vud.visma.com

VUD Storybook

The original VUD components can be viewed at: VUD Storybook

VUD on GitHub

Source files (Sass (scss) format) are available at https://github.com/Visma-Unified-Design/vud

VUD on NPM

The original VUD releases are available through NPM:

npm install @vismaux/vud

Changelog

See CHANGELOG.md for details on this fork.

For the upstream VUD changelog, see: https://github.com/Visma-Unified-Design/vud/blob/main/CHANGELOG.md

JS files to include

We provide only a few js files on request for some components that we have in the library and are the scripts that we use to exemplify the way certain components should work.

Fonts

By default, fonts (Open Sans) are loaded from Google Fonts, but also locally as a fallback (fonts folder). In addition, in some cases Ubuntu font is used, which is Visma's corporate font. This font is loaded from Google Fonts, font.visma.com or from fonts folder.

Other files

The graphics (img folder).