wp plugin loaded

igny8-wp-integration-plugin/docs/STYLE_GUIDE.md

@@ -0,0 +1,186 @@
+# Style Guide - IGNY8 WordPress Bridge
+
+**Last Updated**: 2025-10-17
+
+---
+
+## CSS Architecture
+
+### No Inline CSS Policy
+
+✅ **All styles are in `admin/assets/css/admin.css`**  
+❌ **No inline `style=""` attributes**  
+❌ **No `<style>` tags in PHP files**
+
+### Global Design Updates
+
+To update the design globally, **only edit**:
+- `admin/assets/css/admin.css` - All admin styles
+
+---
+
+## CSS Class Naming Convention
+
+
+### Prefix
+All classes use `igny8-` prefix to avoid conflicts.
+
+### Naming Pattern
+```
+igny8-{component}-{element}-{modifier}
+```
+
+### Examples
+
+#### Containers
+- `.igny8-settings-container` - Main container
+- `.igny8-settings-card` - Card component
+- `.igny8-sync-actions` - Button group container
+
+#### Status Indicators
+- `.igny8-status-connected` - Connected status
+- `.igny8-status-disconnected` - Disconnected status
+- `.igny8-test-result` - Test result container
+- `.igny8-test-result .igny8-success` - Success message
+- `.igny8-test-result .igny8-error` - Error message
+- `.igny8-test-result .igny8-loading` - Loading message
+
+#### Sync Operations
+- `.igny8-sync-status` - Sync status container
+- `.igny8-sync-status-success` - Success state
+- `.igny8-sync-status-error` - Error state
+- `.igny8-sync-status-loading` - Loading state
+
+#### Statistics
+- `.igny8-stats-grid` - Statistics grid
+- `.igny8-stat-item` - Individual stat item
+- `.igny8-stat-label` - Stat label
+- `.igny8-stat-value` - Stat value
+
+#### Buttons
+- `.igny8-button-group` - Button group container
+- `.igny8-loading` - Loading state modifier
+
+#### Messages
+- `.igny8-message` - Base message class
+- `.igny8-message-success` - Success message
+- `.igny8-message-error` - Error message
+- `.igny8-message-info` - Info message
+- `.igny8-message-warning` - Warning message
+
+#### Tables
+- `.igny8-table` - Table component
+- `.igny8-table th` - Table header
+- `.igny8-table td` - Table cell
+
+#### Loading
+- `.igny8-spinner` - Loading spinner
+- `.igny8-loading` - Loading state
+
+---
+
+## Color Scheme
+
+All colors are defined in CSS for easy updates:
+
+### Status Colors
+- **Success**: `#46b450` (green)
+- **Error**: `#dc3232` (red)
+- **Info**: `#2271b1` (blue)
+- **Warning**: `#f0b849` (amber)
+
+### Background Colors
+- **Success BG**: `#d4edda` / `#f0f8f0`
+- **Error BG**: `#f8d7da` / `#fff5f5`
+- **Info BG**: `#d1ecf1` / `#f0f6fc`
+- **Warning BG**: `#fffbf0`
+
+### Border Colors
+- **Default**: `#ccd0d4`
+- **Light**: `#ddd` / `#eee`
+
+---
+
+## Responsive Breakpoints
+
+```css
+@media (max-width: 782px) {
+    /* Mobile styles */
+}
+```
+
+---
+
+## How to Update Design
+
+### Change Colors Globally
+
+Edit `admin/assets/css/admin.css`:
+
+```css
+/* Status Colors */
+.igny8-status-connected {
+    color: #YOUR_COLOR; /* Change here */
+}
+```
+
+### Change Layout
+
+Edit container classes in `admin.css`:
+
+```css
+.igny8-settings-container {
+    max-width: YOUR_WIDTH; /* Change here */
+}
+```
+
+### Add New Styles
+
+1. Add CSS class to `admin/assets/css/admin.css`
+2. Use class in PHP/HTML (no inline styles)
+3. Follow naming convention: `igny8-{component}-{element}`
+
+---
+
+## JavaScript Class Usage
+
+JavaScript adds/removes CSS classes (no inline styles):
+
+```javascript
+// ✅ Good - Uses CSS classes
+$element.addClass('igny8-loading');
+$element.addClass('igny8-sync-status-success');
+
+// ❌ Bad - Inline styles
+$element.css('color', 'green');
+```
+
+---
+
+## File Structure
+
+```
+admin/assets/css/
+└── admin.css          ← ALL styles here
+
+admin/assets/js/
+└── admin.js           ← Uses CSS classes only
+```
+
+---
+
+## Checklist for New Features
+
+When adding new UI elements:
+
+- [ ] Define CSS classes in `admin.css`
+- [ ] Use classes in PHP/HTML (no `style=""`)
+- [ ] Use classes in JavaScript (no `.css()`)
+- [ ] Follow naming convention
+- [ ] Add responsive styles if needed
+- [ ] Test on mobile/tablet
+
+---
+
+**Remember**: All design changes = Edit `admin.css` only! 🎨
+