Changelog

3.0-beta-1.1

• Up/down arrow key enhancement

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

• Dashboard not responsive after certain searches (in builder)

• 30/50/70 transparencies not compatible with live preview

• Main color output (non-shade/non-trans) not compatible with live preview

• Dropdown input rows not compatible with live preview

• Body default styles shouldn't target paragraphs specifically

• Tooltip size changes based on root font size

• Up/down keys to change values is behaving oddly

• Up/down arrow keys not cycling through math scales properly on scale inputs

3.0 (Beta)

• Real-Time Dashboard

  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.

• Instant Live Preview

  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.

• Hot Reload

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

• Live Search (Experimental)

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

• Refactored Color System

  • 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

• Keyboard Shortcuts & Instant Navigation

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

• Global Front-End CSS/SCSS Editor

  • 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!

• Recipes

  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.

• Programmatic Color Scheme Protection

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

• Completely Refactored Buttons

  • 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)

• Global Border System

  • 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.

• Global Divider System

  • 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.

• Global Transition System

  • 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.

• Automatic Border Radius

  • 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.

• Automatic Object-Fit

  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.

• Default Sections to Content Grid (Option)

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

• Expanded Smart Spacing Functionality

  • 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.

• New option to turn off Bricks' grid visualizer

  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.

• New Global Typography 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.

• Automatic Orphan Elimination

  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

• Line Clamp

  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.

• Enhanced dashboard inputs

  • 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.

• Environment Logic (Dashboard)

  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.

• Expanded Auto Spacing

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

• Per-Page Boxed Layouts

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

• Gutenberg Enhancements

  • 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.

• Columns Now Avoid Inside Breaks Automatically

  • 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.

• Link classes now work on html button elements

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

• Improved Tooltips & Documentation Access

  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.

2.8.3

• 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

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.