apexcss

v0.4.2

Published

2 months ago

Apex - A utility-first CSS framework with 500+ utility classes

Downloads

0High
0Medium
0Low

chris-briddock

css framework utility-first sass scss apexcss tailwind bootstrap-alternative

ApexCSS

This is still a work in progress and is in pre-release stage and is not fully tested. Documentation may be inaccurate. Use at your own risk

A utility-first CSS framework built with Sass. Apex provides 500+ utility classes for rapid UI development, covering everything from basic spacing and typography to advanced animations, transforms, and filters.

Features

500+ Utility Classes: Coverage of a large amount of CSS properties
Utility-First Approach: Build designs directly in HTML using utility classes
Modular Architecture: Import only what you need
JavaScript Configuration: Customize via apex.config.js - colors, breakpoints, spacing, and more
Design Tokens: Sass variables and CSS custom properties for easy customization
State Variants: Built-in support for hover, focus, active, and disabled states
Dark Mode: Full dark mode support with CSS custom properties
RTL Support: Right-to-left language support
Accessibility: Strong focus on accessibility with screen reader and focus management utilities and themes for colour blind
Extended Utilities: Animations, transforms, filters, and aspect ratio
Plugin System: Extensible architecture for community contributions

Quick Start

Installation

npm install apexcss

Project Setup with Vite

1. Install Vite (if not already installed)

npm install --save-dev vite

2. Create a Vite Configuration

Create a vite.config.js in your project root:

import { defineConfig } from 'vite'

export default defineConfig({
  // Vite automatically resolves bare CSS imports from node_modules
})

3. Add Scripts to package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

4. Create an Entry HTML File

Create an index.html that links to your CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Apex Project</title>
    <link rel="stylesheet" href="/css/main.css" />
  </head>
  <body>
    <!-- Your content here -->
  </body>
</html>

Import Options

Option 1: Full Import

Import the complete Apex CSS framework:

/* css/main.css */
@import 'apexcss';

Option 2: Individual Layers (Recommended)

Import specific layers with cascade layer assignment:

/* css/main.css */
@layer base, utilities, themes;

@import 'apexcss/base' layer(base);
@import 'apexcss/utilities' layer(utilities);
@import 'apexcss/themes' layer(themes);

This approach allows you to:

Control the order of cascade layers
Add your own styles to each layer
Optimize bundle size by importing only what you need

Option 3: Specific Files

Import individual files directly:

@import 'apexcss/base';      /* Base styles (resets, typography) */
@import 'apexcss/utilities'; /* Utility classes */
@import 'apexcss/themes';    /* Theme variables and styles */

Available Package Exports

| Export Path | Description | |-------------|-------------| | apexcss | Full framework (all layers combined) | | apexcss/base | Base styles, resets, typography | | apexcss/utilities | 500+ utility classes | | apexcss/themes | Theme variables and color schemes |

Running the Project

Start the development server:

npm run dev

Build for production:

npm run build

Preview the production build:

npm run preview

Cascade Layers

Apex CSS uses CSS Cascade Layers (@layer) for predictable specificity:

base - Resets and foundational styles (lowest specificity)
utilities - Utility classes
themes - Theme variables and color schemes

When using individual layer imports, define your layer order first:

@layer base, utilities, themes;

This ensures proper cascade order regardless of import order.

Adding Custom Styles

Extend Apex CSS by adding your own styles in the appropriate layer:

@layer base, utilities, themes;

@import 'apexcss/base' layer(base);
@import 'apexcss/utilities' layer(utilities);
@import 'apexcss/themes' layer(themes);

/* Your custom utilities */
@layer utilities {
  .my-custom-class {
    /* styles */
  }
}

Framework Integration

Apex CSS works with any framework that supports Vite. The CSS import syntax remains the same across frameworks.

React (Vite)

Create a new Vite React project:

npm create vite@latest my-app -- --template react
cd my-app
npm install apexcss

Import in your main CSS file (src/index.css or src/App.css):

 @layer base, utilities, themes;
 
 @import 'apexcss/base' layer(base);
 @import 'apexcss/utilities' layer(utilities);
 @import 'apexcss/themes' layer(themes);

Or import in your entry point (src/main.jsx):

import 'apexcss'
// or individual layers:
// import 'apexcss/base'
// import 'apexcss/utilities'
// import 'apexcss/themes'

Vue (Vite)

Create a new Vite Vue project:

npm create vite@latest my-app -- --template vue
cd my-app
npm install apexcss

Import in your main CSS file (src/style.css):

@layer base, utilities, themes;
   
@import 'apexcss/base' layer(base);
@import 'apexcss/utilities' layer(utilities);
@import 'apexcss/themes' layer(themes);

Or import in your entry point (src/main.js):
```
import 'apexcss'
```

Angular

Create a new Angular project:

ng new my-app
cd my-app
npm install apexcss

Add to angular.json styles array:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/apexcss/dist/apex.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

Or import in your global styles (src/styles.css):

@layer base, utilities, themes;
   
@import 'apexcss/base' layer(base);
@import 'apexcss/utilities' layer(utilities);
@import 'apexcss/themes' layer(themes);

Svelte (Vite)

Create a new Svelte project:

npm create vite@latest my-app -- --template svelte
cd my-app
npm install apexcss

Import in your main CSS file or entry point:

/* src/app.css */
@layer base, utilities, themes;

@import 'apexcss/base' layer(base);
@import 'apexcss/utilities' layer(utilities);
@import 'apexcss/themes' layer(themes);

Configuration

Customize ApexCSS by editing apex.config.js:

export default {
  features: {
    animations: false,  // Disable features you don't need
    transforms3d: false
  },
  colors: {
    primary: { hue: 300, chroma: 0.18, lightnessScale: { /* ... */ } }
  },
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px'
  }
}

Then build:

npm run config:build
npm run build

📖 See full configuration guide

Documentation

📖 View Full Documentation

License

MIT License - see LICENSE file for details

Built with ❤️ using Sass and modern CSS features.