Changelog

• Turn off content offset with a custom header selector. Default is [data-header-sticky='0'], but you can create your own.
• Turn off content offset with body class selectors. Default is .content-offset--off but you can target any body classes you’d like.

It’s still not perfect, but it’s definitely better.

This started out as an internal insurance policy of sorts, but it’s redundant now so we’ve removed it.

Better late than never.

It wandered off. We found it and brought it back.

When you deleted the lightness value, the hue and saturation also disappeared. This isn’t the “automatic” we were going for, so we’ve patched it.

When you edited an HSL value, the adjacent values would change randomly. While this created a fun little game of “Can You Actually Dial That Color In?!,” we ultimately decided that it wasn’t suitable for an efficient, professional workflow.

You can now grab the header of the dashboard, drag it, and drop it anywhere on the canvas. It will float over existing content.

You can now grab the handle at the bottom of the dashboard and vertically resize the dashboard.

When you drag the dashboard to the left or right edge of the screen, it will detect the edge and dock itself to that side.

When the dashboard is docked to the left or right side of the screen, a pin icon will appear in the header. Clicking this pin will pin the dashboard in a “sidecar” position, giving you an unobstructed view of your canvas while ACSS is open.

The dashboard will remember the previous position you left it in and return to that position every time you open it.

The cheat sheet is back and it lives right within your ACSS dashboard! It’s sortable and searchable with direct links to documentation and icons for copying selectors.

In the next version it’ll also have a visual indicator for which utilities are disabled on the current install.

Note: We’re still working on documentation links, outliers, and general organization.

• Bricks-related improvements
• Live-preview related improvements

If the value of an input was “1rem” or similar, up/down keys would drop the unit and break the value.

In previous versions, a license could not be re-activated due to license obfuscation. We’ve implemented a workaround for this.

Upgrading existing installs is now officiall supported. Make sure to read the main release notes for cautionary statements regarding downgrading.

New recipe for quickly and easily creating a custom button style that hooks into all ACSS global button variables.

The license status area has been upgrade with a visual alert to better communicate status.

One of the principles of ACSS is to just call things what they are. Abbreviations make life difficult because nobody can ever remember what’s abbreviated and what isn’t, or what the abbreviation is (because there is often more than one way to abbreviate something).

Hardly anything in ACSS is abbreviated, yet all three padding class groups violate this principle. Therefore, we’ve refactored this system for added clarity and simplicity.

.pad–{size}
.pad-section–{size}
.pad-header–{size}

Are now…

.padding–{size}
.section–{size}
.header–{size}

As you can see, section and header have been called such explicitly, since you’re essentially just declaring how big you want those to be. Do you want a large section? XL section? Small header? We don’t need the word padding to accomplish this — the context is baked in. It’s much cleaner and those utilities are only used in those contexts.

All old classes live behind a toggle in the Deprecated area and are on by default for existing/upgraded installs, so nothing will break on existing sites.

You can now properly save max-width value for all text.

“My bad.” ~ Kevin

There was a typo in the calc.

This was a carryover oversight from how headings were being output.

Color assignments now affect headings when default heading colors are set.

Newsflash: Safari still sucks.

• up/down arrow key will change value by “.1”
• shift + up/down arrow key will change whole number.

The dashboard has been completely redesigned and rebuilt from the ground up. It provides you with instant access to ACSS inside the page building environment as well as the front-end.

To open the dashboard, click the Automatic.css link in the admin toolbar at top (front-end), the floating {} indicator bottom right (in builder), or with the keyboard shortcut shift + cmd + o

In the next release, the dashboard will be draggable, resizable, and dockable.

You can now see nearly every styling or setting change you make via the ACSS dashboard in real-time, without committing changes to the stylesheet or reloading the page.

When you save changes in the dashboard, stylesheets will auto-regenerate and the page you’re working on will automatically reload.

• Users can now search for anything in the dashboard and get instant, organized results.

• Rewritten architecture for better efficiency & maintainability.
• New color picker with HSL control, sliders, and swatch pickers.
• Live color preview
• “At a glance” view of main and alt swatches
• Status colors now have full support for shades and transparencies
• Added semi-light and semi-dark shades
• Deprecated medium shade (backwards compatible)
• Deprecated action color (backwards compatible)
• Added Tertiary color

• Customizable keyboard shortcuts for opening and closing the dashboard
• Customizable keyboard shortcuts for instantly navigating to any screen

• You can now write global CSS/SCSS on the front end or in the builder.
• Auto-generated, auto-nesting, comment-based navigation system (uses “///”, “////”, and “/////”).
• Full support for SCSS variables, mixins, functions, maps, lists, and more.
• Automatically hooks into ACSS’ entire framework for access to ACSS mixins, functions, media queries, etc.
• Dynamically reference media queries.
• More to come!

ACSS 3.0 brings a new concept to frameworks called “Recipes.” Recipes make the underlying framework code available to you via a utility expansion feature. This makes it easy to apply utility code to custom classes or IDs, providing you with far more flexibility, scalability, and maintainability. Learn more about ACSS recipes.

It’s now easier than ever to protect certain areas of your website or groups of elements from switching schemes.

• Added light and dark button variants to all button sets, expanding button options to color, color-light, color-dark, outline, light outline, and dark outline.
• Users can now control the background of outline buttons
• Users can now independently customize the border color of outline buttons (previously they inherited the background color of the solid button style).
• Users can now set a unique focus color per button variant
• Action, Black, and White buttons are now deprecated (backwards compatible)

• Establishes a primary “border” style for easily applying consistent borders with var(--border).
• Establishes a global border radius.
• Establishes a global border width.
• Establishes a global border style.
• Establishes a global light border color and dark border color
• Additional radius sizes are now toggleable.
• Adds .radius--none as a utility class to remove radius.

• Establishes a primary “divider” style for easily applying consistent borders with var(--divider).
• Establishes a global divider width.
• Establishes a global divider thickness.
• Establishes a global divider style.
• Establishes a global light divider color and dark divider color.
• Establishes a global divider gap.
• Adds .divider-top, .divider-bottom for applying a divider above or below an element.
• Add .divider--all for automatically dividing all child elements in a container.

• Set a global duration var(--transition-duration)
• Set a global timing function var(--transition-timing)
• Set a global delay var(--transition-delay)
• Set a global transition style var(--transition)
• Adds a .transition utility class.
• Allows you to set buttons and links to inherit global transition style.

• Applies border radius to images and figures by default, significantly cutting down on the repetitive use of property declarations or utility classes.
• Allows the user to apply border radius automatically and programmatically to any specified selectors, including combinators, compound selectors, and complex selectors.

ACSS now automatically applies object-fit cover to images (zero specificity). Feel free to resize or manipulate an image’s aspect ratio without having to manually set object fit as well.

For users who prefer Content Grid structure over traditional section structure, you can now swap all parent sections to Content Grid by default.

• You can now set spacing for all heading levels independently
• List and list item spacing is now block spacing which supports values for both top and bottom
• You can now control the list indent value
• Added full spacing support for nested lists and nested list items.
• Added spacing support for figure elements, blockquotes
• Added universal “flow spacing” which spaces any element that isn’t specifically controllable by the smart spacing system.

Bricks adds an overlay that mimics grid structure to help users visualize grid layouts. It’s more annoying than anything, especially when using Content Grid layouts. You can turn off this grid visualizer in ACSS options.

• Font Weight
• Letter Spacing
• Font Style
• Text Transform

Added as “all” option for headings and text as well as individually for each heading/text size level.

ACSS websites are now orphan-free out of the box. We’ve expanded text-wrap settings to all headings and text and apply text-wrap: pretty; by default. This automatically eliminates orphans in supported browsers (progressive enhancement). You can optionally choose balance as a value (a more aggressive form of line balancing) or remove balancing altogether by setting the value to wrap.

Additionally, you can prettify, balance, or unbalance things manually using the new text wrap utility classes.

.text--pretty
.text--balance
.unbalance

Added support for CSS line clamp so users can quickly and easily clamp text to a specific number of lines:

• line-clamp--1
• line-clamp--2
• line-clamp--3
• line-clamp--4
• line-clamp--5
• line-clamp--custom

Recipe can be added to a BEM class or ID with @line-clamp.

• Dashboard inputs auto-detect color names and color variables and display a color swatch.
• Dashboard inputs auto-wrap vars and calc functions.
• Dashboard inputs auto-detect framework spacing, typography, and color variables and allow up/down arrow cycling through available options.
• “Scale” inputs automatically cycle through music scale presets when using the up/down arrows.

We’ve added environment detection and environment logic to the dashboard. This allows us to show/hide certain inputs and settings based on the page builder being used.

• Auto-spacing now applies to the Block element in Bricks (still with zero specificity so it’s easy to override).

• You can now add boxed layout effect to individual pages by putting .boxed-layout on the body tag.

• Users can now control the default editor width for posts and pages.
• Users can now choose whether posts and specific custom post types are post-width or page-width.
• The block editor correct reflects smart spacing.
• The block editor no longer gets ACSS’ 100vh min body height, which improves access to custom fields in the editor on short pages.

• When using CSS Columns classes, ACSS will now add break-inside: avoid; to children by default. This prevents common issues with CSS Columns that users often don’t know how to fix themselves.

There are times when you need <button> elements to look like links. This is now easier than ever with existing .link-- classes.

Nearly all dashboard features have a tooltip and/or link directly to documentation to make it easy for users to get information on every feature/setting.