LogWhispererAI/.opencode/skills/ui-ux-master/references/web-design.md

Modern Web Design Patterns

Complete guide to modern web design including responsive layouts, performance, and progressive enhancement.

Core Web Principles

1. Mobile-First

Start with mobile design, progressively enhance for larger screens

2. Performance

Fast load times (<3s), optimized assets, minimal JS

3. Accessibility

Semantic HTML, keyboard nav, screen reader friendly

4. Progressive Enhancement

Works everywhere, enhanced where supported

---

Responsive Design

Breakpoints

/* Mobile first */
.container { width: 100%; padding: 16px; }

/* Tablet: 640px+ */
@media (min-width: 640px) {
  .container { padding: 24px; }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .container { 
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px;
  }
}

/* Wide: 1440px+ */
@media (min-width: 1440px) {
  .container { max-width: 1400px; }
}

Responsive Patterns

• Stack → Columns: 1 col mobile, 2-4 desktop
• Hide/Show: Progressive disclosure
• Reorder: CSS Grid order property
• Fluid Typography: clamp() for responsive text

---

Layout Systems

CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

Flexbox

.flex {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

Container Queries

@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}

---

Modern CSS Techniques

CSS Custom Properties

:root {
  --primary: oklch(0.649 0.237 267);
  --spacing-m: 16px;
  --radius: 8px;
}

.button {
  background: var(--primary);
  padding: var(--spacing-m);
  border-radius: var(--radius);
}

oklch() Colors

/* Better than HSL - perceptually uniform */
:root {
  --primary: oklch(0.65 0.24 267); /* L C H */
  --hover: oklch(0.75 0.24 267);   /* Lighter */
}

Modern Selectors

/* :has() - parent selector */
.card:has(img) { padding-top: 0; }

/* :is() - grouping */
:is(h1, h2, h3) { font-family: Display; }

/* :where() - zero specificity */
:where(ul, ol) { padding-left: 1rem; }

---

Component Patterns

Cards

<div class="card">
  <img src="..." alt="..." />
  <div class="card-body">
    <h3>Title</h3>
    <p>Description</p>
    <button>Action</button>
  </div>
</div>

.card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

Navigation

<nav class="navbar">
  <div class="nav-brand">Logo</div>
  <ul class="nav-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="nav-toggle">☰</button>
</nav>

Modal

<dialog class="modal">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Content here...</p>
    <button onclick="this.closest('dialog').close()">Close</button>
  </div>
</dialog>

---

Performance Optimization

Image Optimization

<!-- Responsive images -->
<img 
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Description"
  loading="lazy"
/>

<!-- Modern formats with fallback -->
<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" />
</picture>

Font Loading

/* Preload critical fonts */
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

/* font-display for FOUT control */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* or optional, fallback */
}

Critical CSS

• Inline critical above-the-fold CSS
• Load rest async
• Use <link rel="preload"> for fonts/assets

---

Accessibility

Semantic HTML

<header>
  <nav aria-label="Main navigation">...</nav>
</header>

<main>
  <article>
    <h1>Title</h1>
    <p>Content...</p>
  </article>
</main>

<aside aria-label="Related links">...</aside>

<footer>...</footer>

ARIA Attributes

<!-- Landmark roles (when semantic HTML insufficient) -->
<div role="navigation" aria-label="Breadcrumbs">...</div>

<!-- State -->
<button aria-pressed="false">Toggle</button>

<!-- Live regions -->
<div aria-live="polite">Status message</div>

<!-- Labels -->
<button aria-label="Close modal">✕</button>

Skip Links

<a href="#main-content" class="skip-link">Skip to main content</a>

---

Progressive Web Apps (PWA)

Manifest

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#667eea",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Service Worker (Basic)

// Cache-first strategy
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

---

CSS Frameworks & Libraries

Tailwind CSS (Utility-First)

<div class="p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition">
  <h3 class="text-xl font-bold mb-2">Title</h3>
  <p class="text-gray-600">Description</p>
</div>

CSS-in-JS (React)

const Button = styled.button`
  padding: 12px 24px;
  background: var(--primary);
  color: white;
  border-radius: 8px;
  &:hover { background: var(--primary-hover); }
`;

---

Browser Compatibility

Feature Detection

if ('IntersectionObserver' in window) {
  // Use Intersection Observer
} else {
  // Fallback
}

CSS Feature Queries

@supports (backdrop-filter: blur(10px)) {
  .glass { backdrop-filter: blur(10px); }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass { background: rgba(255,255,255,0.9); }
}

---

Design Checklist

✅ Mobile-first responsive ✅ Fast load (<3s) ✅ Accessible (WCAG AA) ✅ Semantic HTML ✅ Optimized images ✅ Works without JS (progressive enhancement) ✅ Cross-browser tested ✅ Touch-friendly (44px targets)

---

For responsive patterns, see responsive-design.md. For forms, see forms.md.