FIX: Slight tweak to how “fix paragraph spacing” works to account for more scenarios.
2.1.3
Fixed .clickable-parent not working on raw links.
Fixed an issue where “fix headings and paragraph” spacing was removing spacing from a heading that didn’t have any content after it.
.list—none now works on ordered lists.
.list—none now removes any default bottom margin from <ul> and <ol> elements that are added by builders.
Heading and text overrides now support decimal values.
Added .isolation—isolate
Resets the stacking order of a container. Useful when an item has a negative z-index and certain other circumstances.
Grids that are set to 1 column at any breakpoint will now automatically force their direct children to span only 1 column. This saves you potentially many steps in the process of building more complex grids because you no longer have to manually put col-span—[breakpoint]-1 on all spanned children to reset them to 1 column. It also prevents potential grid breakage on grids where users forget to reset the col-span of children to 1 when the grid is instructed to be 1 column only.
Added new color set: Action and all associated classes.
This is the a color that sets the action color for your website (buttons and links). This frees up Primary to be used for other colors (e.g. the most used color on your site) and reduces confusion as to what “Primary” is used for.
WSForm Support (Beta)
***************NOTICE: Forms are very complex. Adding support for WSForm requires over 100 SCSS variables and many new dashboard inputs. Because of this, we want to spend time making the .form—light version rock solid before introducing the .form—dark variant. Please let us know if you find any bugs or issues!
Adds a .form—light (active) and .form—dark (coming soon) class.
Forms built with WSForm (best form plugin for WP in our opinion) can now be styled with the new forms classes.
A new Forms area of the ACSS dashboard is now available for styling forms.
Once the light form variant is stable we’ll release a .form—dark variant to give users two fully customizable form styles.
Forms will automatically inherit action color for submit button and action items (editable) and input fields and buttons will automatically inherit the radius from global button settings (editable), so you’ll find that a lot of form styling is already done for you out of the gate, adhering to styles you’re already using throughout the site.
Form buttons will automatically inherit the border radius of inputs. This is editable, but we felt that buttons and inputs should match input border radius by default. Some sites use pill shaped buttons, which are not suitable for many types of form inputs, thus the form input border radius would need to be altered. When this occurs, form buttons will inherit the new input radius automatically so you don’t have to constantly make changes in two places. For sites that don’t use pill shaped buttons, this will be a non-issue.
Bricks Form Support (Beta)
The .form—light class (see above) also works to style Bricks’ native form element.
Line Lengths are now available for all individual heading levels giving users the ability to set a different line length per heading size.
Main colors now output exact match hex values.
Main colors (primary, secondary, accent, base, shade) are no longer converted to HSL. They will output the exact match hex value. Only shades are passed through HSL conversion. This will ensure that your main brand colors never have a different hex value than what you set in the dashboard (even though any differences were mostly imperceptible before).
Added the ability to show/hide ACSS in the admin bar (options panel).
Added the ability to change the location of ACSS in the WP Admin area (options panel).
Note: ACSS can’t be nested under another area like Settings because it has multiple menu items.
Changelog 2.0.2 - Thanks to a fellow Babiato member for it!
v2.0.2 (Hot Fix)
Fixed an issue with the new button font style setting throwing a default value error preventing fresh installations of ACSS (upgrades were unaffected).
Fixed an issue with "S" and "XS" font sizes still referencing old max() values when using variables.
Changelog 2.0.1 - Thanks to a fellow Babiato member for it!
Some relatively minor updates that I wanted to get out ASAP before we start compiling the next major update (however, be sure to read the bolded notes about text and heading minimums).
Added text-decoration setting to button defaults in the dashboard. This fixes an issue where default link decoration would apply to buttons as well.
Added font style to default buttons styles.
Improved button defaults section of dashboard.
Removed default left/right header padding from Bricks Builder as this was causing issues for people who wanted zero header padding. Per the setup guide, you should be using a .pad-header--[size] class in your header template which gives you the correct left/right padding along with your preferred top/bottom padding.
Fixed .text--larger not working properly on headings in Oxygen.
Fixed a minor issue with .center--left and .center--right classes not restoring proper content alignment on mobile.
Removed S/XS and H5/H6 minimum sizes. Now that the text and heading overrides are fully functional and independent, these minimums are redundant. You can set minimums in the overrides area for these sizes. If you set minimums on previous installs, you'll want to make sure you go in and input these minimums again using the overrides area.
Removed body background color from automatic-bricks (overrides) stylesheet. And since Bricks sets body background color to #fff by default (even when no bg color is selected), this feature will not work in Bricks. It had to be removed from the overrides file because certain users wanted to change their body background color on a template-by-template basis, which was impossible when the background color was set in overrides. Going forward, default body background color needs to be managed completely inside of Bricks.
Added Bricks style guide remote template URL to Guides tab.
Completely refactored the plugin back-end for efficiency and performance.
Added ability to change text and heading line heights from the dashboard (you can now clear all line heights out of Oxygen global settings)
Added ability to adjust saturation value of all shades in the dashboard.
Added ability to set mobile (min) and desktop (max) values for left/right section padding. This will give you the ability to better control your left/right section padding across devices.
Added toggle option for setting custom button text size. You can choose to keep button text mapped to text-m by default OR you can enable custom button text and set your min and max for responsive custom button text sizing.
Added ability to set global font weight for buttons.
Added ability to set global line height for buttons.
Added ability to set global letter spacing for buttons.
Added ability to set global text transform for buttons.
Added ability to set a global minimum button width.
Added the ability to customize your website's accessibility focus color.
Added the ability to adjust the outline offset (distance from selected object) for accessibility focus.
Added .marker--(color) classes for changing the color of markers in list items. All colors and shades are available.
Added .display--(flex, inline-flex, block, inline-block, inline, list-item, none) classes.flex, block, and none versions are available at all breakpoints using .display--(breakpoint)-(property)
Added .visibility--(hidden, visible) classes for setting visibility. They're available at all breakpoints using typical breakpoint extensions. Note: Make sure you understand the difference between display--none and visibility--hidden before using!
Added .hidden-accessible for accessibility text. This works similar to Wordpress' default .screen-reader-text class, but was specifically built for ACSS for two reasons:It'll work on non-Wordpress websites It creates a visual indicator in the builder. This is important to avoid accidental breakage when devs duplicate certain elements that have hidden screen reader text. Now you can easily see (and select) hidden screen reader text at a glance.
Added .relative class to set the position of an element to relative. This is important when using .z-- classes to set z-index or when positioning child elements as absolute.
Added hover styles to .link-- classes. Links will now inherit the hover color of the chosen color family instead of defaulting to primary-hover.
Added .focus--(primary, secondary, accent, base, shade, white, black) classes to change the focus color of focusable elements. These classes work on individual elements as well as containers. When used on a container it will change the focus color of all focusable elements in the container.
Added ability to turn on/off smooth scrolling.
Added Scroll Offset for smooth scrolling as well as an input for setting Header Height when using sticky headers. When you tell ACSS the height of your sticky header it'll add that value to whatever value you've set for your offset.
Added var(--header-height) for referencing the height of your sticky header.
Added the ability to edit sticky top distances.
Added the ability to edit column widths and column rule widths.
Changed .grid--1 to use the same minmax function as the other grids to fix an issue where items with a fixed width would break the grid on mobile devices.
Added .col-end--(count) and .col-end--(breakpoint)-(count) classes. This, in combination with the .col-start classes already found in ACSS, empowers users to easily create dynamically overlapping, responsive content layouts with CSS Grid.
Adjusted accessibility focus styles to avoid seeing the focus style on mouse click.
Image breakouts no longer lose their owl spacing.
Reduced total framework size by about 20% by conditionally excluding base styles that have builder-specific overrides.
Official support for Bricks Builder!Some ACSS behavior is slightly different between Bricks and Oxygen, so make sure you refer to the Bricks documentation. A few ACSS features won't function consistently until Bricks releases support for them – check the documentation for details.
Completely refactored the plugin back-end for efficiency and performance.
Added ability to change text and heading line heights from the dashboard (you can now clear all line heights out of Oxygen global settings)
Added ability to adjust saturation value of all shades in the dashboard.
Added ability to set mobile (min) and desktop (max) values for left/right section padding. This will give you the ability to better control your left/right section padding across devices.
Added toggle option for setting custom button text size. You can choose to keep button text mapped to text-m by default OR you can enable custom button text and set your min and max for responsive custom button text sizing.
Added ability to set global font weight for buttons.
Added ability to set global line height for buttons.
Added ability to set global letter spacing for buttons.
Added ability to set global text transform for buttons.
Added ability to set a global minimum button width.
Added the ability to customize your website's accessibility focus color.
Added the ability to adjust the outline offset (distance from selected object) for accessibility focus.
Added .marker--(color) classes for changing the color of markers in list items. All colors and shades are available.
Added .display--(flex, inline-flex, block, inline-block, inline, list-item, none) classes.flex, block, and none versions are available at all breakpoints using .display--(breakpoint)-(property)
Added .visibility--(hidden, visible) classes for setting visibility. They're available at all breakpoints using typical breakpoint extensions. Note: Make sure you understand the difference between display--none and visibility--hidden before using!
Added .hidden-accessible for accessibility text. This works similar to Wordpress' default .screen-reader-text class, but was specifically built for ACSS for two reasons:It'll work on non-Wordpress websites It creates a visual indicator in the builder. This is important to avoid accidental breakage when devs duplicate certain elements that have hidden screen reader text. Now you can easily see (and select) hidden screen reader text at a glance.
Added .relative class to set the position of an element to relative. This is important when using .z-- classes to set z-index or when positioning child elements as absolute.
Added hover styles to .link-- classes. Links will now inherit the hover color of the chosen color family instead of defaulting to primary-hover.
Added .focus--(primary, secondary, accent, base, shade, white, black) classes to change the focus color of focusable elements. These classes work on individual elements as well as containers. When used on a container it will change the focus color of all focusable elements in the container.
Added ability to turn on/off smooth scrolling.
Added Scroll Offset for smooth scrolling as well as an input for setting Header Height when using sticky headers. When you tell ACSS the height of your sticky header it'll add that value to whatever value you've set for your offset.
Added var(--header-height) for referencing the height of your sticky header.
Added the ability to edit sticky top distances.
Added the ability to edit column widths and column rule widths.
Changed .grid--1 to use the same minmax function as the other grids to fix an issue where items with a fixed width would break the grid on mobile devices.
Added .col-end--(count) and .col-end--(breakpoint)-(count) classes. This, in combination with the .col-start classes already found in ACSS, empowers users to easily create dynamically overlapping, responsive content layouts with CSS Grid.
Adjusted accessibility focus styles to avoid seeing the focus style on mouse click.
Image breakouts no longer lose their owl spacing.
Reduced total framework size by about 20% by conditionally excluding base styles that have builder-specific overrides.
Official support for Bricks Builder!Some ACSS behavior is slightly different between Bricks and Oxygen, so make sure you refer to the Bricks documentation. A few ACSS features won't function consistently until Bricks releases support for them – check the documentation for details.
