OxyNinja is a popular CSS utility framework for Oxygen Builder on Wordpress. Want to know the difference between Automatic.css vs OxyNinja? Let’s discuss!
First, some words about OxyNinja…
OxyNinja is, no doubt, a solid utility framework. It’s actually the framework that our web design agency used exclusively prior to the creation of ACSS.
In fact, we built Automatic.css specifically to fill gaps that we felt were present in OxyNinja. So when you use ACSS, you’re using a tool that was built from the ground up to be more functional and scalable than OxyNinja.
But it’s details you’re after, right? Let’s dive in.
Automatic.css has a color system and OxyNinja doesn’t
The first thing you’ll notice about ACSS vs OxyNinja is the presence of a powerful color management system.
In the ACSS dashboard, you plug in your website’s colors to setup the color system. For each color you set, there are 6 automatically generated shades and multiple transparencies.
The Colors
- Primary – The action color for your website (buttons, links, etc.).
- Secondary – The second most used color on your website.
- Accent – The least used color on your website.
- Base – Your website’s base color.
- Shade – White, black, and gray shades (hue can be adjusted).
The Shades
Good design is based on a simple color palette with multiple shade variations of each color. Automatic.css generates these shades for you automatically and allows you to edit both their lightness and saturation values so you can dial in the exact shade variations you need.
- Hover
- Ultra Light
- Light
- Medium
- Dark
- Ultra Dark
Transparencies
Transparencies allow you to create overlays other color effects while keeping everything perfectly within your brand colors and while maximizing consistency across the website. These transparencies are globally controlled by your color and shade values so even if you make changes to those colors later, your transparencies will adjust accordingly.
- 10%
- 20%
- 40%
- 60%
- 80%
- 90%
- 10% Ultra Light
- 20% Ultra Light
- 40% Ultra Light
- 60% Ultra Light
- 80% Ultra Light
- 90% Ultra Light
- 10% Ultra Dark
- 20% Ultra Dark
- 40% Ultra Dark
- 60% Ultra Dark
- 80% Ultra Dark
- 90% Ultra Dark
Colors can be used throughout your website with ACSS utility classes to change many different elements: background colors, overlays, text color, heading color, buttons, etc.
You can also hook into every color, shade, and transparency using ACSS variables. This means you can create custom components with custom classes while still being able to access the ACSS color system. Very powerful!
In fact, the ACSS system is so powerful that you can design an entire website and the completely change it’s color theme perfectly from the ACSS dashboard in seconds.
None of this functionality is available in OxyNinja.
In the near future we’ll be giving users the ability to add additional colors to the system. Those custom colors will also have shades and transparencies automatically generated.
Automatic.css has a mathematically perfect and user-editable fluid typography system
Many utility frameworks updated their typography system to be fluid responsive using clamp() after I showed the technique in my Oxygen setup tutorial. OxyNinja is one of those frameworks.
However, Automatic.css takes fluid responsive typography to a whole new level.
First, the typography system in ACSS is based on a perfect mathematical scale so you never have to think about what size your h2 should be compared to your h1 and how big your h4 should be compared to h5, and so on.
In ACSS, you set your base font size and then choose the mathematical scale you want. There are 8 presets to choose from:
- Minor Second (1.067)
- Major Second (1.125)
- Minor Third (1.200)
- Major Third (1.250)
- Perfect Fourth (1.333)
- Augmented Fourth (1.414)
- Perfect Fifth (1.500)
- Golden Ratio (1.618)
Don’t want a preset type scale? No problem, you can choose “custom” and put in your own scale value. Or, you can go completely rogue and set a custom size for every heading.
The heading sizes perfectly correspond to the text size classes and variables, ensuring that all of your typography is consistent.
- H1 / XXL
- H2 / XL
- H3 / L
- H4 / M
- H5 / S
- H6 / XS
In the near future we’ll be giving users the ability to add completely custom sizes simply by setting the max size (for desktop) and the min size (for mobile) for the new font size. That new size will be automatically responsive by using our built-in clamp functions (it all happens automatically behind the scenes).
What’s especially great about the ACSS typography system is the power you have in making adjustments even after a site is completely built. Want a little bit larger body text? Just change the base font size and all your text and headings will adjust accordingly to maintain proper scale.
You can make sweeping changes to both colors and typography in seconds right from the ACSS dashboard without having to directly edit any elements on your site!
Oh, by the way, the fluidness of the typography in ACSS is not based on arbitrary min and max values like it is in OxyNinja. ACSS calculates the clamp functions by inserting your website’s actual min and max width. This means that the typography isn’t just responsive – it’s the most accurately responsive typography you can achieve.
With OxyNinja, you don’t have mathematically scaled typography or global control over your typography in this way. And if you want to edit the sizes it requires editing OxyNinja’s actual CSS clamp functions.
Automatic.css has a mathematically perfect and user-editable fluid spacing system
Much like its typography system, ACSS uses the same globally-controlled, mathematically scaled philosophy for its spacing system.
This means that padding, margins, owl spacing, and grid gaps all use the same system. They all perfectly match each other and any changes to the spacing system will automatically update in all of these places.
When margin, padding, and gaps all match and follow a perfect mathematical scale, it ensures that your design is ultra-consistent.
As with the typography, you can adjust the spacing across your site globally at any time. Make things tighter or looser by changing the base spacing value or the scale itself, in seconds.
Automatic.css has section and header padding and OxyNinja doesn’t
One of the biggest things missing from the OxyNinja system is the ability to properly set section padding.
As you probably know, sections require more padding than other elements. In OxyNinja, there’s no section padding at all, so right from the jump you’re forced to put in your own default values for section padding (which don’t match the rest of the spacing values in OxyNinja).
Now consider this…
You add a section to your page and you decide that you need more or less padding in that section? In OxyNinja, you have to go generate your own clamp and make your own custom section padding class if you want that section padding to be responsive. Or you have to put in static values and adjust the spacing at each breakpoint.
Even if you do that, though, your section padding won’t be consistent with all the other spacing on your website.
In Automatic.css, we recognized the huge need for consistent and easily adjustable section padding. First, your section padding is properly set by default when you first install the plugin. It’s mathematically calculated from your base space.
Next, we provide you with section padding classes that are smart enough to only change the top and bottom padding in the section and leave the left/right padding alone.
You can choose from the following:
- No Section Padding
- X-Small Section Padding
- Small Section Padding
- Medium Section Padding (default, no class needed)
- Large Section Padding
- X-Large Section Padding
- XX-Large Section Padding
This means you can change the section padding in seconds while keeping it perfectly consistent with all other spacing on the site. It’s also automatically responsive as well.
Want to adjust how your section padding behaves? It’s editable right from the ACSS dashboard! Section padding is created using a multiplier of the base spacing system. Want tighter section padding sizes, reduce the multiplier. Like more white space, increase the multiplier. All your section padding will adjust accordingly, even if your site build is completely finished!
You can also adjust the left/right section padding at any time from the ACSS dashboard.
Want to create a custom class like .hero for a section? Have at it! You can still hook into the section spacing system in ACSS by using the section-space variables. You don’t have to ditch the ACSS system when creating custom classes.
All of the same is true for header padding, which also doesn’t exist in OxyNinja.
Automatic.css has a radius system
OxyNinja gives you one class rounded courses. Automatic.css gives you seven variant classes for rounded corners:
- X-Small
- Small
- Medium
- Large
- X-Large
- XX-Large
- Circle
And, you guessed it, the radius system is also controlled by a mathematical scale and is completely user defined.
This means you can use different types of rounded corners throughout the site while retaining full global control over them.
Creating a custom component and need to add rounded corners? No problem! Hook into the ACSS radius system using the radius variables. Now your custom components perfectly match everything else on your site and you don’t have to go make edits from class to class should the radius values ever need to change.
None of this is possible in OxyNinja.
Automatic.css gives you far more control over buttons
ACSS gives you solid button and outline button variants that correspond to every text size and color in ACSS, along with white buttons and black buttons. This means you have a button for every single situation right out of the box.
Button padding, button border size, text color, and button radius can all be controlled from the ACSS dashboard, making them full-blown global components that you can adjust at any time.
Additionally, buttons will automatically inherit the hover shade for each color so you never have to mess with adding or editing hover values.
None of this is possible in OxyNinja.
Automatic.css doesn’t get in your way like OxyNinja sometimes does
A lot of differences between OxyNinja and Automatic.css are related to missing features in OxyNinja. But, there’s just as much relevance when talking about things that Automatic.css DOES NOT do (because a framework shouldn’t).
Automatic.css does not make design decisions for you and does not combine styles into single classes.
For example, if you add a primary button in OxyNinja, it adds a lot of styling that you didn’t ask for. It adds radius, shadows, a random text size, a hover effect, etc. If you don’t like these things or they don’t fit your style, you have to remove them.
But, why were they there in the first place?
The same is true for simple heading classes where the heading class doesn’t just set the font size, but it sets a random max-width value as well.
You’ll find these inherent design biases all throughout the OxyNinja CORE system.
Automatic.css leaves the design decisions up to you. Our philosophy is always, “Be helpful, but don’t get in the way.”
Automatic.css gives you far more browser support with a dual-layer fallback system
OxyNinja has a single fallback layer. If a browser doesn’t support clamp(), OxyNinja will fallback to static pixel values. This means your site will look pretty different in older browsers as you’ll lose the fluidity and sizes across all typography and spacing.
Automatic.css, on the other hand, has a powerful dual-layer fallback system.
If a browser doesn’t support clamp(), Automatic.css will automatically serve all margins, padding, section padding, owl spacing, and gaps using calc() functions that perfectly match the behavior of the clamps.
This means that your website will look exactly how you want it to look in many more older browsers.
If for some reason a browser doesn’t support clamp() OR calc(), ACSS will revert to static rem values.
PX vs REM & 100% vs 62.5%
This is slightly technical, but … lots of people prefer to set their root font size to 62.5%. Why? Because it makes using REM units really easy. At 62.5% root font size, 1rem = 10px.
Why use rems? Because pixels aren’t accessible.
Not only does OxyNinja use pixels everywhere, it forces you to use a root font size of 100%, which makes 1rem = 16px.
Automatic.css sets your root font size to 62.5% by default, but you’re easily able to change this to 100% if you prefer 100%. It’s totally up to you!
Best of all, you can make this switch at any time. ACSS is smart enough to recompute everything behind the scenes to make sure nothing breaks!
Furthermore, ACSS uses rem values exclusively. Even though we ask you for pixel values in the ACSS dashboard (because that’s what people are used to and they’re consistent regardless of root font size), everything is converted to rem on the back end. This ensures that your text doesn’t have any pixel-based accessibility issues.
Automatic.css has automatic grids and OxyNinja doesn’t
Love using grids as much as we do? Hate having to worry about how the grid behaves across mobile devices? So do we!
In ACSS, you have access to a full array of auto grids. These grids intelligently stack your grid at various breakpoints using some advanced mathemagics that corresponds to your website’s viewport dimensions.
You simply add a single auto grid class and you’re done. All of the responsiveness is taken care of for you.
The following auto grids are at your fingertips with ACSS:
- 2-Column Auto Grid
- 3-Column Auto Grid
- 4-Column Auto Grid
- 5-Column Auto Grid
- 6-Column Auto Grid
- 1-2-Column Auto Grid
- 1-3-Column Auto Grid
- 2-1-Column Auto Grid
- 2-3-Column Auto Grid
- 3-1-Column Auto Grid
- 3-2-Column Auto Grid
Other Helpful Stuff!
When you use ACSS, you’re using a framework that truly innovates the framework space. We’re addressing all the things that are headaches to developers while giving you powerful tools that you might not even know you need.
Here are some of the things we’ve innovated or are in the process of innovating:
- Accessibility-related features are coming to ACSS
- Height classes to properly set min-height (that also fix the Oxygen min-height on sections bug for you)
- Max-width classes that correspond to your viewport dimensions
- Breakout classes for easily breaking content out of its parent container
- Tooltips
- Flipping images across each axis
- Object fit classes for images
- Overlay classes that use pseudo elements to properly create transparent overlays for background images
- Sticky classes to make any element sticky in seconds
And there’s more to come!
Screw Facebook – the ACSS community is unbeatable
OxyNinja has a Facebook group where you can interact and ask questions and get help from peers. That’s fantastic. But, with ACSS we went next level.
Automatic.css has a dedicated Circle community complete with user guides, video tutorials, dedicated support specialists, and a talented tribe of users ready to help you.
Our users are our backbone. They help each other, they guide the development of the framework and plugin, they help provide trainings and tutorials, and they even are developing their own design sets so you can plug and play designs that are perfectly compatible with ACSS!
Unlike Facebook it’s private, searchable, sortable, and organized. And everyone with an active ACSS license can participate!
Last but not least: ACSS is builder agnostic
Check the ACSS roadmap! Unlike OxyNinja, ACSS is being developed to work on multiple builders and systems:
- Oxygen
- Bricks
- Zion
- Woocommerce
- North Commerce
- Gutenberg
- WS Form
- Fluent Forms
- …and even non-Wordpress websites
If you’re going to invest in a CSS framework, it’s probably best to invest in one you can pack up and take with you should you need to switch builders or platforms at some point in the future.
Wrap Up
We’re not publishing these comparison articles to degrade or put down other frameworks. We have great respect for OxyNinja’s team and what they’ve accomplished. At the same time, people constantly ask, “what’s the difference between OxyNinja and Automatic.css?” We just want to help point out the differences so you can make an informed decision!
If you’re interested in giving Automatic.css a shot, grab your ACSS license today.