Blocks
Blocks is the official Core Framework wireframe kit featuring BEM, A11Y and Global Components - all set up for you! Perfect for rapid web design.
Last updated
Blocks is the official Core Framework wireframe kit featuring BEM, A11Y and Global Components - all set up for you! Perfect for rapid web design.
Last updated
✅ Features:
300+ pre-built, design-ready layouts.
Focus on accessibility, BEM classes, and clean HTML structure.
Takes full advantage of the Core Framework utility classes, variables & components.
Dark and Light theme-ready out of the box.
Easily customizable and responsive by design.
Works out of the box with default Core Framework settings (.core project optional).
WooCommerce layouts (Coming Soon!)
Will be continually updated with new layouts.
To use Blocks, you need to have Bricks Builder and Core Framework installed and activated. Follow the steps below to get started:
Install and activate the Bricks Builder theme.
Install and activate the Core Framework plugin with default mode (full experience).
Activate the Bricks Builder addon under Core Framework -> Addons.
Go to Bricks → Settings → Templates and enter the URL and Password in the Remote templates section.
Open a page or template in Bricks and check that you can access the Remote templates.
Additional steps to make sure everything else works smoothly:
SVG: To make sure that sections with SVGs work correctly, please make sure to enable SVG uploads for Administrator in Bricks -> Settings -> General.
Code: To make sure that sections with custom code work correctly, please enable Code Execution under Bricks -> Custom Code.
Blocks is now set up and ready to go! ✅ 🎉
Blocks embraces a hybrid approach to web design with a thoughtful combination of utility classes, variables and BEM methodology in an effort to strike a perfect balance between consistency, customization, modularity, and maintainability, ultimately enhancing your design and development experience.
Blocks utilizes Core Framework’s native Components as much as possible so that you can tweak your styles from within the Core Framework dashboard. These include button, badge, card, icon, link, avatar, divider and input etc.
These components have default Core Framework styles out of the box that you can tweak inside Core Framework dashboard.
Blocks comes with a variety of reusable global components with custom BEM classes that can be reused across your designs. These include:
Blocks utilizes Core Framework’s default utility classes and variables to take full advantage of our powerful live editor, allowing you to visually control every aspect of your project with Core Framework dashboard.
In combination with Core Framework's built-in utility classes and variables, Blocks is equipped with custom BEM classes, providing a more scalable, maintainable, and flexible approach for your web projects compared to relying solely on utility classes.
We have designed almost all of the sections in such a way that there’s little to no edits required on your part. However, there may be some exceptions where you need to tweak some things in order to make things work the way you need. We will discuss some of these instances below:
Header 4 features a centred logo with the nav menu split in two parts. The menu needs to have even number of items and behaves like a traditional menu on mobile.
Limitations:
The menu needs to have even number of items (2, 4, 6, 8, etc)
The menu behaves like a traditional menu on mobile.
Here's the custom CSS that makes the magic happen:
This CSS is applied to the custom class .header__menu-split
Explanation:
With the logo set to order 2. Order 1 and 3 above defines the order of the nav items to the left (1) and right (3) of the logo.
The (-n + "number") targets nav menu items to the left of the logo and (n + "number") targets nav menu items to the right of the logo.
The CSS above works for menus with 4 links. If your menu has a total of 6 links, simply use (-n + 3) and (n + 4) to make it work.
Header 5 features a dynamic nav menu with the last link that should look like a button. For that, the last menu item needs to have a .btn class.
Step by Step Guide:
In your WordPress dashboard, go to Appearance -> Menus
Click on Screen Options on the top right of your screen and check CSS Classes under Show advanced menu properties. This will enable the CSS Classes input field under menu item settings.
Now add your desired Core Framework button class to the last menu item inside the CSS Classes (optional) input field without the dots, i.e. btn.
For sections with stacked cards (cards stack on each other on vertical scroll), we’ve added two extra sections on top and bottom named “HEIGHT FOR DEMO” in the structure panel for demo purposes since they need some space on top and bottom to work properly. Feel free to remove these sections after you import your layouts that have stacked cards.
To ensure optimal functionality of our slider elements, which utilize the Bricks slider component, Slider (Nestable), powered by Splide, please follow the detailed steps below. We have identified an issue with the speed control when using the autoscroll feature within Bricks’ options. The following instructions will guide you in configuring Bricks’ Slider for the desired performance.
Include the Splide Extension Auto Scroll Script
On the page containing your Slider element, insert a code block before the Slider element with the following code:
Replace 'your-slider-id' with the actual ID of your Slider element. To find the ID, click on the Slider element in Bricks and check the ID, which will be in the format #brxe-c9f28f. In this case, we would use c9f28f as the ID in the code.
Configure Custom Options in Bricks
After adding the code block, we will now configure the Slider element in Bricks:
Click on the Slider element.
Navigate to Options and set the Options type to Custom.
In the Custom options box, add the desired options for the Splide (Slider) element. Below is an example configuration used on our showcase website:
For a full list of Splide options, please visit this page. By following these steps, you will ensure that the Bricks’ Slider component operates smoothly with the desired autoscroll speed control.
Please note that if there are 2 sync sliders on the same page, one of them might not work as they have some shared BEM classes. In that case, you will need to edit and replace classes in the code and the relevant slider elements.
Sections with tables have a custom scroll instruction element that is set to display on mobile landscape and below only since the table container is set to be overflow: auto in order to make the table mobile responsive.
For sections that contain a map, we are using iframe embeds instead of the Google Maps API. You can avoid the API dependency by simply embedding the map by following these steps:
Find any location on Google Maps and click the share button.
Copy the iframe HTML code from Embed a map tab.
Paste the code into the code element with class .map
Blog and Single Post sections are query loop compatible to be dynamic data ready out of the box. In order for them to be displayed properly on your site, you need the required WordPress content and may need to tweak the query loop settings according to your needs. Please refer to Bricks builder’s guides on Dynamic Data and Query Loop for more details.
When you import any layout with custom code, you’ll be required to sign the code to execute it. This is a code security measure by Bricks which you can read more on here.
