Skip to main content
Version: 4.x

Welcome

Automatic.css (ACSS) is consistently voted the #1 framework for WordPress page builders because it combines innovative features, True Builder Integration™, best practices, unparalleled support, and education. It revolutionizes how you build websites with page builders, empowering developers and designers to create beautiful, consistent, and maintainable websites at unprecedented speed while maintaining complete control over their code.

When you choose ACSS, you're not just buying a CSS framework. You're buying true vision, an ecosystem, a vibrant community, a learning environment for web design best practices, unmatched support, and a brand new workflow that transforms how you work.

What Makes Automatic.css Different​

Most CSS frameworks try to do too much, lack flexibility, create limitations, and aren't designed for page builders. Automatic.css is different—it was designed from the ground up as a next-generation framework specifically for WordPress and page builder environments.

ACSS has all the typical benefits of a framework plus numerous additional benefits, with none of the downsides.

Industry-Leading Innovations:

Automatic.css pioneered numerous features that have become essential to modern WordPress development:

  • UI dashboard for effortless framework customization with live preview & hot reload
  • Automatic shade generation for colors
  • Fluid responsive spacing and typography using mathematical scales
  • Auto grids and intelligent layout systems
  • Comprehensive accessibility features (focus styling, clickable parent, etc.)
  • Variable partials and logical properties
  • Header height offsets and smart spacing
  • Contextual spacing and auto spacing
  • Automatic color relationships and contextual colors
  • Icon, Card, Border, Divider, and Texture frameworks
  • Single-class form styling
  • Auto-BEM methodology
  • SCSS mixins and recipes for complex patterns
  • Right-click contextual menus with live class preview
  • And many more...

Core Principles:

  • No Sacrificing Creativity – Most frameworks are too rigid and limiting. ACSS gives you complete freedom—there's no custom layout or feature you can't build and no design you can't match.
  • Balanced Approach – ACSS doesn't do too little or too much. It's easy to learn and strikes the perfect balance between helping you and staying out of your way.
  • Speed AND Maintainability – Build sites fast while maintaining unprecedented maintainability. ACSS ensures your sites are the most scalable and maintainable you've ever built.
  • Powerful Yet Lightweight – Switch between full utility framework, ultra-minimal variable framework, or any combination. Easily disable features you don't need for zero bloat.
  • True Builder Integration™ – Works seamlessly across every layer of WordPress (FSE, Gutenberg, and third-party page builders) without upsells or add-ons.
  • Education & Excellence – The average ACSS user improves their workflow and web design skills by multiple levels within months thanks to our culture of education, excellence, and support.

Who Automatic.css Is For​

Automatic.css is built for freelancers, agencies, and developers who want to experience:

  • No Decision Fatigue – Start building your site in minutes with minimal setup. Then breeze through page building with simple classes and tokens for common styles.
  • Effortless Design Consistency – Achieving and maintaining perfect consistency with colors, shades, spacing, and typography across an entire site has never been easier.
  • Automatic Mobile Optimization – ACSS removes 60-90% of the work required to get your websites looking fantastic on mobile devices. It's a dream for responsive development.
  • Maintainability & Scalability – Build the most scalable and maintainable sites you've ever built. You can even re-theme an entire site in seconds after it's launched.
  • Limitless Flexibility – Unlike rigid utility frameworks, ACSS was the first to offer total flexibility across every important area of the system.
  • Best Practices, Support & Education – Access an unparalleled level of support, education, and training, while learning industry-wide best practices.

Automatic.css is also perfect for beginners who want to build professional websites while learning proper web development practices. The framework respects CSS fundamentals and teaches you modern best practices rather than locking you into proprietary systems.

Why Developers Choose ACSS​

Ask about ACSS in any page builder community, and you'll likely see dozens of recommendations for Automatic.css. The reason? ACSS delivers where other frameworks fall short:

  • 😍 Vibrant Community – Join thousands of developers in an active, supportive community
  • 🎯 Unbeatable Support – Get help when you need it with industry-leading customer support
  • 🚀 Innovative Features – Stay ahead with continuous innovation and feature development
  • 📚 Education & Training – Access comprehensive learning resources, courses, and documentation
  • 🎨 Frames Ecosystem – Leverage the most advanced design kit for WordPress
  • ⚡ Frequent Updates – Regular improvements, new features, and performance enhancements
  • 🔧 Fast Bug Fixes – Issues are addressed quickly and efficiently

Getting Started​

Ready to transform your workflow? Start with these essential guides:

  1. How to Install ACSS – Get Automatic.css installed and activated
  2. Website Width & Breakpoints – Configure your site's foundational dimensions
  3. Utility Classes: What & Why – Understand the core concept behind ACSS
  4. Variables: The Real Power of ACSS – Learn how to leverage the variable system
  5. T-Shirt Sizes for Enhanced Simplicity – Master the intuitive sizing system

Core Features​

Design System​

  • Color System – Automatic color relationships, dark mode support, and semantic colors
  • Spacing System – Consistent spacing with t-shirt sizing (XS, S, M, L, XL, etc.)
  • Typography – Fluid, responsive type scaling with automatic hierarchy

Layout & Structure​

  • Grid System – Powerful CSS Grid utilities for any layout
  • Flexbox – Complete flexbox toolkit with intuitive class names
  • Responsive Development – Mobile-first utilities with breakpoint modifiers

Components & Elements​

  • Buttons – Flexible button system with automatic styling
  • Cards – Semantic card framework for content containers
  • Forms – Automatic form styling that just works

Advanced Workflows​

  • Pro Mode – Disable utilities you don't need for a lightweight framework
  • Mixins – Reusable CSS patterns for custom classes
  • Recipes – Real-world solutions to common design challenges

Quality of Life Features​

ACSS is committed to solving common challenges that real web designers face daily. These unique features set ACSS apart:

  • Automatic Offsets – One-click fixes for overlay headers, sticky headers, sticky elements, and scroll-to-hash link spacing issues
  • String Expansion – Never write var() or calc() again. ACSS auto-expands --variable to var(--variable) and 1 + 1 to calc(1 + 1)
  • Smart Content Spacing – Intelligent spacing for perfect gaps between headings, paragraphs, buttons, links, and lists
  • Advanced Focus Styling – Choose between outline or box-shadow focus styles, customize colors, and apply with simple utility classes
  • Clickable Parent – Make entire card areas clickable while maintaining accessibility—accomplished with a single utility class
  • Automatic REM Conversion – Use pixel values followed by "ctr" and ACSS converts them to proper REM units automatically
  • Automatic Text Balancing – Say goodbye to orphans with automatic heading and paragraph text balancing
  • Right-Click Contextual Menus – See available classes and variables with live preview directly in your page builder
  • Cheat Sheet Integration – Quickly reference any utility class or variable without leaving your workflow

The Frames Ecosystem​

Frames is the only well-coded, accessible, and unopinionated design kit for WordPress. It's a real-time wireframing tool, design-ready development system, and accessible component library that empowers you to build beautiful custom websites in half the time with zero limits on your creativity.

Supported Page Builders​

ACSS supports the following page builders:

  • Etch (Flagship Integration) – The unified visual development environment for WordPress
  • Gutenberg (WordPress Block Editor)
  • Bricks Builder

With 4.x, we made the difficult decision not to carry forward support for several integrations:

  • Cwicly – Removed due to being EOL / discontinued.
  • Oxygen 4.x and 6.x – Removed due to development concerns and workflow misalignment.
  • Breakdance – Removed due to workflow misalignment.
  • GeneratePress & GenerateBlocks – Removed due to workflow misalignment.

For more information on these decisions, read Preparing for ACSS 4.0.

Need Help?​

This documentation covers everything from basic concepts to advanced workflows. Use the search function or browse the sidebar to find specific topics. You also have our very helpful support community at your fingertips.

Learning Resources​

Additional Resources​

  • Manifesto – Learn about the vision and philosophy behind ACSS
  • Roadmap – See what's coming next
  • Changelog – Stay up to date with new features and improvements
Last updated on