Essential Tips For Mastering Bricks Builder & Core Framework

Setting Up Core Framework and Bricks Builder

1. Account and Plugin Setup: Ensure you have an account with Core Framework and have set up the plugin inside Bricks Builder.
2. Setting Preferences in Core Framework:
   • Go to Preferences.
   • Set your max screen width (e.g., 1366px). Ensure this matches the setting in Bricks Builder.
3. Configuring Bricks Builder:
   • Open a page with Bricks active.
   • Go to Settings → Theme Styles.
   • Create a theme style and name it.
   • Set conditions to enable it across your website.
   • Match the Element container’s Max Width to Core Framework’s setting (in this example 1366px).
4. Breakpoints Synchronization:
   • Bricks Builder and Core Framework have different default breakpoints.
   • Enable custom breakpoints in Bricks: Settings → General → Custom Breakpoints.
   • Match Bricks’ breakpoints to Core Framework’s settings.

Typography and Styling

1. Setting Typography:
   • Open the Typography tab in Core Framework.
   • Set minimum and maximum font sizes and scaling ratios.
   • In Bricks, go to Theme Styles → Typography.
   • Use Core Framework variables for consistent typography.
2. Default Styling:
   • Use Core Framework to set default values for elements like padding in sections.
   • Select the appropriate spacing in Bricks using Core Framework variables.

Advanced Customizations

1. Creating Selector Groups:
   • Use Core Framework to create custom definitions for styles.
   • Example: Setting default page content to 100% vertical height.
2. Integrating Variables:
   • Add Core Framework variables to Bricks Builder for consistent styles across your website.
   • Example: Set default font size using Core Framework variables.
3. Overriding Bricks Builder Styles:
   • Use Core Framework to override Bricks Builder settings.
   • Example: Automatically apply a specific padding to all sections in Bricks.

Exporting and Reusing Settings

• Once your settings are perfected, export them from Core Framework for use in future projects.

Conclusion

By following these steps, you can streamline your workflow, ensuring a consistent and efficient design process.