Changelog

An issue with a missing variable related to header height was preventing users from saving settings on the dashboard when the XXL breakpoint was enabled. This has been resolved.

We’ve updated two tooltips for better accuracy.

We’re proud to announce official support for Cwicly. We wholeheartedly feel that Cwicly is currently the 2nd best page builder for WordPress and the #1 page builder in the Gutenberg environment. The Cwicly team has our full support and we look forward to helping them grow in whatever way we can.

Currently Included

• Full framework support (classes & variables)
• Works in builder canvas and template areas
• Auto-Load utility classes
• Color Scheme support

Coming Soon

• Contextual menus
• Live style preview
• Variable expansion and validation in inputs
• Auto-BEM

We are considering this a “Release Candidate (RC)” integration. Cwicly users are encouraged to use this thoroughly and report any issues that arise so we can implement fixes immediately.

How to setup ACSS with Cwicly

Currently supports dual color scheme, but can be expanded in the future to support various other forms of color scheme, contrast scheme, etc.

• Optional support for prefers-color-scheme
• Granular control over which colors have alt-scheme
• Granular control over hue/sat/lightness of every alt shade
• Support for contextual colors.
• Back-end preview toggle for all supported page builders
• Front-end toggle component for Frames users
• Front-end toggle element for Bricks users (Frames not required)
• Color scheme API for users who want to create their own toggle
• Includes .color-scheme--main and .color-scheme--alt for manually activating or deactivating color scheme changes on individual elements or element groups.

More features and improvements to color scheme functionality will be made after the 3.0 rebuild is complete.

Read the color scheme documentation.

Auto-BEM revolutionizes the way users add custom classes in page builders. This feature automatically adds a custom class to a parent and all its children in two clicks using BEM methodology for proper organization and maintainability.

The class names are derived from the element name in the structure panel, but can quickly and easily be overridden during the class creation process.

That’s not all, though. Here’s a full list of features:

• Applies BEM classes to a parent and all its children in two clicks
• Double click will do the same thing while allowing you to skip the Auto-BEM panel
• Customize the class name of any child from the Auto-BEM panel
• Map class name changes to the structure panel if desired
• Auto-detection of existing BEM classes with various handling options
• Bulk rename BEM classes
• “Create New & Remove Old” – Creates new BEM classes and removes the old ones from elements (includes option to copy styles to the new classes)
• “Create New & Delete Old” – Creates new BEM classes and deletes the old ones from the database (includes option to copy styles to the new classes)
• “Create New & Keep Old” – Creates new BEM classes and leaves the old ones in place (includes option to copy styles to the new classes)

Official Auto-BEM documentation

We will continue to build out the functionality of this feature. The next version will likely include the ability to copy styles from the ID as well.

We’ve replaced the old “load deprecated styles” option with a new Deprecated tab, allowing users to choose precisely which deprecated styles they want to load.

This change is primarily for semantic accuracy and to clear up confusion regarding the “shade” palette and “shades” attached to other colors. The “Shade” palette is now deprecated (available via the Deprecated tab). Users should continue using the Shade palette on old sites but switch to using the Neutral palette from now on.

Buttons in ACSS have been wholly refactored for greater efficiency, customization, and theming capability.

• Button code output has been reduced by a staggering 73.5%.
• Every button property now uses locally scoped variables, allowing unprecedented granular style and theming capabilities.
• New option for setting the default focus color of buttons.
• New option for controlling button text decoration on hover.
• New option for setting button transition duration.

Read the button documentation for more details on changes to button variables. Some older button variables are now deprecated (they’ll still work, but stop using them).

Extra breakpoint support now extends to the --header-height variable and header-height features.

Extra breakpoint support now extends to scroll offset features.

.radius-- classes are replacing .rounded-- classes, which are now considered deprecated. This is another change for semantic accuracy and alignment with official naming conventions. All functionality remains the same.

Two new variables have been introduced that allow you to reference your website’s default list and list item spacing.

• --list-spacing
• --list-item-spacing

Similar to --content-width, the new --boxed-width variable allows users to reference the boxed width of their website when using boxed layout mode.

You can now exclude the default global link style from specific areas of your website (such as the header or footer). A new textarea permits users to define custom scenarios for exclusion (e.g. “header a“). Multiple scenarios can be inserted with comma separation.

We’ve introduced --link-underline-offset, which allows users to reference the offset value for their global link underline decoration. This makes it easy to design custom link styles while ensuring that your underline offset always matches your other links.

.text-larger was a utility we nearly instantly regretted after initially adding it. It’s not BEM compatible, and it creates a lot of unnecessary complications with builder ecosystem expansion. We have now officially deprecated .text-larger (though it remains accessible via the deprecated panel) and we recommend that users stop using it. If you’re in a situation where .text-larger might be used, consider using a BEM class or creating a custom text size for maximum scalability and maintainability.

This offset was put in place at the beginning of development years ago to account for Oxygen’s improper use of breakpoint values in the builder. This offset makes no functional sense for a CSS framework and makes life more difficult for non-Oxygen users, so we’ve removed it.

• Code output for spacing modules reduced by 400+ lines.
• Spacing now outputs variables instead of raw values.

• Reduced code output by 1950+ lines (73% reduction).

• Reduced .text-- class code output by 50% across all classes (size, color, etc.)

This mainly consists of back-end refactoring and organization for better maintainability and scalability.

When applying the “focus parent” technique to parent elements, you previously had to use a modifier class (.focus-parent--shadow or .focus-parent--outline). This is no longer required. You can now apply the class .focus-parent and ACSS will automatically apply either shadow or outline based on your global preferences.

Note: You can still use the modifier version if you need the style to be different from your global preference. Learn more about Focus Parent.

.focus-- classes now have the ability to change the focus color when paired with .focus-parent classes.

Learn more about Focus Parent.

We’ve replaced the deprecated “clip” property with “clip-path.”

We’ve reduced the overall code output for Oxygen and removed some overrides that are no longer necessary.

• Contextual color variables are now removed from the stylesheet when contextual colors are deactivated
• Contextual color partials are now removed from the stylesheet when contextual colors are deactivated

• Fix for unwanted inline padding
• Fix label position when using country flag in phone field (WS Form)
• Fix missing opacity value on inside-label-position (WS Form)
• Fix checkbox skipped with tab navigation (Bricks)
• Fix  for the “null” value on focus drop-shadow

Previously, upon updating ACSS, we only triggered the regeneration of the stylesheets if any of the settings had changed value. That would happen with major updates, that introduced or removed settings, but would otherwise miss. We now always regenerate the stylesheets so, even if no settings have changed, your stylesheets have been refreshed with the latest version of the framework.

As reported in https://community.automaticcss.com/c/general-discussion/version-2-6-1-is-live#comment_wrapper_23339597

As reported in https://community.automaticcss.com/c/bricks/right-click-can-t-see-grid-and-space-variables

As reported in https://community.automaticcss.com/c/bricks/selecting-a-class-in-contextual-menu-doesn-t-apply-it

As reported in https://community.automaticcss.com/c/oxygen/recent-change-broke-my-footer-layout