Using Automatic.css in Bricks

Update on 18 Aug 2022: The info below is not up to date. Follow documentation/videos provided by Automatic.css.

---

Automatic.css is an excellent CSS framework that provides a rich set of utility classes and CSS variables for automatic responsive, scalable, and fluid typography and spacing.

While we wait for a native compatibility/integration of Automatic.css (henceforth referred to as ACSS) with Bricks, it is possible to enjoy most, if not all of its benefits today with a little bit of setup.

Step 1

Make ACSS’ css file to load AFTER Bricks’.

Using a snippets manager (I recommend and use WPCodeBox), create a new PHP snippet that loads on the front end:

Title: Load Automatic.css after Bricks’ css

Code:

<?php
add_action( 'wp_enqueue_scripts', 'bl_dequeue_acss', 11 );
function bl_dequeue_acss() {
	wp_dequeue_style( 'automaticcss' );
}
add_action( 'wp_enqueue_scripts', 'bl_enqueue_acss', 11 );
function bl_enqueue_acss() {
	wp_enqueue_style( 'automaticcss' );
}

This will work only if the CSS Loading Method at Bricks → Settings is the default Inline Styles method.

Step 2

In the Bricks editor go to Theme Styles.

Create a new style named say Global, apply it to the entire website.

Go to COLORS, bring up any color picker and create a new palette named say, AutomaticCSS. Add ACSS colors in here using their hex values.

Do not apply/select any colors in the properties like “Primary Color”.

Step 3

Add a new temporary Container.

Add five headings inside and apply your colors from the previous step for each respectively.

Inspect each heading in the front end and grab the Bricks’ variable names.

Note them in this format:

Primary: --bricks-color-tweanc
Secondary: --bricks-color-awispc
Accent: --bricks-color-yycmbl
Base: --bricks-color-bjlkhz
Shade: --bricks-color-wnpgtl

Don’t delete the Container yet.

Step 4

Add a CSS code snippet in the Header location on the front end.

Title: Override Bricks’ CSS for ACSS

Code:

:root {
    --bricks-color-tweanc: var(--primary);
    --bricks-color-awispc: var(--secondary);
    --bricks-color-yycmbl: var(--accent);
    --bricks-color-bjlkhz: var(--base);
    --bricks-color-wnpgtl: var(--shade);
}
a {
    color: var(--primary);
}
#bricks-toolbar a,
#bricks-popup.docs .title-wrapper .close,
#bricks-popup.docs .title-wrapper .link {
    color: currentColor;
}
.bricks-button {
    line-height: normal;
}
.brx-container.root:not(.pad-header--xs):not(.pad-header--s):not(.pad-header--m):not(.pad-header--l):not(.pad-header--xl):not(.pad-header--xxl) > .brx-container {
    padding: var(--section-space-s) var(--section-padding-x);
}

Replace tweanc, awispc etc. with the strings from your site (refer to the earlier step).

Save and enable.

Step 5

Create another snippet that is a copy of the above titled say “Override Bricks’ CSS for ACSS – Builder” but this time apply it to the Bricks builder only by setting the condition to Page URLs containing ?bricks= and the location as footer. Save and enable.

Anywhere you apply the colors set in Bricks, they are essentially being overridden with what’s set in ACSS settings.

Now if you bring up color picker from any control in Bricks and change any color from the AutomaticCSS palette, you can see that the color will get changed in the picker only.

The colors that are actually applied in the builder and front end will still be taken from ACSS settings.

You may delete the headings Container now.

Step 6

Edit your Global Theme Style → GENERAL → CONTAINER.

Root Container Width: Set this to whatever you have in ACSS settings (default: 1280 px).

Step 7

Import ACSS’ classes in Bricks to have a list of all the classes appear when any element’s ID/class input is clicked.

Thanks to Keviin Cosmos who shared a how-to on this in Bricks’s Facebook group and here in the comments.

I converted /wp-content/plugins/automaticcss-plugin/config/classes.json directly from Automatic.css v1.3.2 and re-formatted it so it is compatible with Bricks. It can be downloaded from here.

Select any element in the Bricks editor when editing any Page/Template and click on its ID.

Click the Import icon and drag the downloaded file from your computer over. It should add 950 classes.

FB group topic.

Note

• For buttons, add a framework class like btn--primary.
• To reduce the vertical padding for header’s container apply a class like pad-header--m.
• Keep the Automatic.css cheatsheet handy.