Core Framework in Bricks

Core Framework in Bricks

Core Framework is a free CSS framework that can be used in standalone mode (webapp on their site).

They also sell an optional WordPress plugin that includes Bricks integration (besides Oxygen and Gutenberg).

In this tutorial, we shall look at how to get started with Core Framework’s plugin in Bricks.

Installation

Download the Core Framework plugin from your dashboard.

Upload and activate it in your WordPress admin.

Click “View” under Your Purchases in CF dashboard, click on your license key and paste it at CoreFramework → Addons under Bricks.

Match container width

The default container width in Bricks is 1100px and that in Core Framework is 1400px.

Decide on what you want your container width to be and ensure that this value matches in both.

For changing this in Bricks, you’d need to first create a sitewide theme style.

If you haven’t already, edit any Page or template with Bricks editor.

Click on Settings (gear icon) at the top left, click + to create a new theme styled named say, Global.

Under CONDITIONS set it to Entire website.

Under ELEMENT – CONTAINER, set the width value.

At CoreFramework → Preferences set the same value in Max screen width. (this will make sure all the fluid spacing & typography values reach their maximum when the container is at its maximum width)

Click the Save changes button.

Match breakpoints

By default these are the breakpoints in Bricks: 1279px, 991px, 767px and 478px.

and the default breakpoints in Core Framework are: 1400px, 992px, 768px and 480px.

Decide on one of the above set of values (or can be totally custom, if you want).

If you would like to change the breakpoints in CF, click on any one of the categories at the top like “Colors”, click on “All breakpoints” dropdown, select your breakpoint, click “Edit current media query” button and Apply.

Let’s change Bricks’ breakpoints to match those in CF.

Go to Bricks → Settings → General → Custom breakpoints and enable Custom breakpoints.

In the Bricks editor click the 3 vertical dots at the top center.

Click the Edit icon next to each and update the values.

When done it should be something like this:

Explore the framework

Set your desired colors in CF, especially the brand colors – primary, secondary and tertiary. Add shades, tints and dark mode versions of each color if needed.

The defaults are fine to begin with and you can always come back later and change these. As long as the color values are not hard coded in the editor, you should be fine. Thanks to the CSS variable-based design system like this, colors and other settings can be updated in CF and the site gets updated automatically.

Go through other sections like Typography, Spacing and tweak as needed.

Check the classes and variables in Layouts, Designs, and Other sections so you know what is where. You will find yourself often referring to these to get the class names especially when you are new to the framework.

If you want your links to have a specific color, edit your global theme style and set it under LINKS.

You may want to do the same for the hover state.

[Suggestion] Set body text font size

Under the TYPOGRAPHY control group:

We are setting the font-size property for body selector to a fluid value that ranges from 16px at 320px (Min screen width) to 18px at 1400px (Max screen width) assuming you haven’t changed the values in CF.

[Suggestion] Set section padding

Under the ELEMENT – SECTION control group:

Top and bottom: var(--space-2xl)

Left and right: var(--space-s)

Usage

You are now ready to use Core Framework’s utility classes and variables in the Bricks editor.

The CF Bricks integration plugin has a nice time-saver in the form of a convenient contextual popup that can be summoned by right-clicking on any input control or ⌘-clicking it.

There’s also a variable autocomplete after typing v or - in the relevant style inputs, which will preview the values on the page as you hover over them.

Here’s a short screencast (no audio) showing how an auto-responsive posts grid can be built in Bricks whilst using a couple of utility classes and variables of Core Framework:

Note: This is only for a quick demonstration and does not take into account best practices or accessibility.

Customizing the framework

The framework can also be customized, extended by adding your own selector groups or variable groups (and disabling existing ones if not needed).

This can be useful for adding your own CSS defaults that you may find yourself always adding to every site built with Bricks.

Below is an example some common styles that can work well as sensible defaults for Bricks’ sites.

  • Add a min-height to the body of 100vh, to prevent Bricks’ footer from ever moving up on smaller pages.
  • Add default section padding (without having to create a Bricks theme settings).
  • Prevent Bricks’ default focus styles from being visible unless tabbing via keyboard.

You could also add in default link styles and other common typography CSS this way, as an alternative to setting them up with Bricks’ theme settings in every new site you work on.

This can all be saved as a new ‘project’ in the Core Framework website ready to export for use on future Bricks’ projects.

Another example where all custom CSS has been written in a single selector group:

Selectors used in the above for quick copy and paste:

body
:where(.brxe-section)
body.bricks-is-frontend :focus
body.bricks-is-frontend :focus-visible
:where(.brxe-accordion .accordion-content-wrapper) a, :where(.brxe-icon-box .content) a, :where(.brxe-list) a, :where(.brxe-post-content) a:not(.bricks-button), :where(.brxe-posts .dynamic p) a, :where(.brxe-shortcode) a, :where(.brxe-tabs .tab-content) a, :where(.brxe-team-members) .description a, :where(.brxe-testimonials) .testimonial-content-wrapper a, :where(.brxe-text) a, :where(a.brxe-text), :where(.brxe-text-basic) a, :where(a.brxe-text-basic), :where(.brxe-post-comments) .comment-content a, .brxe-product-content a, .brxe-product-short-description a, .brxe-product-tabs .woocommerce-Tabs-panel a
Get access to all 537 Bricks code tutorials with BricksLabs Pro

7 comments

  • Leslie Zhan

    At CoreFramework → Preferences set the same value in Max screen width. (this will make sure all the fluid spacing & typography values reach their maximum when the container is at its maximum width)

    but usually we add default left and right padding to sections, so if we set the max screen width in CF as 1400px, when the all the fluid spacing & typography values reach their maximum ( the viewport width is 1400px), the container width would be 1400px - section padding * 2. right?

  • Very useful article, thanks!

    I have a problem though. The size of the fonts are not scaling when I am in the Bricks editor and the happens in the Bricks page preview. When the page is saved and viewed in the public page the font sizes scale correctly.

    Any idea what the problem might be?

  • I bought the CoreFramework Bricks integration. I was not happy and asked via all channels I could find for a refund in accordance to their "no questions asked"-refund policy. I have not heard back from them in any way or got my 119€ back...
    Can not recommend :/

    • Luke Allen

      Hi Julian,

      Luke here from the Core Framework team. I am sorry to hear of your negative experience. I would just like to clarify a few things.

      Any emails sent to hello@coreframework.com will not get filtered to our ticketing system which is why we did not see your request for refund. We also actively check the Facebook group which is our busiest channel, but saw no posts from you there either. Since your actual ticket came through 2 days ago, we will likely initiate the refund the first thing on Monday morning.

      We appreciate you giving Core Framework a try, and sorry to hear you do not recommend it.

  • James Owen

    Excellent write-up!

    In "Match Container Width", should Core's "max screen width" value (1400px) be used in Bricks' "max-width" setting instead of "width"?

    • A
      David Browne

      Bricks kind of does that backward. Ideally, we'd be setting the maximum width of elements using the max-width property, but since the beginning they've done it the other way - using width (with the max-width set to 100%), so to override Bricks' default styles we must stick with using width.

Leave your comment