Changelog
Keep track of what's new with ACSS! For details on specific features and utilities, please check the official documentation.
2.7.0.1
This is a hotfix to patch an issue with header heights when the XXL breakpoint is enabled.
Fix for XXL Header Height Error on Save
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.
Tooltip Edits
We’ve updated two tooltips for better accuracy.
2.7.0
Version 2.7 of Automatic.css is likely the last major release prior to our 3.0 rebuild. We’re proud to ship Cwicly support, the long-awaited color-scheme (dark mode) functionality, and our brilliant new Auto-BEM functionality in this release. Make sure you read the full changelog as there have been important updates to many aspects of the framework and dashboard.
Official Support for Cwicly (RC)
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.
Color Scheme (Dark Mode +)
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.
Auto-BEM Functionality for Page Builders
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.
Granular Feature Deprecation
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.
"Neutral" Color Palette (Replaces "Shade" Palette)
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.
Completely Refactored Buttons
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).
Header Height Support for XL/XS Breakpoints
Extra breakpoint support now extends to the
--header-height
variable and header-height features.Scroll Offset Support for XL/XS Breakpoints
Extra breakpoint support now extends to scroll offset features.
Radius Classes (Replace .rounded)
.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.List Spacing Variables
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
New Boxed Width Variable
Similar to
--content-width
, the new--boxed-width
variable allows users to reference the boxed width of their website when using boxed layout mode.Global Link Style Exclusions
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.New Variable for Link Underline Offset
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.Deprecated .text-larger
.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.Removed 1px Offset From All Breakpoints
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.
Refactored Spacing
- Code output for spacing modules reduced by 400+ lines.
- Spacing now outputs variables instead of raw values.
Refactored Overlay Classes
- Reduced code output by 1950+ lines (73% reduction).
Refactored all Text Classes
- Reduced .
text--
class code output by 50% across all classes (size, color, etc.)
- Reduced .
Refactored Accessibility Related Code
This mainly consists of back-end refactoring and organization for better maintainability and scalability.
Focus Parent Class No Longer Requires Modifier
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 Color Utilities Now Work With Focus Parent
.focus--
classes now have the ability to change the focus color when paired with.focus-parent
classes.Minor Update to hidden-accessible
We’ve replaced the deprecated “clip” property with “clip-path.”
Various efficiency improvements for Oxygen
We’ve reduced the overall code output for Oxygen and removed some overrides that are no longer necessary.
Contextual Color Handling on Deactivation
- 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
Form Compatibility Fixes
- 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
Plugin updates always trigger stylesheet regeneration
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.
2.6.2
This is our standard post-release update focusing exclusively on bug fixes and improvements.
Smart spacing no longer breaks spacing in WooCommerce pages
The context menu now adapts better to small screens
The context menu now properly applies classes to empty elements
Grid classes now work in Oxygen footer elements correctly
Flex classes are no longer loaded in Gutenberg when the related setting is turned off