Fabrizio Van Marciano

available for hire

Ultimate Beginners Guide To Using ACSS in Bricks Builder [Article + Videos 10m:04s]


Welcome back to another tutorial. This was one of the most requested tutorials on the list, so I’ve created a complete beginner-friendly guide to using the Automatic CSS plugin. Let’s dive right in!

⚠️ Just a quick note, this post is new, and although I try to keep the content up to date, sometimes it is difficult because ACSS is a constantly evolving plugin. If something is missing from this tutorial, you can let me know via the contact page.

First of all, what is ACSS?

ACSS stands for “Advanced Combat Sighting System.” It is a type of firearm optic system designed to…

OK, let me stop, I’m just kidding with you. I’m trying to also throw off Google’s algorithm.

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.

Essentially, ACSS is dubbed as a utility framework for page builders. With it installed on your WordPress site powered by your favorite website builder, you will maintain greater control over every aspect of your design from fonts, colors, spacing, responsive design, grid layouts, and more.

One of the features I love the most about ACSS is the utility classes and simple styles tokens. There is too much to discover about this plugin so I’ll keep things simple throughout this tutorial.

If you want to learn more about ACSS, check out their website here for more information.

Getting started with ACSS

Just as a reminder, this is a beginner’s ACSS guide. 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 or Oxygen and learning about ACSS.

OK, so let’s get started with the basics. For most of the tutorials in this post, we’ll be using ACSS with a Bricks Builder website. Let’s install ACSS with a fresh install of Bricks Builder from complete scratch! Check out the video 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 set up ACSS for our website design project. Once again, as a reminder we’re using Bricks Builder and I’m installing ACSS on a demo website hosted locally. Remember that you can use ACSS with Oxygen too. Van Marciano Pro is built on Oxygen and ACSS.

ACSS Video

[ACSS Video Tour + Demo Coming Soon]

Once you have everything installed and set up correctly, you can navigate to Automatic CSS in your WordPress dashboard to start exploring your options.

If you’re feeling a little overwhelmed by all of the options in ACSS, one thing I’ve learned is that you do NOT have to make changes to every single setting inside the styling options.

According to the team at ACSS, most of this stuff works right out of the box, which is great if you’re just getting started. Also, what you change, depends considerably on the goal of your website design project. Let’s dive in.

1. Viewport

Read through the notes or watch the short video below.

If you’re starting with a brand new website project, as in you have installed WordPress and the page builder of your choice, and you’re using ACSS for the first time, here you can control each viewport size in px. At the time of updating this tutorial, we were working with ACSS version 2.7.3

Here you will find settings for website dimensions and breakpoints (active breakpoints).

⚠️ Important: One thing you need to make a note of is the website width and XL breakpoint value. I believe that these values need to be identical to avoid any problems. So, if your website width is set to 1280px for example, the XL breakpoint also needs to be the same (1280px). In addition, when you create a new theme style for your website inside of Bricks Builder, make sure that the container element size width is the same value of 1280px as our example.

Most of the other values on this page can remain as default. Again, what you change hinges on the goal of your website design project.

You have some options to add additional breakpoints, XXL and XS. If you want to create a layout optimized for large screens such as TVs, the XXL breakpoint might be something you want to turn on.

Body

For the body, you can turn on the boxed layout for your entire website and you can also set the base background color. The default is white. If the theme of your website is generally dark, here you can set this to your primary dark background color.

The website background color input can be confusing if you are completely new to the world of CSS. I mean, what the heck is var(–white) supposed to mean and why can’t you just put white?

Well, the color is written in the form of a CSS variable.

A what now?

It means the default background color is white. You could change this to something else like one of the colors from your palette, which we’ll talk about next.

By the way, if you want to learn more about CSS variables, in their absolute basic form, check out this post.

Viewport video

2. Palette

Next up is deciding the colors of your site. Automatic CSS makes creating color palettes very easy. But I know, you’re still confused about the whole CSS Variables thing. Don’t worry too much about that for now.

By the way, all of these options are available in Bricks Builder. So you’re probably wondering why on earth would you want to add another plugin to your site that does the same darn thing.

Because the palette feature in ACSS offers defined options. Here you can set your action, primary, secondary, accent, and base colors, as well as shades and contextual colors. Once set, you can go about designing your website using the colors from your ACSS palette in Bricks Builder. It becomes useful when you need to change one of the colors later on. Instead of doing this in your theme styles, or worse, page by page, you can do it inside of ACSS once, and it will change it across your website instantly.

Color palette video –

For each item in your color palette, you can drill down deeper and adjust the shades, as shown in the video above. Although you don’t have to do this manually. All you have to do is enter the main color in hexadecimal value and the shades will automatically get generated for you. You can then go in and fine-tune the HSL value of each shade should you wish to.

So to recap, in the palette, you can set –

  1. Action – This is for your buttons and links.
  2. Primary – The most used color of your website. This could be the same as your action color.
  3. Secondary – The alternate to your primary
  4. Accent – The least used color on your website
  5. Base – The darkest color of your website (For text, dark backgrounds, etc)
  6. Contextual – Set the main contextual colors of your site

You can also turn off some colors if you are planning on using a small set of colors.

3. Typography

Next up we have typography. Here we have some important options but once again, most of this should be fine right out of the box. What you change depends on your website design goals. That’s always going to be the case.

Root font size

Like in Bricks, here we can set the HTML root font size. The default is 62.5% and this makes it easy to calculate font sizes from REM to px (@62.5% 1.6rem = 16px). You can set your root font size to 100% if you like, however, the maths then becomes a bit harder to work out the rems. I would recommend leaving this at 62.5%. I have a quick guide on using px and rems here if you need help.

Make sure, that you are not trying to change the value inside of your Bricks theme settings under typography. For instance, you have 100% set in your ACSS and you’re trying to change the setting inside of Bricks to something else. It won’t work. The ACSS setting overrides this.

Headings and Text

Here you can define values for the headings and text size and color (text). You can leave everything as default and your website’s typography will resize in fluid movement on various screen sizes. Or you can fine-tune the values to meet the needs of your project.

Typography video

[VIDEO COMING SOON]

4. Spacing

Next, we can add customization to how the elements on our pages are spaced out. This is one of my favorite features in ACSS because what you can do here is make all of the spacing between sections, elements, etc consistent.

ACSS makes it very easy to use what’s already there, however, you can customize this further. For example, you may want to tweak the amount of padding you have at the top and bottom of your sections., or adjust the spacing between grid boxes, etc.

Spacing video

[VIDEO COMING SOON]

So as you might have seen by now, you don’t need to change much inside of ACSS. Basically, instead of defining any of the properties inside of your Bricks theme settings, you can do it all here in ACSS for greater control.

For buttons and links, I would recommend going through each option to define styles and changes depending on how you want them to appear on your site.

Personally, I don’t use this feature because I like to create my own fancy-styled buttons with CSS. If all you’re looking to have is some plain Jane buttons then you can use this feature to your heart’s content.

6. Additional styling

Under the additional styling options tab, you have many options to refine certain elements of your site. To be honest, you know what I’m going to say. If you’re just starting with your website and new to all of this, just leave all of these alone, they work fine out of the box.

Accessibility: It’s completely understandable that as a designer and UX developer, you may find the balance between accessibility and aesthetics challenging. I would be lying if I said I didn’t. However, it’s important to note that accessibility doesn’t have to compromise the design or aesthetics of a website, not always, anyway. Creating an accessible design can enhance the user experience for everyone, not just those with disabilities.

Things you should NOT ignore are –

1. A website’s color contrast.
2. Provide clear and concise information for your web forms including labels.
3. Prioritizing functionality and usability. Ensuring that interactive elements are easily navigable and that users can complete tasks efficiently.
4. Using Semantic HTML.
5. Designing layouts that can adapt to different screen sizes and devices.

7. Options

Under options… well, you’ll find even more options. No pun intended.

One thing you might want to pay attention to is the framework settings. Here you can deactivate the pro mode to make ACSS 50% lighter, unless, of course, you are planning on using utility classes to impact things like backgrounds, spacing, margins, overlays, etc. For the most part, I like and recommend using custom classes but it is a personal choice.

8. Other features

Other features such as Frames we’ll talk about separate topics. Frames, of course, you will need a Frames membership to use.

9. Forms

Forms let you set global styling for your forms. This feature supports the native form builder in Bricks, as well as WS Forms and Fluent Forms.

If you use a third-party plugin to create your forms not mentioned above, such as Piotnet Forms, then ignore this feature altogether, because PiotnetForms customization options if far superior.

Using ACSS utility classes in your design

One question I get a lot from students learning from my Bricks Builder Course is – should I use custom classes or utility classes from something like ACSS or even BricksForge?

This is 100% a personal preference.

I prefer to create custom utility classes. You can easily create a range of utility classes to affect things like background colors, spacing, dark and light text, heading styles, etc. These are important if you want to maintain some consistency in your layout and design.

Why do I prefer to create my own utility classes? Because I can easily remember them by heart without looking at a long list. But, do what works best for you.

If you have ACSS, of course, take advantage of some of the utility classes since they’ve already been created for you. Remember that you can refer to the utility classes cheat sheet if you need to know what a certain class does, which is very useful. Then you can simply go to the builder in Bricks and type the name of the utility class you want to use, and it should be there. Remember to turn Pro Mode back on only if you want to use those classes associated with it.

Wrapping up!

OK, so we’ve come to the end of our mini ACSS beginners guide. I hope you’ve found this one useful. The thing to remember is that you don’t have to use all of the features in this plugin. Most will be useful and will certainly help you to create a more consistent design when using Bricks or Oxygen Builder, but for the most part, not everything is essential. Have fun with it, and look out for more tutorials in the future using ACSS.

Get access to my courses and expert tutorials!

Everything you need to design your website with WordPress, Oxygen, Bricks Builder, Bricks Builder, plus over 100 video tutorials, code snippets, templates, Discord Community, and more.

Join Van Marciano Pro

FREE WEB DESIGN LESSON

SIGNUP FOR MY FREE 40-MINUTE OXYGEN BUILDER COURSE TASTER