Getting Started
Where This Package Fits: Styles sits in the Infrastructure layer. It depends on Tokens and is used by Elements, Components, and your custom CSS. See full architecture.
Available Files
The styles package ships pre-compiled CSS files that can be used individually or as a full bundle.
| File | Size Note | Contents |
|---|---|---|
styles.min.css |
Full bundle | Includes everything below |
tokens.min.css |
Small | CSS custom properties (--umd-color-red, --umd-space-md, etc.) |
font-faces.min.css |
Metadata only | @font-face rules for Interstate, Crimson Pro, Barlow Condensed |
base.min.css |
Small | Root and CSS reset styles |
typography.min.css |
Medium | Typography utility classes (umd-sans-*, umd-serif-*, umd-campaign-*) |
layout.min.css |
Medium | Layout grid and spacing utilities |
element.min.css |
Medium | Element styles (buttons, forms, etc.) |
animation.min.css |
Small | Animation utility classes |
accessibility.min.css |
Small | Screen reader and accessibility utilities |
web-components.min.css |
Medium | Web component base styles (show/hide, container queries) |
CDN Usage
Load static CSS files directly from a CDN with no build step required.
<!-- Full bundle (simplest) -->
<link rel="stylesheet" href="https://unpkg.com/@universityofmaryland/web-styles-library/dist/css/styles.min.css">
<!-- Critical CSS pattern -->
<link rel="stylesheet" href="https://unpkg.com/@universityofmaryland/web-styles-library/dist/css/font-faces.min.css">
<link rel="stylesheet" href="https://unpkg.com/@universityofmaryland/web-styles-library/dist/css/tokens.min.css">
<link rel="stylesheet" href="https://unpkg.com/@universityofmaryland/web-styles-library/dist/css/base.min.css">
<!-- Non-critical (can be loaded async) -->
<link rel="stylesheet" href="https://unpkg.com/@universityofmaryland/web-styles-library/dist/css/layout.min.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="https://unpkg.com/@universityofmaryland/web-styles-library/dist/css/element.min.css" media="print" onload="this.media='all'">npm / Bundler Usage
Import static CSS files in your JavaScript or CSS entry point when using a bundler like Vite, Webpack, or Rollup.
// Full bundle
import '@universityofmaryland/web-styles-library/css/styles.min.css';
// Selective imports for smaller bundles
import '@universityofmaryland/web-styles-library/css/tokens.min.css';
import '@universityofmaryland/web-styles-library/css/font-faces.min.css';
import '@universityofmaryland/web-styles-library/css/base.min.css';
import '@universityofmaryland/web-styles-library/css/typography.min.css';
import '@universityofmaryland/web-styles-library/css/layout.min.css';CSS Custom Properties
The tokens.min.css file defines CSS custom properties for colors, spacing, and more. Use these in your own stylesheets for consistent theming.
/* Colors */
--umd-color-red: #e21833;
--umd-color-gold: #ffd200;
--umd-color-black: #000000;
/* Spacing */
--umd-space-min: 4px;
--umd-space-xs: 8px;
--umd-space-sm: 16px;
--umd-space-md: 24px;
--umd-space-lg: 32px;
--umd-space-xl: 48px;
/* Using in custom CSS */
.my-element {
color: var(--umd-color-red);
padding: var(--umd-space-md);
}Approach Comparison
Choose the approach that best fits your project requirements.
| Approach | Setup | Runtime Cost | Tree-shaking | Best For |
|---|---|---|---|---|
Static CSS <link> |
Add link tag | None (pre-compiled) | No (file-level) | Simple sites, CMS integrations |
| JS Styles (import) | npm install + import | Generates at build | Yes | Custom builds with selective styles |
| CDN JS | Script tag | Generates at runtime | No | Prototyping |
| Tailwind | CSS import | Tailwind build | Yes (via purge) | Tailwind projects |
For Content Managers
Static CSS files are the simplest way to add UMD styles to your site. No build tools or JavaScript knowledge required. For design guidance and visual examples, visit designsystem.umd.edu.
Related Resources
Styles API Reference
Complete API documentation for all styles exports.
Styles Use Cases
Common patterns for applying design system styles.
Tailwind Integration
Integrate UMD design tokens with Tailwind CSS.