Changelog

2.7.0

• Official Support for Cwicly (RC)

  We’re proud to announce official support for Cwicly. We wholeheartedly feel that Cwicly is currently the 2nd best page builder for WordPress and the #1 page builder in the Gutenberg environment. The Cwicly team has our full support and we look forward to helping them grow in whatever way we can.

  Currently Included

  • Full framework support (classes & variables)
  • Works in builder canvas and template areas
  • Auto-Load utility classes
  • Color Scheme support

  Coming Soon

  • Contextual menus
  • Live style preview
  • Variable expansion and validation in inputs
  • Auto-BEM

  We are considering this a “Release Candidate (RC)” integration. Cwicly users are encouraged to use this thoroughly and report any issues that arise so we can implement fixes immediately.

  How to setup ACSS with Cwicly

• Color Scheme (Dark Mode +)

  Currently supports dual color scheme, but can be expanded in the future to support various other forms of color scheme, contrast scheme, etc.

  • Optional support for prefers-color-scheme
  • Granular control over which colors have alt-scheme
  • Granular control over hue/sat/lightness of every alt shade
  • Support for contextual colors.
  • Back-end preview toggle for all supported page builders
  • Front-end toggle component for Frames users
  • Front-end toggle element for Bricks users (Frames not required)
  • Color scheme API for users who want to create their own toggle
  • Includes .color-scheme--main and .color-scheme--alt for manually activating or deactivating color scheme changes on individual elements or element groups.

  More features and improvements to color scheme functionality will be made after the 3.0 rebuild is complete.

  Read the color scheme documentation.

• Auto-BEM Functionality for Page Builders

  Auto-BEM revolutionizes the way users add custom classes in page builders. This feature automatically adds a custom class to a parent and all its children in two clicks using BEM methodology for proper organization and maintainability.

  The class names are derived from the element name in the structure panel, but can quickly and easily be overridden during the class creation process.

  That’s not all, though. Here’s a full list of features:

  • Applies BEM classes to a parent and all its children in two clicks
  • Double click will do the same thing while allowing you to skip the Auto-BEM panel
  • Customize the class name of any child from the Auto-BEM panel
  • Map class name changes to the structure panel if desired
  • Auto-detection of existing BEM classes with various handling options
  • Bulk rename BEM classes
  • “Create New & Remove Old” – Creates new BEM classes and removes the old ones from elements (includes option to copy styles to the new classes)
  • “Create New & Delete Old” – Creates new BEM classes and deletes the old ones from the database (includes option to copy styles to the new classes)
  • “Create New & Keep Old” – Creates new BEM classes and leaves the old ones in place (includes option to copy styles to the new classes)

  Official Auto-BEM documentation

  We will continue to build out the functionality of this feature. The next version will likely include the ability to copy styles from the ID as well.

• Granular Feature Deprecation

  We’ve replaced the old “load deprecated styles” option with a new Deprecated tab, allowing users to choose precisely which deprecated styles they want to load.

• "Neutral" Color Palette (Replaces "Shade" Palette)

  This change is primarily for semantic accuracy and to clear up confusion regarding the “shade” palette and “shades” attached to other colors. The “Shade” palette is now deprecated (available via the Deprecated tab). Users should continue using the Shade palette on old sites but switch to using the Neutral palette from now on.

• Completely Refactored Buttons

  Buttons in ACSS have been wholly refactored for greater efficiency, customization, and theming capability.

  • Button code output has been reduced by a staggering 73.5%.
  • Every button property now uses locally scoped variables, allowing unprecedented granular style and theming capabilities.
  • New option for setting the default focus color of buttons.
  • New option for controlling button text decoration on hover.
  • New option for setting button transition duration.

  Read the button documentation for more details on changes to button variables. Some older button variables are now deprecated (they’ll still work, but stop using them).

• Header Height Support for XL/XS Breakpoints

  Extra breakpoint support now extends to the --header-height variable and header-height features.

• Scroll Offset Support for XL/XS Breakpoints

  Extra breakpoint support now extends to scroll offset features.

• Radius Classes (Replace .rounded)

  .radius-- classes are replacing .rounded-- classes, which are now considered deprecated. This is another change for semantic accuracy and alignment with official naming conventions. All functionality remains the same.

• List Spacing Variables

  Two new variables have been introduced that allow you to reference your website’s default list and list item spacing.

  • --list-spacing
  • --list-item-spacing

• New Boxed Width Variable

  Similar to --content-width, the new --boxed-width variable allows users to reference the boxed width of their website when using boxed layout mode.

• Global Link Style Exclusions

  You can now exclude the default global link style from specific areas of your website (such as the header or footer). A new textarea permits users to define custom scenarios for exclusion (e.g. “header a“). Multiple scenarios can be inserted with comma separation.

• New Variable for Link Underline Offset

  We’ve introduced --link-underline-offset, which allows users to reference the offset value for their global link underline decoration. This makes it easy to design custom link styles while ensuring that your underline offset always matches your other links.

• Deprecated .text-larger

  .text-larger was a utility we nearly instantly regretted after initially adding it. It’s not BEM compatible, and it creates a lot of unnecessary complications with builder ecosystem expansion. We have now officially deprecated .text-larger (though it remains accessible via the deprecated panel) and we recommend that users stop using it. If you’re in a situation where .text-larger might be used, consider using a BEM class or creating a custom text size for maximum scalability and maintainability.

• Removed 1px Offset From All Breakpoints

  This offset was put in place at the beginning of development years ago to account for Oxygen’s improper use of breakpoint values in the builder. This offset makes no functional sense for a CSS framework and makes life more difficult for non-Oxygen users, so we’ve removed it.

• Refactored Spacing

  • Code output for spacing modules reduced by 400+ lines.
  • Spacing now outputs variables instead of raw values.

• Refactored Overlay Classes

  • Reduced code output by 1950+ lines (73% reduction).

• Refactored all Text Classes

  • Reduced .text-- class code output by 50% across all classes (size, color, etc.)

• Refactored Accessibility Related Code

  This mainly consists of back-end refactoring and organization for better maintainability and scalability.

• Focus Parent Class No Longer Requires Modifier

  When applying the “focus parent” technique to parent elements, you previously had to use a modifier class (.focus-parent--shadow or .focus-parent--outline). This is no longer required. You can now apply the class .focus-parent and ACSS will automatically apply either shadow or outline based on your global preferences.

  Note: You can still use the modifier version if you need the style to be different from your global preference. Learn more about Focus Parent.

• Focus Color Utilities Now Work With Focus Parent

  .focus-- classes now have the ability to change the focus color when paired with .focus-parent classes.

  Learn more about Focus Parent.

• Minor Update to hidden-accessible

  We’ve replaced the deprecated “clip” property with “clip-path.”

• Various efficiency improvements for Oxygen

  We’ve reduced the overall code output for Oxygen and removed some overrides that are no longer necessary.

• Contextual Color Handling on Deactivation

  • Contextual color variables are now removed from the stylesheet when contextual colors are deactivated
  • Contextual color partials are now removed from the stylesheet when contextual colors are deactivated

• Form Compatibility Fixes

  • Fix for unwanted inline padding
  • Fix label position when using country flag in phone field (WS Form)
  • Fix missing opacity value on inside-label-position (WS Form)
  • Fix checkbox skipped with tab navigation (Bricks)
  • Fix  for the “null” value on focus drop-shadow

• Plugin updates always trigger stylesheet regeneration

  Previously, upon updating ACSS, we only triggered the regeneration of the stylesheets if any of the settings had changed value. That would happen with major updates, that introduced or removed settings, but would otherwise miss. We now always regenerate the stylesheets so, even if no settings have changed, your stylesheets have been refreshed with the latest version of the framework.

2.6.2

• Smart spacing no longer breaks spacing in WooCommerce pages

  As reported in https://community.automaticcss.com/c/general-discussion/version-2-6-1-is-live#comment_wrapper_23339597

• The context menu now adapts better to small screens

  As reported in https://community.automaticcss.com/c/bricks/right-click-can-t-see-grid-and-space-variables

• The context menu now properly applies classes to empty elements

  As reported in https://community.automaticcss.com/c/bricks/selecting-a-class-in-contextual-menu-doesn-t-apply-it

• Grid classes now work in Oxygen footer elements correctly

  As reported in https://community.automaticcss.com/c/oxygen/recent-change-broke-my-footer-layout

• Flex classes are no longer loaded in Gutenberg when the related setting is turned off

2.6.1

• Clickable parent now works on button elements

  Sometimes a clickable card isn’t just for navigation – it could be used to fire a modal or other on-page events. In this case, you need to use a button instead of a link. Clickable parent did not previously work on button elements, but now it does.

• Duplicate panes in context menus

  Some items were listed twice in the context menus. The duplicates have been removed.

• Context menu doesn't open on color droplet in gradient/overlay

  When working in a gradient panel in Bricks, the contextual panel wouldn’t open. This is now resolved.

• Fluent Forms Fixes

  • International phone field margin

  • Section breaks don’t get styled

• Button styling lost when Generate Free version active

  ACSS uses logic to ensure that button styling doesn’t get loaded multiple times for each active builder/block system (unless specific overrides are needed). This logic worked seamlessly with Generate Pro, but was breaking when the free version of Generate was used, resulting in a loss of button styling. This is now fixed.

• Gutenberg title and paragraph widths

  Improvements to standardize how the editor displays the post title and default paragraphs.

• Permission issue in the packaged zip file on MacOS

  This wasn’t replicable 100% of the time, but it’s been resolved now.

• Automatic content spacing no longer breaks Bricks shape dividers

  Shape dividers are physical divs and were being affected by automatic content spacing. We’ve made sure to exclude shape dividers from the spacing rules.

• Exclude navigation from auto text balancing

  Auto text balancing doesn’t look so great in navigations. While you could override it easily, it’s best to just exclude navs in general, which we’ve done.

• Fixes for fluid-text, fluid-padding, fluid-section mixins

  A little bit of tidying up on these mixins.

2.6

• Official support for GeneratePress & GenerateBlocks (Beta)

  We’re proud to release official support for GeneratePress & GenerateBlocks. Full setup video and walkthrough coming soon!

  • Requires GenerateBlocks 1.8
  • Better support for CPTs coming soon

• New Gutenberg Features

  • Class-first workflow in Gutenberg
  • Right-click cheat sheet menu for Guttenberg class input
  • Draggable contextual cheat sheet (right-click class input)
  • Draggable contextual menu height
  • Live style preview in Gutenberg canvas

• PX to REM Auto Conversion (ctr)

  Hate doing math every time you want to use rem units? With ACSS, it’s no longer required. Simply type the pixel value you want, followed by “ctr” and ACSS will auto-convert the value to rem based on your site’s root font size.

  • E.g., “40ctr” will automatically convert 40px to 4rem or 2.5rem (depending on the user’s root font size) in any input field in the builder (hit enter)
  • Works in CSS inputs as well (conversion occurs when the closing “;” is applied)
  • Users can now use 100% root font size without doing manual math for rem units.

• New SCSS function ctr($pixel-value) for converting pixels to rem in SCSS

  Auto rem conversion is only super helpful if you can do it everywhere, right? So, the auto-convertor is accessible when writing SCSS as well, using a new ctr() function.

  $root-font-size: 100%;

  .sample {
    width: ctr(640);
  }

  Note: Due to how SCSS is compiled, you must define $root-font-size in your local SCSS stylesheet — you won’t be able to get the root font size from ACSS dynamically.

• New class & variable for referencing website's content width

  There are many times where it’s useful/necessary to make a container or element equal to your website’s content width. Now, that’s easier than ever with a new class and new variable.

  • .content-width and var(--content-width)
  • References the website’s content width
  • Replaces/deprecates .width--vp-max and var(--width-vp-max)
  • .content-width also auto-centers the container

• New class & variable for "safe" content width (auto-gutter)

  When you need an element to be content-width, inside a container that has no phsyical gutter, then you should use the new class or variable for “safe” content width. These utilities use an intelligent min() function to match your website’s content width while simultaneously creating a gutter.

  • .content-width--safe
  • var(--content-width-safe)

• Overlay Mixin

  Want to easily create and deploy custom overlays? Now it’s easier than ever with a new custom mixin:

  .sample {
    @include gradient($overlay-bg, $overlay-opacity, $overlay-bg-image);
  }

  • Will default to 60% black overlay if no overlay values are chosen.
  • $overlay-bg can be a variable, any valid color, or any valid gradient expression
  • $overlay-opacity is expressed as a decimal e.g. “.6”
  • $overlay-bg-image accepts any valid url() string (if you want your overlay to blend a secondary image for example)

  Full documentation coming soon.

• Clickable Parent Mixin

  Want to use the clickable parent technique with a custom class or component? Now it’s easier than ever with a new clickable parent mixin.

  .sample__heading {
    @include clickable-parent;
  }

  Note: Make sure you set the card parent to position relative.

• Focus-Parent (Utility Classes & Mixin)

  These utilties do two things:

  1. Applies one of two focus styles to an element (shadow or outline)
  2. Removes focus styling from focusable children (if present)

  These utilities work beautifully with the clickable parent technique by removing focus from the child link and applying the focus style to the parent.

  .sample {
    include @focus($style);
  }

  • Style = “outline” or “shadow”
  • Defaults to shadow focus if no style is chosen.
  • Automatically inherits your site’s default focus styling.
  • .clickable-parent--shadow and .clickable-parent--outline are the optional utility classes.

• Button Mixin

  Need to create a custom button that hooks into your site’s default non-color button styles? Super easy to do with the new button mixin.

  .sample-button {
    @include button($style);
    background: linear-gradient();
    color: var(--white);
  }

  The “style” can be “solid” or “outline” depending on which defaults you want to reference.

  The above mixin will effectively apply the following defaults:

  • Default button padding
  • All default button border styling
  • All default button text styling
  • Default mininum button width

  This one mixin replaces about 12 lines of code and manual variables.

• "Delay Children" Animation Mixin

  One of the hardest parts of creating animations is staggering the delay from child to child. ACSS v2.6 introduces a new mixin, delay-children($child-count, $delay), to make staggered animation delays effortless.

  .parent {
    @include delay-children(5);
  }

  Just tell the mixin how many children are in the container and it’ll programmatically add the desired delay to each next child.

  For example, child #1 will get a delay of 100ms, child #2 will get a delay of 200ms, child #3 will get a delay of 300ms, and so on. The default is 100ms so if you just want the default delay, you don’t have to specify a delay.

  Here’s an example with a specific delay amount:

  .parent {
    @include delay-children(5, 120ms);
  }

• Automatic Contextual Spacing

  Do you hate manually applying .container-gap, .content-gap, and .grid-gap classes everywhere? We feel you! Now you can turn on automatic contextual spacing and build without any spacing hassles (in the most common scenarios).

  And don’t worry, you can still easily override the automatic spacing with utility classes, variables, or custom classes.

• Automatic Text & Heading Balancing

  Say goodbye to orphans (the typography kind)! Automatic text balancing is now available (Typography tab) for paragraphs, list items, blockquotes, and headings.

  This is a “progressive enhancement” that will only work in supported browsers. Browsers that don’t support it won’t be negatively affected.

  Notes

  • Due to the 4-line balancing limitation, multi-paragraph text often results in uneven balancing. Therefore, ACSS only applies text balancing to “only-of-type” paragraphs (single paragraphs with no adjacent paragraphs).
  • Text balancing will be replaced with “text-balance: pretty” when it’s supported, as this results in less drastic balancing and likely won’t have a line count limitation.

• Manual Text & Heading Balancing

  If you don’t want to turn on automatic text balancing, but you still want to balance certain things, you can use the new .balance utility class.

  This class will balance any element, OR all paragraphs, list items, blockquotes, and headings when used on a parent element.

  This is a “progressive enhancement” that will only work in supported browsers. Browsers that don’t support it won’t be negatively affected.

  Notes

  • Due to the 4-line balancing limitation, multi-paragraph text often results in uneven balancing. Therefore, ACSS only applies text balancing to “only-of-type” paragraphs (single paragraphs with no adjacent paragraphs).
  • Text balancing will be replaced with “text-balance: pretty” when it’s supported, as this results in less drastic balancing and likely won’t have a line count limitation.

• Text & Heading Unbalancing

  Using automatic text balancing, but don’t like how it’s handling a certain element or group of elements? The new .unbalance utility class is your new best friend.

  This class will unbalance any element, OR all paragraphs, list items, blockquotes, and headings when used on a parent element.

• Preliminary Container Query Support

  ACSS v2.6 now supports @container queries using a new .contain class.

  This utility will set the container type to inline-size (most common use). It will also set the container-type of all direct children.

  Note: When using container queries with grids, you must wrap all grid children in a div/block. This wrapper will be the “container” used to measure and trigger the container query. This is a reality of container queries in grids whether you’re using ACSS or not.

  Once you’ve used the new .contain class, you are free to write any desired styling instructions inside a @container query.

• Un-Deprecated Ultra-Dark Trans Variants

  Kevin deprecated the ultra-dark transparencies for all colors a while back because they didn’t match the same naming convention as light transparencies.

  {color}-light-trans-{value} vs {color}-utlra-dark-trans-{value}

  Turns out that was stupid because the ultra-dark transparencies are super helpful and he hated not having them. So, they’re back!

  Now you have *both* ultra-dark transparencies and dark transparencies for all colors. Even more options!

  There are currently no plans for ultra-light transparencies, but we can be convinced.

• Intelligent spacing for lists and list items

  Intelligent spacing for paragraphs and headings (Typography tab) was a game changer for solving spacing headaches across websites and automatically establishing the proper spacing rhythm for blog posts and rich text elements.

  ACSS v2.6 expands on this feature by adding support for lists (<ul>, <ol>) and list items (<li>).

• Box-shadow focus style option

  Do you prefer using box-shadow for focus styling over outline? You’re not alone! And now, with ACSS v2.6, you can choose the default focus style for your site (outline vs shadow). Just hop over to the Additional Styling tab.

• Official Fluent Form Styling Support

  Are you a Fluent Forms user who has been sad, depressed, and feeling left out since the introduction of form styling in ACSS? Well, you can flush the pharmaceuticals down the toilet because ACSS now officially supports Fluent Forms for form styling.

  Pop open a fluent form and apply .form--light or .form--dark to it and have fun!

• Save ACSS Dashboard Settings with CMD + S

  Ever tried working quickly in the ACSS dashboard and hit CMD/CNTRL + S to save, only to be prompted by the browser to choose a save location?

  Yeah … we fixed that nonsense.

  CMD/CNTRL + S now does what you’d expect – it actually saves your dashboard changes.

• Reduce Motion Option Switch

  Salty Intro: Are you a user who prefers reduced motion, but also likes to program motion/animation into the websites you build (awkward!)?…

  You can now turn off ACSS’s reduced motion accessibility feature (Options tab).

  Of course, I’d recommend turning it back on when you’re done building all those animations you apparently don’t want to see on other sites.

  Okay, I’ll stop.

• Single Row for Website Dimensions (UX)

  Just makes the area for setting website width more efficient.

• New "Typography Spacing" Section

  After a very heated debate amongst the community, we’ve decided to move the intelligent typography spacing options to the Typography tab.

• Improved Style Inheritance

  Buttons, links, et al. can now be set to “inherit” for things like font-weight, text-decoration, etc.

• General Gutenberg Enhancements

  • Removed focus styles in the canvas.
  • Removed styles from posts (only pages show styles by default).
  • Added an optional snippet to show styles in CPTs (below).

  add_filter(
  'acss/gutenberg/allowed_post_types',
  function( $post_types ) {
  return array( 'page', 'post' ); // specify here your CPTs slugs.
  }
  );

   

• Codebase Refactoring

  Refactored Grid, Gap, and Flex-Grid modules to make them easier to adapt to new builders, especially builders that use inaccessible nested wrappers.

• Contextual gap classes now apply gap to both axes

  These classes initially only applied row gap, but it’s very useful to use these utilites for column gaps as well, so the gap now applies to both row and column.

• Gap classes now output variables instead of raw values

  Outputting variables instead of raw values expands the local customizability of these utilities.

• General Form Styling Enhancements

  • Added the ability to choose the color of the ‘Required’ asterisk (Light / Dark)
  • Elements inside WS Forms HTML field now inherit label color

• Frames UX Enhancements

  • Removed author from Bricks template library thumbs
  • Removed frame type from Bricks template library thumbs

• Clickable Parent Builder UX Enhancements

  The “clickable parent” technique no longer applies inside the builder canvas (when using the utility class). This prevents issues with accessing a clickable parent’s child elements in the builder.

• Changed buttons from inline-block to inline-flex

  Inline-flex is more flexible than inline-block with no visual difference by default. This also allows easier use of icons in buttons.

• Fixed wrong placeholder color in Select placeholder (forms)

  Gotta be able to control that placeholder color!

• Contextual Menu Fixes

  •  Added missing box shadow classes and variables
  • Fixed .center-- classes not inserting properly

• Old code removal

  • Removed old contextual gap instructions from Frames stylesheet.

• Fixed contextual gap classes in Oxygen's Section element

  Oxygen’s inaccessible nested section wrapper continues to be a ton of fun to work with.

New Changelog Released