Changelog

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