Automatic.css - Utility Framework for WordPress Page Builders

Automatic.css - Utility Framework for WordPress Page Builders 4.0.1

Register or Log in for Free Download
Bricks Enhancement: Improve CSS Authoring
Makes the CSS editor in Bricks a workable height and moves some rarely used fields that were positioned before it, to a position below it.
Bricks Enhancement: CSS-First Workflow
Moves the CSS tab in Bricks to the top of the list on the styling panel for users who prioritize custom CSS over segregated styling inputs.
Border Mixin
New border mixin for adding global border styles.
.is-bg
New .is-bg utility for instantly turning anything into a background.
Inverse Radius Framework
The simplest and easiest way to create inverted border radii in the world of CSS.
Forms: Render radios/checkboxes as buttons using global button styles
Fluent Forms and WS Forms enhancement only.
Set the flow style of auto-grids
Read details.
Force even columns for auto grids
Read details.
Re-name var(--card-link-hover-color)
This is a potential breaking change for custom card styles (but not likely).
Exclude buttons from auto-styling
“Exclude ‘.btn–‘ Selectors input added to Buttons > Options > Additional Options can be used to programmatically block default button styling from selected elements. Very useful if ACSS is affecting styling of 3rd party buttons.
Improved var() handling in dashboard inputs
You can now use classes with a double dash in exclusions without triggering var() wrapping.
WS Form: Temporary Fix for Select Arrow in new WS Form version
Logic fix for a few utilities when "remove deactivated classes" is on
A few utilities were getting removed incorrectly. This feature is still experimental and is waiting on expanded logic to cover all scenarios, but this fix will still improve things short term for at least one known user who experienced issues.
Fixed ACF font-size issue
Improve Bricks button UI dropdown logic
We’ve hit a very important milestone with this update. Keep an eye on the blog for an official write-up!

Button styles compatibility with Bricks UI

You can now use the Bricks button styles UI to apply button style classes to buttons. This feature must be enabled in the Bricks Enhancements area of the dashboard.
Card Framework: Add control for card button size

You can now control default button size for cards.
Card Framework: Exclude "group" classes from activating auto-targeting

Classes like .service-card-group were triggering the card framework. Much like “wrapper,” “group” is now an anti-keyword.
Focus styles no longer show on click

Clicking an element that has hover focus no longer shows the focus styling. This makes for a cleaner user experience.
Headings now default to "700" to match browser default

Headings would be 700 either way, based on browser default, but some users wanted it to show 700 as the value in the dashboard for added clarity.
Show all semantic colors with transparencies in contextual menus

The context menus have now been updated to include all contextual shades and transparencies.
Improve var() stripping in dashboard inputs

We now only strip var() instances when there’s a single variable in use. For more complex scenarios, we leave the vars intact. You don’t have to write var() as we’ll add it for you automatically, but we won’t visually strip them if there’s more than one.
Dark/Light button variant classes can now be added with the context menus

We’ve updated the context menus to support dark/light button variants.
Minor fixes related to hot reloading
Font families wrapped in quotes now output correctly

In rare situations, font families need to be wrapped in quotes (e.g. “Source Sans 3”), but our parser was stripping quotes. This is now fixed.
Fix for dashboard not loading when a specific flag is set to false

Clashing JS variables caused the dashboard not to load when setting the ACSS_FLAG_LOAD_DASHBOARD_SCRIPTS_AS_MODULE flag to false. This is fixed.
Background position was missing in CSS for textures 2-5

This was found during internal testing and wasn’t yet reported by users. The background position property wasn’t being output for textures 2 through 5. This is now fixed.
Disabled transparencies no longer show up in Gutenberg color palettes

Disabled transparencies were showing placeholder swatches in Gutenberg color palettes. This is now fixed.
Gutenberg: Fix "Replace Color Palette" not working

Existing color palettes by Gutenberg or third party tools were still remaining. This is now fixed.
Fix syntax error in custom SCSS triggering a fatal error
In this patch release, we addressed a missing style in .form–light for WS Form that was overlooked in version 3.2.6. Now, your forms will look as sleek and stylish as intended!

Forms: fix missing style for WS Form in .form--light​

Guess what? We’re on pace to have a completely clear issue tracker by mid-December. That means ZERO tracked issues. Once that happens, keep an eye out for a blog post detailing our ACSS team mantra for 2025.

"Auto Container Query" support for Card Framework

The Card Framework is now supercharged with our automatic and innovative approach to container query support.
Card Container Query Recipe

Card Container Recipe.
Card Container Query Mixin

Card Container Mixin
Refactor: Light/Dark style management for form styling

Internal improvement.
Converted old properties to logic properties for form styling

Update to follow standards.
Refactor: Contain classes

Added option to turn on/off container query classes.

Fix instant preview sometimes only targeting the first instance of an element
Hotfix for shade saving action

A seemingly unrelated change to value reversion was affecting the saving of shades. This is now fixed.

Hotfix for shade saving action​

Small update to address the lingering “save changes” notice. Expect one more minor release early next week to fix a small dashboard pinning position glitch. With the complete refactoring of pinning, we’re having to go back through and handle the same edge cases with various builders and contexts as we did with the initial dashboard release.

Fix the browser-triggered save changes notice when changes are already saved.
.center--self classes no longer apply any flex properties other than align-self: center
This is an enhancement and bug fix release as we continue to put most of the focus on progress for the Card Framework.

Apply heading color relationships to heading utility class variables (h1-h6)
Enhance auto color relationship compatibility for headings

Auto color relationships can now override default heading colors while still remaining changeable by custom classes and text color utilities.
[Internal] Change variables module to tokens
More Card Framework Progress
[Internal] Replace rollup with vite for bundling
Fixes for texture/overlay live preview and tooltips
[Form] Fixed a label in forms settings for consistency
[Form] Fix for border-width tokens missing 'rem' unit
Fixed texture and overlay tooltips for accuracy
Textures & Overlays has graduated out of "experimental"

Textures & Overlays is now an official feature.
Initial foundation for the ACSS Card Framework (Experimental)

We’re building a complete, official framework for managing shared card styles. You’ll see a new Cards dashboard with a toggle switch, but this is only the start of this feature. It’s not yet ready for testing.
Textures & Overlays now support animation

You can now animate textures with CSS (think gradient animations and more).
New fluid() function for generating clamp functions on the fly

In ACSS custom SCSS area, you can create custom clamps for any use case with fluid(). The function accepts a min and max pixel value (unit not required), separated by comma, e.g. fluid(20,28);.
New .smart-spacing--off class for cancelling smart spacing on any box/page/template

You can now selectively cancel out smart spacing anywhere.
Overflow Detection

ACSS now has an overflow detection mode to visually indicate elements that are creating horizontal overflow.
API file for every builder for better maintainability
Upgraded to Svelte 5
Added labels to the color hex and hsl inputs in dashboard
Added picture tag to figure smart spacing targeting

Smart spacing will now apply to <picture> elements the same way it applies to <figure> elements.
Set auto grids to 100% width by default

Some users were using auto grids on divs with no defined width, resulting in the auto grid auto collapsing. 100% default width fixes this.
Specificity adjustment for heading classes
Expanded border classes

All sides are now independently available as well as border-block and border-inline and all are available in default, light, and dark.
Defined new CSS vars for forms
Change default root font size to 100%

ACSS will now default to 100% root font size on fresh installs (existing installs unaffected).
Various improvements for contextual relationships
Dividers now use ::after element instead of ::before

This improves compatibility with overlays.
Removed 0 value avoidance for declaring header height

Header height is now output as a variable even if a value of 0 is used.
Output all global link styles as variables

You can now freely use these global tokens anywhere.
Add divider and new border classes and vars to auto suggest and context menus
Added divider classes to auto suggest and context menu
Fluent Forms: Override default fixed gap with --f-grid-gutter
Various fixes for contextual relationship link/heading colors
Fix for context menus not filling 100% of width for some users
Sticky offset fallback value fix

Sticky was falling back to a variable, which, if undefined, was resulting in no fallback value rendering sticky elements non-sticky. This is now fixed.
Change color picker to default when alt color is turned off.
Revert smart spacing normalize for everywhere
Back
Top