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/utah-design-system@1.0.1/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 Monorepo
This repo consists of the following:
License
STATE OF UTAH: MEMORANDUM OF AGREEMENT TO TRANSFER SOFTWARE