major refactoring adding vendor and customer features
This commit is contained in:
430
docs/__Dev-Slice1/css_quick_reference.txt
Normal file
430
docs/__Dev-Slice1/css_quick_reference.txt
Normal file
@@ -0,0 +1,430 @@
|
||||
# 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!
|
||||
Reference in New Issue
Block a user