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

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

@media (max-width: 782px) {
    /* Mobile styles */
}

---

How to Update Design

Change Colors Globally

Edit admin/assets/css/admin.css:

/* Status Colors */
.igny8-status-connected {
    color: #YOUR_COLOR; /* Change here */
}

Change Layout

Edit container classes in admin.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):

// ✅ 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! 🎨