Bricks Builder

Bricks Builder Integration Addon

This integration represents a bridge between the comprehensive functionalities of Core Framework and the advanced capabilities of Bricks Builder, one of the premier page builders available. Our integration is engineered to be lightweight and straightforward, ensuring a perfect alignment of classes, colors, and variables between Core Framework and Bricks Builder's native functionalities. It facilitates an effortless utilization of Bricks' native auto-suggestions and color systems.

Video Showcase

All Features

As an essential extension of Core Framework, this addon enhances your development journey within Bricks Builder, making it more fluid and intuitive. It provides visibility over all styles applied to your elements directly within Bricks Builder and introduces additional features to simplify your workflow. Highlights of its capabilities include:

• Variable User Interface: Easily select variables through a visual UI, accessible via right-click on the input fields.

• Variable Auto-Suggestion: Custom variables are conveniently suggested within a fully-customized auto-suggestion dropdown, organized for easy access based on relevance.

• Synchronization with Core Framework Classes: Core Framework classes are automatically synchronized with Bricks Builder's native auto-suggest feature for a seamless design experience.

• Instant Preview of Class and Variable Styles: Effortlessly hover over classes and variables to preview their effect on your elements instantly, allowing for quick visual adjustments.

• Theme Mode Toggle: Switch between dark and light themes with a simple click on the included toggle in the top bar, enabling versatile visual exploration.

Is the Bricks Builder Integration Essential?

While not mandatory, the Bricks Builder Integration addon comes highly recommended to enhance your development process, offering several advantages:

• Visualize all styles within Bricks Builder without the need for front-end refreshes to observe changes.

• Real-time element updates upon hovering over auto-suggestions, allowing for a preview of how classes and variables will appear before their application.

• Streamline the application of classes and variables to elements, reducing the process to a mere two clicks.

• Direct theme toggling between dark and light modes from within Bricks Builder, bypassing the need to navigate the Core Framework interface.

In essence, the Bricks Builder Integration addon is a valuable asset for developers seeking to streamline their workflow and enhance the efficiency of their development process, providing a more intuitive and effective design environment.

This addon is available at https://coreframework.com/marketplace/bricks-builder-addon

Bricks Builder Styles Setup

Option #1: Import Our Blueprint

A lot of the default styling for your website comes from the Theme Styles in Bricks. In here, we can add Core Framework variables so that your site is streamlined and ready to work with Core Framework. The first option we recommend is to import our own JSON so that you quickly have the base setup.

To do this, open up any page with Bricks to access the builder.

From the builder, click on the cog at the top left to access the settings:

Next, click on Theme Styles and then click on the "+" icon to create a new theme style. From here, simply click on the "import" button and choose our JSON blueprint which you can find linked below:

Option #2: Manual Setup

You can also set up your Bricks Theme Styles manually if you choose not to use our JSON file. Below is a guide to get you started with the basic configuration:

First, within the Bricks Builder editor, open up the settings by clicking on the cog:

From the 2 options, click on Theme Styles. Let's go ahead and set up a new theme style by clicking on the "+" icon:

Give your theme style a name and then click on Create:

Below are the elements you need to edit. If the elements are not listed below, then you do not need to change anything for them.

Conditions:

It is important to set this to be Entire website, so that your styles will work across your whole website.

General:

Here, it is important to set the website's background color. This is crucial especially when using the dark mode option, as it relies on the variable of var(--bg-body). Set the site background to a background color of var(--bg-body).

Links:

Let's set the typography color of your links to the primary color using the var(--primary) variable.

Typography:

Once again, very important for when using the dark theme, we will need to give our typography some variables. For body, we will first set the color here to var(--text-body), and let's also change the font size to var(--text-m). This will ensure fluidity of sizes across the website.

Next, for "All headings", we will set the color here to var(--text-title).

Element - Section:

Here, we will need to add some padding to our sections so that they are responsive and fluid. Please add the following variables from top, right, bottom, left:

• var(--space-2xl)

• var(--space-m)

• var(--space-2xl)

• var(--space-m)

Element - Container:

• Width: var(--max-screen-width)

Element - Heading:

We recommend changing the default tag here to be h2 - these are the most common headings across websites.

Element - Image:

Please set the caption here to: No caption.