# 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
```
**Admin Dashboard** (`static/admin/dashboard.html`):
```html
```
**Admin Vendor Creation** (`static/admin/vendors.html`):
```html
```
**Vendor Login Page** (`static/vendor/login.html`):
```html
```
**Vendor Dashboard** (`static/vendor/dashboard.html`):
```html
```
---
## 🎯 Common Classes Reference
### Buttons
```html
```
### Badges
```html
Active
Inactive
Pending
Info
```
### Alerts
```html
Success message
Error message
Warning message
Info message
```
### Cards
```html
```
### Forms
```html
```
### Tables
```html
| Column 1 |
Column 2 |
| Data 1 |
Data 2 |
```
### Utility Classes
```html
Centered
Left
Right
Primary color
Success color
Danger color
Muted color
Margin top 3, bottom 2
Padding 3
Hidden
Block
Flexbox
```
### Loading Spinner
```html
```
---
## 🎨 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
```
---
## 📱 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 `` 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 `` 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: ``
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!