ACSS Framework 🎨

A production-ready, atomic CSS framework with dynamic customization capabilities built on UnoCSS

🚧 Beta Release: This is a beta version for community testing and feedback. Join our beta testing program!

🎉 Beta Release Highlights

This beta release introduces the complete ACSS Framework ecosystem, ready for community testing and feedback.

What's New in Beta

• 🎨 Dynamic Theme Engine: Real-time theme customization with CSS custom properties
• 🖼️ Visual Theme Editor: Interactive theme customization interface
• 🌐 Framework Integration: React, Vue, Svelte, and vanilla JavaScript support
• ⚡ Performance Optimized: Minimal bundle size with tree-shaking support
• ♿ Accessibility First: WCAG 2.1 AA compliant with screen reader support
• 📱 Responsive Design: Mobile-first approach with fluid typography
• 🔧 TypeScript Support: Full type definitions and IntelliSense support

✨ Features

• 🎨 Dynamic Theme System - Runtime theme customization with CSS variables
• 🧩 Modular Presets - Typography, layout, components, animations, and utilities
• 🎛️ Visual Theme Editor - Live preview and export functionality
• 📱 Container Queries - Modern responsive design patterns
• 🔤 Fluid Typography - Mathematical scaling with CSS clamp()
• 🌙 Dark Mode - Built-in light/dark theme support
• 📦 Tree Shakable - Optimized bundle sizes with modern exports
• 🔧 TypeScript - Full type safety and IntelliSense support

🚀 Quick Start

Installation

# Install the beta version
npm install @acss/framework@beta

# Or with yarn
yarn add @acss/framework@beta

# Or with pnpm
pnpm add @acss/framework@beta

Basic Setup

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetACSSFramework } from '@acss/framework'

export default defineConfig({
  presets: [
    presetACSSFramework({
      // Optional configuration
      features: {
        fluidTypography: true,
        containerQueries: true,
        darkMode: true
      }
    })
  ]
})

Using with CSS

/* Import base styles */
@import '@acss/framework/css';

/* Your custom styles */
.my-component {
  @apply text-lg font-semibold text-primary-600;
}

📖 Documentation

Core Concepts

• Getting Started - Installation and basic setup
• Theme System - Understanding themes and customization
• Design Tokens - Primitive, semantic, and component tokens
• Presets - Modular preset system overview

Presets

• Typography Preset - Fluid typography and text utilities
• Layout Preset - Grid, flexbox, and container queries
• Component Preset - Pre-built component styles
• Animation Preset - Transitions and motion utilities
• Utility Preset - Helper classes and patterns

Advanced Features

• Theme Editor - Visual theme customization
• Runtime Customization - Dynamic theme changes
• Container Queries - Modern responsive design
• Fluid Typography - Mathematical scaling

Integration Guides

• React Integration - Setup with React and Next.js
• Vue Integration - Setup with Vue and Nuxt
• Svelte Integration - Setup with Svelte and SvelteKit
• Vite Integration - Setup with Vite
• Webpack Integration - Setup with Webpack

🎨 Theme Editor

The ACSS Framework includes a powerful visual theme editor for real-time customization:

import { ThemeEditor } from '@acss/framework/editor'

const editor = new ThemeEditor({
  container: '#theme-editor',
  theme: myTheme,
  onThemeChange: (newTheme) => {
    // Apply theme changes
    applyTheme(newTheme)
  }
})

🏗️ Architecture

The framework is built with a modular architecture:

@acss/framework
├── Core Theme Engine     # Dynamic theme system
├── Modular Presets      # Typography, layout, components
├── Visual Editor        # Theme customization UI
├── Design Tokens        # Primitive, semantic, component
└── Utilities           # Helper functions and validation

📦 Package Exports

// Main framework
import { presetACSSFramework } from '@acss/framework'

// Individual presets
import { typographyPreset } from '@acss/framework/presets'

// Theme engine
import { ThemeEngine } from '@acss/framework/theme-engine'

// Visual editor
import { ThemeEditor } from '@acss/framework/editor'

// CSS styles
import '@acss/framework/css'

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with UnoCSS and inspired by atomic CSS methodologies.