Skip to Main

automatic.css

The #1 Utility Framework for WordPress Page Builders

Here's why Automatic.css is a game changer for web designers and developers who use WordPress page builders....
Automatic Typography Icon

Automatic Typography

Anything on your Automatic.css 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 Automatic.css 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.
Colors Icon
Spacing Icon

Automatic Spacing

As is true with typography in Automatic.css, 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.

Automatically Responsive

Automatic.css 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.
Mobile Responsive Icon
Grid Icon

Automatic Grid

Automatic.css 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.

Insane 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.
Customization Icon
Fallbacks Icon

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. Automatic.css 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 Automatic.css 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 Automatic.css 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...
Simply apply an Automatic.css utility class:
Adding Classes to Oxygen Builder
Or use an Automatic.css variable:
Adding Automatic.css Variables to Oxygen Builder
It's super easy, whether you're editing within a builder or writing your own custom CSS.
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.
Gutenberg
Zion Builder
More coming soon as community members vote them up!
(Builders must have support for CSS classes)
reviews are in

What Automatic.css Users Are Saying

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.
Daniel Florian
Automatic.css User
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 Headshot
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 Headshot
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 Headshot
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 Headshot
Elizabeth Jamieson
WordPress Coach, Vegan Blogger
I'm in love with Automatic.css!
Automatic.css makes your life as an Oxygen builder much easier. Load, set, and forget. It offers an unparalleled set of well thought out CSS utility classes that work across all devices automatically. Coming from OxyNinja, Automatic.css is the new go-to Oxygen CSS framework. It is solid as a rock and built/maintained by a guy who keeps listening to the input and needs of his users.
Thomas Peter Headshot
Thomas Peter
Freelancer
the numbers

Start Using Automatic.css On Your Websites Today!

Personal License
$69
  • Automatic.css WordPress Plugin
  • ACSS Private Community Access
  • Automatic.css Support
  • Use on one WordPress website
  • Renews at $69/year
Buy a Personal License
agency License
$99
  • Automatic.css WordPress Plugin
  • ACSS Private Community Access
  • Automatic.css Support
  • Use on unlimited WordPress websites
  • Renews at $99/year
Buy an Agency License

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.

You can edit the 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. In the near future, you'll also be able to adjust the saturation value for perfect color control.

Yes, Automatic.css gives you multiple points of control over text sizes.

  1. You can control the base font size which adjusts all sizes evenly.
  2. You can control the font size scale which adjusts the variation between sizes.
  3. 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's going to make huge waves throughout other builder communities (Bricks, Zion, 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.

Have more questions? Contact Us.
Menu

Buy the Framework

Start using Automatic.css on your sites today! 
Purchase a License
Copyright ©2022 Digital Gravy, LLC • Legal