- Automatic Typography. Anything on your ACSS powered website that contains text, whether it's a heading, paragraph, list, form field, or anything else, follows a perfect mathematical scale in hierarchy through 12 different size options, all of which are automatically & perfectly mobile responsive. Best of all, the entire system is under your command from the Automatic.css dashboard.
- Automatic Colors. Set your brand colors and ACSS automatically generates six shade variants of each color. Classes give you the ability to color any element (including backgrounds and overlays) with these variants and you can even use them with custom classes and IDs via Automatic.css color utility variables.
- Automatic Spacing. As is true with typography in ACSS, margins, padding, and gaps all follow a perfect mathematical scale giving you access to six hierarchal spacing values and six hierarchal section spacing values, all of which are automatically responsive. Additionally, spacing utility variables ensure that even completely custom elements have consistent spacing.
- Automatic Responsive. ACSS uses advanced CSS Clamp and Calc techniques to ensure that all typography, margin, padding, and gaps are perfectly responsive according to the maximum and minimum viewport dimensions of your website. You never have to fiddle with breakpoints, even when you customize the system to fit a specific design and layout.
- Automatic Grid. ACSS is the first utility framework to offer automatically responsive grids. Set the number of desired columns on desktop and Automatic.css handles the rest. For developers who prefer complete control over their grid at each breakpoint, Automatic.css offers full control via traditional grid utility classes.
- Automatic Customizability. Think a fully automatic framework locks you in to using the same values on every site? Think again! Automatic.css gives you amazing granular control over typography, spacing, and colors so you can quickly recreate designs from Figma, Sketch, and XD without issue. It's perfect for agencies and teams.
- Automatic Fallbacks. Not all browsers support Clamp and Calc functions, which are the heart of Automatic.css' responsive nature. No need to worry, though, because Automatic.css has near-perfect fallbacks using Calc for browsers that don't support Clamp, and "pure" fallbacks using rem or px for browsers that don't support Calc. And yes, you have full control over the pure fallback values.
2.8.1
This is our standard post-release update focusing exclusively on bug fixes and improvements.
Content-grid class now has the correct specificity
Heading colors now apply the correct value
Loom extension no longer creates extra space
Contextual color classes are back
Heading sizes and line heights in Oxygen now produce the correct output
Accent button is back in the context menu
Removed references to --variable-grid from our docs
Removed line length controls in Bricks Builder (See Notes)
Removed image height reset
This release cleans up a few missed items from the beta rounds.
- Fix for logical property instructions on image breakouts in Oxygen
- Loom extension fix
- Text align center added to button defaults
- Fix for text line lengths causing overflow in Bricks
- Explicitly set skip-link to display inline-flex
- Fix for hover styles in skip links
Thanks to everyone who helped test the two beta versions. This was a big release with a ton of moving parts. We hope you enjoy all the new features and updates. There's more to come!
Click on linked items for expanded details.
Completely refactored color system.
var(--{color}-comp-h) partial variable.
Entire framework now uses CSS Logical Properties for modernization and RTL support.
Enhanced Builder Functionality (Oxygen & Bricks)
Official Support for Gutenberg
"Flex Grid" Classes
Dark Form Styles (.form--dark)
Added "Load Deprecated Styles" option for optional deprecated styles support.
Link underline offset
Minor updates to dashboard color scheme & typography
Removed position/sticky classes from pro mode exclusions to make them available when Pro Mode is activated.
Refactored centering classes for easier management and to clean up Oxygen dependencies.
Separated global form styling inputs from dark/light form styling inputs.
Deprecated Styles (Owl & Ultra-Dark-Trans)
Added clarification for hover shade values.
Updated Server & WP Requirements
Base text size now allows decimals
Fixed object-fit--top-left and object-fit--bottom-left. These had incorrect coordinate combinations.
Breakpoint grid classes now properly target the inner wrapper in Oxygen sections again.
Display classes now take priority over almost anything else
Various Form Styling Fixes
Various fixes & tweaks for contextual menus
Fixed an issue with breakout class specificity.
Removed the flex instruction from self--center so it doesn't do too much.
Fixed an HSL issue with white trans values.
Fixed a calculation issue with .pad-section classes.
Fixed an issue causing lightboxes to not load.
Fixed an unexpected horizontal scrollbar in dashboard.
Fixed an issue where the header-height variable interphases with Bricks structure panel.
Fxied an issue with stretch class not working in Oxygen.
This is a big release with a lot of moving parts. It's been thoroughly tested by the team and installed on live environments without issue, but you should always make a backup of your site before installing it on a live site. We recommend testing it on a dev install before using it anywhere else since specific hosting environments handle updates differently.
Click on linked items for expanded details.
Completely refactored color system.
var(--{color}-comp-h) partial variable.
Entire framework now uses CSS Logical Properties for modernization and RTL support.
Enhanced Builder Functionality (Oxygen & Bricks)
Official Support for Gutenberg
"Flex Grid" Classes
Dark Form Styles (.form--dark)
Added support for disabling class chaining in Bricks Builder (Mandatory for v2.5+)
![]()
Added "Load Deprecated Styles" option for optional deprecated styles support.
Link underline offset
Minor updates to dashboard color scheme & typography
Removed position/sticky classes from pro mode exclusions to make them available when Pro Mode is activated.
Refactored centering classes for easier management and to clean up Oxygen dependencies.
Separated global form styling inputs from dark/light form styling inputs.
Deprecated Styles (Owl & Ultra-Dark-Trans)
Updated Server & WP Requirements
Fixed object-fit--top-left and object-fit--bottom-left. These had incorrect coordinate combinations.
Breakpoint grid classes now properly target the inner wrapper in Oxygen sections again.
Display classes now take priority over almost anything else.
Various Form Styling Fixes
We've got some big updates coming for v2.5, but we needed to squash some bugs before that arrives.
Fixed an issue with grids, flex, and centering working on Oxygen sections after recent update.
Bricks Forms: Fixed Submit button doesn't have the same height as other inputs
Bricks Forms: Fixed placeholder color
Bricks Forms: Fixed Radio background-color
Bricks Forms: Added Bottom Margin control to Form Fields
Bricks Forms: Added Grid Gutter control to Form Fields
Bricks Forms: Added 'Checkmark' background to checked Checkbox
WS Form: Fixed missing color value for Tabs, wsf-steps and wsf-steps-checks
WS Form: Fixed Textarea Placeholder color and opacity
WS Form: Fixed Text editor style to be consistent with other fields
WS Form: Fixed missing hover colors for Secondary Buttons
WS Form: Added support for ACSS Contextual Colors
See the 2.4 beta changelog for a full list of new features in 2.4. Nothing major was reported during the beta phase, so we're releasing 2.4 officially.
Automatically add contextual colors to Bricks
Fixed contextual hover variants
Fixed an issue where "Offset Header" feature was malfunctioning when a Bricks template element was the first item on the page.
Fixed the default color of the skip link in Oxygen.