Skip to content Skip to navigation

Creating complex responsive layouts

You can create many custom complex layouts using Open Framework's block regions and the module Block Class, which lets you add CSS classes to your blocks.

To create more custom layouts, you will need to take advantage of Bootstrap's span classes that let you define the percentage width of the block within the region it is placed. Bootstrap divides its regions into 12 columns. By choosing a span width from 1-12, you can override the default block width (fills 100% of the region). For example, if you want a block to span half the width (50%) of the region in which it is placed, then you would use the span6 class. If you want your block to fill only one third of the region, you would use the span4 class (because 12 divided by 3 is 4).

There are several regions in Open Framework that allow custom span overrides:
(basically all regions except the flow and stacked regions)

  • Header
  • Main Top
  • Main Upper
  • First Sidebar
  • Highlighted (intended for system alert messages)
  • Help (intended for optional in-page help content)
  • Content Top
  • Content Upper
  • Content Body (where your page content goes)
  • Content Lower
  • Content Bottom
  • Second Sidebar
  • Main Lower
  • Main Bottom
  • Footer

Within these regions, you can place your block and add a custom span class to the block configuration in order to override the block's width.

Note: The only important thing to remember is that if you override one block's width in a region, you will need to override all the blocks within that region as well.

Let's look at an example.

How to create a custom layout

Let's say we want to create a layout like we see here at the top of our page:

Custom layout showing blocks of span3, span3, and span6

First we translate the percentages to spans. In this case, 25% turns into span3 and 50% turns into span6.

Next, make your blocks and save them, placing them into the region you want to use, in this case I might use the Main Top region to add them to the top of my page.

Before you go further, make sure you have the Block Class module installed and enabled.

Then for each block, hover over the block and click the gear, selecting Configure block.

Configure block

You should see a field to add CSS class(es). Add your span class there:

CSS classes field from Block Class module

Save your block.

Make sure to add span classes to all the blocks in the region.

Custom layouts spanning two rows

Let's say we now wanted to add a second row of blocks to our region where the second row contains a block spanning 1/3 the width and another block spanning 2/3 the width of the region.

Custom layout with two rows of blocks

To achieve this layout, first follow the instructions above to define the span classes you need to add to each block.

The trick is to force a new row, you will need to add the clear-row class to the first block on the second row (in this case, the block spanning 1/3). The clear-row class forces a new row, and you can use it whenever you are trying to create multi-row complex layouts.

To see some of these more complex layouts in action, refer to the regions overview demo page.