Get help Color blind mode Low vision mode

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 recommend to load this file directly from node_modules.

Alternatively, CSS can also be served from Duet’s Content Delivery Network. To use the @duetds/css package, you need to specify the name and the version in the URL like this:

<link rel="stylesheet" href="https://cdn.duetds.com/api/css/4.0.45/lib/duet.min.css" integrity="sha384-UoMJnpXiN8f7fKVnTzfKfyi7LzQlApQ+WTS9O3PXlYr6CO9yzou4glfsHV747f3v" crossorigin="anonymous" />

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-background-primary"></div>
<div class="duet-background-secondary"></div>
<div class="duet-background-primary-turva"></div>
<div class="duet-background-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>

<p class="duet-text-left">.duet-text-left</p>
<p class="duet-text-center">.duet-text-center</p>
<p class="duet-text-right">.duet-text-right</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>

List utilities #

Duet’s CSS Framework includes basic styles for unordered and ordered lists. To use them, add the following class to the list element:

<ul class="duet-list"></ul>
<ol class="duet-list"></ol>
  • Item
  • Item
  • Item
  1. Item
  2. Item
  3. Item

The duet-list class can also be used with a <dl>. This will result in a list that looks like the default variation <duet-list> with the difference of the <dt> labels having automatic width based on the widest label.

<dl class="duet-list">
  <dt>Nimi</dt>
  <dd>Lasse Mäkinen</dd>
  <dt>Osoite</dt>
  <dd>Kotikatu 23 A 4, 00220 Helsinki, Suomi</dd>
  <dt>Alueyhtiö</dt>
  <dd>Lähitapiola Keskinäinen Vakuutusyhtiö</dd>
</dl>
Nimi
Lasse Mäkinen
Osoite
Kotikatu 23 A 4, 00220 Helsinki, Suomi
Alueyhtiö
Lähitapiola Keskinäinen Vakuutusyhtiö

Duet’s CSS Framework includes a sticky footer utility which makes sure our Footer component always stays sticky at the bottom of the page, no matter how little content there might be before it. To learn more about this utility, read “building layouts” tutorial:

<html class="duet-sticky-footer"></html>

The above utility class only works when <duet-layout> is a direct child of the <body>. In some cases this type of markup might not be possible, which is why we provide additional utility class to apply the correct styles to the correct html element. If we consider e.g. the following markup:

<html class="duet-sticky-footer">
  <head>
    <title>Demo</title>
  </head>
  <body>
    <div class="app">
      <duet-header></duet-header>
      <duet-layout></duet-layout>
      <duet-footer></duet-footer>
    </div>
  </body>
</html>

You will notice that the sticky footer utility stops working in the above scenario. For this type of use cases, we provide an additional helper class. By adding .duet-sticky-body utility class to our application wrapper div we can tell the CSS Framework to consider that element as the body instead:

<html class="duet-sticky-footer">
  <head>
    <title>Demo</title>
  </head>
  <body>
    <div class="app duet-sticky-body">
      <duet-header></duet-header>
      <duet-layout></duet-layout>
      <duet-footer></duet-footer>
    </div>
  </body>
</html>

In case you’re also wrapping the main content of your application inside another element, you can utilize .duet-sticky-content utility class:

<html class="duet-sticky-footer">
  <head>
    <title>Demo</title>
  </head>
  <body>
    <div class="app duet-sticky-body">
      <duet-header></duet-header>
      <div class="content duet-sticky-content">
        <duet-layout></duet-layout>
      </div>
      <duet-footer></duet-footer>
    </div>
  </body>
</html>

Responsive table utility #

Duet’s CSS Framework includes a responsive table utility which makes sure tables start scrolling horizontally when they don’t fit into the viewport anymore. This utility also adds necessary drop shadows to indicate if there’s more content on either side:

<div class="duet-responsive-table">
  <duet-table breakpoint="none"></duet-table>
</div>

This utility has been superseded by the breakpoint="none-scrollable" option of the table component. The following is equivalent to the above:

<duet-table breakpoint="none-scrollable"></duet-table>

Selected column utility #

Duet’s CSS Framework includes a selected table column utility which can be used to select a specific column in e.g. Comparison Tables:

<table>
  <colgroup>
    <col />
    <col class="duet-selected-column" />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1-1</td>
      <td>Cell 1-2</td>
      <td>Cell 1-3</td>
    </tr>
    <tr>
      <td>Cell 2-1</td>
      <td>Cell 2-2</td>
      <td>Cell 2-3</td>
    </tr>
  </tbody>
</table>

The table component also comes with this feature built-in, but with a slightly different name: duet-table-selected-column. The following is equivalent to the above:

<duet-table>
  <table>
    <colgroup>
      <col />
      <col class="duet-table-selected-column" />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1-1</td>
        <td>Cell 1-2</td>
        <td>Cell 1-3</td>
      </tr>
      <tr>
        <td>Cell 2-1</td>
        <td>Cell 2-2</td>
        <td>Cell 2-3</td>
      </tr>
    </tbody>
  </table>
</duet-table>

Animated page load utility #

Duet’s CSS Framework includes animated page load utility which you can use to fade in a page that uses Duet’s components once they’re fully loaded. To use this utility add this class to <html> element, nothing else is required:

<html class="duet-animate-load">

Animated inline loading indicator utility #

Duet’s CSS Framework includes animated inline loading indicator utility which you can use to add animated three dots "..." at the end of an element. To use this utility add this class to an element. Note that this works only with native elements - to use with e.g. <duet-heading> use a <span>inside. Note also
the any trailing whitespace will remain intact - to have the dots immediately after the text place the closing tag on the same line without any space:

<duet-heading level="h3">
  <span class="duet-inline-loading-indicator">Loading</span>
</duet-heading>

Toast notification utility #

Duet’s CSS Framework includes a toast notification utility which you can use to make the Alert component behave like a toast notification:

<div class="duet-toast">
  <duet-alert dismissible>
    A dismissible alert, check it out!
  </duet-alert>
</div>

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.

Edit