# CSS Quick Reference Card Quick cheat sheet for using the CSS framework in your multi-tenant platform. ## 📦 Files to Include ### Every Page Needs: ```html ``` ### Authentication Pages (Login/Register): ```html ``` ### Admin Pages: ```html ``` ### Vendor Pages: ```html ``` --- ## 🎨 Common Patterns ### Login Page Layout ```html
``` ### Dashboard Stats Grid ```html
Total Users
👥
1,234
52 active
``` ### Data Table ```html

Vendors

Name Status Actions
Tech Store Active
``` ### Form with Validation ```html
We'll never share your email
Invalid email address
``` ### Alert Messages ```html
Operation completed successfully!
``` ### Loading State ```html ``` --- ## 🎯 Class Combinations ### Primary Action Button ```html ``` ### Danger Button Small ```html ``` ### Centered Card ```html

Welcome!

``` ### Flex Container ```html
Label
``` --- ## 🎨 Color Classes ### Text Colors - `text-primary` - Primary brand color - `text-success` - Green (success) - `text-danger` - Red (error/delete) - `text-warning` - Yellow (warning) - `text-muted` - Gray (less important) ### Background Badges - `badge-success` - Green badge - `badge-danger` - Red badge - `badge-warning` - Yellow badge - `badge-info` - Blue badge - `badge-secondary` - Gray badge --- ## 📏 Spacing Utilities ### Margin - `mt-{0-4}` - Margin top - `mb-{0-4}` - Margin bottom - `ml-{0-4}` - Margin left - `mr-{0-4}` - Margin right ### Padding - `p-{0-4}` - Padding all sides - `pt-{0-4}` - Padding top - `pb-{0-4}` - Padding bottom Example: ```html
``` --- ## 🔤 Typography ### Headings ```html

Largest Heading

Large Heading

Medium Heading

Small Heading

``` ### Font Weights - `font-bold` - 700 weight - `font-semibold` - 600 weight - `font-normal` - 400 weight --- ## 📱 Responsive Classes ### Display - `d-none` - Hide element - `d-block` - Display as block - `d-flex` - Display as flexbox ### Flexbox - `justify-start` - Align left - `justify-end` - Align right - `justify-center` - Center - `justify-between` - Space between - `align-center` - Vertical center - `gap-{1-3}` - Gap between items --- ## 🎭 States ### Show/Hide ```javascript // Show element element.classList.add('show'); // Hide element element.classList.remove('show'); ``` ### Enable/Disable Button ```javascript // Disable button.disabled = true; button.innerHTML = 'Loading...'; // Enable button.disabled = false; button.innerHTML = 'Submit'; ``` ### Show Error ```javascript // Add error to input input.classList.add('error'); errorMessage.classList.add('show'); errorMessage.textContent = 'This field is required'; // Clear error input.classList.remove('error'); errorMessage.classList.remove('show'); ``` --- ## 🔧 CSS Variables Usage ### In CSS ```css .custom-button { background: var(--primary-color); padding: var(--spacing-md); border-radius: var(--radius-lg); color: white; } ``` ### In JavaScript ```javascript // Get value const primaryColor = getComputedStyle(document.documentElement) .getPropertyValue('--primary-color'); // Set value document.documentElement.style .setProperty('--primary-color', '#ff0000'); ``` --- ## 🎨 Brand Customization ### Quick Brand Color Change Edit `static/css/shared/base.css`: ```css :root { --primary-color: #YOUR_COLOR; --primary-dark: #DARKER_SHADE; } ``` ### Per-Vendor Theming Create `static/css/vendor/themes/VENDOR_CODE.css`: ```css :root { --primary-color: #VENDOR_COLOR; } ``` Load in HTML: ```html ``` --- ## ⚡ Performance Tips ### CSS Loading ```html ``` ### Minimize Repaints ```css /* Use transform instead of position changes */ .animate { transform: translateY(-4px); transition: transform 0.2s; } ``` --- ## 🐛 Common Issues ### Issue: Styles not applying **Solution**: Check CSS is loaded in correct order (base.css first) ### Issue: Button not clickable **Solution**: Check z-index and pointer-events ### Issue: Layout breaks on mobile **Solution**: Add viewport meta tag: ```html ``` ### Issue: Colors look wrong **Solution**: Ensure base.css is loaded (contains CSS variables) --- ## 📋 Copy-Paste Snippets ### Complete Login Form ```html
``` ### Stats Card ```html
Total Sales
💰
$12,345
+15% from last month
``` ### Modal Dialog ```html ``` --- ## ✅ Quick Checklist Before going live: - [ ] All CSS files copied to correct directories - [ ] HTML files have correct `` tags - [ ] Test in Chrome, Firefox, Safari - [ ] Test on mobile device - [ ] Customize brand colors - [ ] Test print preview - [ ] Check page load speed - [ ] Validate CSS (no errors) --- **Need more help?** Check `CSS_FILES_GUIDE.md` for detailed documentation!