Apex

A comprehensive utility-first CSS framework with 500+ utility classes for rapid UI development.

Welcome!

Welcome to the Apex documentation. This utility-first framework provides a comprehensive set of CSS classes for rapid UI development, including spacing, typography, colors, flexbox, grid, animations, transforms, filters, and much more.

Getting Started

Get started with Apex by including it in your project.

Quick Start

Include the framework CSS file in your HTML:

HTML

<link rel="stylesheet" href="dist/framework.css">

NPM Installation

Install via npm:

Bash

npm install apexcss

Utilities

The framework includes a wide range of utility classes for spacing, typography, colors, flexbox, grid, and more.

Spacing

HTML

<div class="p-4">Content</div>

Typography

HTML

<p class="text-2xl font-bold">Large Heading</p>

Colors

HTML

<div class="bg-blue-500 text-white p-2">Blue Box</div>

These are just a few examples. Explore the Utilities section to see all available classes.

Components

Apex provides a collection of pre-built components for common UI patterns.

Buttons

Button styles and variants

Cards

Card layouts and styles

Forms

Form inputs and controls

Alerts

Alert messages and notifications

View All Components

Themes

Apex includes built-in support for light, dark, and custom themes.

Dark Mode

Enable automatic dark mode or configure custom themes:

CSS

:root {
  --color-primary: #3b82f6;
}

[data-theme="dark"] {
  --color-primary: #60a5fa;
}

Custom Themes

Create your own theme by overriding CSS variables:

CSS

.theme-custom {
  --color-primary: #8b5cf6;
  --color-secondary: #ec4899;
}

Accessibility

Apex prioritizes accessibility with built-in support for screen readers, focus management, and keyboard navigation.

Screen Reader Classes

Hide content visually while keeping it accessible to assistive technologies:

HTML

<span class="sr-only">Screen reader only text</span>

Learn More About Accessibility

RTL Support

Apex includes built-in RTL (Right-to-Left) support for internationalization. Perfect for Arabic, Hebrew, and other RTL languages.

HTML

<html dir="rtl" lang="ar">

RTL Documentation

Configuration

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
  }
}

Configuration Guide