Skip to main content
LocalTapiola Turva

CSS Framework #

Get started with Duet Design System’s CSS Framework that includes a wide range of shorthand utility classes to modify an element’s appearance in your own application.

Duet CSS Framework is an NPM package for LocalTapiola and Turva that makes it easy to install and use Duet’s Design Tokens through simple CSS utility classes. You can use it together with other CSS frameworks as its CSS selectors are prefixed with .duet- to prevent collisions.

Installation #

Before moving further, please make sure you have Node.js installed on your machine. You can install the latest version through their website.

If you’re planning on using Duet CSS in a project that doesn’t yet use Node Package Manager, you’ll have to first create a package.json file. To do this, run npm init and follow the steps provided. Once finished, you can install Duet Fonts by following the instructions below.

Install using NPM #

Run in your project or website root directory (where package.json lives):

npm install @duetds/css

Install using Yarn #

Run in your project or website root directory (where package.json lives):

yarn add @duetds/css

Usage #

Once you’ve installed the NPM package, you can copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS:

<link rel="stylesheet" href="[path-to-directory]/duet.min.css" />

The above example is assuming that you’ve set up a copy task similar to the one described in our Typography guidelines. While technically possible, we don’t recommended to load this file directly from the node_modules.

Alternatively, CSS can also be served from a CDN such as JSDelivr or Unpkg. Simply use the @duetds/css npm package name and specify a version in the URL like the following (@latest):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/css@latest/lib/duet.min.css" />

<link rel="stylesheet" href="https://unpkg.com/@duetds/css@latest/lib/duet.min.css" />

Import in SCSS #

To import the CSS Framework in SCSS, include this in the beginning of your main SCSS partial:

// Import CSS framework
@import "../../node_modules/@duetds/css/lib/duet.min";

You may need to edit the path shown above depending on your setup. If you’re using Webpack you can simplify the above to:

// Import CSS framework
@import "~@duetds/css/lib/duet.min";

Color utilities #

Each token in the Design Tokens documentation translates directly to a color utility class. For example, to change the color of a text or a background, you can use the following classes:

<!-- To change a text color, use -->
<p class="duet-color-primary">Text</p>
<p class="duet-color-secondary">Text</p>
<p class="duet-color-primary-turva">Text</p>
<p class="duet-color-secondary-turva">Text</p>

<!-- To change a background color, use -->
<div class="duet-bg-primary"></div>
<div class="duet-bg-secondary"></div>
<div class="duet-bg-primary-turva"></div>
<div class="duet-bg-secondary-turva"></div>

<!-- To change a fill of an SVG, use -->
<svg class="duet-fill-primary"></svg>
<svg class="duet-fill-secondary"></svg>
<svg class="duet-fill-primary-turva"></svg>
<svg class="duet-fill-secondary-turva"></svg>

For a list of all available colors, see Design Tokens documentation. All colors listed in the documentation translate to color, background and SVG fill utility classes.

Spacing utilities #

Duet’s CSS Framework includes a wide range of shorthand margin and padding utility classes to modify an element’s appearance. The classes are named using the format duet-{property}{sides}-{size}.

Where property is one of:

Where sides is one of:

Where size is one of:

Examples #

<div class="duet-pl-x-small">
  Element with x-small left padding.
</div>

<div class="duet-mx-medium">
  Element with medium left and right margin.
</div>

<div class="duet-p-large">
  Element with large padding on all sides.
</div>

For a list of specific values that these sizes represent, see Design Tokens documentation.

Typography utilities #

Duet’s CSS Framework also allows you to set typographic settings like font-size, font-family, font-weight, letter-spacing and line-height via the following utility classes:

<p class="duet-font-family-heading">.duet-font-family-heading</p>
<p class="duet-font-family-heading-turva">.duet-font-family-heading-turva</p>
<p class="duet-font-family-text">.duet-font-family-text</p>
<p class="duet-font-family-text-turva">.duet-font-family-text-turva</p>

<p class="duet-letter-spacing-heading">.duet-letter-spacing-heading</p>

<p class="duet-font-weight-normal">.duet-font-weight-normal</p>
<p class="duet-font-weight-semi-bold">.duet-font-weight-semi-bold</p>
<p class="duet-font-weight-bold">.duet-font-weight-bold</p>
<p class="duet-font-weight-extra-bold">.duet-font-weight-extra-bold</p>

<p class="duet-font-size-x-small">.duet-font-size-x-small</p>
<p class="duet-font-size-small">.duet-font-size-small</p>
<p class="duet-font-size-medium">.duet-font-size-medium</p>
<p class="duet-font-size-large">.duet-font-size-large</p>
<p class="duet-font-size-x-large">.duet-font-size-x-large</p>
<p class="duet-font-size-xx-large">.duet-font-size-xx-large</p>
<p class="duet-font-size-xxx-large">.duet-font-size-xxx-large</p>
<p class="duet-font-size-xxxx-large">.duet-font-size-xxxx-large</p>

<p class="duet-line-height-x-small">.duet-line-height-x-small</p>
<p class="duet-line-height-small">.duet-line-height-small</p>
<p class="duet-line-height-medium">.duet-line-height-medium</p>

Gradient utilities #

Duet’s CSS Framework includes gradient utilities for creating consistent background gradients for both LocalTapiola and Turva. Gradients can be added to <html> element via the following utility classes:

<html class="duet-bg-gradient"></html>
<html class="duet-bg-gradient duet-theme-turva"></html>

Other utilities #

Other provided utility classes include:

Troubleshooting #

If you experience any issues while getting set up with Duet CSS, please head over to the Support page for more guidelines and help.