- Users can now choose to use global button styles for form buttons instead of managing form button styles separately. Each type of form button can have a global button style assigned to it. Supports all button styles including outline variants.
- Since Smart Spacing only applies to top level elements, multi-paragraph blockquotes were not getting Smart Spacing applied. We’ve enhanced SS to include blockquotes.
- In some uses of Auto Grid, items were stacking too soon. Not only have we fixed this, we’ve provided a new control so users can dial in the exact aggressiveness they want in their Auto Grids. This control is called “Aggressiveness” and it’s found in Layout > Auto Grid. And don’t worry, this is just for the default and can easily be overridden at the instance-level.
- It was working in live preview, but wouldn’t commit new values to the database. This is fixed now.
Fixed an issue with dropdown menus in boxed layout headers
- Menu dropdowns were getting contained inside the header and clipped. This is now fixed.
Refactored Auto-Grid Classes
We’ve brought significant improvements to auto-grid functionality while maintaining backward compatibility with existing auto grids. Full details on auto-grid here.
Note: Logic for showing/hiding Auto Grid classes based on the new Auto Grid option switch will be added in a future update. We didn’t want these new Auto Grid improvements to wait on inconsequential context menu logic.
"Classless Workflow" Option
The utility classes area under options now has a toggle that allows you to switch off all utility classes at once. You can still toggle individual utility modules one by one as well.
Stretch (.stretch) class improvements
The stretch class was setting display to flex. In most cases this isn’t a problem, but it’s also unnecessary and potentially conflicts with the use of this class in certain grid scenarios. We’ve removed the display property.
Improvements to radius class loading logic
Turning off “additional radius sizes” would previously deactivate useful radius classes like .radius--50, .radius--circle, and .radius--none. This is no longer the case. You can turn off the sizes without affecting these classes.
Compatibility with Bricks Template Gallery in Bricks v1.10
Bricks v1.10 brings changes to the template gallery in the form of masonry layouts. Our previous optimizations would break this new layout structure, so we’ve made changes to prepare for the full release of 1.10.
Added new button variants to pre-loader
Light/dark button variants, tertiary button options, and neutral button options are now added to the pre-loader for class auto-suggest. You’ll need to deactivate and activate the plugin for these classes to be added to the builder’s auto-suggest feature.
Fixed WS Form placeholder styling not saving
Placeholder style values weren’t sticking. This is now fixed.
Removed duplicate line height field under H4
Grid Utility Class Enhancements
Support for defining explicit grid rows (.grid-row–).
Span classes can now be used simultaneously with start classes.
Column span and row span utilities now support up to all 12 columns in context menus.
Added .grid–auto-rows to context menu.
Fixed documentation links in dashboard cheat sheet
Note: Not all features have full documentation yet, so links may be missing from some areas.
Auto object fit is now behind a toggle (default: off)
This was on by default at all times. Some users were confused by how it might affect logos a few other things. This isn’t really a problem for anyone who knows what’s happening, but for new/beginner users it can be confusing. So, auto object fit is now behind a toggle that defaults to off on new installs. You can opt-in if you want auto object fit.
Fixed double dash syntax error in radius classes in context menus
Was outputting --radius--m instead of --radius-m
Fixed a local storage error related to dashboard state
Fixed up/down arrow cycling with main colors
Up/down arrow cycling in color inputs was working when the value was already a shade, but not when the value was a main color. This works across the board now.
Change to reduce "dashboard won't open" issues.
Increased .smart-spacing specificity to override Gutenberg more consistently
Gutenberg is a dumpster fire.
Added input for applying smart spacing programmatically to 3rd party areas
Smart spacing can’t know which third party tools you’re using, so you need a way to tell ACSS to apply smart spacing in these areas. That’s easy to do now.
Added new global radius and border vars to context menus
Having these in the context menus makes it easier to apply/follow the new standard for global radius and border styles.
Skip link now matches button styling
The skip link styling was on the old button code. It’s now up to date with current button styling output.
WS Form Fixes
Removed action color from datepicker
Added range slider thumb color control
Fixed neutral transparencies not showing up in context menus
Transparencies are working, they just weren’t selectable in the context menus. This is fixed.
Fixed an upgrade/migration issue with semantic shades (medium/ultra-light/ultra-dark)
These were missing from our migration/upgrade conversion list. They’re fixed now.
Fixed validation that was messing with font-family input
Our validation code incorrectly identified dashes in certain strings (e.g., font families) as arithmetic operators for the “calc()” function. We’ve temporarily disabled the check for the “-“ sign specifically while we find a definitve fix.
Fix box-shadow values not displaying the full contents when containing a ";"
Support for font family
Heading and text font family support. These values no longer need to be added in the builder theme styles.
Justify and text-align controls for buttons
You can now control alignment on buttons, an improvement on the previous “center” default.
.width--full is no longer based on content width
This was a loop issue. Added a conditional to handle .width--full independently.
Fixed logic for deprecated section padding classes
A typo in the logic statement was causing deprecated section padding classes to not load when the toggle is on.
Restored the "doorway" file for backward compatibility with 3rd party SCSS plugins
This is our standard post-release update focusing exclusively on bug fixes and improvements.
Programmatic color scheme protection
Documentation: https://automaticcss.com/docs/color-scheme-dark-mode/#protection
Gutenberg styles no longer load in the preview area when "load styling in backend" is disabled
Auto-BEM no longer disrupts Bricks global classes
Section spacing is now visible in the context menu on spacing inputs
Compatibility issues between contextual color utilities and color scheme protection classes are now solved
Compatibility issues with color scheme protection classes for website background color, text color, and heading colors have been fixed
Relative paths in import statements no longer cause issues with SG Optimizer
Headings now switch colors automatically when using auto color relationships
This is a security release that fixes a potential XSS and CSRF vulnerability in our backend. The update won’t impact the layout and styling of your websites, so you can perform it safely.
This is our standard post-release update focusing exclusively on bug fixes and improvements.
Content-grid class now has the correct specificity
This fixes the bug reported in [RESOLVED] Content Grid not working – am I missing something? | Automatic.css (automaticcss.com)
Heading colors now apply the correct value
This fixes the bugs reported in:
Bug Confirmed –h1-color overriding default h1 base color | Automatic.css (automaticcss.com)
Contextual Color classes (v2.8) – Issue with Heading colors and utility classes | Automatic.css (automaticcss.com)
Loom extension no longer creates extra space
This fixes the bug reported in ACSS + LOOM Extension | Automatic.css (automaticcss.com)
Contextual color classes are back
Contextual color classes such as .bg–success were no longer being generated. This problem is fixed.
Heading sizes and line heights in Oxygen now produce the correct output
This fixes the bugs reported in H1 elements not using correct size since ACSS 2.8 (Oxygen) | Automatic.css (automaticcss.com)
Accent button is back in the context menu
The context menu was missing the “Accent button” color, which is now back.
Removed references to --variable-grid from our docs
This is the last major release prior to v3.0. This release introduces some powerful and unique new features, adding to the list of features that aren’t available in any other framework.
Breakdance Builder Integration (Phase 1)
We’re excited to announce official support for Breakdance Builder. ACSS v2.8 includes Phase 1 support for Breakdance, which covers framework compatibility (utility classes & variables). Phase 2 support (future release) will include palette integration, contextual menus, and other builder enhancements.
Content Grid Layout System
A powerful new paradigm for dynamic vertical content layouts.
View Content Grid documentation.
Variable Grids
Variable Grid is a unique, powerful, lightweight, automatically responsive grid system that’s not currently found in any other framework. View the Variable Grid documentation for more information.
Contextual Color Utilities
Introduces:
.text–dark
.text–dark-muted
.text–light
.text–light-muted
.bg–light
.bg–ultra-light
.bg–dark
.bg–ultra-dark
Plus all associated variables.
Why? Read about contextual utilities.
Automatic Color Swapping (Contextual Relationships)
Users can now relate the new contextual text color utilities with contextual background utilities for automatic color switching. For example, when you use the new .bg--ultra-dark class on a section, ACSS will automatically set all the text color to .text--light for you. Users can choose what the relationship values are for each background color.
Global heading color
Users can now set a global heading color. This color will be the default color for all heading levels but still allows users to override the color at each heading level. There’s also a new token for this: var(--heading-color) so you can easily reference it when needed.
Heading Color Variables
You can now reference the global heading color of any specific heading level with variables as well as the new global default heading color.
--heading-color
--h1-color
--h2-color
--h3-color
--h4-color
--h5-color
--h6-color
Hide Deactivated Classes
Builders will no longer auto-suggest classes that are turned off in the ACSS dashboard.
Option switches for all transparency sets
Users can now turn off individual transparency groups for each color. This will remove these colors and their utilities from the stylesheet.
Masonry Layout Utilities
Easily create Masonry layouts with full gap control. Read more about Masonry utilities in ACSS.
Import Original Classes (Bricks Remote Templates)
When you import a remote template and rename the classes, bricks imports the same template with the renamed classes instead of fresh ones. This feature prevents this and gives you the original classes (and original styling) of the remote templates.
Requires to be turned on manually (under Options > Import Original Classes (Bricks Remote Templates)).
Row-Gap Utilities
You can now set row-gap and column-gap independently with ACSS utility classes. New utilities follow these conventions:
row-gap--[size]
row-gap--[breakpoint]-[size]
Using the shorthand gap-- utilities will still set both row and column to the same value. Read more about gap utilities here.
All user-adjustable settings now output values as variables
This was already the case for most things, but we’ve gone through the framework and ensured that any utility tied to user-adjustable values outputs that value via a variable on the front end. This ensures that every user-adjustable utility is further adjustable on the fly both regionally (template) and locally (block/element) for maximum flexibility.
var(--gutter)
We’ve added a new variable var(--gutter) for referencing your website’s inline padding. This does the same thing as var(--section-padding-x)but is shorter, more readable, and makes more sense within the context of new features like Content Grid and content-width--safe.
Headings now inherit color from text--[color] variables
Headings did not previously inherit color instructions from text–[color] classes. The user would have to use the same text–[color] class on the heading itself to get the desired effect. Now, headings will automatically inherit color unless they’ve been explicitly colored already by another instruction.
aspect--[ratio] classes now work on figure elements
In builders like Gutenberg, images are not properly styled to adapt to their figure parent’s size. ACSS’ aspect-- utilities, when used on a figure element, will now get the same aspect ratio as the figure element.
width--[size] classes now fix common figure image issues
In builders like Gutenberg, images are not properly styled to adapt to their figure parent’s size. ACSS’ width-- utilities, when used on a figure element, will now instruct the child image to grow with the figure element.
Added "dd" to reset stylesheet.
Automatic.css removes the default inline margin on dd elements (description list descriptions) as part of our global reset. This lets users use description lists without an intrusive inline margin from the agent stylesheet.
Fixed --btn-font-size being empty
When “custom font size” is enabled for buttons, your desired values are now passed to the --btn-font-size variable.
Fixed global link style exclusion specificity
When setting global link styles, users can add exclusion rules to prevent global link styles from appearing in certain areas (like the header or footer). The exclusion rules were too specific, making it hard to style links in these areas. We’ve reduced the specificity of the exclusions to resolve this.
Form fixes