major refactoring adding vendor and customer features
This commit is contained in:
503
docs/__Dev-Slice1/css_structure_guide.txt
Normal file
503
docs/__Dev-Slice1/css_structure_guide.txt
Normal file
@@ -0,0 +1,503 @@
|
||||
# CSS Files Structure Guide
|
||||
|
||||
Complete guide for organizing and using CSS files in your multi-tenant ecommerce platform.
|
||||
|
||||
## 📁 Directory Structure
|
||||
|
||||
```
|
||||
static/
|
||||
├── css/
|
||||
│ ├── shared/
|
||||
│ │ ├── base.css # Base styles (variables, reset, utilities)
|
||||
│ │ └── auth.css # Authentication pages (login, register)
|
||||
│ ├── admin/
|
||||
│ │ └── admin.css # Admin interface specific styles
|
||||
│ └── vendor/
|
||||
│ └── vendor.css # Vendor interface specific styles
|
||||
```
|
||||
|
||||
## 📄 File Descriptions
|
||||
|
||||
### 1. `static/css/shared/base.css` (8.5KB)
|
||||
|
||||
**Purpose**: Foundation styles used across all pages
|
||||
|
||||
**Includes**:
|
||||
- CSS Variables (colors, spacing, fonts, etc.)
|
||||
- Reset and base styles
|
||||
- Typography (h1-h6, paragraphs, links)
|
||||
- Buttons (primary, secondary, success, danger, etc.)
|
||||
- Form elements (inputs, selects, textareas)
|
||||
- Cards and badges
|
||||
- Alerts and notifications
|
||||
- Tables
|
||||
- Utility classes
|
||||
- Loading spinners
|
||||
- Responsive breakpoints
|
||||
|
||||
**Used by**: ALL pages (admin, vendor, public)
|
||||
|
||||
---
|
||||
|
||||
### 2. `static/css/shared/auth.css` (6KB)
|
||||
|
||||
**Purpose**: Styles for authentication pages
|
||||
|
||||
**Includes**:
|
||||
- Login/Register page layouts
|
||||
- Auth containers and cards
|
||||
- Form styling for auth pages
|
||||
- Vendor info display
|
||||
- "No vendor found" messages
|
||||
- Credentials display cards
|
||||
- Password toggle
|
||||
- Social login buttons
|
||||
- Success/error alerts
|
||||
- Responsive auth layouts
|
||||
|
||||
**Used by**:
|
||||
- `static/admin/login.html`
|
||||
- `static/vendor/login.html`
|
||||
- Any registration pages
|
||||
|
||||
---
|
||||
|
||||
### 3. `static/css/admin/admin.css` (7KB)
|
||||
|
||||
**Purpose**: Admin portal specific styles
|
||||
|
||||
**Includes**:
|
||||
- Admin header and navigation
|
||||
- Admin sidebar
|
||||
- Stats cards/widgets
|
||||
- Data tables
|
||||
- Empty states
|
||||
- Loading states
|
||||
- Search and filter bars
|
||||
- Modals/dialogs
|
||||
- Pagination
|
||||
- Responsive admin layout
|
||||
- Print styles
|
||||
|
||||
**Used by**:
|
||||
- `static/admin/dashboard.html`
|
||||
- `static/admin/vendors.html`
|
||||
- Any admin interface pages
|
||||
|
||||
---
|
||||
|
||||
### 4. `static/css/vendor/vendor.css` (8KB)
|
||||
|
||||
**Purpose**: Vendor portal specific styles
|
||||
|
||||
**Includes**:
|
||||
- Vendor header with branding
|
||||
- Vendor sidebar navigation
|
||||
- Dashboard widgets
|
||||
- Welcome cards
|
||||
- Vendor info cards
|
||||
- Product grid and cards
|
||||
- Order lists and cards
|
||||
- Tabs interface
|
||||
- File upload areas
|
||||
- Progress bars
|
||||
- Settings forms
|
||||
- Responsive vendor layout
|
||||
- Print styles
|
||||
|
||||
**Used by**:
|
||||
- `static/vendor/dashboard.html`
|
||||
- Any vendor interface pages
|
||||
- Future: marketplace, products, orders pages
|
||||
|
||||
---
|
||||
|
||||
## 🎨 CSS Variables Reference
|
||||
|
||||
All CSS variables are defined in `base.css`:
|
||||
|
||||
### Colors
|
||||
```css
|
||||
--primary-color: #667eea;
|
||||
--primary-dark: #764ba2;
|
||||
--secondary-color: #6c757d;
|
||||
--success-color: #28a745;
|
||||
--danger-color: #e74c3c;
|
||||
--warning-color: #ffc107;
|
||||
--info-color: #17a2b8;
|
||||
```
|
||||
|
||||
### Grays
|
||||
```css
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f5f7fa;
|
||||
--gray-200: #e1e8ed;
|
||||
--gray-300: #d1d9e0;
|
||||
--gray-400: #b0bac5;
|
||||
--gray-500: #8796a5;
|
||||
--gray-600: #687785;
|
||||
--gray-700: #4a5568;
|
||||
--gray-800: #2d3748;
|
||||
--gray-900: #1a202c;
|
||||
```
|
||||
|
||||
### Spacing
|
||||
```css
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
--spacing-2xl: 48px;
|
||||
```
|
||||
|
||||
### Font Sizes
|
||||
```css
|
||||
--font-xs: 12px;
|
||||
--font-sm: 13px;
|
||||
--font-base: 14px;
|
||||
--font-md: 15px;
|
||||
--font-lg: 16px;
|
||||
--font-xl: 18px;
|
||||
--font-2xl: 20px;
|
||||
--font-3xl: 24px;
|
||||
--font-4xl: 32px;
|
||||
```
|
||||
|
||||
### Border Radius
|
||||
```css
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-full: 9999px;
|
||||
```
|
||||
|
||||
### Shadows
|
||||
```css
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 How to Use
|
||||
|
||||
### In Your HTML Files
|
||||
|
||||
**Admin Login Page** (`static/admin/login.html`):
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/shared/auth.css">
|
||||
</head>
|
||||
```
|
||||
|
||||
**Admin Dashboard** (`static/admin/dashboard.html`):
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
||||
</head>
|
||||
```
|
||||
|
||||
**Admin Vendor Creation** (`static/admin/vendors.html`):
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
||||
</head>
|
||||
```
|
||||
|
||||
**Vendor Login Page** (`static/vendor/login.html`):
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/shared/auth.css">
|
||||
</head>
|
||||
```
|
||||
|
||||
**Vendor Dashboard** (`static/vendor/dashboard.html`):
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/vendor/vendor.css">
|
||||
</head>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Common Classes Reference
|
||||
|
||||
### Buttons
|
||||
```html
|
||||
<button class="btn btn-primary">Primary Button</button>
|
||||
<button class="btn btn-secondary">Secondary Button</button>
|
||||
<button class="btn btn-success">Success Button</button>
|
||||
<button class="btn btn-danger">Danger Button</button>
|
||||
<button class="btn btn-outline">Outline Button</button>
|
||||
<button class="btn btn-sm">Small Button</button>
|
||||
<button class="btn btn-lg">Large Button</button>
|
||||
```
|
||||
|
||||
### Badges
|
||||
```html
|
||||
<span class="badge badge-success">Active</span>
|
||||
<span class="badge badge-danger">Inactive</span>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
```
|
||||
|
||||
### Alerts
|
||||
```html
|
||||
<div class="alert alert-success show">Success message</div>
|
||||
<div class="alert alert-error show">Error message</div>
|
||||
<div class="alert alert-warning show">Warning message</div>
|
||||
<div class="alert alert-info show">Info message</div>
|
||||
```
|
||||
|
||||
### Cards
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">Body content</div>
|
||||
<div class="card-footer">Footer</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Forms
|
||||
```html
|
||||
<div class="form-group">
|
||||
<label class="form-label">Label</label>
|
||||
<input type="text" class="form-control" placeholder="Enter text">
|
||||
<div class="form-help">Helper text</div>
|
||||
<div class="error-message show">Error message</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Tables
|
||||
```html
|
||||
<table class="table data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Column 1</th>
|
||||
<th>Column 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Data 1</td>
|
||||
<td>Data 2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Utility Classes
|
||||
```html
|
||||
<!-- Text Alignment -->
|
||||
<div class="text-center">Centered</div>
|
||||
<div class="text-left">Left</div>
|
||||
<div class="text-right">Right</div>
|
||||
|
||||
<!-- Text Colors -->
|
||||
<p class="text-primary">Primary color</p>
|
||||
<p class="text-success">Success color</p>
|
||||
<p class="text-danger">Danger color</p>
|
||||
<p class="text-muted">Muted color</p>
|
||||
|
||||
<!-- Spacing -->
|
||||
<div class="mt-3 mb-2">Margin top 3, bottom 2</div>
|
||||
<div class="p-3">Padding 3</div>
|
||||
|
||||
<!-- Display -->
|
||||
<div class="d-none">Hidden</div>
|
||||
<div class="d-block">Block</div>
|
||||
<div class="d-flex justify-between align-center">Flexbox</div>
|
||||
```
|
||||
|
||||
### Loading Spinner
|
||||
```html
|
||||
<button class="btn btn-primary" disabled>
|
||||
<span class="loading-spinner"></span>
|
||||
Loading...
|
||||
</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Customization Guide
|
||||
|
||||
### Changing Brand Colors
|
||||
|
||||
Edit `static/css/shared/base.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Change these to your brand colors */
|
||||
--primary-color: #667eea; /* Your primary color */
|
||||
--primary-dark: #764ba2; /* Darker shade */
|
||||
--success-color: #28a745; /* Success actions */
|
||||
--danger-color: #e74c3c; /* Danger/delete actions */
|
||||
}
|
||||
```
|
||||
|
||||
### Changing Font
|
||||
|
||||
Edit `static/css/shared/base.css`:
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: 'Your Font', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
### Changing Border Radius (Rounded Corners)
|
||||
|
||||
```css
|
||||
:root {
|
||||
--radius-sm: 4px; /* Small radius */
|
||||
--radius-md: 6px; /* Medium radius */
|
||||
--radius-lg: 8px; /* Large radius */
|
||||
--radius-xl: 12px; /* Extra large */
|
||||
}
|
||||
```
|
||||
|
||||
### Adding Vendor-Specific Themes
|
||||
|
||||
Create a new file: `static/css/vendor/themes/{vendor_code}.css`
|
||||
|
||||
```css
|
||||
/* static/css/vendor/themes/techstore.css */
|
||||
:root {
|
||||
--primary-color: #ff6b6b;
|
||||
--primary-dark: #ee5a52;
|
||||
}
|
||||
|
||||
.vendor-header {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
Then in vendor pages:
|
||||
```html
|
||||
<link rel="stylesheet" href="/static/css/vendor/themes/techstore.css">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 Responsive Breakpoints
|
||||
|
||||
All CSS files include responsive styles:
|
||||
|
||||
```css
|
||||
/* Desktop: Default styles */
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 1024px) {
|
||||
/* Tablet-specific styles */
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
/* Mobile-specific styles */
|
||||
}
|
||||
|
||||
/* Small Mobile */
|
||||
@media (max-width: 480px) {
|
||||
/* Small mobile-specific styles */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🖨️ Print Styles
|
||||
|
||||
All CSS files include print-friendly styles that:
|
||||
- Hide navigation and action buttons
|
||||
- Remove shadows and backgrounds
|
||||
- Optimize for black & white printing
|
||||
- Adjust layout for paper
|
||||
|
||||
---
|
||||
|
||||
## ✅ Installation Checklist
|
||||
|
||||
- [ ] Create `static/css/shared/` directory
|
||||
- [ ] Create `static/css/admin/` directory
|
||||
- [ ] Create `static/css/vendor/` directory
|
||||
- [ ] Copy `base.css` to `static/css/shared/`
|
||||
- [ ] Copy `auth.css` to `static/css/shared/`
|
||||
- [ ] Copy `admin.css` to `static/css/admin/`
|
||||
- [ ] Copy `vendor.css` to `static/css/vendor/`
|
||||
- [ ] Update all HTML files with correct `<link>` tags
|
||||
- [ ] Test pages load with styles
|
||||
- [ ] Test responsive design (resize browser)
|
||||
- [ ] Test in multiple browsers
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Troubleshooting
|
||||
|
||||
### Styles Not Loading
|
||||
|
||||
**Check**:
|
||||
1. File paths are correct in HTML `<link>` tags
|
||||
2. FastAPI is serving static files: `app.mount("/static", StaticFiles(directory="static"), name="static")`
|
||||
3. Browser cache - try hard refresh (Ctrl+F5)
|
||||
4. Browser console for 404 errors
|
||||
|
||||
### Styles Look Wrong
|
||||
|
||||
**Check**:
|
||||
1. CSS files are in correct order (base.css first)
|
||||
2. No conflicting inline styles in HTML
|
||||
3. Browser DevTools to inspect element styles
|
||||
4. CSS variables are defined in `:root`
|
||||
|
||||
### Mobile Layout Broken
|
||||
|
||||
**Check**:
|
||||
1. Viewport meta tag in HTML: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
|
||||
2. Responsive classes are applied
|
||||
3. Test in actual devices, not just browser resize
|
||||
|
||||
---
|
||||
|
||||
## 📚 Additional Resources
|
||||
|
||||
### CSS Best Practices
|
||||
- Always use CSS variables for colors and spacing
|
||||
- Prefer utility classes over custom CSS
|
||||
- Keep specificity low
|
||||
- Use BEM naming for custom components
|
||||
- Comment complex CSS rules
|
||||
|
||||
### Performance Tips
|
||||
- Minimize CSS files for production
|
||||
- Use CSS variables instead of repetitive values
|
||||
- Avoid deeply nested selectors
|
||||
- Use `will-change` sparingly
|
||||
- Combine similar media queries
|
||||
|
||||
---
|
||||
|
||||
## 🎉 You're All Set!
|
||||
|
||||
Your CSS structure is now complete and production-ready. The styles are:
|
||||
- ✅ Modular and maintainable
|
||||
- ✅ Responsive across all devices
|
||||
- ✅ Consistent with design system
|
||||
- ✅ Performance optimized
|
||||
- ✅ Easy to customize
|
||||
- ✅ Print-friendly
|
||||
|
||||
**Next Steps**:
|
||||
1. Copy all CSS files to your project
|
||||
2. Update HTML files with correct links
|
||||
3. Test in browser
|
||||
4. Customize brand colors
|
||||
5. Deploy!
|
||||
Reference in New Issue
Block a user