Category: Builder Configuration

Back to Docs

Navigation

Setting Up ACSS with Bricks Builder

If you’re using Bricks Builder and Automatic.css, please follow the setup steps below.

Option #1: Automatic Setup

We provide two settings files to establish the default settings for your Bricks project automatically. One is a Bricks Settings file and the other is a Bricks Theme file.

Warning: These files should be used to start a new project. Uploading them to an existing project will overwrite your settings and defaults.

Step #1: Import Bricks Settings File

Download this Bricks Settings Blueprint file (.zip), unzip it to expose the .json file, and upload the .json file to your Bricks Settings Panel:

Step #2: Import Bricks Theme File

Bricks uses Global Theme Styles to control a lot of your website’s default styling. Most of this should be left undefined, but a few settings need to be set up.

Download this Bricks Theme file (.zip), unzip it to expose the .json file, and then upload the .json file to the Bricks Global Theme area.

Create New Theme Style in Bricks
Create New Theme Style in Bricks
Upload Bricks Theme Style JSON File
Upload Bricks Theme Style JSON File

Once you’ve uploaded both files, you’re good to go. You can now proceed with customizing any empty settings based on your preferences (such as setting your font family in Typography > Body/Headings).

Option #2: Manual Setup

If you don’t want to use our settings files, you can configure the settings manually. Here are the steps:

Step #1: Configure Bricks Settings

Navigate to Bricks > Settings in the WordPress Admin:

Bricks Builder Settings
Bricks Builder Settings

Configure as follows:

  • General
    • Post Types = Pages
    • Gutenberg Data
      • Load into Bricks = Off
      • Save Bricks Data = Off
    • SVG Upload
      • Administrator = On
      • Editor = On
      • Author = Off
      • Contributor = Off
    • Miscellaneous
      • Disable Bricks Open Graph = On
      • Disable Bricks SEO Meta = On
      • Generate Custom Images Sizes = Off
      • Disable Skip Links = Off
      • Smooth Scroll = Off
      • Enable Delete Bricks Data Button = Off
      • Query Bricks Data in Search = Off
    • Custom Breakpoints = On
    • Convert = Off
  • Builder Access
    • Administrator = Full
    • Editor = Edit
    • Author/Contributor/Subscriber = No Access
    • Code Execution = Administrator Only
  • Templates
    • Disable Default = Off
    • Public Templates = Off
    • My Templates = Off
    • Remote Templates = Frames (Optional)
    • Convert Templates = Off
  • Builder
    • Disable Autosave = On
    • Builder Mode = Dark
    • Language = User Preference
    • Toolbar Link = Preview
    • Control Panel = All Off
    • Canvas / Disable Element Spacing = On
    • Structure Panel = All On
    • Element Actions = Wrap All As Block
    • Disable WP REST API = Off
    • Dynamic Data = All On
  • Performance
    • Disable Emojis = On
    • Disable Embed = Off
    • Disable Google Fonts = On (Recommended)
    • Disable Lazy Loading = On
    • Disable JQuery Migrate = On
    • Cache Query Loops = Off
    • Add Element ID/Class As Needed = On
    • Disable Class Chaining = On (REQUIRED)
    • CSS Loading Method = External

Once you’ve configured the settings, it’s time to setup your Global Theme Styles.

Step #2: Global Theme Styles

Open Bricks Builder by editing any page. Once in the editor, click the settings wheel toward the top left:

Bricks Global Styles
Bricks Global Styles

Next, click on Theme Styles. Once the panel opens, click the plus sign to add a new theme:

Create New Theme Style in Bricks
Create New Theme Style in Bricks

Give your Theme Style a name and click “Create.”

The first thing you need to do is assign your new theme style to your entire website. You can do that in the Conditions tab:

Bricks Theme Style Conditions
Bricks Theme Style Conditions

Warning: If you don’t assign your theme styles, you won’t see them at all and ACSS won’t work properly. Make sure you assign the styles to your entire website.

Here are the rest of the settings (panels & settings that aren’t mentioned require no changes):

  • Typography
    • Set your Font Family for both body and headings.
  • Element – Container (Required)
    • Width: Set to var(--content-width)
  • Element – Div (Recommended)
    • Set Display to Flex
    • Set Direction to Column
  • Element – Code (Recommended)
    • Set Theme to Tomorrow Night
  • Element – Heading (Recommended)
    • Set Default Tag to H2
  • Element – Image
    • Caption = No Caption

Caution: Setting other global styles in Bricks can cause conflicts with ACSS. Make sure you know exactly what you’re doing if you want to set any other global style defaults in Bricks.

That’s it! Bricks is now setup and ready to work properly with ACSS!