// 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.
| 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. |
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.
All tokens use the --klytos- prefix. Defined in installer/admin/assets/css/klytos-tokens.css.
Colors:
--klytos-bg, --klytos-bg-elevated, --klytos-bg-sunken--klytos-surface, --klytos-surface-hover, --klytos-surface-active--klytos-text, --klytos-text-secondary, --klytos-text-tertiary--klytos-accent, --klytos-accent-hover, --klytos-accent-subtle--klytos-success, --klytos-warning, --klytos-error, --klytos-info (and -subtle, -text variants)--klytos-sidebar-bg, --klytos-sidebar-text, --klytos-sidebar-active, --klytos-sidebar-hoverSpacing & Sizing:
--klytos-radius-sm, --klytos-radius, --klytos-radius-lg, --klytos-radius-xl, --klytos-radius-full--klytos-shadow-sm, --klytos-shadow, --klytos-shadow-lg--klytos-space-xs, --klytos-space-sm, --klytos-space, --klytos-space-md, --klytos-space-lg, --klytos-space-xl, --klytos-space-2xl--klytos-font-sans, --klytos-font-mono--klytos-transition-fast, --klytos-transition, --klytos-transition-slow| 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) |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
--klytos-* tokens — never hardcode colorsstyle="".my-plugin-widgetKlytos uses Font Awesome 7.2.0 Free as the icon library, available in both the admin panel and the frontend.
<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 -->
| 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) |
icons_enabled: true → Font Awesome CSS is loaded for ALL visitors
icons_enabled: false → Font Awesome is only loaded for admins (default)
admin/assets/vendor/fontawesome/assets/vendor/fontawesome/ (copied during build automatically)| 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.
Guide for developing and maintaining Klytos CMS core. Use when modifying core files, adding MCP tools, fixing bugs, extending the core architecture, changing the build engine, modifying the installer, implementing hooks, or working with storage backends. Covers foundational principles (AI-first, privacy by design, security by default), architecture, boot sequence, manager pattern, MCP tool registration, and security checklist.
Complete guide for developing Klytos CMS plugins including structure, entry points, MCP tools, admin pages, hooks, routes, and best practices. Use when creating, modifying, extending Klytos functionality, adding MCP tools, admin pages, hooks, filters, or debugging plugins.
Guide for creating custom page templates, template parts, hook points, reusable blocks, and page template recipes in Klytos CMS. Use when creating new page layout templates, customizing template parts, adding frontend hook points, defining reusable blocks with slots, or building page template recipes combining multiple blocks.
Complete reference of all hooks (actions and filters) available in Klytos CMS for intercepting and extending functionality. Use when hooking into Klytos events, modifying behavior through filters, adding custom behavior at lifecycle points, or understanding the hook system and priorities.
Reference of all global helper functions available in Klytos CMS. Use when developing plugins, extending the CMS, accessing core services, checking permissions, generating URLs, logging messages, or calling any klytos_* global function from PHP code.
Guide for saving and retrieving plugin options and site configuration in Klytos CMS. Use when a plugin needs to store or read persistent settings, manage site configuration, retrieve options, save persistent key-value data, work with the Options API, Site Config, or Storage API, manage plugin settings, query options by domain, or clean up options during plugin uninstall.