In this article, we're going to review the AutomaticCSS utility CSS framework for Oxygen Builder. We'll review the features, pricing, intangibles, and competitors to see if this is a good addition to your plugin toolkit for the builder.

AutomaticCSS Features

First and foremost, AutomaticCSS is a CSS framework. We use CSS to style HTML elements in Oxygen Builder. Therefore, this tool is used to change colors, sizing, spacing, and other visual elements of components like headings, text, and divs within the builder.

Like other Oxygen focused CSS frameworks, we can use the incredible class system included with the builder, and add classes from this framework to be much more efficient than manually styling elements with the UI. Here's a good example of why we like frameworks so much.

Let's say we want to change the background of a div to the accent color of our website, on hover. Something like this:

With AutomaticCSS, we use this single class to do that:

The accent color is set in the Admin settings panel. When the user hovers over the element that has this class assigned, the background changes to the accent.

Without AutomaticCSS, these are the steps needed to achieve the same effect:

First, we'll create a global color in Oxygen and name it Accent. Next, we'll go to the div that we want our hover effect to apply to. Go to advanced -> background, and set the default color. Now go to advanced -> effects, and set transition to be about 1 second. Then go to the class input, click "state" and choose hover. Go to advanced -> background, and set the hover color to be accent.

You'll see that there are multiple clicks and steps if you're trying to achieve the same effect without a framework. And, if you're styling the ID and not using a class, you'll need to do this every time you go to make this effect. Hopefully, this shows why frameworks like AutomaticCSS and save a ton of time when creating a website... the seconds and button clicks add up!

Frameworks also keep things consistent - you're using the same class to space and color multiple elements, giving everything a clean, professional look. Global changes are easy when using classes as styles are centralized.

Give this a read for more info about why you should use a framework:

At the time of publication, AutomaticCSS has 903 classes, which you can explore by looking at the cheet sheet. These classes cover everything including coloring, spacing, font sizes, CSS grids, flex layout, etc...

CSS Variables

The classes are the core of the offering, but the framework also includes CSS Variables.

As the MDN docs mention, this allows you to set custom properties, and reuse them within your site.

A good example of this is colors. In css you can theme by making a in the :root {--main-bg-color:grey;}. You can then insert this into specific elements by using: background-color: var(--main-bg-color);

If you want to make global changes, variables are awesome.

In AutomaticCSS, you'll set your colors in the Admin Panel (mentioned below), and can insert them with utility classes, but also variables. Because Oxygen settings translate directly into CSS, you can paste many variables in the input fields, like so:

Admin Panel To Change Settings

Global settings like base sizing, fallbacks and colors are set in an Admin panel in your WordPress backend.

The global nature of these settings are really cool, specifically the sizing options.

If you think the buttons are to big, just change the settings here, and all buttons on the site will be edited. If you feel that everything on the site should be closer together, changing the base spacing from 30px to 40px will add a bit more space around everything at once.

Everything Is Automatic

As the name suggests, the sizing and spacing is automatic. Color shades are automatically generated from your core colors, and sizing/spacing/font sizes will change depending on the viewport width automatically.

This is done by using complex combinations of clamp(), with fallbacks to calc() and REM. Here's an example of the Margin Bottom Small class.

This shows the complexity of the fallbacks alongside the calculations to make this automatically scale based on the viewport. What's also awesome is that these values are calculated from the base settings in the Admin Panel. If you change them, all values like these throughout the site will change as well.

Flex and CSS grid are also automatically responsive to the size of the screen.

This will save you a ton of time, as you won't need to manually edit the sizing and spacing for each breakpoint in Oxygen Builder.

With this being said, this is a really lightweight piece of kit, considering that it'll save you from needing to style via ID or make tons of custom classes. It's also something that the developers at the Isotropic Agency really enjoy using, as you get the benefits of a utility framework, but many aspects are made to be automatic.

It's also perfect for Oxygen. (A note is that we really enjoy using Tailwind on custom projects built with Next, but can't use the framework in Oxygen, as it does not support ":' or "/" characters (alongside other issues). Therefore, we can't specify breakpoint specific styles, so we can't use Tailwind. OxyMade (another framework) is Tailwind inspired, but falls short when it comes to responsive classes.)

AutomaticCSS supports something like this with -l -m -sm descriptors.

Page Builder / Other Plugin Support

The framework has a public roadmap, which shows future plans for Builder and Form System Support. They're going to support Bricks (review), Zion (review), Gutenberg, WooCommerce, North Commerce and even non WordPress platforms in the future (NPM package like Tailwind would be awesome!).

They'll also support our favorite form builder, WSForm (detailed review here), alongside both Fluent Forms and Gravity Forms.

Public Roadmap

This is a relatively new product, and the roadmap looks really promising. Features such as an in builder dashboard for Oxygen Builder and other utilities are really exciting.

Tooltips, gradient backgrounds, icon classes, and other unique aspects are also coming soon, and will remove the need for custom code or additional plugins.

Ease Of Use (Can Beginners Use It?)

We suggest that anybody using a builder with class management should be using a framework. It's so much quicker and more efficient than using the GUI. Beginners will quickly learn a framework, and AutomaticCSS is nothing crazy.

All you'll need to do is use the framework enough to understand the general concepts. You can use the Cheat Sheet to get up to speed, which lists all the classes. Once you get your feet wet, it's incredible intuitive.

AutomaticCSS Pricing

AutomaticCSS comes in at $69/yr for a personal license and $99/yr for an agency license. The personal is for one site, and the agency is for unlimited sites.

There's a 30 day money back guarantee.

If you stop paying, you'll still have access to the framework (nothing will break), you'll just stop receiving future updates. This pricing model is incredibly fair, considering the active dev and release schedule, alongside the features, value, and time savings that you'll get with this product.

AutomaticCSS Circle Community

When you buy into AutomicCSS, you get access to a vibrant community where you can ask and answer questions, get support, and request features. It's incredibly active, and every question I've seen there have been answered quickly.

This is something that's not very advertised, but a massive value add. People talk about the product, but also other cool concepts (see the post on the bottom of the screenshot).

Circle (what the community is built on) as a platform is incredible. The UI is easy, the design is simple, and searching for specific content is a breeze.

A Look At Competition

AutomaticCSS isn't the only choice when it comes to a solid CSS framework for Oxygen Builder. There are two competitors that are worth looking at; OxyNinja and OxyMade.

While all three are "frameworks", AutomaticCSS positions itself a bit differently (read this official post on how it's different).

• It styles headings, sections and more by default, making things quicker.
• It focuses on being more automatic, removing the need for granular utility classes like mt-10, which we see in Tailwind and Tailwind inspired OxyMade. Therefore its simpler and easier to memorize.
• You'll style things globally via an admin panel, and the settings (like sizing and spacing) will adjust to that. Therefore you can use the same classes on different sites, and achieve different results.
• There's a robust type and color system, mentioned above. OxyMade has a great color system, but ACSS's is more granular.
• There are fallbacks - calc() is used if clamp() isn't supported. If calc() isn't supported then REM is used.

This sentence from the post linked above hits the nail on the head when discussing how it's different from the two competitors.

Automatic.css is automatically responsive. No breakpoint adjustments are necessary, making it the easiest utility framework to setup, customize, and maintain.

It's also cheaper and just a framework. Both OxyNinja and OxyMade come with templates and other items... ACSS does not.

Finally, the community (and support from community members) is something that none of the other products offer. It's almost like a mini Oxygen Builder FB group, but on circle, and focused towards AutomaticCSS.

Keep on the lookout for an AutomaticCSS vs OxyMade vs OxyNinja comparison. We're well acquainted with each product and have used all on client projects over the years. Depending on your use case, each offering may be a good choice for you. For now, give each review a read, and go to each site to get a better understand of what each has to offer.

Conclusion

AutomaticCSS is an incredible framework for Oxygen Builder. If you're looking for an easy to use, intuitive, and robust CSS framework, AutomaticCSS is the way to go. It's fast, reliable, and has an amazing community behind it. When it comes to pricing, the framework is very affordable when compared to its competitors.

If you're looking for something that is simple to understand and quick to get up and running with - AutomaticCSS is a smart bet.

We hope this review was helpful. If you have any thoughts or questions, don't hesitate to comment below.