Voted #1 Framework for WordPress Page Builders
Automatic.css (ACSS) is consistently voted the best framework for WordPress because it combines innovative features, True Builder Integration™, best practices, unparalleled support, and education.
I used to be an OxyNinja lover. With Automatic.css, all the hassle is taken away from things I hadn’t even realized were a problem before making the switch! If nothing else, the colour system is a game changer. Site wide usage of colours and a variety of shades/opacities with no...
Michael Culham
Automatic.css User
What I like most about Automatic.css is the ability to customize and extend the framework to your own needs thanks to countless CSS variables. This makes it a breeze to create your own styles and classes at will, which integrate seamlessly with the framework....
André Slotta
Automatic.css User
ACSS puts Kevin’s workflow and philosophy into one easy-to-use system. It’s super intuitive while still being a robust solution that can handle anything you throw at it. A brilliant approach to style management. Love it!...
Maya Nikolova
Automatic.css User
I am pretty new to utility classes, and Kevin’s Automatic.CSS has been a revelation for me! The speed and simplicity with which I can now set up a site has been a real eye-opener. The fact that I can hook into the system for my own custom classes makes it...
Build scalable, maintainable, and consistent websites with hardly any effort
Setup and adjust your sites styling with a simple dashboard and then build your site with ACSS's classes and variables. That's it – your site is automatically responsive, scalable, and maintainable. Learn more below!
Set (or swap) your website's brand colors in seconds
Define your brand colors and experience the magic of automatic shade & transparency generation. Easily reference colors, shades, and transparencies using user-friendly utility classes and simple variables. Need to make small adjustments to different shades? You can do that, too. This is color management without limitation.
🤩Main color
Ultra LightLightMediumDarkUltra DarkHover102030405060708090102030405060708090102030405060708090Enjoy fluid responsive typography out of the box
Say goodbye to managing text sizes across breakpoints. Just set the base size for your typography, choose a scale value, and watch your headings and text scale fluidly across all devices. Best of all, you can override any individual text or heading size with your own min and max values in seconds.
Display H1Display H2Display H3Display H4Display H5Display H6Get beautiful spacing rhythm on every site with zero effort
Consistent spacing in web design creates visual rhythm. That's why Automatic.css' spacing options are based on mathematical scales. Enjoy harmonious designs while retaining flexibility through simple spacing options you can easily adjust. This is effortless visual balance!
😃Build any layout in seconds with responsive grids and columns
Unlock the power of flexible layouts with Automatic.css. From basic to advanced, this unique framework offers utility classes and variables for both flexbox and grid layouts. Our automatic grids reduce breakpoint headaches and our innovative "Flex-Grid" feature solves common issues with uneven grid children. ACSS simplifies development and helps you create stunning layouts with ease.
🤯Create maintainable components with simple styling tokens
Having one source of truth for global element styling is crucial for maintainable web design. This is where Automatic.css excels. Simply style elements using a custom class and ACSS variables for consistency, efficiency, and maintainability across your entire website. And yes, it works perfectly with class organization methods like BEM.
😱Card Component
This is an example card component. Build it with ACSS variables and you'll never have to copy & paste styles or elements, mess with limited presets, or manually change styles one-by-one.
Buy a license.card { background-color: var(--base-dark); border-radius: var(--radius-m); } .card__content { padding: var(--space-m); font-size: var(--text-s); gap: var(--card-gap); } .card__link { text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: .25em; }Solve common development headaches with a few clicks
Automatic.css is built for freelance and agency work. As part of that vision, we're committed to solving common challenges and headaches that real web designers face on a daily basis. This has led us to develop "quality of life" features that no other framework on the planet offers. Once you use them, you'll never want to build another website without them (our apologies).
Build without guesswork thanks to cheat panels & live preview
Worried about learning the entire framework? You don't have to be! Automatic.css has handy right-click contextual menus that let you easily see the classes and variables available for a given style and add them directly within the page builder in a single click. Even better, you can live preview exactly what a class or variable does before you add it. Using ACSS requires no real memorization or guesswork.
Since time is money, I’m always looking for ways to save time on projects. With Automatic.css, I can put together websites for clients in record time and instantly make site-wide changes. I no longer start a website project without ACSS.
