431 lines
8.9 KiB
Plaintext
431 lines
8.9 KiB
Plaintext
# CSS Quick Reference Card
|
||
|
||
Quick cheat sheet for using the CSS framework in your multi-tenant platform.
|
||
|
||
## 📦 Files to Include
|
||
|
||
### Every Page Needs:
|
||
```html
|
||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||
```
|
||
|
||
### Authentication Pages (Login/Register):
|
||
```html
|
||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||
<link rel="stylesheet" href="/static/css/shared/auth.css">
|
||
```
|
||
|
||
### Admin Pages:
|
||
```html
|
||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
||
```
|
||
|
||
### Vendor Pages:
|
||
```html
|
||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||
<link rel="stylesheet" href="/static/css/vendor/vendor.css">
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Common Patterns
|
||
|
||
### Login Page Layout
|
||
```html
|
||
<div class="auth-page">
|
||
<div class="login-container">
|
||
<div class="login-header">
|
||
<div class="auth-logo">🔐</div>
|
||
<h1>Welcome Back</h1>
|
||
<p>Sign in to continue</p>
|
||
</div>
|
||
|
||
<form id="loginForm">
|
||
<div class="form-group">
|
||
<label>Username</label>
|
||
<input type="text" class="form-control" required>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-login">Sign In</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
### Dashboard Stats Grid
|
||
```html
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-header">
|
||
<div class="stat-title">Total Users</div>
|
||
<div class="stat-icon">👥</div>
|
||
</div>
|
||
<div class="stat-value">1,234</div>
|
||
<div class="stat-subtitle">52 active</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
### Data Table
|
||
```html
|
||
<div class="content-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Vendors</h2>
|
||
<button class="btn btn-primary">Add New</button>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Status</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Tech Store</td>
|
||
<td><span class="badge badge-success">Active</span></td>
|
||
<td>
|
||
<button class="btn btn-sm">Edit</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
```
|
||
|
||
### Form with Validation
|
||
```html
|
||
<div class="form-group">
|
||
<label>Email <span class="text-danger">*</span></label>
|
||
<input
|
||
type="email"
|
||
class="form-control"
|
||
id="email"
|
||
required
|
||
>
|
||
<div class="form-help">We'll never share your email</div>
|
||
<div class="error-message" id="emailError">
|
||
Invalid email address
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
### Alert Messages
|
||
```html
|
||
<div id="alert" class="alert alert-success show">
|
||
Operation completed successfully!
|
||
</div>
|
||
```
|
||
|
||
### Loading State
|
||
```html
|
||
<button class="btn btn-primary" disabled>
|
||
<span class="loading-spinner"></span>
|
||
Processing...
|
||
</button>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 Class Combinations
|
||
|
||
### Primary Action Button
|
||
```html
|
||
<button class="btn btn-primary btn-lg">Get Started</button>
|
||
```
|
||
|
||
### Danger Button Small
|
||
```html
|
||
<button class="btn btn-danger btn-sm">Delete</button>
|
||
```
|
||
|
||
### Centered Card
|
||
```html
|
||
<div class="card text-center p-3 mb-3">
|
||
<h3>Welcome!</h3>
|
||
</div>
|
||
```
|
||
|
||
### Flex Container
|
||
```html
|
||
<div class="d-flex justify-between align-center gap-2">
|
||
<span>Label</span>
|
||
<button class="btn btn-sm">Action</button>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 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
|
||
<div class="mt-3 mb-2 p-3">
|
||
<!-- margin-top: 24px, margin-bottom: 16px, padding: 24px -->
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 🔤 Typography
|
||
|
||
### Headings
|
||
```html
|
||
<h1>Largest Heading</h1> <!-- 32px -->
|
||
<h2>Large Heading</h2> <!-- 24px -->
|
||
<h3>Medium Heading</h3> <!-- 20px -->
|
||
<h4>Small Heading</h4> <!-- 18px -->
|
||
```
|
||
|
||
### 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 = '<span class="loading-spinner"></span>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
|
||
<link rel="stylesheet" href="/static/css/vendor/themes/techstore.css">
|
||
```
|
||
|
||
---
|
||
|
||
## ⚡ Performance Tips
|
||
|
||
### CSS Loading
|
||
```html
|
||
<!-- Preload critical CSS -->
|
||
<link rel="preload" href="/static/css/shared/base.css" as="style">
|
||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||
```
|
||
|
||
### 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
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
```
|
||
|
||
### Issue: Colors look wrong
|
||
**Solution**: Ensure base.css is loaded (contains CSS variables)
|
||
|
||
---
|
||
|
||
## 📋 Copy-Paste Snippets
|
||
|
||
### Complete Login Form
|
||
```html
|
||
<form id="loginForm">
|
||
<div class="form-group">
|
||
<label>Username</label>
|
||
<input type="text" class="form-control" required>
|
||
<div class="error-message" id="usernameError"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Password</label>
|
||
<input type="password" class="form-control" required>
|
||
<div class="error-message" id="passwordError"></div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-login">Sign In</button>
|
||
</form>
|
||
```
|
||
|
||
### Stats Card
|
||
```html
|
||
<div class="stat-card">
|
||
<div class="stat-header">
|
||
<div class="stat-title">Total Sales</div>
|
||
<div class="stat-icon">💰</div>
|
||
</div>
|
||
<div class="stat-value">$12,345</div>
|
||
<div class="stat-subtitle">+15% from last month</div>
|
||
</div>
|
||
```
|
||
|
||
### Modal Dialog
|
||
```html
|
||
<div class="modal-overlay">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3 class="modal-title">Confirm Action</h3>
|
||
<button class="modal-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Are you sure you want to continue?</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary">Cancel</button>
|
||
<button class="btn btn-primary">Confirm</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Quick Checklist
|
||
|
||
Before going live:
|
||
- [ ] All CSS files copied to correct directories
|
||
- [ ] HTML files have correct `<link>` 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!
|