Loading...
A utility-first CSS framework with 500+ utility classes for rapid UI development.
Get started with Apex by including it in your project.
Include the framework CSS file in your HTML:
<link rel="stylesheet" href="dist/framework.css">Install via npm:
npm install apexcssThe framework includes a wide range of utility classes for spacing, typography, colors, flexbox, grid, and more.
<div class="p-4">Content</div><p class="text-2xl font-bold">Large Heading</p><div class="bg-blue-500 text-white p-2">Blue Box</div>Apex provides a collection of pre-built components for common UI patterns.
Button styles and variants
Card layouts and styles
Form inputs and controls
Alert messages and notifications
Apex includes built-in support for light, dark, and custom themes.
Enable automatic dark mode or configure custom themes:
:root {
--color-primary: #3b82f6;
}
[data-theme="dark"] {
--color-primary: #60a5fa;
}Create your own theme by overriding CSS variables:
.theme-custom {
--color-primary: #8b5cf6;
--color-secondary: #ec4899;
}Apex prioritizes accessibility with built-in support for screen readers, focus management, and keyboard navigation.
Hide content visually while keeping it accessible to assistive technologies:
<span class="sr-only">Screen reader only text</span>Apex includes built-in RTL (Right-to-Left) support for internationalization. Perfect for Arabic, Hebrew, and other RTL languages.
<html dir="rtl" lang="ar">Customize Apex by modifying the configuration file to enable or disable utilities, change prefixes, and more.
// config.js
export default {
prefix: 'apex-',
utilities: {
spacing: true,
colors: true,
typography: true,
flexbox: true,
grid: true
}
}