How to use BricksPlus Wireframe Templates

Step 1 - Create a copy

Start by selecting your Wireframe from Bricksplus wireframe templates – BricksPlus. Next, click on the “Copy Template” option.

Step 2 - Paste it

After copying the wireframe template, please proceed to paste it onto your page.

Your Wireframe template will be right here, complete with all the elements you desire. Now, you have the freedom to edit or redesign them according to your preferences. It's truly as simple as that.

Reuseable Classes

You can use all of our reusable classes that can really boost your productivity. Check out this quick documentation and video tutorial to get started.

Video tutorial

Classes

How & where to use

.bplus__section

The '.bplus__section' class is utilized to incorporate padding or spacing within sections.

.bplus__container

The '.bplus__container' class is employed to control the width of the container.

.bplus__heading--h1

.bplus__heading--h2

.bplus__heading--h3

.bplus__heading--h4

.bplus__heading--h5

.bplus__heading--h6

These classes are tailored for various heading sizes and styles on your website. They enable control over heading font size, font family, font weight, and line height.

Before implementation, ensure to customize the default class properties according to your preferences, as we have initially set basic properties.

.bplus__subtitle

.bplus__body--text

This class is employed to manage subtitle or body font size, font family, font weight, and line height.

Before implementation, ensure to customize the default class properties according to your preferences, as we have initially set basic properties.

.bplus__button–primary

.bplus__button–secondary

.bplus__button–flat

These classes are designed specifically for buttons. They allow you to customize button properties such as padding, border settings (including border color, border radius, and border width), background color, text color, and font properties (such as font family, font size, font weight, and line height).

Before implementation, ensure to customize the default class properties according to your preferences, as we have initially set basic properties.

.bplus__color--primary

.bplus__color--secondary

.bplus__color--accent

These classes are designed for modifying text colors, such as headings, paragraphs, and subtitles. Before use, please customize these classes with your own brand or preferred colors, as we have initially set basic color.

.bplus__color--bg-primary

.bplus__color--bg-secondary

.bplus__color--bg-accent

.bplus__color--bg-dark

.bplus__color--bg-light

To change the background color of any Bricks elements such as sections, containers, blocks, divs, nestable elements, icon boxes, etc., please customize the following classes with your own brand or preferred colors, as we have initially set basic color.

The cool thing is that when you change a value in a class, it automatically updates all elements on your website that use that class. For example, if you use our class '.bplus__heading--h2' for all your h2 headings, changing the font size in one place will instantly change it for all instances of h2 headings.

It would be really enjoyable if you create your whole website using our wireframes because it will save you a lot of time in development.