While we include an extensive selection of Blocks you can use within your site in the page editor, there is always going to be an instance where the look you envision is something that requires you creating a custom Block to fill the need. If you have a working knowledge of HTML and CSS, creating a Block of your own can be easily accomplished. This goal of this 3 part article is to familiarize you with how the Block structure works, how to add content to a Block, and how to style the content with Custom CSS.

The BoldGrid Block Structure

BoldGrid uses a grid system that is based on Bootstrap. To fully understand the structure and Grid System BoldGrid uses, we recommend you review the documentation for Bootstrap 3.3. We will provide an overview of what is needed to accomplish creating your own, but there are a lot of responsive utilities and classes within Bootstrap that can be used within your design.

Since BoldGrid uses Bootstrap for a foundation, having a good knowledge of the predefined classes is essential to creating Blocks that behave as expected across different sized screens. The basic structure of a Block is shown below.

BoldGrid requires a containing element to wrap site contents and house our grid system. When using “container-fluid”, the row is full width, whereas the class “container” indicates a fixed width, which would be dictated by the CSS being used in the theme you are using.

The Content

The content in a Block for BoldGrid should rest inside of columns that are within the 3 divs explained previously. Bootstrap uses a system of rows and columns for layout. Each row has a total column width of 12. This can be divided into one or more columns as illustrated here:

While Bootstrap does have an additional class larger than col-md-*, it is not used within the BoldGrid system since the need to break from >1000 px is not required. Here is table with information about the three separate breakpoints included in the Grid System for BoldGrid.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px
Class prefix .col-xs- .col-sm- .col-md-
# of columns 12
Column width Auto ~62px ~81px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

The following code is an example of how to create a single full width content section in your Block, that will show full width on all devices, such as phone, tablet and desktop.

The following code is an example of how to create a content section in your Block that will show 4 full width columns on your phone, 2 rows of 2 columns on your tablet, and 1 row with 4 columns on your desktop.

Congratulations! You now know how to create a basic BoldGrid Block, and how the structure of a Block is composed. Now its time to add content to your Block

Leave a Reply