name: Klytos CSS Classes
description: Complete reference of CSS design tokens, component classes, utility classes, and frontend styling in Klytos CMS. Use when building content, plugins, or admin templates that need consistent styling without hardcoding colors or writing custom CSS.
Klytos CSS Classes & Design Tokens
When to Use This Skill
Use this reference when building or modifying any UI in Klytos — admin pages, plugin interfaces, frontend content, or templates. Always use design tokens and core CSS classes instead of hardcoding colors or writing custom CSS.
CSS Custom Properties (Design Tokens)
All tokens use the --klytos- prefix. Defined in installer/admin/assets/css/klytos-tokens.css.
Quick Token Reference
Colors:
- Background:
--klytos-bg, --klytos-bg-elevated, --klytos-bg-sunken
- Surfaces:
--klytos-surface, --klytos-surface-hover, --klytos-surface-active
- Text:
--klytos-text, --klytos-text-secondary, --klytos-text-tertiary
- Accent:
--klytos-accent, --klytos-accent-hover, --klytos-accent-subtle
- Status:
--klytos-success, --klytos-warning, --klytos-error, --klytos-info (and -subtle, -text variants)
- Sidebar:
--klytos-sidebar-bg, --klytos-sidebar-text, --klytos-sidebar-active, --klytos-sidebar-hover
Spacing & Sizing:
- Radius:
--klytos-radius-sm, --klytos-radius, --klytos-radius-lg, --klytos-radius-xl, --klytos-radius-full
- Shadows:
--klytos-shadow-sm, --klytos-shadow, --klytos-shadow-lg
- Spacing:
--klytos-space-xs, --klytos-space-sm, --klytos-space, --klytos-space-md, --klytos-space-lg, --klytos-space-xl, --klytos-space-2xl
- Fonts:
--klytos-font-sans, --klytos-font-mono
- Transitions:
--klytos-transition-fast, --klytos-transition, --klytos-transition-slow
Admin Component Classes
| Class |
Description |
.btn |
Base button (required) |
.btn-primary |
Primary action (accent bg, white text) |
.btn-danger |
Destructive action (error bg) |
.btn-outline |
Transparent with border |
.btn-ghost |
Transparent, no border (text-only) |
.btn-sm, .btn-lg |
Size variants |
.btn-icon |
Square icon-only button (36x36) |
.card |
Content card (surface bg, border, padding, rounded) |
.card-header |
Card header (flex, space-between) |
.form-group |
Form field wrapper (margin-bottom) |
.form-control |
Input/select/textarea (full-width, bordered) |
.form-help |
Help text below input (small, muted) |
.toggle-switch |
Claude-style toggle (wraps <input> + .toggle-track) |
.alert, .alert-success, .alert-error, .alert-warning, .alert-info |
Alerts |
.badge-status |
Base badge (inline, pill-shaped) |
.badge-active, .badge-draft, .badge-urgent |
Status badges with color variants |
.table-wrap |
Overflow wrapper for tables |
table |
Styled by default (full-width, borders) |
Utility Classes
Flexbox & Grid
| Class |
Description |
.flex |
display: flex |
.flex-col |
flex-direction: column |
.flex-center |
display: flex; align-items: center |
.flex-between |
display: flex; align-items: center; justify-content: space-between |
.flex-gap-xs, .flex-gap-sm, .flex-gap, .flex-gap-md, .flex-gap-lg |
Gap helpers |
.grid-2, .grid-3, .grid-4 |
2, 3, 4-column equal grids (collapse to 1 on mobile) |
.grid-2-1, .grid-1-2 |
2fr/1fr and 1fr/2fr grids |
Spacing
| Class |
Description |
.mb-0 through .mb-4 |
0 to 2rem bottom margin |
.mt-0 through .mt-3 |
0 to 1.5rem top margin |
.p-0 through .p-3 |
0 to 1.5rem padding |
.px-1, .px-2 |
Horizontal padding |
.py-1, .py-2 |
Vertical padding |
Typography
| Class |
Description |
.text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl |
Font sizes |
.text-muted, .text-dim, .text-accent |
Text colors |
.text-success, .text-warning, .text-error |
Status text colors |
.text-center, .text-right |
Alignment |
.text-upper |
Uppercase + tracking |
.text-mono |
Monospace font |
.font-normal, .font-medium, .font-bold, .font-heavy |
Font weights |
.truncate, .break-all |
Overflow handling |
Display
| Class |
Description |
.hidden, .block, .inline-block |
Display modes |
.w-full, .w-auto |
Width |
.max-w-sm, .max-w-md, .max-w-lg |
Max-width (400/600/800px) |
.rounded, .rounded-lg, .rounded-full |
Border radius |
.border, .border-b |
Borders |
Frontend CSS Classes (Public-Facing)
| Class |
Description |
.klytos-container |
Centered container with max-width and responsive padding |
.klytos-header, .klytos-header.sticky |
Page header |
.klytos-main |
Main content area |
.klytos-footer |
Footer |
.klytos-section, .klytos-section-alt |
Content sections |
.klytos-hero |
Hero section |
.klytos-grid-2, .klytos-grid-3, .klytos-grid-4 |
Column grids |
.klytos-btn, .klytos-btn-primary, .klytos-btn-secondary, .klytos-btn-outline |
Buttons |
.klytos-card, .klytos-card-grid |
Cards |
.klytos-text-block, .klytos-image-text, .klytos-gallery, .klytos-cta, .klytos-faq, .klytos-stats, .klytos-testimonials, .klytos-team, .klytos-logos |
Content block components |
Responsive Breakpoints
| Breakpoint |
Target |
Effect |
max-width: 768px |
Mobile |
Grids collapse, sidebar collapses, padding reduces |
max-width: 782px |
Editor |
Editor sidebar hidden, header compressed |
max-width: 480px |
Small phones |
Stats grid 1-column |
Best Practices
- Always use
--klytos-* tokens — never hardcode colors
- Always use component/utility classes — never use inline
style=""
- Test both themes — dark (default) and light mode
- Test at 768px — ensure mobile layout works
- Use plugin ID prefix for custom classes:
.my-plugin-widget
- Never override core classes — extend with your own selectors
Icon Library (Font Awesome 7.2.0 Free)
Klytos uses Font Awesome 7.2.0 Free as the icon library, available in both the admin panel and the frontend.
Usage
<i class="fa-solid fa-gauge-high"></i> <!-- Solid icon -->
<i class="fa-regular fa-bell"></i> <!-- Regular (outline) icon -->
<i class="fa-brands fa-github"></i> <!-- Brand icon -->
Availability
| Context |
How it loads |
| Admin panel |
Always loaded via <link> in header.php |
| Admin bar (public site) |
Loaded dynamically by JS when the admin cookie is present (only for logged-in admins) |
| Frontend (all visitors) |
Opt-in via icons_enabled: true in site config — adds {{icons_css_link}} to <head> |
| Plugins |
Can force-load via filter: klytos_add_filter('build.icons_enabled', fn() => true) |
Site Config Setting
icons_enabled: true → Font Awesome CSS is loaded for ALL visitors
icons_enabled: false → Font Awesome is only loaded for admins (default)
Assets Location
- Admin:
admin/assets/vendor/fontawesome/
- Public:
assets/vendor/fontawesome/ (copied during build automatically)
Source Files
| File |
Purpose |
installer/admin/assets/css/klytos-tokens.css |
All design tokens |
installer/admin/assets/css/klytos-base.css |
Reset, body, layout |
installer/admin/assets/css/klytos-components.css |
All components |
installer/admin/assets/css/klytos-utilities.css |
Utility classes |
installer/admin/templates/header.php |
Loads all CSS |
For the complete token reference with all colors, sizes, and variants, see the references/complete-tokens.md file.
By