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 version was released as 3.1.3.1. The changelog is the same for 3.1.3, but we added an extra build step to account for one additional fix.
Textures/Overlays now support background-repeat
Overlays now support blend mode
Textures/Overlays has now been expanded to five slots/options
Added a function to parse a css string into a map
Added interpolate-size allow keywords for animating keyword values like auto
Improved auto color relationship compatibility with color scheme
Added color scheme support to custom textures and overlays.
(Breaking Change - Experimental Feature): Texture/overlay utilities now use a single dash instead of double
Decoupled config files and improved test coverage on Recipes API
Fixed auto quote wrapping for asssets on texture/overlays 2-5
Increased specificity on heading classes to battle specificity issues
Prevent dashboard crash when pinning
Prevent overflow on certain context menu sections [314]
Additional fixes for hover shade generation
add migration for bg[shade]-link, bg[shade]-link-hover and bg[shade]-button settings
This release was packaged up to coincide with the release of our official Textures & Overlays demo video to ensure users who want to experiment with that feature have all the same options available to them.

Support for Using Textures as Overlays

You can now use a Texture Style as a background AND as an overlay. ACSS will generate .overlay– classes for each Texture style if you turn on the overlay option.
Additional Texture/Overlay Features & Enhancements

Some new controls and refinements have been added.
Conditionally Load Code for Textures & Overlays

Textures & Overlays will not load any code unless an asset is declared. Even if the feature is turned on, no code is loaded unless you’ve defined an asset for the specific Texture you’re creating. You’re free to leave this feature on at all times with blank assets and it will have zero impact on performance.
Specificity Adjustments for Heading/Link Styles in Color Relationships
Small hotfix mainly to fix specificity issues related to default heading styles.

Add missing "related color relationship" fields for Texture 2 & 3
Fix a specificity issue with default heading styles
Feature: External Link Indication (v1)

Users can now automatically indicate links that open in a new tab or window with both a visual and auditory cue for better UX and accessibility. We’ll be adding support for SVGs in a future update.
Fixed GDPR checkbox styling in Fluent Forms

Users can now control the styling of GDPR checkboxes in Fluent Forms. Unfortunately, this won’t fix the atrocity that is GDPR in general.
Use of * selector in textarea inputs is now possible

Users can now use the * selector in textarea inputs in the dashboard without math validation errors.
Enhanced automated testing protocols for better build-time error identification

Improving stability of each release is a top priority. This is yet another part of our process and commitment to stability.
Fixed smart spacing in Gutenberg when "Use Gutenberg for Page Building" is Off

There’s no reason to not smart space content in Gutenberg pages if Smart Spacing is on, so we’ve changed the default behavior.
Fixed page title spacing in non-iframe Gutenberg rendering instances

Gutenberg is a dumpster fire.
Fixed missing opacity control for textarea placeholder text in forms

Users can now control the opacity of placeholder text in textarea inputs.
Removed some unnecessary console log messages

When looking at the console, users were seeing some unnecessary, and at times scary-looking, warnings and messages. We’ve cleared out any unnecessary ones to limit instances of emotional trauma.
Fixed a Breakdance conflict with the dashboard and structure panel

There was a disturbance in the force when opening the dashboard in Breakdance. We let the hate flow through us, so this should be resolved now.
Fixed duplicate inputs appearing on some dashboard searches
@overlap-alt; recipe

There are now two powerful but different overlap recipes to choose from.
@list-none; recipe

You can now easily strip list styling using the @list-none recipe.
@Grid recipes

Full expansions for all standard and uneven grids.
Min-width media query recipes

You can now automagically insert min-width media queries using @breakpoint-up recipes.
Added tertiary color support to color recipes

Tertiary color and shades are now available in color recipes.
Fix for a broken variable causing Gutenberg to lose styling
@overlap; recipe

Kevin has created one of the most powerful approaches to section overlaps with CSS and it’s now available via the new @overlap; recipe. You can watch a demo of the overlap recipe here.
@property; recipe

There’s now a recipe for declaring a CSS custom property using the new Houdini syntax.
Internal: Added plugin detection for specific forms plugins
The dashboard is now informed by the presence of specific forms plugins so we can tailor options to form plugins that are active on the site.
ACSS now loads in Breakdance the same as other builders

Breakdance created an official hook for us so now we can load the dashboard in Breakdance the same way we do in other builders.
Form Fixes & Enhancements

Fixed select arrow color in Bricks native forms
Fixed tab borders when using the .wsf-steps class in WS Form
Added styling control for WS Form “Label Inside” option.
Fixed checkbox item spacing when checkboxes are wrapped in a <fieldset>
Fixed option label spacing variable not being defined
Fixed range slider styling
Fixed Fluent Form progress bar styling missing colors when using .form--light

Fixed an incompatibility issue with Lenis Smooth Scrolling

The ACSS panel wasn’t scrollable when Lenis Smooth Scroller was enabled. This is now fixed.
Fixed Gutenberg title and first paragraph spacing issue
Link Decoration Styles

We’ve added three new controls for global link decoration styles. Users can now control:

Text decoration color for links
Text decoration color for link hover
Text decoration thickness for links

Resolved font conflict involving the Outfit typeface

We load the Outfit font locally to use in the dashboard. This was causing an issue in websites that were loading it to use in the frontend. We renamed our font-name to “ACSS-Outfit” to avoid clashing.
Fixed a discrepancy between the inputted shade hue and the displayed color value

As reported here and here
Fixed an issue where pasting a HEX code caused incorrect hover calculation and prevented edits
Restored access to "Options > Bricks Enhancements" when using Bricks
Refactored and added test coverage for the dashboard loading logic
Enhanced dashboard loading compatibility with Breakdance

The ACSS dashboard now loads within the builder when using Breakdance v2.
For Breakdance v1, the dashboard will load in the preview window due to limitations with external hooks.

Corrected an issue where the range slider did not display the colors set in the dashboard
Fixed incorrect spacing of checkbox items when they are wrapped inside a fieldset
  • Fixed the dashboard crashes when saving after searching, or after minimizing.​

    As reported here and here, the dashboard would sometimes crash and appear not to save settings, or prevent from doing so, when searching or editing certain fields. This is now fixed.

  • [Experimental] Improved script loading to address CDN issues​

    This update improves the way we load scripts and resolves an issue for users loading scripts from a CDN (e.g., GoDaddy). Affected users may have experienced an inability to open the dashboard and seen CORS errors in their browser console.

    To temporarily resolve this, you can add the following to your wp-config.php file:

    <span>define</span>( <span>'ACSS_FLAG_LOAD_DASHBOARD_SCRIPTS_AS_MODULE'</span>, <span>false</span> );<br>
    We recommend only applying this change if you’re encountering CORS issues. In the future, we plan to enable this flag for all users, but additional testing is required before making it the default.

  • Fixed dashboard icon showing up twice in Oxygen​


Fixed global border color vars not displaying​

Fixed right-side pinning incompatibility with Bricks 1.10.3

A recent Bricks updated that allows for resizing the structure panel was not compatible with our pinning feature on the right side. This is now fixed.
Fixed text--l utility setting a default font weight

Using the .text–l utility class would also change the font weight, even when the user had no font weight value in the dashboard for the L text level. This is now fixed.
Adjacent sibling margin removal adjustment for Smart Spacing

We have limited the scope of adjacent sibling margin removal for Smart Spacing. This feature now sets –paragraph-spacing and –flow-spacing to 0 for siblings adjacent to the selected elements.
Fixed auto border-radius toggle being set to "on" on upgrade

Upgrading from previous versions would erroneously turn on the automatic border radius feature. This no longer happens.
Fixed radios/checkboxes spacing having no effect when grid is set (WS Form)
@heading-style() mixin

Apply global heading styles for any specific heading level to a custom selector while ensuring the output is confined only to properties with values set in the dashboard.

Read docs
@text-style() mixin

Apply global text styles for any specific text level to a custom selector while ensuring the output is confined only to properties with values set in the dashboard.

Read docs
Spacing control for radio and checkbox inputs (forms)

We now provide a custom control point for radio inputs and checkboxes in form elements.
MINOR BREAKING CHANGE: Remove duplicate margins (Smart Spacing)

Some smart spacing elements only contain top margin. Others, like figures, blockquotes, and lists, can contain top and and bottom margin.

When elements that contain both top and bottom margin are followed by elements with top margin, it can create duplicate margins.

This was previously solvable by setting a different block margin bottom value, but that’s not a very elegant or “smart” solution.

This feature introduces a new input that allows you to identify block margin elements so that Smart Spacing can remove the top margin from their adjacent siblings (don’t worry, we set a default for you).

MINOR BREAKING CHANGE: If you’re a user who noticed instances of duplicate margin and already accounted for them somehow, this update may cause a change in those margins. If you did not previously account for any duplicate margin issues, this feature will not break anything.

Since users accounting for duplicate margin issues are rare, any spacing issues from this would be very minor, and this setting needs to be on by default for new users, we’re not introducing a toggle or a blank default value to ensure backward compatibility.
Dashboard scripts now load in footer and delay by default

This improves compatibility with other plugins as well as the WordPress Interactivity API.
Fixed user shortcut panel breaking
Back
Top