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.18/lib/duet.min.css" integrity="sha384-lXsZJzvyiyIDxPLVC56+vhjfm/vPD4eEAE1z2Q8niyNbr0NgPl6nxGKEkjg18yQf" 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:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all sides

Where size is one of:

xx-small
x-small
small
medium
large
x-large
xx-large
xxx-large
xxxx-large

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

Item
Item
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">

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:

radius - E.g. .duet-radius-circle. For more info see radius tokens.
shadow - E.g. .duet-shadow-tooltip. For more info see shadow tokens.
z-index - E.g. .duet-z-index-dropdown. For more info see z-index tokens.
transition - E.g. .duet-transition-quickly. For more info see transition tokens.
opacity - E.g. .duet-opacity-30. For more info see opacity tokens.
size - E.g. .duet-size-icon-small. For more info see size tokens.

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