Getting Started - UMD Design System Documentation

Recommendations

Package manager for JavaScript (like Yarn or NPM)

Web Components Library: Installation

NPM - @universityofmaryland/web-components-library

Styles Package: Installation

The styles objects are optional, but highly recommended. The package is a JSS object model that can be applied to modern frameworks like Tailwindcss

NPM - @universityofmaryland/web-styles-library

Configuration options with Tailwind

Loading Web Components for HTML

There are 2 ways to load the web components into your project:

Import all web components
Import individual web components (Tree shaking)

Loading all web components

Place the following in the entry point of your project

import LoadUmdComponents from '@universityofmaryland/web-components-library';

document.addEventListener('DOMContentLoaded', () => {
  LoadUmdComponents();
});

Loading individual web components

import * as Components from '@universityofmaryland/web-components-library';

Components.card.block();