Changelog

2.8.2

2.8.1

• 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

  Our initial Variable Grids implementation included both a class and a CSS variable for usage. However, the CSS variable didn’t function as intended, leading us to remove it. Consequently, we have updated the Variable Grids documentation to reflect this change.

2.8.0

• 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

  This release fixes 2 form bugs:

  • Price checkbox now have the correct spacing
  • The default input border color has been made darker for better contrast

2.7.3

• Flex-Grid breakpoint classes now have the correct specificity

• Added support for overriding the button display property

  ACSS buttons have a “inline-flex” display by default, but now you can override it by setting your preferred display in the “–btn-display” CSS variable.

• Using CSS comments in settings no longer results in an uncaught AssertionError in ScssPhp/Parser.php:1686

  As part of our PHP 8.2 compatibility efforts, in our previous release we updated the ScssPhp library from 1.9.0 to 1.11.1. This version contained a bug where using a CSS comment in one of our inputs would cause a PHP fatal error. The library has been updated again with a fix, which we are including in this release.

• The color scheme switcher is visible again in Cwicly

• FluentForm's GDPR and T&C checkboxes are visible again

2.7.2

• WordPress 6.4 compatibility

• PHP 8.2 compatibility

  Updated the ScssPHP library to version 1.11.1

• Add color palette to Cwicly

  All ACSS colors are now available in Cwicly’s color picker

• Clickable parent no longer prevents editing text in Bricks

• Flex-grid classes are no longer generated multiple times

• Context menu correctly applies selection--alt class

• Form fixes

  • Smart spacing is applied when radios or checkboxes are set to be displayed in grid
  • WS Form – Number field label inside with suffix / prefix
  • CSS specificity bug with WSForm select dropdown error condition
  • Bricks Form – checkboxes background color + position when text wraps

• Added missing option-centering

• Disable the context menu in Cwicly until fully supported

  The context menu for Cwicly isn’t fully supported yet, but it was loading anyway. We disabled it for the time being, to avoid any confusion. It will be available again soon

• Header height settings now allow decimals