Daniel Snell @DOMARTISAN

Master of the universe

August 1, 2023

Youtube Twitter LinkedIn Medium Github

Integrate AutomaticCSS (ACSS) With Your Page Builder: A 7-Step Process

Introduction

AutomaticCSS (ACSS) is a powerful CSS utility framework designed to enhance your web development process. It provides a rich set of utility classes and CSS variables for automatic responsive, scalable, and fluid typography and spacing. This article will guide you through a 7-step process to integrate ACSS with your page builder, enhancing your web design and development workflow.

Step 1: Understanding ACSS

Before we dive into the integration process, it's crucial to understand what ACSS is and what it brings to the table. ACSS is a CSS framework specifically made for WordPress page builders. It was created by Kevin Geary, a WordPress entrepreneur and agency owner, to address the inflexibility and lack of maintainability he found in other frameworks like OxyNinja.

ACSS offers several key features:

• Utility classes: These are reusable classes that apply specific CSS properties. They can significantly speed up your development process and make your code more readable and maintainable.
• CSS variables: ACSS provides a set of CSS variables that you can use to customize your design. This feature allows for a high degree of customization and flexibility in your designs.
• Automatic responsive grids (Auto Grids): With ACSS, you can create responsive grid layouts without having to manually adjust breakpoints. This feature simplifies the setup and maintenance of responsive designs.
• Admin panel: ACSS comes with an admin panel that allows you to change global settings like base sizing, fallbacks, and colors. This feature can save you a lot of time and effort in managing your design settings.

Step 2: Installing ACSS

To start using ACSS, you first need to install it. Here's a step-by-step guide:

1. Visit the AutomaticCSS website and purchase a license.
2. After purchasing, you'll receive a download link for the ACSS plugin. Download the plugin file.
3. Log in to your WordPress dashboard.
4. Navigate to Plugins > Add New > Upload Plugin.
5. Choose the downloaded ACSS plugin file and click Install Now.
6. After the plugin is installed, click Activate Plugin.

Now, ACSS is installed and activated on your WordPress site.

Step 3: Exploring the ACSS Admin Panel

The ACSS admin panel is where you can customize your global settings. To access it, navigate to Settings > AutomaticCSS in your WordPress dashboard.

Here, you'll find several sections:

• Base Sizing: This is where you can set the base font size and spacing for your website.
• Fallbacks: Here, you can set fallback values for older browsers that don't support CSS variables.
• Colors: This section allows you to define your color palette.

Take some time to explore these settings and customize them to fit your design needs.

Step 4: Customizing ACSS Settings

With ACSS, you can customize your design settings using utility classes and CSS variables. Here's how:

• Utility classes: To use a utility class, simply add it to the class attribute of an HTML element. For example, to apply a margin of 16px to an element, you would use the class m-4 (since the base spacing unit is 4px).
• CSS variables: To use a CSS variable, include it in your CSS code like this: var(--variable-name). For example, to set the color of an element to a primary color defined in your ACSS settings, you would use color: var(--color-primary).

Remember, you can always refer

to the ACSS cheat sheet for a comprehensive list of utility classes and CSS variables.

Step 5: Integrating ACSS with Your Page Builder

ACSS is compatible with various page builders, but for this guide, we'll focus on integrating it with Bricks Builder Here's how:

1. Open your Bricks Builder editor.
2. Select the element you want to style.
3. In the Style tab, you'll find an input field for adding classes. Here, you can add your ACSS utility classes.
4. To use ACSS CSS variables, navigate to the Advanced > Custom CSS section and add your CSS code.

Remember, the process might slightly differ depending on the page builder you're using. However, the general concept remains the same: you add ACSS utility classes and CSS variables to your elements to style them.

Step 6: Applying ACSS to Your Web Design

Now that you've integrated ACSS with your page builder, it's time to apply it to your web design. Here are some tips:

• Start small: Begin by applying ACSS to a small part of your website, like a single page or component. This will help you get a feel for how ACSS works.
• Use the cheat sheet: The ACSS cheat sheet is an invaluable resource. It provides a comprehensive list of all utility classes and CSS variables available in ACSS.
• Experiment: Don't be afraid to experiment with different utility classes and CSS variables. ACSS is all about flexibility and customization, so feel free to try different combinations to achieve your desired design.

Conclusion

Integrating AutomaticCSS (ACSS) with your page builder can significantly enhance your web development process. By following this 7-step process, you'll be well on your way to creating more flexible, maintainable, and responsive designs. Remember, the key to mastering ACSS is practice and continuous learning. So, start experimenting with ACSS today and discover how it can transform your web development workflow.