Welcome to another premium tutorial. This one is one of the most requested tutorials, so we’ve decided to create a complete beginner’s guide to using the Automatic CSS plugin. Let’s dive right in!
⚠️ Just a quick note, this post is new. I am updating the content on a daily basis and adding videos to complement the tutorials, these will follow shortly. If you are a paid member, just log in occasionally to see the new updates. This topic is also available in the Bricks Builder course under the bonus section.
First of all, what is ACSS?
ACSS stands for “Advanced Combat Sighting System.” It is a type of firearm optic system…
OK, I’m just kidding with you.
ACSS stands for Automatic Custom Style Sheets, better known as Automatic CSS. It is a plugin Kevin Geary and his team developed to work with website builder tools such as Bricks Builder and Oxygen Builder. Others will be added to the list in the future from what I can understand.
Essentially, ACSS is dubbed as a utility framework for page builders. With it installed on your WordPress site with your favorite website builder, you will have greater control over every aspect of your design from fonts, colors, spacing, responsive design, grid layouts, and more.
One of the features that I love the most about ACSS is the utility classes and variables as using them can save you a lot of time and help you be more efficient with your projects. There’s even a cheat sheet that you can reference.
If you want to learn more about ACSS, check out the website here.
Getting started with ACSS
So this is a guide for complete beginners. We will take a look at some more advanced features in later tutorials, but essentially this is a getting-started user guide for anyone building a website with Bricks and learning about ACSS.
OK, so let’s get started with the basics. Installing ACSS with a fresh install of Bricks Builder from complete scratch!
Installing Bricks Builder + The Child Theme
Skip this step entirely if you already have a WordPress site and Bricks installed.
First of all, you need to install Bricks Builder and the child theme. These are two separate files. Remember that Bricks is not a plugin like Oxygen Builder, it’s an actual theme. You will need to install the Bricks Builder (parent) theme first, then the child theme after.
You will know if you have done this correctly if you look at the active theme, it should be the Bricks Child theme.
Don’t forget to activate both themes and enter your license credentials.
If you are new to Bricks Builder, I recommend you check out my Bricks Builder Course here. If you are a yearly or lifetime member, you will have access to these courses automatically. If you are familiar with Bricks Builder, then move on.
Installing ACSS
Installing ACSS is the same as installing any other plugin. There is nothing special you need to do. You can watch the short video as well as read the instructions below.
Download the plugin zip file from your account, Install it into your WordPress site, activate the plugin, then enter your license key (find this in your account dashboard > view licenses). Nothing more can be said about this process.
If you get stuck, you may need to contact the ACSS support team. At the time of writing this tutorial article, I couldn’t find the link to any documentation on the ACSS website regarding getting set up. However, you do get access to community support and Kevin has created a YouTube channel with a bunch of useful tutorials on setting up and using ACSS.
Setting up ACSS
So now we get to actually set up ACSS for our website design project. In this demonstration, we’re using Bricks Builder and I’m installing ACSS on a demo website hosted locally. Remember you can use ACSS with Oxygen too.