Consistent Website Design – Core Framework & Gutenberg

One of the easiest ways to achieve this is using a CSS framework. In this tutorial, we’ll explore how to combine the Core Framework with Gutenberg and the Bricks add-on to create a consistent and customizable website design.

What You’ll Need:

• Core Framework (Free):
• Gutenberg (Free, part of WordPress):
• Bricks Add-on for Gutenberg (Paid):

Let’s explore the steps to setting up and using these tools to create a consistent design system for your website.

Step 1: Install Core Framework

The first step is to install the Core Framework Gutenberg plugin. You can download and install it from the WordPress plugin repository if you haven’t already. Once installed, navigate to the Core Framework section in your WordPress dashboard.

Enabling the Gutenberg Add-on

Inside the Core Framework settings, go to the Add-ons section. Here, you can enable the Gutenberg add-on, which is entirely free. This will allow you to use Core Framework’s design tools directly within the Gutenberg editor.

Enabling the Bricks Add-on

If you’re using the Bricks add-on (a paid feature), enter your license key and enable it. This will give you additional design flexibility when working with Gutenberg and Core Framework.

Step 2: Set Up Your Design System

Once you’ve enabled the necessary add-ons, you can start setting up your design system. Core Framework allows you to define global styles such as:

• Typography (font sizes, line heights, etc.)
• Colours (primary, secondary, background colours, etc.)
• Spacing (margins, padding, etc.)
• Borders and Shadows

These global styles will ensure your website maintains a consistent look and feel across all pages.

Step 3: Create a Template with Gutenberg

Now that your design system is set up, let’s create a template using Gutenberg. In this example, we’ll use a property listing page.

Using Gutenberg for Content

In the Gutenberg editor, you can add your content as usual. For example, you might add text, images, and custom fields (using Advanced Custom Fields or similar plugins) for property location, type, and price.

The benefit of using Gutenberg with Core Framework is that you can apply your global styles directly to the content blocks. This ensures your design remains consistent, even if different users add content.

Step 4: Customize Content with Core Framework Classes

One of Core Framework’s most powerful features is the ability to apply CSS classes to individual content blocks in Gutenberg. Let’s walk through an example of how to customize a paragraph block.

Applying a Background Color

1. Select the paragraph block you want to customize.
2. You’ll see the Core Framework options on the right-hand side.
3. Navigate to the Background tab and choose a colour from your predefined palette. As you scroll through the options, you’ll see a live preview of the changes in the editor.

Adjusting Typography

1. Go to the Typography tab.
2. You can adjust the font size, line height, and other text properties.
3. Make the text italic or change it to uppercase. These options are available under Text Modifiers.

Adding Padding and Margins

1. In the Spacing tab, you can control the padding and margins for the block.
2. Set padding for all sides (top, bottom, left, right) or adjust them individually.
3. Add medium padding to all sides to give the text some breathing room.

Adding Borders and Shadows

1. If you want to add a border, go to the Borders tab.
2. Set the border width, colour, and radius (for rounded corners).
3. You can also add shadows to give the block a more dynamic look.

Step 5: Preview and Save Your Changes

Once you’ve applied your customizations, click Save to apply the changes. You can preview the page to see how it looks with the new styles.

In this example, we’ve customized a paragraph block with a background colour, adjusted typography, added padding, and applied a border. These changes are consistent with the global styles defined in Core Framework, ensuring that the design remains cohesive across the entire website.

Step 6: Using Bricks for Advanced Customization

If you’re using the Bricks add-on, you can take your design even further. Bricks allows you to create more complex layouts and designs while still maintaining the consistency provided by Core Framework.

For example, you can use Bricks to create custom headers, footers, and other layout elements while leveraging the same global styles and classes you’ve set up in Core Framework.

Conclusion

Combining Core Framework with Gutenberg and the Bricks add-on can create a powerful and consistent design system for your website. Core Framework’s global styles ensure that typography, colours, spacing, and other design elements remain consistent across all pages. At the same time, Gutenberg and Bricks allow you to customize individual content blocks.

Whether building a simple blog or a complex property listing site, this setup will help you maintain a professional and cohesive design.