Beginners Guide To Core Framework & Bricks Builder

In this guide, I’ll introduce Core Framework and explore how you can use it specifically with Bricks Builder. However, many of these techniques apply to tools like Gutenberg and Oxygen.  

What is Core Framework?  

Core Framework is a CSS framework designed to simplify styling and ensure uniform website design. Instead of manually defining colour palettes, typography, spacing, and other styles, Core Framework enables centralised control with pre-defined (yet customisable) variables.  

You can use Core Framework as a standalone tool or integrate it into WordPress with plugins. If you’re using Bricks, there’s a commercial add-on available that further streamlines the process. While this add-on is optional, it can save time and eliminate friction when applying design elements inside Bricks.

Accessing Core Framework  

Getting started with Core Framework is easy:  

1. Visit the Core Framework Website – Sign up for a free account.  
2. Download the Plugin or Use the Web App – You can either:  
   – Download Core Framework from the website or WordPress repository.  
   – Use the free online version to test how it works before integrating it fully.  

If you’re installing the plugin in WordPress, it will appear in your dashboard under Core Framework.  

Setting Up Core Framework in Bricks  

Once Core Framework is installed, you’ll want to configure the Preferences. Some key settings include:  

– Project Title – Name your project for easy organisation.  
– Default Theme Mode – Choose light or dark mode.  
– Root Font Size – Set either 100% (16px) or 62.5% (10px), ensuring consistency between Core Framework and Bricks.  
– Screen Widths – Define your minimum and maximum breakpoints, which will also be reflected inside Bricks.  
– CSS Processing Options – Enable smooth gradients, manage post-CSS processing, and assign prefixes for custom classes.  

Pro Tip: If you’re using Bricks with Core Framework, match the framework’s settings for typography, margins, and spacing with Bricks’ theme styles for seamless integration.  

Managing Typography in Core Framework  

One of Core Framework’s best features is fluid typography, which ensures a smooth, proportional scaling of font sizes across different screen sizes.  

Key Typography Settings:  

– Base Font Size (16px default, adjustable)  
– Font Scale Ratio – Controls proportional scaling (e.g. minor second, major third).  
– Custom Heading Styles – Define text sizes for H1-H6 elements with dynamic scaling.  
– Typography Modifiers – Quickly apply bold, italic, and alignment settings.  

Once typography settings are updated in Core Framework, these changes are automatically reflected across your entire Bricks site.  

Customizing Colours and Dark Mode  

One of the most significant advantages of Core Framework is how it handles colour schemes and variables.  

– Brand Colors – Set primary, secondary, and tertiary colours.  
– Dark & Light Mode Support – Define different colours depending on the user’s selected mode.  
– Auto-Generated Variants – Enable shades, tints, and transparent variants for each colour, allowing greater flexibility without manual colour selection.  

Inside Bricks, map your theme colours to Core Framework’s global colour variables, ensuring a site-wide colour sync.  

Using Core Framework for Layouts & Components  

CSS Grid & Spacing  

Core Framework includes variables for spacing, making it easy to control layout across different screen sizes.  

For example:  
– Instead of defining margins and paddings manually, apply spacing variables (margin-xl, padding-m, etc.).  
– Use CSS Grid variables to define consistent layouts for sections, columns, and containers inside Bricks.  

Pre-Designed Components  

Core Framework includes pre-built elements for buttons, forms, and badges. Styling updates can be applied globally by applying utility classes like .btn-primary.  

If you’re accustomed to utility-first frameworks like TailwindCSS, Core Framework offers a similar approach but with customisation inside WordPress and Bricks.  

Why Use Core Framework in Bricks?  

By integrating Core Framework into Bricks, you avoid redundant styling efforts and ensure design consistency site-wide. Some benefits include:  

• Centralised design settings (colours, typography, spacing, layouts)  
• One-click light/dark mode support  
• Fully responsive scaling for fonts and elements  
• Pre-built components to speed up development.

Once everything is set up, you can save your Core Framework settings as a Blueprint in Bricks, making them reusable for future projects.  

Conclusion  

Core Framework is a game-changer for Bricks users. It enables faster workflows and maintains consistency across sites. You reduce complexity by centralising typography, colours, spacing, and layout variables while maintaining design flexibility.