Styles Package Use Cases

🚀 Use Case 1: Quick Start - Setting Up Styles

Initialize the UMD Styles Library in your project with all utilities.

Implementation

// styles-init.js
import { typography, reset, reset as resetStyles } from '@universityofmaryland/web-styles-library';

async function initializeStyles() {
  // Load UMD fonts
  const fontStyles = document.createElement('style');
  fontStyles.innerHTML = typography.fontFace.base64fonts;
  document.head.appendChild(fontStyles);
  
  // Apply reset styles
  const resetElement = document.createElement('style');
  resetElement.innerHTML = await resetStyles.toString();
  document.head.appendChild(resetElement);
  
  // Pre-render critical CSS (optional)
  const { preRenderCss } = await import('@universityofmaryland/web-styles-library');
  const criticalCss = await preRenderCss();
  
  const criticalElement = document.createElement('style');
  criticalElement.innerHTML = criticalCss;
  document.head.appendChild(criticalElement);
}

// Initialize on import
initializeStyles();

Result

📐 Use Case 2: Grid System Classes

The UMD Styles Library provides two types of grid systems: Grid with Gaps (for spacing between items) and Grid with Borders (for table-like layouts).

Available Grid Gap Classes

Available Grid Border Classes

Gap Values

Usage Example

<!-- Standard three-column grid -->
<div class="umd-layout-grid-gap-three">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

📏 Use Case 3: Spacing Utility Classes

The library provides comprehensive spacing utilities for both horizontal containers (max-width with padding) and vertical spacing (margin-bottom).

Horizontal Container Classes

Vertical Spacing Classes

Usage Example

<!-- Container with reading width -->
<div class="umd-layout-space-horizontal-normal">
  <h1 class="umd-layout-space-vertical-headline-large">Page Title</h1>
  <p>Content with optimal reading width and proper spacing.</p>
</div>

📝 Use Case 4: Form Field Classes

The library provides a complete set of form field classes for creating accessible, consistent forms.

Available Form Classes

Validation States

Usage Example

<!-- Text input with validation -->
<div class="umd-field-set-item">
  <label for="email">Email</label>
  <input type="email" id="email" class="umd-field-input" aria-invalid="false">
</div>

<!-- Date input with wrapper -->
<div class="umd-field-input-date-wrapper">
  <input type="date" class="umd-field-input-date">
</div>

🎨 Use Case 5: Automatic Web Component Styling

All UMD web components receive automatic base styling from the styles package. No additional configuration needed!

How Automatic Styling Works

Components with Special Styling

Component List

Benefits

<!-- Just use the component - styling is automatic! -->
<umd-element-hero data-theme="dark">
  <!-- Component is hidden until JavaScript loads -->
  <!-- Then displays as block with container queries enabled -->
</umd-element-hero>