Configuration

Customize Apex to fit your project needs by modifying SCSS variables and feature flags.

SCSS Configuration

Apex uses SCSS variables for configuration. Override these variables before importing the framework.

Core Settings

Configure the fundamental behavior of Apex with these core settings.

SCSS

// src/config/_settings.scss

// Prefix for all utility classes
$prefix: '' !default;

// Add !important to all utilities
$important: false !default;

// Separator for variants (e.g., hover:, focus:)
$separator: ':' !default;

// Dark mode strategy: 'class' or 'media'
$dark-mode: 'class' !default;

// Enable RTL support
$rtl: false !default;

Prefix

Add a custom prefix to all utility classes to avoid naming conflicts:

SCSS

// src/config/_settings.scss
$prefix: 'apex-' !default;

With this configuration, utility classes will have your custom prefix.

Example: p-4 becomes apex-p-4

Breakpoints

Define responsive breakpoints for your project. These are used for responsive utility variants.

SCSS

// src/config/_breakpoints.scss

// Breakpoint values
$breakpoint-sm: 640px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1024px !default;
$breakpoint-xl: 1280px !default;
$breakpoint-xxl: 1536px !default;

// Breakpoint map
$breakpoints: (
  sm: $breakpoint-sm,
  md: $breakpoint-md,
  lg: $breakpoint-lg,
  xl: $breakpoint-xl,
  xxl: $breakpoint-xxl
) !default;

Breakpoint	Min Width	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
xxl	1536px	@media (min-width: 1536px)

Feature Flags

Enable or disable specific utility categories to reduce CSS bundle size. Set to false to disable utilities you don't need.

SCSS

// src/config/_settings.scss

// Core utilities
$enable-spacing: true !default;
$enable-sizing: true !default;
$enable-typography: true !default;
$enable-colors: true !default;
$enable-flexbox: true !default;
$enable-grid: true !default;
$enable-positioning: true !default;
$enable-display: true !default;
$enable-borders: true !default;
$enable-shadows: true !default;
$enable-opacity: true !default;
$enable-overflow: true !default;
$enable-visibility: true !default;
$enable-transitions: true !default;
$enable-cursor: true !default;
$enable-interaction: true !default;

// Extended utilities
$enable-transforms: true !default;
$enable-filters: true !default;
$enable-aspect-ratio: true !default;
$enable-backgrounds: true !default;

// State variants
$enable-states: true !default;
$enable-hover: true !default;
$enable-focus: true !default;
$enable-active: true !default;
$enable-disabled: true !default;

// Special features
$enable-dark-mode: true !default;
$enable-rtl: false !default;
$enable-animations: true !default;
$enable-accessibility: true !default;

Spacing Scale

Customize the spacing scale used for margin, padding, and gap utilities.

SCSS

// src/config/_settings.scss
$spacing-scale: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 0.75rem,
  4: 1rem,
  5: 1.25rem,
  6: 1.5rem,
  8: 2rem,
  10: 2.5rem,
  12: 3rem,
  16: 4rem,
  20: 5rem,
  24: 6rem,
) !default;

Used by: m-, p-, gap-, space-x-, space-y- utilities

Sizing Scale

Customize the sizing scale used for width, height, and max/min sizing utilities.

SCSS

// src/config/_settings.scss
$sizing-scale: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  4: 1rem,
  8: 2rem,
  16: 4rem,
  24: 6rem,
  auto: auto,
  full: 100%,
  screen: 100vw,
  min: min-content,
  max: max-content
) !default;

Border Radius Scale

Customize the border radius scale used for rounded corners.

SCSS

// src/config/_settings.scss
$border-radius-scale: (
  none: 0,
  sm: 0.125rem,
  default: 0.25rem,
  md: 0.375rem,
  lg: 0.5rem,
  xl: 0.75rem,
  2xl: 1rem,
  3xl: 1.5rem,
  full: 9999px
) !default;

Shadows

Customize the shadow values used for elevation utilities.

SCSS

// src/config/_settings.scss
$shadows: (
  sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05),
  DEFAULT: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
  md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
  lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
  xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
  2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
  none: none
) !default;

Transitions

Customize transition duration and timing function scales.

SCSS

// src/config/_settings.scss
$transition-duration-scale: (
  75: 75ms,
  100: 100ms,
  150: 150ms,
  200: 200ms,
  300: 300ms,
  500: 500ms,
  700: 700ms,
  1000: 1000ms
) !default;

$transition-timing-function-scale: (
  default: cubic-bezier(0.4, 0, 0.2, 1),
  linear: linear,
  ease-in: cubic-bezier(0.4, 0, 1, 1),
  ease-out: cubic-bezier(0, 0, 0.2, 1),
  ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
) !default;

Customizing Your Build

Create a custom configuration file to override default values before importing Apex:

SCSS

// Your custom config file (e.g., _my-config.scss)
// Import this BEFORE the framework

// Change breakpoint values
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

// Disable unused utilities
$enable-grid: false;
$enable-transforms: false;

// Custom spacing scale
$spacing-scale: (
  0: 0,
  xs: 0.5rem,
  sm: 1rem,
  md: 2rem,
  lg: 4rem,
  xl: 8rem
);

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

Configuration Best Practices

•Disable utilities you don't use to reduce CSS bundle size
•Customize breakpoints to match your design requirements
•Use a prefix if integrating Apex with other CSS frameworks
•Keep your custom config file version controlled for team consistency