[![Build Status](https://lt-devtool.visualstudio.com/Duet%20Design%20System/_apis/build/status/Duet%20Design%20System?branchName=master)](https://lt-devtool.visualstudio.com/Duet%20Design%20System/_build/latest?definitionId=58&branchName=master)
[![Version](https://img.shields.io/npm/v/@duetds/css.svg?style=flat-square&label=css)](https://www.npmjs.com/package/@duetds/css)

# Duet CSS

This package includes Duet CSS Framework and related tools.

## Usage

For usage instructions, please see Duet Design System [documentation](https://www.duetds.com/css-framework/).

## Architecture

This package uses SCSS for authoring, npm for building, and dart-sass/sass-lint for linting.

The package consists of the following:

* `_breakpoints.scss` offers a helper class to display the currently-matched media query.
* `_components.scss` hides all Duet components until they are loaded. It is auto-generated in build
* `_tokens.scss` exposes Duet design tokens as CSS classes
* `_utilities.scss` offers a number of utility classes for common scenarios
* `_typography.scss` gives native h1...h6 element with class `duet-heading` the appearance of Duet Heading

## Copyright

Copyright © 2020 LocalTapiola/Turva.