Automatic.css

Automatic.css is a utility class framework designed for Oxygen websites.
It's currently in beta.

There are a few key reasons why the framework is named "Automatic" and a lot of the concepts are new, so I want to discuss everything from a "key benefits" perspective. In other words, what benefits will you experience when using a framework like Automatic over some other popular frameworks?

Inside of this discussion, I'll reveal some of the technical details that make all this possible.

Key Benefits and "Automatic" Features

Automatic.css offers a number of benefits over other frameworks. Here are some highlights:

No Unpredictable Styling

Many utility class frameworks are also based on design sets. Therefore, they include additional unexpected styling on certain elements. For example, buttons may have shadows, borders, hovers, etc. This creates a situation where styles have to be removed before the system can be useful from a custom build standpoint. Automatic.css does not apply unpredictable styling – it applies the exact styles you'd expect it to and nothing else.

A *Mostly* Breakpoint-Free Framework

In my popular video, How to Setup Oxygen, I introduced the concept of using clamp() for headings, text, and padding. This technique creates text and spacing that's automatically responsive (it requires no breakpoint style modifications).

Since that video was published, many popular utility class frameworks have incorporated more responsive styling such and clamp(), min(), and max().

However, many utility class frameworks still rely on styling at breakpoints to make things responsive. If you make a change to a style in other frameworks, you often have to make changes to all the breakpoints as well. It's very tedious and can be unpredictable if you forget to make the necessary breakpoint changes.

One reason Automatic.css is called "automatic" is because the vast majority of classes have no breakpoint styling – they're automatically responsive.

The only thing that still requires breakpoint classes are the conventional grid controls (but those aren't required because we have ... shhh ... more on that later).

Automatic Clamp

The backbone of all this automatic behavior is the fact that I built a clamp calculator into the Automatic.css system. If you've watched my videos in the past, I was always going back and forth between a clamp calculator and Oxygen ... copying the static calculated clamp function and pasting it into a style.

Those days are over because Automatic.css automatically calculates the clamps it uses. Nothing is static, everything is dynamic.

Viewport Control

The width of the viewport influences a lot of things on a website (and is critical for clamp functions).

In Oxygen, you can set the viewport width, but most utility frameworks don't take the viewport into account. Even the frameworks that use clamp() use a static version of clamp.

Automatic.css clamps are truly dynamic because they adapt to the viewport variables that you control. You can instantly change the max viewport width and all the clamps will automatically and instantly recalculate to adjust.

These viewport variables are also the backbone of AutomaticGRID (more on that in a moment).

Global Adjustment Control.

A key attribute of great websites is consistency. Consistent colors, consistent spacing, consistent sizing, etc. Many other frameworks start out consistent, but as soon as you start changing individual classes, you can easily break consistency. Plus, it's a pain in the ass to change individual classes across the entire framework.

Another reason Automatic.css is called "automatic" is because so many of the styles are based on global user-editable variables.

For example, let's say you prefer a design with tighter spacing. By reducing the base spacing variable, you automatically tighten all spacing related items (padding, margin, gaps, etc.) across all size options instantly and they all stay consistent relative to each other.

Let's say you prefer larger text in general. By increasing the base text size variable you automatically and instantly increase all text and heading sizes while maintaining their consistent relationships and responsiveness.

Beyond that, you also have granular control over each size and space option. Want to make h1 and xxl text larger without affecting the other sizes? Just change the xxl variable and move on with your life.

There's no need to edit or change the styles of individual classes. The variables give you control while simultaneously protecting the framework.

Global Color System.

Automatic.css uses HSLa for color variables, which allows the system to automatically generate various shades of each color as well as the complimentary version of each color and various transparencies of each color.

This is insanely powerful because it allows for more consistent design and color relationships.

AND, since the system relies almost exclusively on global CSS Variables, it allows you instantly make sweeping color adjustments across an entire website without breaking anything, even if you've used custom classes or styling at the ID level...

"Mirror Variables"

I've said it before and I'll say it again, utility class frameworks should be for utility and should not try to do everything.

Your website builds should still involve the use of custom classes and custom elements (for many reasons). In some cases, it may even be appropriate to style something at the ID level.

The problem with most other frameworks is that you can't access the framework styling when you're building something with custom classes. For example, there's no scalable way to use the clamp() function for small text from the framework on a custom card you're building.

So, what people end up doing is copying the clamp() function from the text class they want to mimic and then pasting it into the text-size on their custom card. Not only is that a pain in the ass, but if you ever make an adjustment to that framework's text-s class, that adjustment won't carry over to your custom card. It's static and dumb.

Automatic.css provides you access to all the text, color, and spacing variants via css variables. These allow you to build custom elements and custom classes while still "mirroring" everything Automatic is doing on the back end.

Want small text on that custom card you're creating? Select the custom class you've added to that text and insert var(--text-s) in the font-size field and you've effectively just inserted the text--s clamp() function into a custom class dynamically. If you ever change the global text variable in the future to making a sizing adjustment, your custom card will update as well because it's mirroring the Automatic system.

So ... create as many custom elements as you want my friend ... they'll all effectively be part of the Automatic system.

Automatic ... GRIDS.

Build a grid in another framework. You start by defining how many columns it'll have on desktop. Then you have to define how many columns at the XL breakpoint, and how many at the L breakpoint, and how many at the M breakpoint, and S breakpoint. You get it.

It's tedious.

Now, I don't want you to worry. Automatic.css provides this functionality if you love extra work (okay, okay ... sometimes you need that kind of control). However...

Automatic.css also provides automatic grids. You simply define the number of columns on desktop and the grid is automatically responsive from that point down without needing a single breakpoint class.

Conventional automatic grids (equal columns) are provided as well as automatic special grids (1-2, 3-2, 1-3, etc.).

These automatic grids are possible because they're calculated from your custom viewport variables.

Misc Helpful Stuff

As you'd expect, Automatic.css includes a lot of the super helpful utility classes that I've taught on my YouTube channel as well as some new things. Stuff like:

  • width-- utility classes (uses max-width)
  • flex-- utility classes (flexbox controls)
  • breakout-- utility classes (break items out of their parent width)
  • owl-- utility classes (automatic even spacing in containers)
  • overlay-- classes (automatically add color overlays and transparencies on background images)
  • shadow-- classes
  • sticky-- classes (make anything sticky)
  • height-- classes (fixes Oxygen's inability to properly set a min-height on sections)
  • object-fit-- classes (change image dimensions without breaking aspect ratio)
  • flip-- classes (flip images and background images horizontally or vertically)
  • opacity-- classes (control element opacity)
  • And more...

Downsides to Automatic.css

Listen, no CSS framework is perfect and that holds true for Automatic.css. So, let's talk about some things you'll want to consider before switching to Automatic.css...

Pixel perfect design isn't really the goal.

If you're the kind of person who wants to try and perfectly mimic every pixel of a Figma file in Oxygen, you might hate Automatic.css.

Don't worry, Automatic.css hates you, too. Lighten up a little!

j/k!

Automatic.css is built for speed, efficiency, and scalability. While your websites will look amazing (if you're good at building websites), Automatic.css doesn't give you "pixel perfect" control (no framework really does). 

Again, the sites will look amazing, but the system may bother the pixel peepers of the world when comparing to a Figma file.

There's no Fancy Nancy design sets.

Do you rely heavily on pre-made design sets to build websites? Automatic.css probably isn't for you. You're still better off with a system like OxyNinja.

Automatic.css was created for people who build truly custom websites.

In the future, Automatic.css will feature a Section Library, but these sections will be purely structural to aid dev speed without stepping on your design toes.

How Much Does It Cost?

I have no idea.

If you're part of my Inner Circle, you already have free access to the stylesheets.

However, I'm having a plugin built to automatically install the stylesheets, classes, etc. so it's all ready to go for you without having to lift a finger. 

I'm also planning on including a settings page that allows you to easily change colors, text variables, and spacing variables.

In the future you'll probably be able to add more custom colors through the settings page as well. And whatever else I come up with.

As you can imagine, there are tons of costs and time involved in putting all this together and I want to be able to continue building the Automatic.css framework for a long time to come, so the plugin will have to cost something.

As for now, though, it's not fully ready for any sort of paid release and will be kept inside the Inner Circle until the official release. If you want it, you know where to find it.

Cheers,

Kevin Geary
Digital Ambition