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
