Utah Design System Library

The library is a collection of css styles and components designed to make it quick and simple for developers to create web experiences using the Utah Design System. Goes hand in hand with the Design System Header and Footer.

What's included

• Compiled CSS
• SASS CSS
• React Components (The React components are not a primary resource. Utilize the guidelines and css resources to create your own components for other libraries.)
• Other libraries will be added as they are created. (See Contributing below)

Getting Started

• Visit the page to begin using the Utah Header and Design System.

Documentation

NPM

The Utah Header and Design System Library are published to NPM here:

Install

npm i @utahdts/utah-design-system

Example Using SCSS source in a javascript import

//import all scss
import '@utahdts/utah-design-system/css/index.scss';

Using the SCSS source in a Sass file

In most cases you can simply import the Sass file as illustrated below:

@use "~@utahdts/utah-design-system/css/index.scss";

Pre-processed bundled resource

The CSS files have been pre-processed and can be delivered via the unpkg CDN (Content Delivery Network).

Unpkg syntax:

https://unpkg.com/:package@:version/:file

Example using version:

https://unpkg.com/@utahdts/[email protected]/dist/style.css

Example using latest:

https://unpkg.com/@utahdts/utah-design-system/dist/style.css

Contributing

The Utah Design System website is built using React, however we want to expand it to other technologies such as Angular, Vue.js, etc. If you want to contribute or have any feedback, we'd love to hear from you! Please contact us.

Design System GitHub

• Utah Design System

Utah Design System Monorepo

This repo consists of the following:

License

STATE OF UTAH: MEMORANDUM OF AGREEMENT TO TRANSFER SOFTWARE