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
This release fixes the license activation issues some of you ran into after the 4.0.0 launch, repairs form styling for WS Form, and cleans up a handful of smaller bugs. Updating is safe — everything migrates automatically, and your custom settings are untouched.

Licensing
License activation and deactivation now always give you clear feedback — before, some messages were silently swallowed and it looked like nothing happened.
If your previous Automatic.css 3 license is still being released in the background, the license tab now tells you so in plain language instead of blocking activation invisibly.
Entering an Automatic.css 3 key now tells you exactly that: “This license key belongs to Automatic.css 3. Automatic.css 4 requires its own license key — please copy it from your account.”
Deleting or replacing a license key now works reliably, even in edge cases where the licensing server couldn’t confirm the old activation.
Sites whose outbound connections are blocked by a firewall can no longer get permanently stuck during the license handover.
Dashboard
Hover arrows from color rows no longer float over the header when you scroll.
The color preview swatch now works for every CSS color, including color-mix(), oklch() and light-dark() values.
Form Styling
Fixed a bug where forms silently fell back to WS Form’s default black-and-white styling instead of your ACSS colors, and the floating label lost its background on focus. Form fields, labels, tabs and legends now follow your ACSS tokens again, and changing a base color in the dashboard flows through to all dependent fields — including live preview.
The Form Styling fields now show the ACSS tokens you already know (–text-dark, –white, –text-m and friends) instead of internal variable names. Values you set yourself are kept exactly as they were.
Field focus colors now follow your site-wide Focus Color setting (Additional Styling), so a focused field can’t be mistaken for an invalid one on palettes with a red primary.
New setting: Floating Label Background (Form Styling → Label). Give the floated label its own background color — handy when your field background is translucent or differs from the surface behind the form.
Other Fixes
Automatic.css 4.0.0 is here — the culmination of the alpha, beta, and release candidate cycles that shaped ACSS 4. This milestone brings all of that work together and completes the transition to the permanent v4 plugin and licensing setup. Follow the upgrade guide before installing.

Alongside the work completed throughout the prerelease cycle, this release restores ACSS color workflows in Bricks 2.2+, adds the option to disable effects while editing in Bricks and Etch, improves WordPress 7 compatibility, and includes useful refinements throughout the dashboard and generated CSS.

The changes below are the additions and fixes included specifically in 4.0.0:

Automatic.css 4.0.0 installs as a new plugin

Automatic.css 4.0.0 installs as a new plugin. Follow our upgrade guide to move from a 4.x prerelease. This is a one-time manual upgrade — future Automatic.css 4 updates will be delivered through your WordPress dashboard.
The new Disable Effects In Page Builders option keeps effects out of the way while editing in Bricks and Etch
Manage your Automatic.css license with WP-CLI

Manage your Automatic.css license with WP-CLI. View the available commands.
Transparent color swatches now insert modern color-mix(in oklch, var(--primary) 10%, transparent) values

Transparent color swatches now insert modern color-mix(in oklch, var(--primary) 10%, transparent) values instead of generated -trans-* variables — all while retaining the utility class names you already use.
Content grid exclusion styles now use lower specificity, giving you more control and making them easier to override.
Dashboard help links open the ACSS cheat sheet

Dashboard help links open the ACSS cheat sheet when available, while documentation, community, and support links now take you to their latest destinations.
The license key field now asks browsers and password managers to disable autocomplete and save prompts
License requests now identify themselves to our servers

License requests now identify themselves to our servers — groundwork for resolving activation issues on hosts that are currently challenged by our firewall.
License activation and checks are less likely to be disrupted by third-party plugins.
ACSS color workflows are back in Bricks 2.2 and later! Right-clicking Background and Typography color swatches once again inserts ACSS variables directly into the color field.
Hide Deactivated Classes works correctly on WordPress 7 without triggering the wp_enqueue_script() notice in Bricks
Update checks no longer throw a Class not found fatal when malformed transient data requires a new stdClass instance
Logged entries now render safely in the dashboard, log growth stays bounded, and rotated Activity Log and debug log files remain protected
Dashboard license checks are now restricted to authorized administrators
no change log for this version
no change log for this version
Add support for Context Menus and AutoBEM in Bricks v2
Fix the Color Switcher button for Bricks 2
Improve handling of max-width on list items
Fix skip link text color overridden by link color
Fix margin--none resetting padding instead of margin
Ribbon fix
Fix External Link Indication breaking text wrapping in links
Fix overflow issue with font awesome icons
Forms: text color of focused input was unreadable (especially for dark forms)
Forms: added select and multiselect missing style
Forms: the flag is now centered in the phone field
Remove deactivated classes from Bricks globals when saving ACSS settings

This feature is no longer considered Experimental, and is active on new installs by default.

Activate the Options > Bricks Enhancements > Remove Deactivated Classes setting to have ACSS automatically remove any classes you have deactivated from the Bricks global classes. This includes all classes that are toggled using Pro Mode or Classless workflow.

Note: if you activate Classless workflow, button, form and icon classes will still be on. These need to be turned off in their respective areas. We’ll add them to Classless workflow in a future release.
Avoid picking unavailable Button Styles in Bricks

When adding a Button in the Bricks editor with the Options > Bricks Enhancements > Use Bricks UI for Buttons, the Button Style property will now be set to the first available color, instead of always picking Primary (even when it is disabled). Cloning a section with a button that has a Button Style set will now display the correct color without requiring to click on the button.
Allow font-family options with spaces in the Typography > Text > Font Family option

Font families with spaces needed some special handling. This was already working in the Typography > Heading > Font Family setting, and now works in the Typography > Text > Font Family one too.
Generate color palette for Gutenberg even when get_current_screen is unavailable

We added a fallback so that, even when in certain setups where get_current_screen is unavailable, the color palette is generated correctly for Gutenberg.
Form fixes

We fixed a number of issues with forms:

[WS Form] Extend Radios and Checkboxes as Buttons styling
[WS Form] Implement color token support for checkbox/radio wsf-switch
[WS Form] Add placeholder color tokens for light and dark form inputs in WS Form
[WS Form] Add button color tokens for hover
[Fluent Forms] Add button styles for save, secondary, next and prev actions
[Bricks Form] Correct relative positioning for checkbox
[Card Framework] Add missing hover background color in dashboard

Add data-lenis prevent attribute in dashboard, BEM menu and context menu to prevent scroll issue with lenis scroll
Changed Icon Framework default to "on" (fresh installs only)

The Icon Framework will now be on by default for fresh installations. Remember: The icon framework does not style icons without your permission, so enabling it has no affect out of the box. It simply loads the framework variables so they can be used without preparation and maximizes compatibility with Frames and other systems that leverage the icon framework.
Fixed a php warning related to color palette
Fixed an instance of code duplication for form styling
Fixed an instance of form styling code loading even when form styling turned off
Fixed a margin issue related to .form--dark styling
Fixed an issue related to radio and checkbox styling
Fixed missing styles for Radios for new WS Form version
Basic Flex Recipes
@FLEX-row and @FLEX-col are the beginning of some shortcut recipes to alleviate repetitive typing in custom CSS.
Etch detection SCSS flag for conditional framework support in Etch
Experimental flag removed from Icon Framework
Icon framework has graduated out of experimental.
Added breakpoint variants for all flex alignment utilities
Set focus color for links/buttons in auto color relationship areas
.is-bg support for figure and picture tags
Remove duplicate margins in smart spacing when lists, quotes, or figures are first-children
Folder architecture refactoring for content grid, height, and corner ribbons
Form: new controls for hover colors
Dashboard loading in Gutenberg
Note: One enhancement below is marked as “check for unforeseen/unintended consequences” for a small percentage of users. Please review that enhancement before updating and avoid bulk updating until you’ve confirmed that it is not a change that impacts your typical development workflow/practices.

Add Etch support

ACSS is now compatible with Etch’s canvas iframe.
Next-gen global SCSS/CSS processing

Global CSS/SCSS now compiles instantly, on-the-fly, without the need for saving and pre-processing.
You can mix vanilla CSS and SCSS without issue or limitation.
You can now use internal ACSS SCSS variables and they will receive updated values from the dashboard instantly, without saving.

Icon Framework: Granular control over icon "theme"

Icons, or groups of icons, can now have their theme (dark/light) changed with a utility class or data attribute.
Icon Framework: Granular control over icon "style"

Icons, or groups of icons, can now have their style (boxed/naked) changed with a utility class or data attribute.
Icon Framework: Granular control over icon size

Icons, or groups of icons, can now have their size changed with a utility class or data attribute.
Detect Cloudflare errors during plugin activation
Load the color palette for all post types in Gutenberg
Separate button padding properties into block and inline for improved value handling

Instead of outputting padding we now output padding-block and padding-inline for button styling.
Text area inputs don't calc/var parse anymore, allowing for fallback values for variables

You couldn’t use fallback values for variables in text area inputs because of the var/calc parsing. Now you can.
Improve handling of max-width property on text--{size} classes (Check for UC!)

This enhancement is flagged as “Check for Unintended/Unforeseen Consequences.” Depending on how you were using these classes, there may be unintended or unforeseen consequences of this update. These should be easily fixable on your end, but you should report them in the community.

Outputting the max-width value associated with text sizes was breaking the ability to use these classes on containers for the purposes of inheritance. We’ve now adjusted these to only output max-width when the class is directly attached to a text target element (p, li, blockquote, cite, span, etc.). If you use the class on a parent container for the purpose of inheritance, max-width won’t interfere.
Fix for header height for xs and xxl not appearing when activated
Fix "auto-fill" class in context menu
Fix the output of max-width for h1 styles
Normalize the max-width of blocks for all post types in Gutenberg
Fix add element badge layout due to latest Bricks changes
MANUAL: Change default link exclusion target to fix linked images getting indicated

Note: In order to receive this fix, you must go to Buttons & Links > Link Exclusions and reset the exclusions to default or manually remove the “>” before the “img” in the targeting.
Bricks structure panel collides with ACSS bubble
Back
Top