How to Setup Automatic CSS With Bricks Builder

This video guide outlines the setup process for using Bricks Builder in conjunction with the Automatic CSS (ACSS) framework to ensure seamless integration.

Starting from a fresh WordPress install, the first step is to install and activate the Bricks Builder theme, followed by the Bricks Builder child theme. Using a child theme is recommended as it prevents potential overwriting of custom changes during updates. Next, the Automatic CSS plugin is installed, and the setup process begins by configuring the website’s width, typically recommended between 1280 and 1440 pixels for optimal device compatibility.

The color palette is configured next, with predefined primary, secondary, accent, base, and shade colors. These colors can be adjusted as needed and include automatically generated shades. For typography, the root font size is set, defaulting to 62.5% (10 pixels per rem), though it can be customized based on personal preference. Font settings allow the addition of custom fonts, either through file uploads or Google Fonts integration, with detailed instructions available in supplementary tutorials.

Attention is given to configuring buttons, inputs, and forms, with default values provided for ease of use. However, users can adjust these settings to suit specific design needs. The video guide emphasizes the importance of ensuring the utility classes, particularly the padding and margin scales, match the settings in Bricks Builder. By default, a 0.5 increment scale is used, which should be mirrored in the Bricks Builder settings to avoid inconsistencies.

Additional steps include verifying breakpoints and making any necessary adjustments to ensure both Bricks Builder and Automatic CSS function optimally together. The guide reassures users that most settings do not need to be altered from their defaults to begin building effectively, highlighting the framework’s user-friendliness and flexibility for future customizations.

In summary, the setup process involves:

1. Installing and activating the Bricks Builder theme and child theme.

2. Installing the Automatic CSS plugin.

3. Configuring website width and color palette.

4. Setting root font size and adding custom fonts.

5. Adjusting button and input settings as needed.

6. Ensuring utility class scales in ACSS match Bricks Builder settings.

These 6 steps are explained in more detail below:-

1. Installing and Activating the Bricks Builder Theme and Child Theme

1. Purchase Bricks Builder:
   • Go to the Bricks Builder website and purchase the theme.
   • Download the Bricks Builder theme package from your account.
2. Install Bricks Builder:
   • Log in to your WordPress admin dashboard.
   • Navigate to Appearance > Themes.
   • Click Add New and then Upload Theme.
   • Choose the Bricks Builder theme package you downloaded and click Install Now.
   • Once installed, click Activate.
3. Create and Install a Child Theme:
   • It’s best practice to use a child theme to preserve customizations.
   • You can create a child theme manually or use a plugin like “Child Theme Configurator”.
   • To create manually:
     • Create a new folder for your child theme in wp-content/themes.
     • Inside this folder, create two files: style.css and functions.php.
     • In style.css, add the following header

        
/*
Theme Name: Bricks Child
Template: bricks
*/
        
    

Create a file named functions.php in your child theme folder and add the following code:

        
<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
        
    

• Compress the child theme folder into a .zip file.
• Install and activate the child theme via Appearance > Themes > Add New > Upload Theme.

2. Installing the Automatic CSS Plugin

1. Purchase and Download Automatic CSS:
   • Go to the Automatic CSS website and purchase the plugin.
   • Download the plugin package from your account.
2. Install Automatic CSS:
   • From your WordPress admin dashboard, navigate to Plugins > Add New.
   • Click Upload Plugin, choose the Automatic CSS plugin file, and click Install Now.
   • Once installed, click Activate.

3. Configuring Website Width and Color Palette

1. Configure Website Width:
   • Go to Bricks > Settings > Layout.
   • Set the desired container width (e.g., 1200px) and save changes.
2. Set Up Color Palette:
   • Navigate to Automatic CSS > Colors.
   • Define your primary, secondary, and accent colors.
   • Configure shades and tints if needed.
3. Sync Colors with Bricks:
   • Go to Bricks > Settings > Colors.
   • Ensure the color palette matches the settings in Automatic CSS for consistency.

4. Setting Root Font Size and Adding Custom Fonts

1. Set Root Font Size:
   • Navigate to Automatic CSS > Typography.
   • Set the root font size (e.g., 16px).
   • Save the settings.
2. Add Custom Fonts:
   • Go to Bricks > Settings > Fonts.
   • Add custom fonts either via Google Fonts or by uploading custom font files.
   • Define font weights and styles as needed.

5. Adjusting Button and Input Settings as Needed

1. Configure Button Styles:
   • Go to Automatic CSS > Buttons.
   • Set global styles for buttons, such as padding, border-radius, and font size.
   • Customize the primary, secondary, and tertiary button styles.
2. Adjust Input Fields:
   • Navigate to Automatic CSS > Forms.
   • Configure styles for input fields, text areas, and select menus.
   • Set padding, border styles, and focus states.

6. Ensuring Utility Class Scales in ACSS Match Bricks Builder Settings

1. Verify Utility Class Scales:
   • Navigate to Automatic CSS > Scales.
   • Check the scales for margin, padding, typography, and other utilities.
2. Match Settings in Bricks Builder:
   • Go to Bricks > Settings > CSS.
   • Ensure that the spacing and typography scales in Bricks Builder align with the scales set in Automatic CSS.
   • Adjust any discrepancies to ensure consistency.
3. Test and Verify:
   • Build a sample page using Bricks Builder and apply various utility classes from Automatic CSS.
   • Ensure that the design outputs match the intended styles and scales.
   • Make any necessary adjustments in either Bricks Builder or Automatic CSS settings.

By following these steps, users can ensure a smooth integration between Bricks Builder and Automatic CSS, providing a solid foundation for building responsive and aesthetically consistent websites. If you currently use Elementor and want to change to a better performing platform, we can show you the complete guide covering how to convert Elementor to Bricks Builder.