# Quick Reference - Responsive Design Classes & Patterns

## 📋 Table of Contents
1. Typography
2. Grid & Containers
3. Spacing (Padding/Margin)
4. Buttons & Forms
5. Display Utilities
6. Chat Widget

---

## 📝 Typography

### Headings (Auto-scale)
```html
<h1>Large heading (scales 1.75rem - 3.5rem)</h1>
<h2>Medium heading (scales 1.5rem - 2.8rem)</h2>
<h3>Smaller heading (scales 1.25rem - 2.2rem)</h3>
<h4>Subheading (scales 1.1rem - 1.8rem)</h4>
<h5>Small heading (scales 1rem - 1.5rem)</h5>
<h6>Tiny heading (scales 0.9rem - 1.2rem)</h6>
```

### Text Utilities
```html
<p class="text-bold">Bold text</p>
<p class="text-semibold">Semi-bold text</p>
<p class="text-uppercase">UPPERCASE TEXT</p>
<p class="text-center">Center aligned</p>
<p class="text-truncate">Truncate text with...</p>
```

### Text Colors
```html
<p class="text-primary">Primary color (#D4A574)</p>
<p class="text-secondary">Secondary color (#a8a8a8)</p>
<p class="text-success">Success green</p>
<p class="text-danger">Danger red</p>
<p class="text-warning">Warning yellow</p>
```

---

## 🎨 Grid & Containers

### Basic Grid Layouts
```html
<!-- 3-column grid, auto-wraps on mobile -->
<div class="grid grid-cols-3">
    <div class="card">Item 1</div>
    <div class="card">Item 2</div>
    <div class="card">Item 3</div>
</div>

<!-- 2-column grid -->
<div class="grid grid-cols-2">
    <div>Left</div>
    <div>Right</div>
</div>

<!-- 1 column on mobile, 4 on desktop -->
<div class="grid grid-cols-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
```

### Flexbox Layouts
```html
<!-- Space between items -->
<div class="flex flex-between">
    <div>Left</div>
    <div>Right</div>
</div>

<!-- Centered items -->
<div class="flex flex-center">
    <div>Centered content</div>
</div>

<!-- Column layout -->
<div class="flex flex-col gap-2">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

<!-- Wrapped items -->
<div class="flex flex-wrap gap-3">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>
```

### Containers
```html
<!-- Full width with padding -->
<div class="container">Content with max-width</div>

<!-- Small container (600px max) -->
<div class="container-sm">Small content area</div>

<!-- Medium container (900px max) -->
<div class="container-md">Medium content area</div>

<!-- Large container (1200px max) -->
<div class="container-lg">Large content area</div>

<!-- Extra large (1400px max) -->
<div class="container-xl">Extra large area</div>
```

---

## 📏 Spacing (Padding & Margin)

### Padding
```html
<div class="p-0">No padding</div>
<div class="p-1">Small padding</div>
<div class="p-2">Medium padding</div>
<div class="p-3">Large padding</div>
<div class="p-4">Extra large padding</div>
```

### Margin
```html
<div class="m-1">Small margin</div>
<div class="m-2">Medium margin</div>
<div class="m-3">Large margin</div>

<div class="mx-auto">Auto horizontal center</div>
<div class="my-auto">Auto vertical center</div>
```

### Gaps between flex/grid items
```html
<div class="flex gap-1">Small gap</div>
<div class="grid gap-2">Medium gap</div>
<div class="flex gap-3">Large gap</div>
<div class="flex gap-4">Extra large gap</div>
```

---

## 🔘 Buttons & Forms

### Buttons (Responsive)
```html
<!-- Primary button -->
<button class="btn btn-primary">Click Me</button>

<!-- Button inside flex (responsive sizing) -->
<div class="flex gap-2">
    <button class="btn btn-primary">Save</button>
    <button class="btn btn-primary">Cancel</button>
</div>

<!-- Full-width button -->
<button class="btn btn-primary" style="width: 100%;">Full Width</button>
```

### Form Fields (Touch-friendly)
```html
<!-- Text input (min 48px on touch) -->
<input type="text" class="form-control" placeholder="Enter text">

<!-- Email field -->
<input type="email" class="form-control" placeholder="your@email.com">

<!-- Password -->
<input type="password" class="form-control" placeholder="••••••••">

<!-- Textarea (auto-resize) -->
<textarea class="form-control" placeholder="Your message"></textarea>

<!-- Select dropdown -->
<select class="form-control">
    <option>Choose option</option>
</select>
```

### Form Groups
```html
<div class="form-group">
    <label>Email Address</label>
    <input type="email" class="form-control" placeholder="your@email.com">
</div>

<div class="form-group">
    <label>Message</label>
    <textarea class="form-control" placeholder="Type message..."></textarea>
</div>

<button class="btn btn-primary">Submit</button>
```

---

## 👁️ Display Utilities

### Show/Hide by Device
```html
<!-- Show only on mobile -->
<div class="show-mobile">Mobile content</div>

<!-- Show only on tablet -->
<div class="show-tablet">Tablet content</div>

<!-- Show only on desktop -->
<div class="show-desktop">Desktop content</div>

<!-- Hide elements -->
<div class="hidden">Never shown</div>
```

### Visibility
```html
<!-- Hide but keep space -->
<div class="invisible">Takes space but invisible</div>

<!-- Show element -->
<div class="visible">Always visible</div>
```

---

## 💬 Chat Widget

### Basic Usage
The chat widget is **automatically included** on pages with:
```html
<?php include 'includes/chat-widget.html'; ?>
<script src="assets/js/responsive-chat.js"></script>
```

### Chat Widget Features
- **Categories**: Service, Project, Order, Contact
- **Auto-responsive**: Works on all screen sizes
- **Chat Icon**: Click to open/close
- **Message Timestamps**: Shows when message sent
- **Notification Badge**: Shows unread count

### Customizing Responses
```javascript
// In responsive-chat.js, modify:
const aiResponses = {
    service: [
        "Your custom service response",
        "Another service response"
    ],
    project: [
        "Your custom project response"
    ],
    order: [
        "Your custom order response"
    ],
    contact: [
        "Your custom contact response"
    ]
};
```

---

## 🎨 Cards (Common Pattern)

### Basic Card
```html
<div class="card p-3">
    <h3 class="card-header">Card Title</h3>
    <div class="card-body">Your content here</div>
    <div class="card-footer">Footer info</div>
</div>
```

### Card Grid
```html
<div class="grid grid-cols-3 gap-3">
    <div class="card p-3">
        <h4>Card 1</h4>
        <p>Description</p>
    </div>
    <div class="card p-3">
        <h4>Card 2</h4>
        <p>Description</p>
    </div>
    <div class="card p-3">
        <h4>Card 3</h4>
        <p>Description</p>
    </div>
</div>
```

---

## 🎥 Media

### Responsive Images
```html
<!-- Image auto-scales -->
<img src="image.jpg" alt="Description">

<!-- Image with aspect ratio -->
<div class="aspect-video">
    <img src="video.jpg" alt="Video thumbnail">
</div>

<!-- Square image -->
<div class="aspect-square">
    <img src="square.jpg" alt="Square image">
</div>
```

### Responsive Video
```html
<div class="aspect-video">
    <iframe src="https://youtube.com/..."></iframe>
</div>
```

---

## 📊 Tables

### Responsive Table
```html
<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </tbody>
    </table>
</div>
```

---

## 🎭 Effects & Utilities

### Shadows
```html
<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
```

### Rounded Corners
```html
<div class="rounded-sm">Slightly rounded</div>
<div class="rounded">Rounded</div>
<div class="rounded-lg">Large rounded</div>
<div class="rounded-full">Circular</div>
```

### Opacity
```html
<div class="opacity-0">Invisible</div>
<div class="opacity-25">75% transparent</div>
<div class="opacity-50">50% transparent</div>
<div class="opacity-75">25% transparent</div>
<div class="opacity-100">Fully visible</div>
```

### Animations
```html
<div class="fade-in">Fade in animation</div>
<div class="slide-up">Slide up animation</div>
<div class="slide-down">Slide down animation</div>
```

---

## 🌟 Complete Page Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    
    <!-- Responsive utilities -->
    <link rel="stylesheet" href="assets/css/responsive-utilities.css">
    <link rel="stylesheet" href="assets/css/responsive-chat.css">
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container flex flex-between p-3">
            <h1>My Site</h1>
            <nav class="flex gap-2">
                <a href="#">Home</a>
                <a href="#">About</a>
            </nav>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container p-4">
        <h2>Welcome</h2>
        
        <!-- Responsive grid -->
        <div class="grid grid-cols-3 gap-3 m-3">
            <div class="card p-3 shadow-md">
                <h3>Item 1</h3>
                <p>Description</p>
                <button class="btn btn-primary">Learn More</button>
            </div>
            <div class="card p-3 shadow-md">
                <h3>Item 2</h3>
                <p>Description</p>
                <button class="btn btn-primary">Learn More</button>
            </div>
            <div class="card p-3 shadow-md">
                <h3>Item 3</h3>
                <p>Description</p>
                <button class="btn btn-primary">Learn More</button>
            </div>
        </div>

        <!-- Form -->
        <div class="container-md m-4">
            <h3>Contact Us</h3>
            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" placeholder="Your name">
            </div>
            <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" placeholder="your@email.com">
            </div>
            <button class="btn btn-primary">Send</button>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-light p-4 text-center">
        <p>&copy; 2024 My Site. All rights reserved.</p>
    </footer>

    <!-- Chat Widget (IMPORTANT!) -->
    <?php include 'includes/chat-widget.html'; ?>
    <script src="assets/js/responsive-chat.js"></script>
</body>
</html>
```

---

## 🔍 Responsive Breakpoints Reference

| Device | Width | Breakpoint | Layout |
|--------|-------|-----------|--------|
| Mobile | 320-480px | xs | 1 col |
| Tablet Small | 481-768px | sm | 2 cols |
| Tablet Large | 769-1024px | md | 3 cols |
| Desktop | 1025-1440px | lg | 4 cols |
| Extra Wide | 1441px+ | xl | Full |

---

**All utilities are mobile-first and scale smoothly across breakpoints!**

For more info, see: `RESPONSIVE_IMPLEMENTATION_GUIDE.md`
