For Developers
The UMD Design System, with its open-sourced packages, offers a user-friendly solution for creating User Interface components.
Developers can confidently and rapidly use the packages to prototype branded components in their systems or static solutions. The system’s platform-agnostic nature ensures that it can be easily added to any codebase, enhancing its ease of use. While components can be built in HTML with embedded Javascript functionality, the system also caters to more advanced use cases, making it a comprehensive and accessible tool for developers.
Where to Begin
The packages are created in a mono-repo hosted on GitHub. Each package can be added to your codebase via NPM or a script hosted by a CDN.
Open Source Repository
The GitHub repository has installation instructions, advanced use cases, codebase inspection, and collaboration options. The repository is open-sourced under MIT licensing and can be forked to suit any unique needs.
The repository includes two packages: Components and Theme. Components are branded UMD web components that are the interactive building blocks for creating a user interface. The theme is a collection of styles associated with classes for consistent interfaces with layout, typography, and common elements.
Package Installation
The component library is built in Typescript and can be imported via NPM or referenced using a script tag with a CDN source. For detailed instructions, please refer to GitHub.
The theme library is a collection of JSS objects that can be imported into the design library of choice. We recommend Tailwind and provide additional documentation here.
Package Implementation
On each component page, you’ll find sections dedicated to use cases and best practices as well as code examples for HTML examples and variations.
The Foundation pages offer theme examples to our grid, spacing, color, and typography.
In Templates, you can explore visual examples of structuring components with theme styles for layout, typography, and unique use cases.
ACCESSIBILITY TOOLS
WAVE generates false positives for color contrast issues based on the shadow DOM. Its current implementation does not inspect the layers within the shadow. We recommend using Lighthouse over WAVE.
Release Notes
Get the latest updates for UMD Design System releases.