# 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! 🎨