Previously, on my Etch site, I created a demo to highlight the use of the JSON query and opted to convert the output to ACSS JSON. The original example used ACSS 3.3.* when this site first launched. The JSON contained more than 3,200 entries and served as a good example. As version 4 progressed for DEV releases to Alpha, I kept watching the changes, and now that Alpha 4 is out and almost feature complete, I decided to do the same thing with the new CSS file. The latest version now has just over 900 entries, with all transparency options and the vast majority of utility classes removed.
Migrating to Version 4
The removal of utility classes and transparencies is the biggest issue I have found when migrating Bricks sites from version 3 to 4. The transparencies are a relatively easy fix, but the number of times I have used list--none and clickable--parent, makes migrating a little more tedious. The list–none is easy enough by adding your own global class, but the recipe for clickable–parent is a little more problematic because the new recipe has different behavior that can interfere with other links in a card or container.
Utility Classes Are Now Recipes
To guide users in the right direction and minimize ACSS overhead, the vast majority of utility classes are in the recipe section. To trigger a recipe in Etch, use the question mark (?) in the CSS editor; in Bricks, use the @ sign. Here is a list of the recipes—they are also available in the ACSS dashboard under Cheatsheet.
Color
- primary-clr
- primary-ultra-light-clr
- primary-light-clr
- primary-semi-light-clr
- primary-semi-dark-clr
- primary-dark-clr
- primary-ultra-dark-clr
- primary-hover-clr
- secondary-clr
- secondary-ultra-light-clr
- secondary-light-clr
- secondary-semi-light-clr
- secondary-semi-dark-clr
- secondary-dark-clr
- secondary-ultra-dark-clr
- secondary-hover-clr
- tertiary-clr
- tertiary-ultra-light-clr
- tertiary-light-clr
- tertiary-semi-light-clr
- tertiary-semi-dark-clr
- tertiary-dark-clr
- tertiary-ultra-dark-clr
- tertiary-hover-clr
- accent-clr
- accent-ultra-light-clr
- accent-light-clr
- accent-semi-light-clr
- accent-semi-dark-clr
- accent-dark-clr
- accent-ultra-dark-clr
- accent-hover-clr
- base-clr
- base-ultra-light-clr
- base-light-clr
- base-semi-light-clr
- base-semi-dark-clr
- base-dark-clr
- base-ultra-dark-clr
- base-hover-clr
- neutral-clr
- neutral-ultra-light-clr
- neutral-light-clr
- neutral-semi-light-clr
- neutral-semi-dark-clr
- neutral-dark-clr
- neutral-ultra-dark-clr
- neutral-hover-clr
Grid
- auto-grid–deprecated
- auto-grid
- variable-grid
- grid-1
- grid-2
- grid-3
- grid-4
- grid-5
- grid-6
- grid-7
- grid-8
- grid-9
- grid-10
- grid-11
- grid-12
- grid-1-2
- grid-1-3
- grid-2-1
- grid-2-3
- grid-3-1
- grid-3-2
- flex-row
- flex-column
- content-grid
Ipsum
- ipsum-short
Media Queries
- breakpoint-xs
- breakpoint-s
- breakpoint-m
- breakpoint-l
- breakpoint-xl
- breakpoint-xxl
- breakpoint-up-xs
- breakpoint-up-s
- breakpoint-up-m
- breakpoint-up-l
- breakpoint-up-xl
- breakpoint-up-xxl
- card-container
- container
Miscellaneous
- clickable-parent
- focus-parent
- columns
- divider-all
- divider-bottom
- divider-top
- line-clamp
- btn
- concentric-radius
- query-children
- propertyoverlap
- overlap-alt
- list-none
- border
- fade-block
- fade-inline
- fade-top
- fade-right
- fade-bottom
- fade-left
JS
- script
