css framework
The #1 Utility Framework for WordPress Page Builders
Here's why Automatic.css (ACSS) is a game changer for web designers and developers who use WordPress page builders....
Automatic Typography
Anything on your ACSS powered website that contains text, whether it's a heading, paragraph, list, form field, or anything else, follows a perfect mathematical scale in hierarchy through 12 different size options, all of which are automatically & perfectly mobile responsive. Best of all, the entire system is under your command from the Automatic.css dashboard.
Automatic Colors
Set your brand colors and ACSS automatically generates six shade variants of each color. Classes give you the ability to color any element (including backgrounds and overlays) with these variants and you can even use them with custom classes and IDs via Automatic.css color utility variables.
Automatic Spacing
As is true with typography in ACSS, margins, padding, and gaps all follow a perfect mathematical scale giving you access to six hierarchal spacing values and six hierarchal section spacing values, all of which are automatically responsive. Additionally, spacing utility variables ensure that even completely custom elements have consistent spacing.
Automatic Responsive
ACSS uses advanced CSS Clamp and Calc techniques to ensure that all typography, margin, padding, and gaps are perfectly responsive according to the maximum and minimum viewport dimensions of your website. You never have to fiddle with breakpoints, even when you customize the system to fit a specific design and layout.
Automatic Grid
ACSS is the first utility framework to offer automatically responsive grids. Set the number of desired columns on desktop and Automatic.css handles the rest. For developers who prefer complete control over their grid at each breakpoint, Automatic.css offers full control via traditional grid utility classes.
Automatic Customizability
Think a fully automatic framework locks you in to using the same values on every site? Think again! Automatic.css gives you amazing granular control over typography, spacing, and colors so you can quickly recreate designs from Figma, Sketch, and XD without issue. It's perfect for agencies and teams.
Automatic Fallbacks
Not all browsers support Clamp and Calc functions, which are the heart of Automatic.css' responsive nature. No need to worry, though, because Automatic.css has near-perfect fallbacks using Calc for browsers that don't support Clamp, and "pure" fallbacks using rem or px for browsers that don't support Calc. And yes, you have full control over the pure fallback values.
the difference
Finally, A True Utility Framework
Doesn't Do Too Little
Most utility class systems force you to use classes for everything. ACSS picks up the slack by automatically setting certain elements like heading sizes, section padding, etc. by default (without overdoing it). You don't have to remember to put a class on every single heading or section.
Doesn't Do Too Much
Many utility class systems try to do way too much with hyper-granular, obscure classes like ".pt-10", which make your website harder to maintain and harder to adjust globally. Automatic.css is designed to help where necessary without trapping you in Utility Class Hell.
Keeps Up With You
One of the biggest downsides of most utility class systems is that you have to leave them behind when you create custom elements. With ACSS variables you can easily hook custom classes into the Automatic.css sizing, spacing, and color systems for unprecedented design consistency.
Gives You Control
Other utility class systems lock you into set variables and making changes is time consuming and risky. Automatic.css is the first system that empowers you to dial in the entire system to your specific design needs. From site to site, Automatic.css follows your lead.
Lightweight & Bloat-Free
Since ACSS stays true to being a utility system, it's free of the bloat that comes with many other utility class frameworks. And yes, we guarantee that we'll stick to a true "utility" philosophy to ensure that Automatic.css will never fall victim to the bloat of endless feature requests and chintzy add-ons.
Designed for Actual Devs
Relying on the pre-styled layout packs and design kits that come with other utility systems is boring and traps you and your client into a website that looks like all your other websites. Automatic.css is built for people who build from scratch, use custom classes appropriately, and who want to be able to quickly and easily create ... anything.
Here's What You Can Quickly & Easily Control With Automatic.css
- Background Colors
- Background Overlays
- Text Colors
- Button Colors
- Outline Buttons
- Link Colors
- Hovers
- Headings
- Text Sizes
- Text Scale
- Text Colors
- Margin
- Padding
- Section Padding
- Spacing Scale
- Button Colors
- Button Sizes
- Flex Layout
- Flex Item Position
- Flex Item Order
- Grid Structure
- Grid Breakpoint Structure
- Grid Gap
- Grid Item Position
- Grid Item Order
- Grid Item Span
- Border Radius
- Radius Scale
- Max-Width
- Min-Height
- Box Shadows
- Breakouts
- Image Object Fit
- Image Flip
- Sticky Elements
- Opacity
- And more...
the family
Page Builders Powered by Automatic.css
The only framework that seamlessly transitions from builder to builder. No additional costs, no additional plugins. Learn it once and use it wherever you need to.
More coming soon as community members vote them up! (Builders must have support for CSS classes)
Reviews are in
What ACSS Users Are Saying
Hats off to ACSS!
I have been building sites for a long time. And just really love how well and fast this makes this whole process. Grids. Spacing. Buttons. Typography. Color. The community is all well supported. Big plus.
Ben Bruno
Automatic.css User
A huge revelation for me!
I am fairly 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 just makes it that much faster when it comes to changes across the site.
I made the switch!
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 messing about. It's a win win.
Michael Culham
Automatic.css User
I no longer start a project without Automatic.css!
I specialize in working with small local businesses that don't have large budgets. Since time is money, I'm always looking for ways to save time from project to project. With Automatic.css, I am able to put together websites for clients in record time. With Automatic.css I can make site-wide changes in an instant. I no longer start a website project without Automatic.css.
Erik Allen
Automatic.css User
A very intelligent approach to styles management!
Automatic puts all of Kevin's great content and much more in one easy to use system. It's super intuitive and easy to use, at the same time as being a robust solution. A very intelligent approach to styles management. Absolutely love it!
Maya Nikolova
A bit of everything
Speeds up development and makes complex layouts super easy!
When I first used Automatic and realised that I could easily achieve a responsive Oxygen website without spending hours messing around with media queries, I was hooked. Automatic.css speeds up development and makes it super easy to create complex layouts.
Elizabeth Jamieson
WordPress Coach, Vegan Blogger
Purchase a license
Start Using ACSS Today
Choose your plan below. If you ever need a bigger plan you can easily upgrade from your account dashboard.
Personal license
$69/year
- ACSS WordPress Plugin
- Support Community Access
- Automatic.css Support
- 3 Websites
- All Supported Platforms
Agency Lite
$99/year
- ACSS WordPress Plugin
- Support Community Access
- Automatic.css Support
- 15 Websites
- All Supported Platforms
Agency Pro
$149/year
- ACSS WordPress Plugin
- Support Community Access
- Automatic.css Support
- 100 Websites
- All Supported Platforms
Questions About the Framework?
Most frameworks set a root font size, typically either 100% or 62.5% (the latter makes using rem units much more intuitive). This can cause issues for people who prefer one root size over another. Automatic.css is unique in that you can set your root font size to whatever you want it to be and Automatic will recalculate the entire system to adjust to your preference.
Yes, you can completely customize your website's colors in the dashboard using Hex, RGB, or HSL. In the future you'll be able to add additional colors and their corresponding classes and variables easily with one click.
Yes! You can edit the saturation and lightness value for every shade that is generated by the framework. This allows you to dial in the shades to match your brand essence or design, even after your site is completely built.
Yes, Automatic.css gives you multiple points of control over text and heading sizes.
- You can control the base font size which adjusts all sizes evenly.
- You can control the font size scale which adjusts the variation between sizes.
- You can completely override Automatic's text scale with manual values.
All changes made using these controls are automatically responsive.
Automatic.css has many unique and fundamental differences compared to other frameworks. Most would say it's a completely fresh and unique approach to utility frameworks. If you want to understand the critical differences, read this write up.
Absolutely. Utility classes are great for beginners because they help you accomplish a lot of things you probably can't do on your own. While there are certain parts of the framework that have a little bit of a learning curve, we have an amazing support team and support community that will help you!
While this framework was initially designed for Oxygen, it became the #1 framework for Bricks Builder within weeks of officially supporting it. We expect that it will continue to make huge waves throughout other builder communities (Zion, Cwicly, etc.), Wordpress, WooCommerce, and eventually outside of Wordpress as we build it to work on ANY website.
We have a lot of resources, a committed dev team, and two huge communities supporting it. For full transparency, we've made the roadmap public and will continue to do so.
If you don't like Automatic.css you can get a full refund within 30 days of purchase.
Your ACSS license does not turn the framework or plugin functionality on or off. Rather, it controls your access to support and plugin/framework updates. If you cancel your subscription, the plugin and framework will continue to work on your site at the current version. However, your ability to access support and updates will end unless you choose to renew your license again at some point in the future.
If you are not on the top plan, you can upgrade your license to a plan above to unlock more website activations. If you are already on the top plan and reach your activation limit, you can simply purchase another license (via any plan) to add more activations.
While ACSS does use all relative units, pixels are standard reference units and are easy for users to visualize and understand. When you enter a value like 24px into ACSS, that value is converted to rems on the back end based on your website's root font size. This process makes framework setup and customization easy for the user while the more technical stuff is handled behind the scenes.
Have more questions? Contact Us.