# CSS Animations & Transitions

## Understanding Motion in CSS

**Transitions vs Animations**:
- **Transitions**: Smooth change between two states (hover, focus, class change). Perfect for micro-interactions.
- **Animations**: Complex, multi-step sequences that can loop and reverse. Ideal for attention-grabbing effects.

**Performance Impact**: Motion should enhance, not hinder. Stick to GPU-accelerated properties (transform, opacity) for 60fps smoothness.

## Transitions

### Basic Transition Syntax

**What it does**: Smoothly animates property changes over time instead of instant jumps.

**Why use it**: Creates polished, professional interfaces. Users perceive smooth transitions as higher quality.

**How it works**:
1. Browser detects property change (hover, class addition, etc.)
2. Calculates intermediate values between start and end states
3. Updates property gradually over specified duration
```css
.element {
  /* Shorthand: property duration timing-function delay */
  transition: opacity 0.3s ease-in-out 0s;

  /* Individual properties */
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;

  /* Multiple properties */
  transition: opacity 0.3s, transform 0.5s;

  /* All properties */
  transition: all 0.3s ease;
}
```

### Transition Properties

**What it does**: Controls which properties animate, how long, and with what easing.

**Why use it**: Different properties need different speeds. Color changes feel good at 0.3s, transforms at 0.2s.

**How it works**:
1. Define initial state with base styles
2. Set up transition rules
3. Define end state (hover, active, class)
4. Browser interpolates between states

```css
.button {
  /* Initial state */
  background: #3498db;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  /* Transition setup - notice different durations */
  transition:
    background 0.3s ease,      /* Slower for color perception */
    transform 0.2s ease,       /* Snappy for movement */
    box-shadow 0.2s ease;      /* Match transform for cohesion */
}

.button:hover {
  /* End state */
  background: #2980b9;           /* Darker shade */
  transform: translateY(-2px);   /* Subtle lift */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Enhanced shadow */
}
```

**Common pitfall**: Using `transition: all` - it's slower and can animate unexpected properties.

**Real-world example**: This exact pattern is used in Material Design buttons, GitHub's UI, and Stripe's checkout.

### Timing Functions

**What it does**: Controls acceleration and deceleration during transitions, mimicking real-world physics.

**Why use it**: Linear motion looks robotic. Easing makes animations feel natural and responsive.

**How each works**:

```css
.timing-examples {
  /* LINEAR - Constant speed */
  transition-timing-function: linear;
  /* Use case: Progress bars, continuous rotations */
  /* Feels: Mechanical, precise */

  /* EASE (default) - Slow start/end, fast middle */
  transition-timing-function: ease;
  /* Use case: General transitions, safe default */
  /* Feels: Natural, smooth */

  /* EASE-IN - Slow start, accelerates */
  transition-timing-function: ease-in;
  /* Use case: Elements leaving screen */
  /* Feels: Building momentum */

  /* EASE-OUT - Fast start, decelerates */
  transition-timing-function: ease-out;
  /* Use case: Elements entering screen */
  /* Feels: Coming to rest naturally */

  /* EASE-IN-OUT - Slow both ends */
  transition-timing-function: ease-in-out;
  /* Use case: Looping animations, modals */
  /* Feels: Gentle, considered */

  /* STEPS - Discrete jumps */
  transition-timing-function: steps(4, jump-start);
  /* Use case: Sprite animations, typewriter effect */
  /* Feels: Retro, digital */

  /* CUBIC BEZIER - Custom curves */
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* This creates "overshoot" - element goes past target then settles */
  /* Use case: Playful interfaces, attention-grabbing */
  /* Tool: cubic-bezier.com for visual editing */
}
```

**Pro tip**: Use ease-out for entering elements (feels responsive) and ease-in for exiting (feels intentional).

### Advanced Transition Patterns

**Staggered Transitions**

**What it does**: Animates multiple elements in sequence, creating a cascade effect.

**Why use it**: Draws attention to content hierarchy, makes multiple elements less overwhelming.

**How it works**: Each element has an incremental delay, creating a wave-like appearance.

```css
/* Initial hidden state */
.card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/* Stagger delays - creates cascade */
.card:nth-child(1) { transition-delay: 0.1s; }
.card:nth-child(2) { transition-delay: 0.2s; }
.card:nth-child(3) { transition-delay: 0.3s; }

/* For dynamic lists, use CSS custom properties */
.card {
  transition-delay: calc(var(--index) * 0.1s);
}

/* Trigger: Add class to parent */
.cards-visible .card {
  opacity: 1;
  transform: translateY(0);
}
```

**Common pitfall**: Too much delay makes interface feel sluggish. Keep total animation under 1 second.

**Real-world example**: Google Material Design cards, Stripe's pricing page, Medium's article listings.

## Animations

### Keyframes Definition
```css
/* Basic keyframes */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Percentage-based keyframes */
@keyframes slide-bounce {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(100px);
  }
  50% {
    transform: translateX(100px) translateY(-20px);
  }
  75% {
    transform: translateX(100px) translateY(0);
  }
  100% {
    transform: translateX(0);
  }
}
```

### Animation Properties
```css
.animated-element {
  /* Shorthand */
  animation: slide-bounce 2s ease-in-out infinite alternate;

  /* Individual properties */
  animation-name: slide-bounce;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite; /* or number */
  animation-direction: alternate; /* normal | reverse | alternate | alternate-reverse */
  animation-fill-mode: forwards; /* none | forwards | backwards | both */
  animation-play-state: running; /* running | paused */
}
```

### Multiple Animations
```css
.multi-animated {
  animation:
    rotate 2s linear infinite,
    pulse 1s ease-in-out infinite,
    float 3s ease-in-out infinite;
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  50% { transform: scale(1.1); }
}

@keyframes float {
  50% { transform: translateY(-10px); }
}
```

## Common Animation Patterns

### Loading Spinner
```css
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
```

### Pulse Effect
```css
.pulse {
  animation: pulse-effect 2s infinite;
}

@keyframes pulse-effect {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(52, 152, 219, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
  }
}
```

### Typing Effect
```css
.typing {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid;
  animation:
    typing 3.5s steps(40, end),
    blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}
```

### Skeleton Loading
```css
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
```

### Bounce Animation
```css
.bounce {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
```

## Performance Optimization

### Hardware Acceleration

**What it does**: Offloads animations to GPU, achieving 60fps even on complex animations.

**Why it matters**: Janky animations frustrate users and make apps feel broken. GPU acceleration = smooth motion.

**How it works**:
- GPU handles: `transform`, `opacity`, `filter`
- CPU handles: `width`, `height`, `top`, `left`, `margin`, `padding`
- GPU creates compositor layers for animated elements

```css
/* ✅ GOOD - GPU accelerated properties */
.performant {
  transform: translateX(100px);  /* Position via transform */
  opacity: 0.5;                  /* Transparency */
  filter: blur(5px);             /* Visual effects */
  /* These run at 60fps without affecting other elements */
}

/* ❌ AVOID - Triggers expensive layout/paint */
.expensive {
  left: 100px;     /* Forces layout recalculation */
  width: 200px;    /* All elements must reflow */
  height: 100px;   /* Entire page might repaint */
  /* These cause "layout thrashing" - major performance hit */
}

/* Real example: Sliding panel */
/* ❌ Bad - animates 'left' property */
.panel-slow {
  position: absolute;
  left: -300px;
  transition: left 0.3s;
}
.panel-slow.open {
  left: 0;
}

/* ✅ Good - animates 'transform' */
.panel-fast {
  transform: translateX(-300px);
  transition: transform 0.3s;
}
.panel-fast.open {
  transform: translateX(0);
}
```

**Common pitfall**: Animating `width`/`height` for accordions. Use `max-height` or `scale` transform instead.

**Performance test**: Chrome DevTools > Rendering tab > Enable "Paint flashing" to see what's repainting.

### Will-Change Property
```css
.will-animate {
  will-change: transform, opacity;
}

/* Remove after animation */
.animation-done {
  will-change: auto;
}
```

### Reducing Paint Areas
```css
.animated-card {
  /* Isolate paint area */
  contain: layout style paint;

  /* Create layer */
  transform: translateZ(0);

  /* Or */
  will-change: transform;
}
```

## Interactive Examples

### Hover Card Flip
```css
.flip-card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}
```

### Morphing Button
```css
.morph-button {
  padding: 12px 24px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.morph-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.morph-button:hover::before {
  width: 300px;
  height: 300px;
}
```

### Animated Gradient Background
```css
.gradient-bg {
  background: linear-gradient(
    -45deg,
    #ee7752,
    #e73c7e,
    #23a6d5,
    #23d5ab
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
```

## Animation State Management

### Play/Pause Control
```css
.video-animation {
  animation: rotate 2s linear infinite;
  animation-play-state: paused;
}

.playing .video-animation {
  animation-play-state: running;
}
```

### Animation Events in CSS
```css
/* Using animation-fill-mode */
.slide-in {
  opacity: 0;
  transform: translateX(-100%);
  animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
```

## Accessibility Considerations

### Respecting User Preferences

**What it does**: Detects if users have requested reduced motion in their OS settings.

**Why it matters**: Motion can trigger vestibular disorders, migraines, and motion sickness. It's not just preference - it's accessibility.

**How to implement**: Provide alternatives, not just removal. Replace motion with fades or instant changes.

```css
/* Method 1: Nuclear option - remove all motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Method 2: Better - provide alternatives */
.card {
  animation: slideUp 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: fadeIn 0.2s ease; /* Gentler alternative */
  }
}

/* Method 3: Best - design with preference in mind */
.animated-element {
  /* Default: subtle motion */
  transform: scale(1);
  transition: transform 0.2s ease;
}

.animated-element:hover {
  transform: scale(1.05); /* Small, purposeful */
}

@media (prefers-reduced-motion: no-preference) {
  /* Enhance for those who want motion */
  .animated-element {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .animated-element:hover {
    transform: scale(1.1) rotate(5deg);
  }
}
```

**Testing**:
- macOS: System Preferences > Accessibility > Display > Reduce motion
- Windows: Settings > Ease of Access > Display > Show animations
- Chrome DevTools: Rendering tab > Emulate CSS media feature prefers-reduced-motion

**Real-world impact**: iOS automatically reduces parallax and animations when enabled. Major sites like GitHub respect this setting.

### Focus Indicators
```css
.interactive:focus-visible {
  outline: none;
  animation: focus-pulse 1s ease;
}

@keyframes focus-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(52, 152, 219, 0);
  }
}
```

Master CSS animations and transitions for smooth, performant web interactions and visual effects

CSS Animations & Transitions: Everything You Need to Know

# CSS Background - Everything You Need to Know

## Basic Background Properties

### Background Color
```css
.element {
  /* Named colors */
  background-color: red;

  /* Hex values */
  background-color: #ff5733;

  /* RGB/RGBA */
  background-color: rgb(255, 87, 51);
  background-color: rgba(255, 87, 51, 0.8);

  /* HSL/HSLA */
  background-color: hsl(9, 100%, 60%);
  background-color: hsla(9, 100%, 60%, 0.8);

  /* CSS Variables */
  background-color: var(--primary-color);
}
```

### Background Image
```css
.element {
  /* Single image */
  background-image: url('image.jpg');

  /* Multiple images (layered) */
  background-image: url('top-layer.png'), url('bottom-layer.jpg');

  /* With gradients */
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('hero.jpg');
}
```

### Background Size
```css
.element {
  /* Keyword values */
  background-size: cover;    /* Scales to cover entire container */
  background-size: contain;  /* Scales to fit within container */
  background-size: auto;     /* Default size */

  /* Specific dimensions */
  background-size: 200px 100px;
  background-size: 50% 50%;

  /* Single value (width, height auto) */
  background-size: 200px;
  background-size: 50%;
}
```

### Background Position
```css
.element {
  /* Keywords */
  background-position: center;
  background-position: top left;
  background-position: bottom right;

  /* Percentages */
  background-position: 50% 50%;

  /* Specific values */
  background-position: 20px 30px;

  /* Offset from edges */
  background-position: right 20px bottom 10px;

  /* Multiple positions for multiple backgrounds */
  background-position: left top, center center;
}
```

### Background Repeat
```css
.element {
  /* Repeat patterns */
  background-repeat: repeat;      /* Default - repeats both directions */
  background-repeat: repeat-x;    /* Horizontal repeat only */
  background-repeat: repeat-y;    /* Vertical repeat only */
  background-repeat: no-repeat;   /* No repetition */

  /* New values */
  background-repeat: space;       /* Evenly spaces repetitions */
  background-repeat: round;       /* Scales to fit exact number */
}
```

### Background Attachment
```css
.element {
  /* Scroll behavior */
  background-attachment: scroll;  /* Default - scrolls with content */
  background-attachment: fixed;   /* Fixed to viewport */
  background-attachment: local;   /* Scrolls with element's content */
}

/* Parallax effect */
.parallax {
  background-image: url('bg.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 100vh;
}
```

### Background Origin & Clip
```css
.element {
  /* Origin - where background positioning starts */
  background-origin: padding-box;  /* Default */
  background-origin: border-box;
  background-origin: content-box;

  /* Clip - where background is painted */
  background-clip: border-box;     /* Default */
  background-clip: padding-box;
  background-clip: content-box;
  background-clip: text;           /* Experimental - text fill */
}

/* Text fill effect */
.text-fill {
  background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
```

## Gradients

### Linear Gradients
```css
.element {
  /* Basic gradient */
  background: linear-gradient(to right, red, blue);

  /* With angle */
  background: linear-gradient(45deg, red, blue);

  /* Multiple color stops */
  background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);

  /* Sharp transitions */
  background: linear-gradient(to right, red 50%, blue 50%);

  /* Repeating gradient */
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  );
}
```

### Radial Gradients
```css
.element {
  /* Basic radial */
  background: radial-gradient(circle, red, blue);

  /* Ellipse (default) */
  background: radial-gradient(ellipse, red, blue);

  /* Positioned gradient */
  background: radial-gradient(circle at top left, red, blue);

  /* Sized gradient */
  background: radial-gradient(100px 50px at center, red, blue);

  /* Multiple stops */
  background: radial-gradient(
    circle at center,
    yellow 0%,
    orange 25%,
    red 50%,
    purple 75%,
    blue 100%
  );
}
```

### Conic Gradients
```css
.element {
  /* Basic conic (pie chart effect) */
  background: conic-gradient(red, yellow, green, blue, red);

  /* With angles */
  background: conic-gradient(from 45deg, red, blue);

  /* Pie chart */
  background: conic-gradient(
    red 0deg 90deg,
    blue 90deg 180deg,
    green 180deg 270deg,
    yellow 270deg 360deg
  );

  /* Repeating conic */
  background: repeating-conic-gradient(
    from 0deg,
    red 0deg 30deg,
    blue 30deg 60deg
  );
}
```

## Advanced Patterns

### Hero Section with Overlay
```css
.hero {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.7)
    ),
    url('hero-image.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}
```

### Animated Gradient
```css
.animated-gradient {
  background: linear-gradient(
    -45deg,
    #ee7752,
    #e73c7e,
    #23a6d5,
    #23d5ab
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
```

### Mesh Gradient
```css
.mesh-gradient {
  background:
    radial-gradient(at 20% 80%, #ff6b6b 0%, transparent 50%),
    radial-gradient(at 80% 20%, #4ecdc4 0%, transparent 50%),
    radial-gradient(at 40% 40%, #45b7d1 0%, transparent 50%),
    radial-gradient(at 80% 80%, #96ceb4 0%, transparent 50%);
  background-size: 100% 100%;
}
```

### Pattern Background
```css
/* Dots pattern */
.dots {
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,0.1) 10px,
    rgba(0,0,0,0.1) 20px
  );
}

/* Grid */
.grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}
```

### Multiple Backgrounds
```css
.layered {
  background:
    url('decoration.png') no-repeat top right,
    url('pattern.png') repeat-x bottom,
    linear-gradient(to bottom, #f0f0f0, #ffffff);
  background-size:
    100px 100px,
    auto,
    cover;
  background-position:
    top 20px right 20px,
    bottom,
    center;
}
```

## Performance Considerations

### Optimized Background Images
```css
.optimized {
  /* Use modern formats */
  background-image:
    url('image.webp'),
    url('image.jpg'); /* Fallback */

  /* Lazy loading for below-fold images */
  content-visibility: auto;

  /* Prevent repaints */
  will-change: background-position;
}
```

### CSS-Only Patterns
```css
/* Checkerboard - Pure CSS */
.checkerboard {
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
```

## Responsive Backgrounds

### Art Direction
```css
.responsive-bg {
  /* Mobile */
  background-image: url('mobile-bg.jpg');

  /* Tablet */
  @media (min-width: 768px) {
    background-image: url('tablet-bg.jpg');
  }

  /* Desktop */
  @media (min-width: 1024px) {
    background-image: url('desktop-bg.jpg');
  }
}
```

### CSS Variables for Themes
```css
:root {
  --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --bg-secondary: #f7f8fc;
}

[data-theme="dark"] {
  --bg-primary: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  --bg-secondary: #1a1a2e;
}

.themed {
  background: var(--bg-primary);
}
```

Complete guide to CSS background properties, from basic colors to advanced techniques with gradients and multiple backgrounds

CSS Background - Everything You Need to Know

# CSS & the Box Model

## Understanding the Foundation

**What it is**: The CSS Box Model is the fundamental concept that governs how elements are sized and spaced in web layouts. Every HTML element is essentially a rectangular box with content, padding, border, and margin.

**Why it matters**: Without understanding the box model, you'll constantly fight with layouts - elements won't align, widths will break, and spacing will be unpredictable. It's the difference between guessing why your layout broke and knowing exactly how to fix it.

**Real-world impact**: The box model affects everything from button clickable areas to responsive grid systems. Misunderstanding it is the #1 cause of CSS frustration for beginners.

### Visual Box Model Diagram

<div style="max-width: 500px; margin: 2rem auto; font-family: monospace;">
  <div style="background: #fffacd; border: 2px dashed #daa520; padding: 20px; text-align: center;">
    <strong>MARGIN</strong> (transparent)
    <div style="background: #ffd700; border: 2px dashed #b8860b; padding: 20px; margin: 20px;">
      <strong>BORDER</strong>
      <div style="background: #98fb98; border: 2px dashed #228b22; padding: 20px; margin: 20px;">
        <strong>PADDING</strong>
        <div style="background: #87ceeb; border: 2px dashed #4682b4; padding: 20px; margin: 20px;">
          <strong>CONTENT</strong><br>
          (Your text, images, etc.)
        </div>
      </div>
    </div>
  </div>
</div>

### The Four Layers

#### 1. Content Box

**What it does**: The innermost area where your text and images appear. This is the actual "usable" space for your content.

**Why use it**: When you set `width: 200px`, you're defining the content box size (by default).

**How it works**:
- Width and height properties directly control this area
- Text wraps within these boundaries
- Images are constrained to this space
- Overflow occurs when content exceeds these dimensions

**Common pitfall**: Forgetting that padding and border add to the total size, causing elements to be wider than expected.

**Real-world example**: A sidebar set to `width: 300px` with `padding: 20px` actually takes up 340px of space.

#### 2. Padding Box

**What it does**: Creates breathing room inside the element, between your content and the border. Think of it as the "internal margin" of an element.

**Why use it**: Padding prevents text from touching edges, makes buttons more clickable, and creates visual hierarchy without affecting neighboring elements.

**How it works**:
- Expands the element's size (unless using border-box)
- Background colors/images extend through padding
- Click/tap targets include padding area
- Can be set individually: `padding-top`, `padding-right`, etc.

**Common pitfall**: Padding on inline elements (like `<span>`) affects horizontal space but not vertical layout flow.

**Real-world example**: Button padding creates a larger clickable area: `padding: 12px 24px` makes a button feel more substantial and easier to click on mobile.

#### 3. Border Box
The element's border surrounding padding and content
- Can have width, style, and color
- Adds to the total element size (unless using `box-sizing: border-box`)

#### 4. Margin Box
Outermost layer creating space between elements
- Creates external spacing between elements
- Margins can collapse vertically
- Always transparent

### Box Sizing Models

#### Content-Box (Default)

**What it does**: Width/height only apply to content. Padding and border are added on top, increasing total size.

**Why it exists**: Historical reasons - it's how CSS originally worked. Rarely the best choice today.

**How it works**:
1. Start with content width/height
2. Add padding to all sides
3. Add border to all sides
4. Total size = content + padding + border

```css
.element {
  box-sizing: content-box;
  width: 200px;        /* Content is 200px wide */
  padding: 20px;       /* Adds 40px total width */
  border: 5px solid;   /* Adds 10px total width */
  /* Total width = 200 + 40 + 10 = 250px */
  /* Your 200px element is actually 250px! */
}
```

**Common pitfall**: Two 50% width elements with padding/border won't fit side by side - they'll exceed 100%!

**When to use**: Only when working with legacy code or specific third-party requirements.

#### Border-Box (Recommended)

**What it does**: Width/height include content, padding, AND border. The total size stays exactly what you specify.

**Why use it**: Predictable sizing! A 200px wide element stays 200px wide, regardless of padding or border.

**How it works**:
1. Start with total width/height
2. Subtract border from both sides
3. Subtract padding from both sides
4. Remaining space = content area

```css
.element {
  box-sizing: border-box;
  width: 200px;        /* Total element is 200px wide */
  padding: 20px;       /* Included in the 200px */
  border: 5px solid;   /* Included in the 200px */
  /* Total width = 200px (always!) */
  /* Content area = 200 - 40 - 10 = 150px */
}
```

**Common pitfall**: Heavy padding can squeeze content area to nothing. Always ensure content has enough space.

**Real-world example**: Grid systems (Bootstrap, CSS Grid) rely on border-box for predictable column widths. Two 50% width columns with padding will actually fit!

### Best Practices

#### Universal Border-Box

**What it does**: Sets every element to use border-box sizing, including pseudo-elements.

**Why use it**: Creates a predictable, maintainable CSS foundation. Recommended by every modern CSS framework.

**How it works**: The universal selector (*) applies to all current and future elements, while ::before/::after cover pseudo-elements.

```css
/* Put this at the top of your CSS - always! */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Alternative: Inheritable version */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit; /* Allows component-level overrides */
}
```

**Common pitfall**: Forgetting this causes inconsistent sizing across your site.

**Real-world impact**: This single rule prevents 90% of layout bugs.

#### Debugging the Box Model

**What it does**: Adds visible outlines to every element without affecting layout (unlike borders).

**Why use it**: Instantly reveals spacing issues, overflow problems, and unexpected element sizes.

```css
/* Temporary debugging - don't commit this! */
* {
  outline: 1px solid red;
}

/* Better: Different colors for different levels */
* { outline: 1px solid red; }
* * { outline: 1px solid blue; }
* * * { outline: 1px solid green; }

/* Production-ready debug mode */
.debug * {
  outline: 1px solid rgba(255, 0, 0, 0.3);
}
```

**Pro tip**: Browser DevTools show box model visually - hover over elements in the inspector.

### Common Box Model Patterns

#### Centered Container
```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
```

#### Card Component
```css
.card {
  padding: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 16px;
}
```

#### Button Spacing
```css
.button {
  padding: 12px 24px;
  border: 2px solid currentColor;
  margin: 8px;
}
```

### Margin Collapse

#### Vertical Margins Collapse

**What it does**: Adjacent vertical margins merge into a single margin equal to the largest value (not the sum).

**Why it exists**: Prevents excessive spacing in text-heavy documents. Imagine if every paragraph's top and bottom margins added up - text would be too spread out.

**How it works**:
1. Only vertical margins collapse (never horizontal)
2. Only block-level elements participate
3. Margins must be "touching" (no border, padding, or content between)
4. The larger margin wins

```css
.top-element {
  margin-bottom: 30px;
}

.bottom-element {
  margin-top: 20px;
}
/* Result: 30px gap, not 50px */
/* The 20px margin is "absorbed" by the 30px margin */

/* Even parent-child margins collapse! */
.parent {
  margin-top: 40px;
}
.parent > .child:first-child {
  margin-top: 20px;
}
/* Child's margin "escapes" and merges with parent's */
```

**Common pitfall**: Unexpected spacing when margins collapse through parent boundaries.

**Real-world example**: Article typography relies on margin collapse for consistent paragraph spacing.

#### Preventing Collapse

**Why prevent it**: Sometimes you need exact spacing control, especially in component-based designs.

**How to prevent**:

```css
/* Method 1: Use padding instead */
.no-collapse {
  padding-top: 20px; /* Never collapses */
}

/* Method 2: Add border or padding to parent */
.parent {
  padding-top: 1px; /* Prevents child margin escape */
  /* OR */
  border-top: 1px solid transparent;
}

/* Method 3: Modern layout contexts */
.flex-container {
  display: flex; /* Children margins don't collapse */
}
.grid-container {
  display: grid; /* Children margins don't collapse */
}

/* Method 4: Block formatting context */
.parent {
  overflow: auto; /* or hidden - creates new BFC */
}
```

**Pro tip**: Flexbox and Grid eliminate margin collapse entirely, making spacing more predictable in modern layouts.

### Practical Tips

#### Consistent Spacing System
```css
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}
```

#### Responsive Padding
```css
.section {
  padding: clamp(1rem, 5vw, 3rem);
}
```

#### Negative Margins
```css
.overlap {
  margin-top: -20px; /* Pulls element up */
}
```

### Inspector Tools

Modern browser DevTools highlight the box model:
- **Blue**: Content
- **Green**: Padding
- **Orange**: Border
- **Yellow**: Margin

### Common Gotchas

#### 1. Percentage Margins
**The Problem**: Both horizontal AND vertical margins are calculated from parent's WIDTH (not height).

```css
.parent { width: 1000px; height: 500px; }
.child {
  margin-top: 10%;    /* 100px (10% of WIDTH, not height!) */
  margin-left: 10%;   /* 100px (10% of width, as expected) */
}
```
**Why**: Historical CSS decision for consistency. Allows maintaining aspect ratios.
**Solution**: Use fixed units (px, rem) or viewport units (vh) for vertical spacing.

#### 2. Inline Elements
**The Problem**: Vertical padding/margin on inline elements doesn't push other lines away.

```css
span {
  padding: 20px;      /* Horizontal works, vertical doesn't affect flow */
  margin: 20px;       /* Same issue */
}
```
**Why**: Inline elements flow like text - they can't disrupt line height.
**Solution**: Use `display: inline-block` or `display: block` when you need vertical spacing.

#### 3. Collapsing Margins
**The Problem**: Margins collapse in unexpected places, especially parent-child.
```css
.card { margin: 20px; }
.card h2:first-child { margin-top: 30px; }
/* H2's margin "escapes" the card! */
```
**Solution**: Add `padding-top: 1px` to parent or use flexbox/grid.

#### 4. Border-Radius
**The Problem**: Curved corners don't change box dimensions.
```css
.box {
  width: 100px;
  border-radius: 50px; /* Still 100px wide, content might overflow corners */
}
```
**Solution**: Account for corner clipping with padding or overflow:hidden.

#### 5. Outline vs Border
**The Problem**: Outlines don't affect layout, borders do.
```css
.button:focus {
  outline: 3px solid blue;  /* Doesn't push elements */
  border: 3px solid blue;   /* Adds 6px to width/height */
}
```
**Why**: Outlines are drawn "above" the layout, perfect for focus indicators.
**Best Practice**: Use outline for temporary states (focus, debug), border for permanent structure.

Understanding the CSS Box Model - the foundation of web layout and spacing

CSS & the Box Model

# CSS Display & Position

## Display Property

### Basic Display Values

#### Block
```css
.block-element {
  display: block;
  /* Takes full width available */
  /* Starts on new line */
  /* Height/width can be set */
}

/* Default block elements: div, p, h1-h6, section, header, footer */
```

#### Inline
```css
.inline-element {
  display: inline;
  /* Takes only content width */
  /* Stays in line with text */
  /* Height/width ignored */
  /* Vertical padding/margin don't affect layout */
}

/* Default inline elements: span, a, strong, em, img */
```

#### Inline-Block
```css
.inline-block-element {
  display: inline-block;
  /* Best of both worlds */
  /* Stays in line */
  /* Respects width/height */
  /* Respects all padding/margin */
}
```

#### None
```css
.hidden {
  display: none;
  /* Removes from document flow */
  /* Not rendered at all */
  /* Screen readers ignore it */
}

/* Alternative for accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
```

### Flexbox Display

#### Flex Container
```css
.flex-container {
  display: flex;

  /* Direction */
  flex-direction: row; /* row | row-reverse | column | column-reverse */

  /* Wrapping */
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */

  /* Main axis alignment */
  justify-content: space-between; /* flex-start | flex-end | center | space-around | space-evenly */

  /* Cross axis alignment */
  align-items: center; /* stretch | flex-start | flex-end | center | baseline */

  /* Multiple lines alignment */
  align-content: flex-start; /* stretch | flex-start | flex-end | center | space-between */

  /* Gap between items */
  gap: 1rem;
}
```

#### Flex Items
```css
.flex-item {
  /* Growth factor */
  flex-grow: 1;

  /* Shrink factor */
  flex-shrink: 1;

  /* Base size */
  flex-basis: 200px;

  /* Shorthand */
  flex: 1 1 200px;

  /* Individual alignment */
  align-self: flex-end;

  /* Order */
  order: -1;
}
```

### Grid Display

#### Grid Container
```css
.grid-container {
  display: grid;

  /* Define columns */
  grid-template-columns: 200px 1fr 200px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  /* Define rows */
  grid-template-rows: 100px auto 50px;

  /* Named areas */
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";

  /* Gaps */
  gap: 20px;
  column-gap: 20px;
  row-gap: 10px;

  /* Alignment */
  justify-items: start; /* start | end | center | stretch */
  align-items: center;
  justify-content: center;
  align-content: start;
}
```

#### Grid Items
```css
.grid-item {
  /* Placement */
  grid-column: 1 / 3;
  grid-row: 2 / 4;

  /* Named area */
  grid-area: header;

  /* Span */
  grid-column: span 2;

  /* Self alignment */
  justify-self: end;
  align-self: start;
}
```

### Modern Display Values

#### Contents
```css
.wrapper {
  display: contents;
  /* Element box disappears */
  /* Children act as direct children of parent */
}
```

#### Flow-Root
```css
.container {
  display: flow-root;
  /* Creates new block formatting context */
  /* Contains floats */
  /* Prevents margin collapse */
}
```

## Position Property

### Static (Default)
```css
.static {
  position: static;
  /* Normal document flow */
  /* top/right/bottom/left have no effect */
}
```

### Relative
```css
.relative {
  position: relative;
  top: 10px;
  left: 20px;
  /* Offset from normal position */
  /* Still occupies original space */
  /* Creates containing block for absolute children */
}
```

### Absolute
```css
.absolute {
  position: absolute;
  top: 0;
  right: 0;
  /* Removed from document flow */
  /* Positioned relative to nearest positioned ancestor */
  /* If no positioned ancestor, uses viewport */
}

/* Common pattern: Centered absolute */
.centered-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

### Fixed
```css
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Positioned relative to viewport */
  /* Stays in place when scrolling */
  /* Removed from document flow */
}

/* Fixed header example */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
}
```

### Sticky
```css
.sticky {
  position: sticky;
  top: 20px;
  /* Hybrid of relative and fixed */
  /* Sticks when threshold is reached */
  /* Stays in document flow */
}

/* Sticky table headers */
thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}
```

## Z-Index & Stacking Context

### Z-Index Basics
```css
.element {
  position: relative; /* position required (not static) */
  z-index: 10;
}

/* Z-index scale system */
:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}
```

### Creating Stacking Context
```css
/* Ways to create new stacking context */
.stacking-context {
  /* Position + z-index */
  position: relative;
  z-index: 1;

  /* Or opacity less than 1 */
  opacity: 0.99;

  /* Or transform */
  transform: translateX(0);

  /* Or filter */
  filter: blur(0);

  /* Or isolation */
  isolation: isolate;
}
```

## Common Layout Patterns

### Modal Overlay
```css
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  background: white;
  padding: 2rem;
  border-radius: 8px;
}
```

### Sticky Sidebar
```css
.sidebar {
  position: sticky;
  top: 80px; /* Below fixed header */
  height: calc(100vh - 100px);
  overflow-y: auto;
}
```

### Dropdown Menu
```css
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}
```

### Tooltip
```css
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  padding: 8px;
  background: black;
  color: white;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1070;
}
```

### Card Overlay
```css
.card {
  position: relative;
  overflow: hidden;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}
```

## Performance Tips

### Layout Thrashing
```css
/* Avoid changing position in animations */
/* Bad */
@keyframes slide {
  to { left: 100px; }
}

/* Good - use transform instead */
@keyframes slide {
  to { transform: translateX(100px); }
}
```

### Containment
```css
.widget {
  contain: layout; /* Isolates layout calculations */
  position: relative;
}
```

### Will-Change
```css
.animated-element {
  will-change: transform;
  /* Hints browser for optimization */
  /* Remove when animation completes */
}
```

Complete guide to CSS display and position properties for layout and positioning control

CSS Display & Position - Definitions, Values & Usage

# CSS Methodologies, Standards & Conventions

## Popular Methodologies

### BEM (Block Element Modifier)

#### Structure
```css
/* Block */
.card {}

/* Element */
.card__title {}
.card__content {}
.card__footer {}

/* Modifier */
.card--featured {}
.card__title--large {}
```

#### Example Component
```html
<article class="card card--featured">
  <h2 class="card__title card__title--large">Title</h2>
  <div class="card__content">Content</div>
  <footer class="card__footer">
    <button class="card__button card__button--primary">Action</button>
  </footer>
</article>
```

### OOCSS (Object-Oriented CSS)

#### Separation of Structure and Skin
```css
/* Structure */
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  display: inline-block;
}

/* Skin */
.btn-primary {
  background: blue;
  color: white;
}

.btn-secondary {
  background: gray;
  color: white;
}
```

#### Separation of Container and Content
```css
/* Bad - Content depends on container */
.sidebar h3 {
  font-size: 14px;
}

/* Good - Content is independent */
.widget-title {
  font-size: 14px;
}
```

### SMACSS (Scalable and Modular Architecture)

#### Categories
```css
/* 1. Base - Element defaults */
html, body { margin: 0; }
h1 { font-size: 2rem; }

/* 2. Layout - Major sections */
.l-header {}
.l-sidebar {}
.l-main {}

/* 3. Module - Reusable components */
.card {}
.navigation {}

/* 4. State - Stateful styles */
.is-active {}
.is-hidden {}
.is-loading {}

/* 5. Theme - Color schemes */
.theme-dark {}
.theme-light {}
```

### Atomic CSS (Utility-First)

#### Single-Purpose Classes
```css
/* Spacing */
.m-0 { margin: 0; }
.p-4 { padding: 1rem; }
.mt-2 { margin-top: 0.5rem; }

/* Typography */
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.text-lg { font-size: 1.125rem; }

/* Layout */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
```

#### Usage Example
```html
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
  <h3 class="text-lg font-bold">Title</h3>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Action</button>
</div>
```

### CSS Modules

#### Component Isolation
```css
/* Button.module.css */
.button {
  padding: 10px 20px;
  border-radius: 4px;
}

.primary {
  background: blue;
  color: white;
}

.large {
  padding: 15px 30px;
  font-size: 1.2rem;
}
```

#### JavaScript Import
```jsx
import styles from './Button.module.css';

<button className={`${styles.button} ${styles.primary}`}>
  Click Me
</button>
```

## Naming Conventions

### Common Patterns
```css
/* kebab-case (recommended) */
.my-component-name {}

/* camelCase */
.myComponentName {}

/* PascalCase */
.MyComponentName {}

/* snake_case */
.my_component_name {}
```

### Prefix Conventions
```css
/* JavaScript hooks */
.js-modal-trigger {}

/* State classes */
.is-active {}
.has-error {}
.can-edit {}

/* Utility classes */
.u-text-center {}
.u-hidden {}

/* Layout classes */
.l-container {}
.l-grid {}
```

## File Organization

### 7-1 Pattern
```
styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/
│   ├── _header.scss
│   └── _footer.scss
├── pages/
│   ├── _home.scss
│   └── _about.scss
├── themes/
│   └── _dark.scss
├── vendors/
│   └── _bootstrap.scss
└── main.scss
```

### ITCSS (Inverted Triangle CSS)
```
styles/
├── settings/   # Variables
├── tools/      # Mixins, functions
├── generic/    # Reset, normalize
├── elements/   # HTML elements
├── objects/    # OOCSS patterns
├── components/ # UI components
├── utilities/  # Helper classes
```

## Best Practices

### Specificity Management
```css
/* Low specificity (good) */
.button {}
.button-primary {}

/* High specificity (avoid) */
div.container > ul.list > li.item > a.link {}

/* Use data attributes for state */
[data-state="active"] {}
[aria-expanded="true"] {}
```

### Progressive Enhancement
```css
/* Base styles */
.card {
  padding: 1rem;
  background: white;
}

/* Feature queries */
@supports (display: grid) {
  .card-grid {
    display: grid;
    gap: 1rem;
  }
}

/* Container queries */
@container (min-width: 400px) {
  .card {
    padding: 2rem;
  }
}
```

### Performance Considerations
```css
/* Avoid expensive selectors */
/* Bad */
[class*="btn"] {}
:nth-child(3n+1) {}

/* Good */
.btn {}
.third-item {}

/* Use CSS containment */
.widget {
  contain: layout style;
}
```

## Modern Standards

### Custom Properties Pattern
```css
.component {
  --component-padding: 1rem;
  --component-color: blue;

  padding: var(--component-padding);
  color: var(--component-color);
}

.component--large {
  --component-padding: 2rem;
}
```

### Logical Properties
```css
/* Old way */
.element {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Modern way */
.element {
  margin-inline: auto;
  padding-inline: 1rem;
}
```

### Cascade Layers
```css
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; }
}

@layer components {
  .button { padding: 1rem; }
}

@layer utilities {
  .mt-4 { margin-top: 1rem; }
}
```

Modern CSS architectures, naming conventions, and organizational patterns for scalable stylesheets

CSS Methodologies, Standards & Conventions

# CSS Variables & Mixins - Explained

## Understanding Maintainable CSS

**The Problem**: Hard-coded values make CSS maintenance nightmare. Change a brand color? Search and replace 47 instances. Add dark mode? Duplicate half your stylesheet.

**The Solution**: Variables store values once, use everywhere. Mixins package reusable patterns. Both create maintainable, scalable CSS.

**Key Difference**:
- **CSS Variables**: Runtime values that can change dynamically (theming, JavaScript)
- **Sass Variables**: Compile-time values that get replaced during build
- **Mixins**: Reusable blocks of CSS declarations

## CSS Custom Properties (Variables)

### Basic Syntax

**What it does**: Stores values that can be reused throughout your stylesheet and changed dynamically.

**Why use it**: Single source of truth for design tokens. Change once, update everywhere. Enable dynamic theming.

**How it works**:
1. Declare variables with `--` prefix (anywhere, but `:root` for globals)
2. Use with `var()` function anywhere you'd use a value
3. Browser resolves variables at render time, not compile time
```css
/* Declaration */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-unit: 8px;
  --border-radius: 4px;
  --font-main: 'Helvetica', sans-serif;
}

/* Usage */
.element {
  color: var(--primary-color);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
  font-family: var(--font-main);
}
```

### Fallback Values

**What it does**: Provides backup values when variables are undefined or invalid.

**Why use it**: Prevents broken layouts when variables fail. Essential for component libraries and progressive enhancement.

**How it works**:
1. Browser tries to resolve the variable
2. If undefined/invalid, uses fallback value
3. Fallbacks can be other variables (chains)
4. Fallbacks can be complex values (gradients, functions)

```css
.element {
  /* Single fallback - most common */
  color: var(--text-color, #333);  /* Use #333 if --text-color undefined */

  /* Chained fallbacks - tries each in sequence */
  padding: var(--custom-padding, var(--theme-padding, var(--default-padding, 1rem)));

  /* Complex fallback - entire gradient as backup */
  background: var(--brand-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));

  /* Invalid variable falls back */
  font-size: var(--invalid-size, 16px); /* --invalid-size: "not-a-size" would use 16px */
}
```

**Common pitfall**: Forgetting fallbacks in reusable components leads to broken styles when variables are missing.

**Real-world example**: CSS frameworks use extensive fallbacks for graceful degradation across different implementations.

### Scope and Inheritance

**What it does**: Variables inherit from parent elements and can be overridden at any level.

**Why use it**: Component-level theming, contextual overrides, and modular design systems.

**How it works**:
1. Variables inherit down the DOM tree like other CSS properties
2. Child elements can override parent variables
3. Closest definition wins (specificity doesn't matter for variables)

```css
/* Global scope - available everywhere */
:root {
  --global-color: blue;
  --base-padding: 16px;
}

/* Component scope - overrides global within this component */
.card {
  --card-padding: var(--base-padding);  /* Inherits global, can customize */
  --card-bg: white;
  --card-border: 1px solid #ddd;
}

/* Variant - overrides specific variables */
.card-dark {
  --card-bg: #333;        /* Override background */
  --card-border: 1px solid #555; /* Override border */
  /* --card-padding still inherited from .card */
}

/* Inheritance in action */
.theme-large {
  --base-padding: 24px;   /* Affects all children */
}

.theme-large .card {
  /* Automatically gets 24px padding instead of 16px */
  padding: var(--card-padding); /* Resolves to 24px */
}

/* Deep nesting */
.page {
  --text-color: #333;
}

.page .sidebar {
  --text-color: #666;     /* Override for sidebar only */
}

.page .sidebar .widget {
  color: var(--text-color); /* Uses #666, not #333 */
}
```

**Common pitfall**: Variable inheritance can be confusing. Use browser DevTools to trace variable resolution.

**Real-world example**: Design systems use scoped variables for component variants (button sizes, card themes).

### Dynamic Values

**What it does**: Variables can be modified by JavaScript and respond to media queries at runtime.

**Why use it**: Dynamic theming, user preferences, responsive design tokens, and interactive effects.

**How it works**:
1. JavaScript can read/write variable values using `setProperty()`
2. Variables can be animated with CSS transitions
3. Media queries can change variables contextually
4. Values recalculate automatically when variables change

```css
/* JavaScript-controllable color system */
.dynamic-element {
  --hue: 200;               /* Blue by default */
  --saturation: 50%;
  --lightness: 50%;

  /* Composed from variables - changes when variables change */
  background: hsl(var(--hue), var(--saturation), var(--lightness));

  /* Variables can be animated! */
  transition: --hue 0.3s ease;
}

/* JavaScript can change this:
   element.style.setProperty('--hue', '120'); // Green
   element.style.setProperty('--hue', '0');   // Red
*/

/* Responsive variables - values change based on screen size */
:root {
  --container-width: 90%;    /* Mobile: fluid width */
  --font-scale: 0.9;         /* Mobile: smaller text */
  --spacing-unit: 12px;      /* Mobile: compact spacing */
}

@media (min-width: 768px) {
  :root {
    --container-width: 750px;  /* Tablet: fixed width */
    --font-scale: 1;          /* Tablet: normal scale */
    --spacing-unit: 16px;     /* Tablet: comfortable spacing */
  }
}

@media (min-width: 1024px) {
  :root {
    --container-width: 1200px; /* Desktop: wide layout */
    --font-scale: 1.1;        /* Desktop: larger text */
    --spacing-unit: 20px;     /* Desktop: generous spacing */
  }
}

/* Usage - automatically responsive */
.container {
  width: var(--container-width);
  padding: var(--spacing-unit);
  font-size: calc(1rem * var(--font-scale));
}
```

**Common pitfall**: Not all CSS properties can be animated. Variables themselves can transition, but not all properties that use them.

**Real-world example**: GitHub's theme switcher uses variables to instantly change colors site-wide. Spotify uses them for dynamic playlist colors.

### Math with CSS Variables
```css
.calculated {
  /* Basic calculations */
  --base-size: 16px;
  --scale: 1.5;

  font-size: var(--base-size);
  line-height: calc(var(--base-size) * var(--scale));

  /* Complex calculations */
  --columns: 3;
  --gap: 20px;
  width: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
}

/* Spacing system */
:root {
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 0.5);  /* 4px */
  --space-sm: var(--space-unit);               /* 8px */
  --space-md: calc(var(--space-unit) * 2);     /* 16px */
  --space-lg: calc(var(--space-unit) * 3);     /* 24px */
  --space-xl: calc(var(--space-unit) * 4);     /* 32px */
}
```

## Theme System with CSS Variables

### Light/Dark Theme
```css
/* Default (light) theme */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: #dddddd;
  --shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --border-color: #404040;
  --shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Usage remains the same */
.card {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}
```

### Color Schemes
```css
/* Define color schemes */
.theme-blue {
  --primary: #3498db;
  --primary-light: #5dade2;
  --primary-dark: #2874a6;
  --primary-rgb: 52, 152, 219;
}

.theme-green {
  --primary: #2ecc71;
  --primary-light: #58d68d;
  --primary-dark: #239b56;
  --primary-rgb: 46, 204, 113;
}

/* Use with alpha channel */
.overlay {
  background: rgba(var(--primary-rgb), 0.8);
}
```

## Sass/SCSS Mixins

### Basic Mixin Syntax
```scss
// Define mixin
@mixin button-style {
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

// Use mixin
.button {
  @include button-style;
  background: blue;
  color: white;
}
```

### Mixins with Arguments
```scss
// Mixin with parameters
@mixin button($bg-color, $text-color: white) {
  background: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;

  &:hover {
    background: darken($bg-color, 10%);
  }
}

// Usage
.button-primary {
  @include button(#3498db);
}

.button-secondary {
  @include button(#95a5a6, #333);
}
```

### Responsive Mixins
```scss
// Breakpoint mixin
@mixin breakpoint($point) {
  @if $point == mobile {
    @media (max-width: 767px) { @content; }
  }
  @else if $point == tablet {
    @media (min-width: 768px) { @content; }
  }
  @else if $point == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

// Usage
.container {
  width: 100%;

  @include breakpoint(tablet) {
    width: 750px;
  }

  @include breakpoint(desktop) {
    width: 970px;
  }
}
```

### Utility Mixins
```scss
// Flexbox center
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Absolute positioning
@mixin absolute($top: null, $right: null, $bottom: null, $left: null) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// Truncate text
@mixin truncate($width: 100%) {
  width: $width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Usage
.centered {
  @include flex-center;
}

.overlay {
  @include absolute(0, 0, 0, 0);
}

.title {
  @include truncate(200px);
}
```

## CSS Variables vs Sass Variables

### Key Differences

**When to Use Each**:
- **Sass Variables**: Build-time constants (breakpoints, font stacks, asset paths)
- **CSS Variables**: Runtime values (colors, spacing, user preferences)
- **Best Practice**: Use both together for maximum power

**Comparison Table**:

| Feature | Sass Variables | CSS Variables |
|---------|---------------|---------------|
| **Timing** | Compile-time | Runtime |
| **JavaScript Access** | No | Yes |
| **Scope** | Global only | Inherit/Override |
| **Animation** | No | Yes |
| **Functions** | All Sass functions | calc() only |
| **Browser Support** | 100% (compiles away) | 95%+ (IE11 needs polyfill) |
| **Performance** | Faster (pre-compiled) | Slightly slower |

```scss
// Sass variables (compile-time)
$primary-color: #3498db;
$breakpoint-tablet: 768px;
$font-stack: 'Helvetica', Arial, sans-serif;

.element {
  // Resolved during Sass compilation
  color: $primary-color;
  font-family: $font-stack;

  // Can use Sass functions
  background: lighten($primary-color, 20%);  // #5dade2
  border: 1px solid darken($primary-color, 15%);  // #2874a6

  @media (min-width: $breakpoint-tablet) {
    font-size: 1.2rem;
  }
}

/* Output CSS (variables are gone): */
.element {
  color: #3498db;
  font-family: 'Helvetica', Arial, sans-serif;
  background: #5dade2;
  border: 1px solid #2874a6;
}

@media (min-width: 768px) {
  .element { font-size: 1.2rem; }
}
```

```css
/* CSS variables (runtime) */
:root {
  --primary-color: #3498db;
  --primary-light: #5dade2;
  --opacity-level: 0.8;
}

.element {
  /* Resolved by browser at runtime */
  color: var(--primary-color);
  background: var(--primary-light);

  /* Can use calc() for math */
  opacity: calc(var(--opacity-level) * 0.9);

  /* JavaScript can change these live */
  transition: color 0.3s ease;
}

/* JavaScript can do: */
/* document.documentElement.style.setProperty('--primary-color', '#e74c3c'); */
```

**Combined Power**:
```scss
// Define constants with Sass
$brand-blue: #3498db;
$brand-green: #2ecc71;
$spacing-base: 16px;

// Inject into CSS variables for runtime flexibility
:root {
  --color-primary: #{$brand-blue};        // Convert Sass var to CSS var
  --color-secondary: #{$brand-green};
  --spacing-unit: #{$spacing-base};
  --spacing-small: #{$spacing-base * 0.5};
  --spacing-large: #{$spacing-base * 2};
}

// Use both as needed
.component {
  // Sass functions for color manipulation
  border: 1px solid #{lighten($brand-blue, 10%)};

  // CSS variables for theming
  background: var(--color-primary);
  padding: var(--spacing-unit);

  @media (min-width: $breakpoint-tablet) {
    padding: var(--spacing-large);
  }
}
```

**Real-world strategy**: Major sites like GitHub use Sass for build-time constants and CSS variables for user-customizable values.

### Combining Both
```scss
// Sass variables for build-time constants
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;

// CSS variables for runtime theming
:root {
  --primary: #{$primary-color};
  --spacing: 8px;
}

// Mixin using both
@mixin responsive-spacing {
  padding: var(--spacing);

  @media (min-width: $breakpoint-tablet) {
    --spacing: 16px;
  }

  @media (min-width: $breakpoint-desktop) {
    --spacing: 24px;
  }
}
```

## Advanced Patterns

### Component Theming
```css
/* Component with customizable properties */
.button {
  /* Define defaults */
  --button-bg: var(--primary, #3498db);
  --button-color: var(--on-primary, white);
  --button-padding: var(--space-md, 1rem);
  --button-radius: var(--radius-md, 4px);

  /* Apply properties */
  background: var(--button-bg);
  color: var(--button-color);
  padding: var(--button-padding);
  border-radius: var(--button-radius);
}

/* Variations */
.button--large {
  --button-padding: var(--space-lg);
}

.button--rounded {
  --button-radius: 999px;
}

.button--ghost {
  --button-bg: transparent;
  --button-color: var(--primary);
  border: 2px solid currentColor;
}
```

### Dynamic Gradients
```css
.gradient-box {
  --gradient-start: #667eea;
  --gradient-end: #764ba2;
  --gradient-angle: 135deg;

  background: linear-gradient(
    var(--gradient-angle),
    var(--gradient-start) 0%,
    var(--gradient-end) 100%
  );
}

/* Hover effect */
.gradient-box:hover {
  --gradient-angle: 315deg;
}
```

### Responsive Typography
```css
:root {
  /* Fluid type scale */
  --type-scale: clamp(1rem, 2.5vw, 1.25rem);

  --text-xs: calc(var(--type-scale) * 0.75);
  --text-sm: calc(var(--type-scale) * 0.875);
  --text-base: var(--type-scale);
  --text-lg: calc(var(--type-scale) * 1.125);
  --text-xl: calc(var(--type-scale) * 1.25);
  --text-2xl: calc(var(--type-scale) * 1.5);
  --text-3xl: calc(var(--type-scale) * 1.875);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { font-size: var(--text-base); }
```

## JavaScript Integration

### Getting and Setting Variables

**What it does**: Allows dynamic theming, user preferences, and interactive color schemes.

**Why use it**: Create theme switchers, user customization, and responsive design systems.

**How it works**: Variables are CSS properties, so you can read/write them like any style property.

```javascript
// Get current variable value
const root = document.documentElement;
const primaryColor = getComputedStyle(root)
  .getPropertyValue('--primary-color')
  .trim(); // Remove whitespace

console.log(primaryColor); // "#3498db"

// Set global variable (affects entire page)
root.style.setProperty('--primary-color', '#e74c3c');
root.style.setProperty('--font-scale', '1.2');

// Set variable on specific element (affects element and children)
const card = document.querySelector('.card');
card.style.setProperty('--card-bg', '#f0f0f0');
card.style.setProperty('--card-padding', '2rem');

// Remove variable (falls back to parent or default)
root.style.removeProperty('--primary-color');

// Check if variable is supported
if (CSS.supports('color', 'var(--test-var)')) {
  // Browser supports CSS variables
  enableAdvancedTheming();
} else {
  // Fallback for older browsers
  useStaticColors();
}

// Animate variables with JavaScript
function animateHue() {
  let hue = 0;
  const element = document.querySelector('.dynamic-bg');

  setInterval(() => {
    hue = (hue + 1) % 360;
    element.style.setProperty('--hue', hue);
  }, 50); // Smooth color wheel animation
}
```

**Real-world examples**:

```javascript
// Theme switcher
function setTheme(themeName) {
  document.documentElement.setAttribute('data-theme', themeName);
  localStorage.setItem('theme', themeName);

  // Update individual variables if needed
  if (themeName === 'dark') {
    document.documentElement.style.setProperty('--shadow-opacity', '0.3');
  } else {
    document.documentElement.style.setProperty('--shadow-opacity', '0.1');
  }
}

// User color picker
colorPicker.addEventListener('change', (e) => {
  const color = e.target.value;
  document.documentElement.style.setProperty('--accent-color', color);

  // Generate complementary colors
  const hsl = hexToHsl(color);
  const complementary = `hsl(${(hsl.h + 180) % 360}, ${hsl.s}%, ${hsl.l}%)`;
  document.documentElement.style.setProperty('--accent-complement', complementary);
});

// Responsive variables based on viewport
function updateViewportVariables() {
  const vw = window.innerWidth;
  const vh = window.innerHeight;

  // Dynamic spacing based on screen size
  const baseSpacing = Math.max(8, vw * 0.01); // 1% of width, min 8px
  document.documentElement.style.setProperty('--dynamic-spacing', baseSpacing + 'px');

  // Dynamic font scaling
  const fontSize = Math.max(14, Math.min(20, vw * 0.02));
  document.documentElement.style.setProperty('--dynamic-font-size', fontSize + 'px');
}

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Set initial values
```

**Common pitfalls**:
- CSS variables are strings, not numbers: `getPropertyValue()` returns "16px", not 16
- Whitespace matters: always `.trim()` returned values
- Variable names are case-sensitive: `--Color` ≠ `--color`

**Performance tip**: Batch variable updates to prevent multiple repaints:

```javascript
// ❌ Bad - causes multiple repaints
element.style.setProperty('--color1', 'red');
element.style.setProperty('--color2', 'blue');
element.style.setProperty('--color3', 'green');

// ✅ Good - single repaint
element.style.cssText = `
  --color1: red;
  --color2: blue;
  --color3: green;
`;
```

### Dynamic Theming
```javascript
// Theme switcher
function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}

// Color picker integration
colorPicker.addEventListener('change', (e) => {
  document.documentElement.style
    .setProperty('--accent-color', e.target.value);
});

// Responsive variables
function updateCSSVariables() {
  const vw = window.innerWidth;
  const vh = window.innerHeight;

  document.documentElement.style.setProperty('--vw', `${vw}px`);
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', updateCSSVariables);
```

Understanding CSS custom properties (variables) and preprocessor mixins for maintainable, scalable stylesheets

CSS Variables & Mixins - Explained

# Button Component

A versatile, accessible button component with multiple variants, sizes, and states. Built with modern CSS and vanilla JavaScript for optimal performance and compatibility.

## Description

The Button component provides a comprehensive set of button styles and behaviors for web applications. It includes primary, secondary, and ghost variants, supports icons, loading states, and various sizes while maintaining full accessibility compliance.

## Features

- **Multiple Variants**: Primary, Secondary, Ghost styles
- **Icon Support**: Leading icons, icon-only buttons
- **Size Options**: Small, Medium (default), Large
- **States**: Default, Hover, Active, Disabled, Loading
- **Accessibility**: ARIA labels, keyboard navigation, focus management
- **Ripple Effect**: Material Design-inspired click feedback
- **Responsive**: Mobile-optimized with touch-friendly targets

## Properties/Options

| Property | Type | Description | Default |
|----------|------|-------------|---------|
| `variant` | `primary \| secondary \| ghost` | Visual style variant | `primary` |
| `size` | `sm \| md \| lg` | Button size | `md` |
| `disabled` | `boolean` | Disabled state | `false` |
| `loading` | `boolean` | Loading state with spinner | `false` |
| `icon` | `boolean` | Include icon | `false` |
| `iconOnly` | `boolean` | Icon without text | `false` |

## Usage Examples

### Basic Button
```html
<button class="btn btn-primary">Click Me</button>
```

### Button with Icon
```html
<button class="btn btn-primary btn-icon">
  <svg></svg>
  Download
</button>
```

### Loading State
```javascript
// Start loading
buttonComponent.setLoadingState(button, true);

// Stop loading
buttonComponent.setLoadingState(button, false);
```

### Programmatic Control
```javascript
// Trigger click
buttonComponent.triggerClick(button);

// Enable/disable
buttonComponent.setEnabled(button, false);
```

## Code Reference

{{code:button.html}}
{{code:button.css}}
{{code:button.js}}

## Live Demo

{{demo:button}}

## Accessibility Notes

- **ARIA Labels**: All buttons include descriptive `aria-label` attributes
- **Keyboard Navigation**: Full support for Enter and Space key activation
- **Focus Indicators**: Visible focus rings with 2px outline
- **Loading State**: Uses `aria-busy="true"` during loading
- **Disabled State**: Properly conveyed with `disabled` attribute and reduced opacity
- **Screen Reader Support**: Semantic button elements with proper announcements
- **Touch Targets**: Minimum 44x44px touch targets on mobile devices

## Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)

## Best Practices

1. Always provide meaningful button text or aria-labels
2. Use appropriate variant for action importance
3. Maintain consistent sizing across similar buttons
4. Avoid disabled buttons when possible (consider alternatives)
5. Provide loading feedback for async operations
6. Ensure sufficient color contrast (WCAG AA compliance)

Button

# Card Component

A flexible content container component with header, body, and footer sections. Supports various layouts, interactive states, and rich content including images, tags, and action buttons.

## Description

The Card component is a versatile container designed to display structured content in a visually appealing way. It supports multiple variants including image cards, horizontal layouts, interactive cards, and minimal designs. Built with accessibility and responsive design in mind.

## Features

- **Multiple Layouts**: Vertical, horizontal, minimal, and image-based cards
- **Interactive States**: Hover effects, click handling, expandable content
- **Rich Content**: Images, badges, tags, meta information
- **Action Support**: Header actions, footer buttons, favorite toggles
- **Accessibility**: Semantic HTML, ARIA labels, keyboard navigation
- **Dark Mode**: Automatic dark mode support
- **Responsive**: Mobile-optimized grid layout

## Properties/Options

| Property | Type | Description | Default |
|----------|------|-------------|---------|
| `variant` | `default \| image \| horizontal \| interactive \| minimal` | Card layout variant | `default` |
| `title` | `string` | Card title text | Required |
| `text` | `string` | Card body content | - |
| `image` | `string` | Image URL | - |
| `tags` | `string[]` | Array of tag labels | `[]` |
| `interactive` | `boolean` | Enable click interactions | `false` |
| `expandable` | `boolean` | Enable expand/collapse | `false` |

## Usage Examples

### Basic Card
```html
<article class="card">
  <header class="card-header">
    <h3 class="card-title">Card Title</h3>
  </header>
  <div class="card-body">
    <p class="card-text">Card content goes here.</p>
  </div>
  <footer class="card-footer">
    <button class="card-button">Action</button>
  </footer>
</article>
```

### Card with Image
```html
<article class="card card-with-image">
  <div class="card-image-wrapper">
    <img src="image.jpg" alt="Description" class="card-image">
  </div>
  <header class="card-header">
    <h3 class="card-title">Featured Content</h3>
  </header>
  
</article>
```

### Interactive Card
```javascript
// Listen for card clicks
document.addEventListener('card:click', (e) => {
  console.log('Card clicked:', e.detail.card);
});

// Filter cards by tag
document.dispatchEvent(new CustomEvent('card:filter', {
  detail: { tag: 'javascript' }
}));
```

### Programmatic Creation
```javascript
const newCard = cardComponent.createCard({
  title: 'Dynamic Card',
  text: 'Created programmatically',
  tags: ['new', 'featured'],
  image: 'https://example.com/image.jpg'
});
document.querySelector('.card-showcase').appendChild(newCard);
```

## Code Reference

{{code:card.html}}
{{code:card.css}}
{{code:card.js}}

## Live Demo

{{demo:card}}

## Component Variants

### Default Card
Standard card with header, body, and footer sections.

### Image Card
Card with a featured image at the top, perfect for visual content.

### Horizontal Card
Side-by-side layout with image and content, ideal for lists.

### Interactive Card
Clickable card with hover effects and keyboard navigation.

### Minimal Card
Clean design with subtle borders, no shadows.

## Events

| Event | Description | Detail |
|-------|-------------|--------|
| `card:click` | Fired when interactive card is clicked | `{ card: HTMLElement }` |
| `card:action` | Fired when action button is clicked | `{ card, action, button }` |
| `card:edited` | Fired after inline editing | `{ card, title, text }` |
| `card:filter` | Filter cards by tag/category | `{ tag, category }` |
| `card:sort` | Sort cards | `{ sortBy }` |

## Accessibility Notes

- **Semantic Structure**: Uses `<article>` element with proper heading hierarchy
- **ARIA Labels**: All interactive elements have descriptive labels
- **Keyboard Navigation**: Full keyboard support with Tab and Enter/Space keys
- **Focus Indicators**: Clear visual focus states with 2px outline
- **Screen Reader Support**: Proper announcements for all states and actions
- **Color Contrast**: WCAG AA compliant color combinations
- **Responsive Touch Targets**: Minimum 44x44px for mobile devices

## CSS Variables

```css
/* Customize card appearance */
--card-bg: white;
--card-border: #e5e7eb;
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--card-radius: 0.75rem;
--card-padding: 1.25rem;
```

## Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)

## Best Practices

1. Always include meaningful titles and alt text for images
2. Use semantic HTML structure (article, header, footer)
3. Provide keyboard navigation for interactive cards
4. Ensure sufficient color contrast for text
5. Use lazy loading for images in long lists
6. Keep card content concise and scannable
7. Group related actions in the card footer

Card

# Modal Component

A fully accessible modal dialog component with multiple variants, keyboard navigation, focus management, and animation support. Built with vanilla JavaScript and modern CSS.

## Description

The Modal component provides a flexible overlay system for displaying content above the main page. It includes proper focus management, keyboard navigation, backdrop interactions, and various size options. Fully compliant with WCAG accessibility standards.

## Features

- **Multiple Variants**: Basic, form, confirmation, fullscreen, scrollable
- **Accessibility**: ARIA attributes, focus trap, screen reader support
- **Keyboard Navigation**: Escape to close, Tab cycling within modal
- **Focus Management**: Auto-focus first element, restore focus on close
- **Animation**: Smooth open/close transitions
- **Backdrop**: Click-to-close with blur effect
- **Programmatic API**: Create modals dynamically
- **Form Support**: Unsaved changes warning
- **Responsive**: Mobile-optimized fullscreen on small screens

## Properties/Options

| Property | Type | Description | Default |
|----------|------|-------------|---------|
| `id` | `string` | Unique modal identifier | Required |
| `title` | `string` | Modal header title | Required |
| `content` | `string \| HTML` | Modal body content | - |
| `size` | `default \| small \| wide \| fullscreen` | Modal size variant | `default` |
| `showClose` | `boolean` | Show close button | `true` |
| `showFooter` | `boolean` | Show footer section | `true` |
| `backdrop` | `boolean` | Show backdrop | `true` |
| `closeOnEscape` | `boolean` | Close on Escape key | `true` |
| `closeOnBackdrop` | `boolean` | Close on backdrop click | `true` |

## Usage Examples

### Basic Modal
```html
<button data-modal="modal-basic">Open Modal</button>

<div id="modal-basic" class="modal" role="dialog">
  <div class="modal-backdrop"></div>
  <div class="modal-container">
    <div class="modal-content">
      
    </div>
  </div>
</div>
```

### Programmatic Modal
```javascript
// Create alert
modalComponent.alert('Operation completed successfully!', 'Success');

// Confirm dialog
const confirmed = await modalComponent.confirm('Delete this item?');
if (confirmed) {
  // Perform deletion
}

// Prompt for input
const name = await modalComponent.prompt('Enter your name:', 'Welcome');
```

### Custom Modal Creation
```javascript
const modal = modalComponent.createModal({
  title: 'Custom Modal',
  content: '<p>Custom content here</p>',
  size: 'wide',
  buttons: [
    { text: 'Cancel', variant: 'secondary', action: 'dismiss' },
    { text: 'Save', variant: 'primary', id: 'save-btn' }
  ]
});

modalComponent.openModal(modal.id);
```

### Event Handling
```javascript
// Listen for modal events
document.addEventListener('modal:opened', (e) => {
  console.log('Modal opened:', e.detail.modalId);
});

document.addEventListener('modal:closed', (e) => {
  console.log('Modal closed:', e.detail.modalId);
});

// Trigger via events
document.dispatchEvent(new CustomEvent('modal:open', {
  detail: { modalId: 'modal-basic' }
}));
```

## Code Reference

{{code:modal.html}}
{{code:modal.css}}
{{code:modal.js}}

## Live Demo

{{demo:modal}}

## Modal Types

### Basic Modal
Standard modal with header, body, and footer sections.

### Form Modal
Modal containing form elements with validation support.

### Confirmation Modal
Alert-style modal for confirming actions with danger styling.

### Fullscreen Modal
Takes up entire viewport, ideal for complex content.

### Scrollable Modal
Fixed header/footer with scrollable body content.

## API Methods

| Method | Description | Parameters | Returns |
|--------|-------------|------------|---------|
| `openModal(id, options)` | Open modal by ID | `id: string, options: object` | `void` |
| `closeModal(id, options)` | Close modal | `id: string, options: object` | `void` |
| `toggleModal(id)` | Toggle modal state | `id: string` | `void` |
| `createModal(options)` | Create modal dynamically | `options: object` | `HTMLElement` |
| `alert(message, title)` | Show alert modal | `message: string, title: string` | `HTMLElement` |
| `confirm(message, title)` | Show confirmation | `message: string, title: string` | `Promise<boolean>` |
| `prompt(message, title, default)` | Show input prompt | `message: string, title: string, default: string` | `Promise<string|null>` |

## Events

| Event | Description | Detail |
|-------|-------------|--------|
| `modal:opened` | Fired when modal opens | `{ modalId, modal }` |
| `modal:closed` | Fired when modal closes | `{ modalId, modal }` |
| `modal:open` | Trigger modal open | `{ modalId, options }` |
| `modal:close` | Trigger modal close | `{ modalId, options }` |
| `modal:toggle` | Toggle modal state | `{ modalId }` |

## Accessibility Notes

- **Role & ARIA**: Proper `role="dialog"` with `aria-labelledby` and `aria-describedby`
- **Focus Management**: Automatic focus trap within modal, restores focus on close
- **Keyboard Navigation**:
  - `Escape` - Close modal
  - `Tab` - Cycle through focusable elements
  - `Shift+Tab` - Reverse cycle
- **Screen Reader**: Announces modal opening/closing with proper context
- **Backdrop**: Semi-transparent with blur for visual separation
- **Alert Dialogs**: Uses `role="alertdialog"` for critical confirmations
- **Form Labels**: All form inputs have associated labels

## CSS Variables

```css
/* Customize modal appearance */
--modal-bg: white;
--modal-backdrop: rgba(0, 0, 0, 0.5);
--modal-border-radius: 0.75rem;
--modal-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
--modal-max-width: 32rem;
--modal-z-index: 9999;
```

## Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)

## Best Practices

1. Always provide meaningful titles and descriptions
2. Use appropriate modal size for content
3. Avoid nested modals
4. Provide clear action buttons
5. Handle unsaved form data before closing
6. Use confirmation modals for destructive actions
7. Ensure content is scrollable if needed
8. Test keyboard navigation thoroughly

Modal

# Toggle Switch Component

An iOS-style toggle switch component with smooth animations, async support, and full accessibility. Perfect for settings panels, forms, and preference controls.

## Description

The Toggle Switch component provides an intuitive on/off control with native-like interactions. It supports various sizes, colors, icons, loading states, and async operations. Built with accessibility in mind, featuring proper ARIA attributes and keyboard navigation.

## Features

- **iOS-Style Design**: Smooth animations and familiar interaction patterns
- **Async Support**: Loading states for server-side operations
- **Size Variants**: Small, default, and large sizes
- **Icon Support**: Optional icons for on/off states
- **Color Themes**: Default, colored (red/green), custom colors
- **State Labels**: Optional ON/OFF text labels
- **Group Behavior**: Settings panel with dependent toggles
- **Accessibility**: Full ARIA support, keyboard navigation
- **Loading States**: Built-in spinner for async operations
- **Feedback**: Success/error animations

## Properties/Options

| Property | Type | Description | Default |
|----------|------|-------------|---------|
| `id` | `string` | Unique toggle identifier | Required |
| `label` | `string` | Toggle label text | Required |
| `description` | `string` | Additional description text | - |
| `checked` | `boolean` | Initial state | `false` |
| `disabled` | `boolean` | Disabled state | `false` |
| `size` | `small \| default \| large` | Toggle size | `default` |
| `colored` | `boolean` | Use colored theme | `false` |
| `withIcons` | `boolean` | Show state icons | `false` |
| `async` | `boolean` | Enable async operations | `false` |

## Usage Examples

### Basic Toggle
```html
<label class="toggle-wrapper" for="toggle-basic">
  <span class="toggle-label">Enable Feature</span>
  <input type="checkbox" id="toggle-basic" class="toggle-input" role="switch">
  <span class="toggle-switch"></span>
</label>
```

### Toggle with Description
```html
<label class="toggle-wrapper toggle-with-description">
  <div class="toggle-content">
    <span class="toggle-label">Notifications</span>
    <span class="toggle-description">Receive alerts</span>
  </div>
  <input type="checkbox" class="toggle-input" role="switch">
  <span class="toggle-switch"></span>
</label>
```

### Async Toggle
```javascript
// Listen for toggle events
document.addEventListener('toggle:beforeChange', async (e) => {
  const { toggleId, newState } = e.detail;

  // Validate or prevent change
  if (!canToggle) {
    e.preventDefault();
  }
});

document.addEventListener('toggle:change', (e) => {
  console.log('Toggle changed:', e.detail);
});
```

### Programmatic Control
```javascript
// Set toggle state
toggleSwitchComponent.setToggleState('toggle-wifi', true);

// Toggle state
toggleSwitchComponent.toggleState('toggle-bluetooth');

// Enable/disable
toggleSwitchComponent.setEnabled('toggle-airplane', false);

// Get state
const isEnabled = toggleSwitchComponent.getState('toggle-wifi');

// Get all states
const allStates = toggleSwitchComponent.getAllStates();
```

### Create Toggle Dynamically
```javascript
const toggle = toggleSwitchComponent.createToggle({
  label: 'Dark Mode',
  description: 'Use dark theme',
  checked: false,
  withIcons: true,
  async: true
});

document.querySelector('.settings').appendChild(toggle);
```

## Code Reference

{{code:toggle-switch.html}}
{{code:toggle-switch.css}}
{{code:toggle-switch.js}}

## Live Demo

{{demo:toggle-switch}}

## Toggle Variants

### Basic Toggle
Standard on/off switch with label.

### Toggle with Icons
Shows sun/moon icons for theme switching.

### Colored Toggle
Red when off, green when on.

### Small/Large Sizes
Compact or prominent toggle sizes.

### Async Toggle
Loading spinner during server operations.

### Settings List
Group of toggles in a settings panel.

### State Labels
Shows ON/OFF text beside toggle.

## Events

| Event | Description | Detail |
|-------|-------------|--------|
| `toggle:change` | Fired when toggle changes | `{ toggleId, checked }` |
| `toggle:beforeChange` | Before async change (cancelable) | `{ toggleId, newState }` |
| `toggle:error` | Async operation failed | `{ toggleId, error }` |
| `toggle:reset` | Toggle reset to original | `{ toggleId }` |
| `toggle:set` | Set toggle state via API | `{ toggleId, checked }` |
| `toggle:toggle` | Toggle state via API | `{ toggleId }` |
| `toggle:enable` | Enable/disable via API | `{ toggleId, enabled }` |

## API Methods

| Method | Description | Parameters | Returns |
|--------|-------------|------------|---------|
| `setToggleState(id, checked)` | Set toggle state | `id: string, checked: boolean` | `void` |
| `toggleState(id)` | Toggle state | `id: string` | `void` |
| `setEnabled(id, enabled)` | Enable/disable toggle | `id: string, enabled: boolean` | `void` |
| `getState(id)` | Get toggle state | `id: string` | `boolean` |
| `getAllStates()` | Get all toggle states | - | `object` |
| `resetToggle(id)` | Reset to original state | `id: string` | `void` |
| `resetAll()` | Reset all toggles | - | `void` |
| `createToggle(options)` | Create toggle dynamically | `options: object` | `HTMLElement` |

## Accessibility Notes

- **Role & ARIA**: Uses `role="switch"` with `aria-checked` state
- **Keyboard Navigation**:
  - `Space` or `Enter` - Toggle state
  - `Tab` - Navigate between toggles
- **Screen Reader**: Announces state changes with proper labels
- **Focus Indicators**: Clear 2px outline on focus
- **Disabled State**: Properly conveyed with reduced opacity and cursor
- **Loading State**: Uses `aria-busy` during async operations
- **Labels**: All toggles have associated labels for context

## CSS Variables

```css
/* Customize toggle appearance */
--toggle-width: 44px;
--toggle-height: 24px;
--toggle-thumb-size: 20px;
--toggle-bg-off: #cbd5e1;
--toggle-bg-on: #3b82f6;
--toggle-transition: 0.2s ease-in-out;
```

## Keyboard Shortcuts

- **Space/Enter** - Toggle switch state
- **Tab** - Move to next toggle
- **Shift+Tab** - Move to previous toggle

## Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)

## Best Practices

1. Always provide clear labels describing what the toggle controls
2. Use descriptions for complex settings
3. Group related toggles together
4. Provide feedback for async operations
5. Handle errors gracefully with visual feedback
6. Use appropriate size variants for context
7. Consider using state labels for clarity
8. Test keyboard navigation thoroughly
9. Ensure sufficient color contrast
10. Avoid using toggles for actions (use buttons instead)

UI component documentation for toggle-switch

UI Notes & Concepts

Introduction

Ui Fundamentals