Practical Guides

Production-Ready Patterns

Real-world component patterns, dark mode implementation, and responsive design strategies you can copy-paste into your projects.

📝 Component Pattern: Accessible Forms

Forms with validation, error states, and accessibility built-in.

<form class="form max-w-md mx-auto p-6 bg-white rounded-lg shadow">
    <div class="form__group mb-4">
        <label for="email" class="block text-sm font-bold text-gray-700 mb-2">
            Email Address
        </label>
        <input 
            type="email" 
            id="email" 
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
            placeholder="you@example.com"
            required
        >
        <p class="form__error text-red-600 text-sm mt-1 hidden">
            Please enter a valid email
        </p>
    </div>

    <div class="form__group mb-4">
        <label for="password" class="block text-sm font-bold text-gray-700 mb-2">
            Password
        </label>
        <input 
            type="password" 
            id="password" 
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
            required
        >
    </div>

    <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition">
        Submit
    </button>
</form>

🌙 Dark Mode Implementation

Add dark mode using CSS variables and a toggle mechanism.

Step 1: Define CSS Variables

/* styles/main.scss */
:root {
    --bg-primary: #ffffff;
    --text-primary: #111827;
    --border: #e5e7eb;
}

[data-theme="dark"] {
    --bg-primary: #111827;
    --text-primary: #f9fafb;
    --border: #374151;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

Step 2: JavaScript Toggle

// Add this to your base template
const toggleDarkMode = () => {
    const html = document.documentElement;
    const currentTheme = html.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    html.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
};

// Load saved theme on page load
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

Step 3: Toggle Button

<button onclick="toggleDarkMode()" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700">
    🌙 Toggle Dark Mode
</button>

📱 Responsive Design Strategy

Build mobile-first, then enhance for larger screens.

✅ Best Practice: Mobile-First CSS

Write base styles for mobile, then use md:, lg: prefixes to add desktop styles. This keeps CSS leaner and faster.

Breakpoint Strategy

<!-- Mobile: Stack vertically -->
<!-- Tablet (md): 2 columns -->
<!-- Desktop (lg): 4 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="bg-white p-4 rounded-lg shadow">Card 1</div>
    <div class="bg-white p-4 rounded-lg shadow">Card 2</div>
    <div class="bg-white p-4 rounded-lg shadow">Card 3</div>
    <div class="bg-white p-4 rounded-lg shadow">Card 4</div>
</div>