504 lines
11 KiB
Plaintext
504 lines
11 KiB
Plaintext
# 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!
|