isotropic-2022
Share
Blog
Search
Menu

Using AutomaticCSS With Bricks Builder

By James LePage
 on July 2, 2022
Last modified on July 22nd, 2022

Using AutomaticCSS With Bricks Builder

By James LePage
 on July 2, 2022
Last modified on July 22nd, 2022

This article will take a look using Automatic CSS, a popular framework for WordPress page builders, and Bricks Builder.

With Automatic CSS Version 2.0, currently in beta, official support has been added for the Bricks Builder. Now, the framework supports both Oxygen and Bricks, with many additional builders on the roadmap.

This marks a milestone for Bricks users, alongside ACSS users. This is the first major framework available for the builder.

isotropic-2022-07-02-at-13-55-36

With it comes all the benefits of using a framework when building a website:

  • Your work is more efficient as you no longer need to manually create specific styling rules such as padding and margin
  • ACSS automatically makes most things responsive, so all you need to do is validate that things look good on mobile as opposed to re-designing for every single breakpoint
  • All styles and spacing, alongside colors and typography are standardized throughout the website making things look more professional, and easier to maintain on your end
  • By using classes, it's really easy to make global changes across your entire website. For example, you can easily change the entire color scheme by utilizing the ACSS dashboard

It's worth noting that there are some technical limitations documented by the developer behind the product. For example, variables in color field won't work until Bricks adds support for this. In the meantime, I would simply use the helper classes included in the framework to color backgrounds and texts, as this would mean that you can control your pallet from the Automatic CSS dashboard.

isotropic-2022-07-02-at-13-46-30

Actually using Automatic CSS with the Bricks Builder is relatively easy. Simply install both tools (Bricks theme first, then the framework plugin), and load the editor. Once loaded, utilize the built-in class system included in the builder to add ACSS helper classes.

For example, in this demo I made a heading element have my primary color and a wavy underline by applying two classes:

isotropic-2022-07-02-at-13-59-38

As you can see, all classes included in this framework or automatically populated into the other classes drop down built into the editor.

This is an exciting time for uses of this builder as they finally have a professional framework that is officially compatible with this tool. Users will now be able to enjoy all the features of a CSS framework with Bricks and build websites more efficiently.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
John
John
1 year ago

Thanks for the page. Just one little correction. Bricks is not installed as a plugin and will likely never be a plugin in the traditional sense. It's installed as a WordPress Template and it is advised you use the supplied child theme from the developers.

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram