BBE Theme Documentation
Getting started: BBE Theme Primer

A complete, turnkey solution for web page building / prototyping / editing / authoring, yet feather-light (complete zip=550kb). Leveraging modern browsers and HTML5. Zero plugins required. We want you to build beautiful, original websites quickly, yet still being able to tinker with each and every code line down there. And most of all, having fun thoughout the process.

BBE (Bootstrap Building Engine) comes as self-contained, easy install, one-stop WordPress Theme. It aims at making you super-productive in building original, responsive web pages instantly – while still retaining the ability to tweak all the generated HTML code. It features a powerful and fast point-and-click page builder, that outputs static HTML, that you can fully refine by hand via a built-in IDE.

If you are a beginner webmaster, and you need just to edit your own, simple website, you will enjoy BBE a lot, as it will help you building great, responsive pages with few clicks, and best of all, maintain their content and edit them with industry-leading simplicity and freedom.

If you are a frontend developer, you will really enjoy it too – as it will make your life easier while still letting you work the traditional way: digging down the code, with class.

Theme Introduction: the Reasons and the Purpose of it

BBE was born from a team of developers sharing the frustration regarding the lack of a lightweight but powerful tool to quickly prototype and deploy web pages.

We had enough of heavily database-driven Web Page Builders that slow down your server and, most of all your productivity – when you reach a certain level of experience, with their “closed” approach.

If you’re curious enough, you can read a specific blog post about the Philosophy of the BBE Theme.

Installing the Theme and enabling the Live Editor

Just download it for free (from our homepage) and activate the theme (rookie video) onto your WordPress Install – as you would do for any other WP Theme.

So, the theme’s active, what’s interesting to discover next?

BBE behaves like a standard, clean and lean WordPress Theme – built on Bootstrap 3 – until you decide to let it “RULE” a page:

Create a new page. Click the big blue button “Enable BBE on this page“- and save to confirm. That’s where the magic starts.

That’s how it looks:

Technically, clicking that button will switch the page to the BBE FullWidth Template – so that page will be completely handled by the BBE  Frontend Editing Interface. A different beast compared to your standard content editor.

Practically, it means that your page will allow for total customization, either by coding [between header and footer] AND/OR  point and click page building, handling with edge-to-edge precision all your page contents and medias – basically, all that’s between header and footer.

The usual suspects, Header and Footer are “standardized” thru all the site, and can be administrated via the Customize link on the WordPress admin bar. They can even be disabled if you want.

Your first steps within the BBE Live Editing Interface

Watch this 2 minutes walkthrough video to grasp the basic concepts of the BBE editing interface.

Basically, following a simple and straightforward approach, you will create your page adding different kinds of bricks…containers. columns, and blocks.
If you’re familiar to Bootstrap’s grid, it will feel quite totally natural.

The Live Editing Interface

After activating the BBE Live Editor on a standard WordPress Page, you will be greeted by the following screen:

Most features will be self-evident if you have some basic knowledge of how the Bootstrap 3 CSS works. If you don’t know anything about it, don’t feel discouraged. BBE is pretty idiot-proof. Let’s see in detail the main tools that live in the bottom bar.

The Viewport Indicator: a responsive help

The text “view: LG” is a useful hint that shows the active viewport size case, live!

In this case, we were displaying the web page on a desktop screen: LG stands for LarGe Screen.

Just resize your browser window and watch this label change, and help you see in which responsive case you are: LG / MD / SM / XS

These cases refer to Bootstrap’s responsive behaviour. If you don’t know what we’re talking about….no panic. You can study something about how the Bootstrap grid works on their documentation page.

The “Add new container” buttons

Those two guys will allow you to add a new space on your web page, technically a Bootstrap container (or container-fluid).

Upon creating a container, you’ll find some useful options to fill it with something more significant than it’s starting dummy content.

We’ll talk about Containers more in-depth some paragraphs below.

The usual suspects: Cancel and Save

Those buttons are pretty obvious  – but maybe you’ll like to know that each saved step (at your Save click) will be retained in the standard WordPress History – and you can recall the full html code of each step, from the standard page editing screen.

The “bricks” and their hierarchy

The essential kinds of bricks in BBE are the following, in hierarchical order:

1. CONTAINERs (green colour): the “top-level” elements
2. ROWs: horizontal groups that ensure your elements on the page are lined up properly.
3. COLUMNs (yellow colour): pretty self-evident name
4. BLOCKs (purple colour) : the “atoms” of the game

You’ll easily notice those highlighted rectangles on the page. Get used to them watching the  screenshot below which gives you an example of what they look like.

Standard and Fluid Containers

Consider containers as the root of this divide et impera game.

Two Jumbotrons in a sample page, the first one placed in a full container, and the second in a standard container.

Containers come in two flavours, of two different widths:  fluid and standard width.

Fluid-width containers can cover the full width of the web-page (the screen).

To understand the difference with a simple example, let’s see in the two screenshots below how a video would be displayed on a desktop and handheld device, placing the video inside  a fixed (standard) or fluid (full-width) container.

The Containers Contextual Menu

Each container, when hovered, will reveal a contextual menu with some useful features:

Let’s see the main features:

• Insert a new layout Row inside the container and Divide into Columns
• Insert a new layout Row inside the container and populate with a FullWidth Component
• Duplicate the container
• Delete il container (destroying immediately the content)

After the horizontal separator line, some advanced features:

• Reorder the layout Rows enclosed in the container
• Reorder the  Containers on the webpage.
• Edit Container Properties revealing the panel shown below
• Open the HTML editor allowing total control of what’s inside the container.

The Container Properties panel

Using this panel you will be able to achieve some typical desires:

• Change the container type (width): standard (fixed) or fluid.
• Let the height of the container be normal (elastic) or force the container to 100vh (window height)
• Add some bottom Margin to the container
• Add some vertical Padding  to the container
• Assign some background patterns to spice up the container
• Change background color of the container content and of the wrapper
• Assign a background image, pasting the URL of your jpg of choice
• Set the background image behaviour (Scroll/Fixed).

Dividing a Container into Columns

When creating a new container (or using an existing Container’s the “Insert Row and Divinde into Columns” contextual menu option) you are asked if you want to divide your horizontal space (“Row”) into Columns.

You will then be able to choose from a number of pre-built column schemas, of equal and different width.

This is what it looks like:

The Columns Contextual Menu

Each column, when hovered, will reveal a contextual menu with some features:

• HTML Editor – to manually edit that column’s HTML
• Reorder Columns, to horizontally drag and rearrange columns in their row.
• Add Block, to add another Block after the last one in the column.

Blocks: the “atoms” of your page

The Blocks are the game’s smaller “atoms” – where you can place the BBE Components.

Blocks typically reside inside columns, or directly into fluid containers.

Each Block has it’s own contextual menu, accessible clicking the purple “Edit Block” button when hovering the block.

In this contextual menu you will find:

• Some Custom option, based on the enclosed component
• HTML Editor: triggering a live HTML editor that lets you edit only in that Block scope. If you love to code, that’s your arena!
• Copy Block: quite self evident, it allows for copy-pasting inside the same page
• Paste Block: as above
• Delete Block: delete block and it’s content
• Reorder Blocks: vertically rearrange blocks inside the Column that holds them
• Replace with Component: this will open the Component Browser window….it’s like a catalog of possible objects that can go there.

Reordering Containers, Columns and Blocks in BBE

In the video below you will see how you can easily reorder elements:

• You can vertically rearrange Containers
• You can horizontally rearrange Columns
• You can vertically rearrange Blocks
• Just remember to confirm your reordering will after you’ve done!