Customization

Learn how to customize Apex CSS framework to match your brand and project requirements using CSS variables and SCSS configuration.

CSS Variables

Apex uses CSS custom properties (variables) for easy customization. All design tokens are available as CSS variables that you can override in your styles.

color

Colors

Override semantic & palette colors

--color-primary

Custom palettes

spacing

Spacing

Define your spacing unit

--space-unit

Custom scale

AaAaAaAaAa

typography

Typography

Font families & sizes

--font-sans

Custom fonts

Grid

Flex

Float

responsive

Features

Enable/disable features

$enable-grid

Tree-shaking

Quick Start

Get started customizing Apex in minutes.

The easiest way to customize Apex is by overriding CSS variables. Load your custom styles after importing the framework.

SCSS

/* Override CSS variables after importing Apex */
@import 'apexcss/framework';

:root {
  /* Your custom theme */
  --color-primary: #6366f1;
  --color-success: #10b981;
  --font-sans: 'Inter', system-ui, sans-serif;
}

Custom Colors

Override the default color palette to match your brand identity.

Apex uses semantic color tokens that can be customized by overriding CSS variables. The framework provides both semantic colors (primary, success, warning, error) and neutral grays.

CSS

:root {
  /* Semantic Colors */
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-danger: #ef4444;
  --color-info: #0ea5e9;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
}

Color Palette

Each color has a full palette of shades from 50 (lightest) to 950 (darkest). Override individual shades to fine-tune your color scheme.

CSS

/* Full color palette with shades */
:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;
}

Dark Mode Colors

For dark mode support, override the same variables within a dark mode selector. Apex supports both class-based (.dark) and data-attribute based ([data-theme="dark"]) dark mode.

CSS

/* Dark mode overrides */
.dark,
[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-secondary: #a78bfa;
  --color-background: #111827;
  --color-text: #f9fafb;
}

Custom Spacing

Define your own spacing scale for margins, padding, and gaps.

Apex provides a spacing scale based on rem units. All spacing utilities use these CSS variables internally.

CSS

:root {
  /* Spacing variables used by the framework */
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */
}

Note

Spacing in Apex is defined via SCSS maps at build time. While you can override CSS variables for runtime theming, adding new spacing values requires SCSS configuration.

Custom Typography

Customize font families, sizes, weights, and line heights.

Apex provides a complete typography system with customizable font stacks, size scale, weights, and line heights. All values use CSS variables for easy theming.

CSS

:root {
  /* Font Families */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
}

Using Google Fonts

Load custom fonts from Google Fonts or other CDN sources, then reference them in your CSS variables.

HTML

<!-- Load custom fonts in your HTML -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Then override the CSS variable -->
<style>
  :root {
    --font-sans: 'Inter', system-ui, sans-serif;
  }
</style>

SCSS Configuration

For advanced customization, use SCSS variables before importing the framework.

Apex is built with SCSS and allows you to customize the framework by setting variables before import. This gives you control over colors, spacing scales, and which features to include.

SCSS

// Override SCSS variables before importing Apex
$color-primary-500: #6366f1;
$color-success-500: #10b981;
$enable-grid: true;
$enable-float: false;

// Then import the framework
@import 'apexcss/framework';

Available Variables

These are the main configuration variables you can override before importing Apex:

Variable	Type	Description
$prefix	String	Class name prefix (e.g., 'apex-')
$enable-grid	Boolean	Enable grid utilities
$enable-flexbox	Boolean	Enable flexbox utilities
$enable-spacing	Boolean	Enable spacing utilities
$enable-colors	Boolean	Enable color utilities
$enable-typography	Boolean	Enable typography utilities
$enable-shadows	Boolean	Enable shadow utilities
$enable-transitions	Boolean	Enable transition utilities
$enable-dark-mode	Boolean	Enable dark mode support
$enable-rtl	Boolean	Enable RTL support

Color Variables

Override specific color shades or entire color maps to match your brand:

SCSS

// Override specific color shades
$color-primary-500: #6366f1;
$color-primary-600: #4f46e5;
$color-success-500: #10b981;
$color-warning-500: #f59e0b;
$color-danger-500: #ef4444;

// Override entire color maps (advanced)
$spacing-scale: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 0.75rem,
  4: 1rem,
  // Add or remove values
);

@import 'apexcss/framework';

Important

SCSS variables must be set BEFORE importing the Apex framework. Once compiled, these values are baked into the CSS and cannot be changed at runtime.

Feature Flags

Enable or disable specific utility categories to optimize your bundle size.

Apex allows you to disable utility categories you don't use. This reduces the final CSS bundle size by excluding unused styles.

SCSS

// Disable features you don't need to reduce bundle size
$enable-grid: false;
$enable-float: false;
$enable-table: false;
$enable-vertical-align: false;

// Keep only what you use
$enable-flexbox: true;
$enable-spacing: true;
$enable-colors: true;
$enable-typography: true;

@import 'apexcss/framework';

All Feature Flags

$enable-spacing- default: true

$enable-sizing- default: true

$enable-typography- default: true

$enable-colors- default: true

$enable-flexbox- default: true

$enable-grid- default: true

$enable-positioning- default: true

$enable-display- default: true

$enable-borders- default: true

$enable-shadows- default: true

$enable-opacity- default: true

$enable-overflow- default: true

$enable-visibility- default: true

$enable-transitions- default: true

$enable-cursor- default: true

$enable-animations- default: true

$enable-transforms- default: true

$enable-filters- default: true

JavaScript Configuration

Configure Apex dynamically at runtime using JavaScript.

Apex provides a JavaScript configuration API for runtime theming. This is useful for dynamic theme switching and user preferences.

// Runtime configuration with JavaScript
import { configure, createTheme, setCSSVariable } from 'apexcss/config';

// Apply custom configuration
configure({
  colors: {
    primary: '#6366f1',
    success: '#10b981'
  }
});

// Set individual variables
setCSSVariable('color-primary', '#6366f1');

// Create and apply themes
const darkTheme = createTheme('dark', {
  colors: {
    primary: '#818cf8',
    background: '#111827'
  }
});

darkTheme.apply();

Best Practices

Follow these guidelines for maintainable and effective customization.

Define your custom variables in a central location, loaded after the framework.
Use semantic color names (primary, success, error) rather than literal colors (blue, green, red).
Test customizations in both light and dark modes.
Consider using CSS custom properties for values that might change at runtime.
Document your design token values for team consistency.

/* Override CSS variables after importing Apex */ @import 'apexcss/framework'; :root { /* Your custom theme */ --color-primary: #6366f1; --color-success: #10b981; --font-sans: 'Inter', system-ui, sans-serif; }

:root { /* Semantic Colors */ --color-primary: #3b82f6; --color-secondary: #8b5cf6; --color-success: #22c55e; --color-warning: #eab308; --color-danger: #ef4444; --color-info: #0ea5e9; /* Neutral Colors */ --color-white: #ffffff; --color-black: #000000; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-900: #111827; --color-gray-950: #030712; }

/* Full color palette with shades */ :root { --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; --color-primary-950: #172554; }

:root { /* Spacing variables used by the framework */ --spacing-0: 0; --spacing-1: 0.25rem; /* 4px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ --spacing-24: 6rem; /* 96px */ }

:root { /* Font Families */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Font Sizes */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; }

 <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">  <style> :root { --font-sans: 'Inter', system-ui, sans-serif; } </style>

// Override SCSS variables before importing Apex $color-primary-500: #6366f1; $color-success-500: #10b981; $enable-grid: true; $enable-float: false; // Then import the framework @import 'apexcss/framework';

Variable

Type

Description

$prefix

String

Class name prefix (e.g., 'apex-')

$enable-grid

Boolean

Enable grid utilities

$enable-flexbox

Boolean

Enable flexbox utilities

$enable-spacing

Boolean

Enable spacing utilities

$enable-colors

Boolean

Enable color utilities

$enable-typography

Boolean

Enable typography utilities

$enable-shadows

Boolean

Enable shadow utilities

$enable-transitions

Boolean

Enable transition utilities

$enable-dark-mode

Boolean

Enable dark mode support

$enable-rtl

Boolean

Enable RTL support

// Override specific color shades $color-primary-500: #6366f1; $color-primary-600: #4f46e5; $color-success-500: #10b981; $color-warning-500: #f59e0b; $color-danger-500: #ef4444; // Override entire color maps (advanced) $spacing-scale: ( 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, // Add or remove values ); @import 'apexcss/framework';

// Disable features you don't need to reduce bundle size $enable-grid: false; $enable-float: false; $enable-table: false; $enable-vertical-align: false; // Keep only what you use $enable-flexbox: true; $enable-spacing: true; $enable-colors: true; $enable-typography: true; @import 'apexcss/framework';

// Runtime configuration with JavaScript import { configure, createTheme, setCSSVariable } from 'apexcss/config'; // Apply custom configuration configure({ colors: { primary: '#6366f1', success: '#10b981' } }); // Set individual variables setCSSVariable('color-primary', '#6366f1'); // Create and apply themes const darkTheme = createTheme('dark', { colors: { primary: '#818cf8', background: '#111827' } }); darkTheme.apply();