Skip to content Skip to navigation

Creating basic responsive layouts

In order to create a responsive layout using Open Framework, all you need to do is place blocks into the appropriate regions. The trick is figuring out which region to place your blocks.

How do I know what region to place my blocks in?

First, review the page on translating designs to responsive regions and the page on understanding the responsive regions. These should give you some idea of where to start.

Here are some common layout solutions using Open Framework regions:

Desired layout Regions to use
A grid of two blocks across

2-column-flow

A grid of three blocks across

3-column-flow

A grid of four blocks across

4-column-flow

A full-width block above your grid of blocks

Content Top

Content Upper

Content Body

A full-width block below your grid of blocks

Content Lower

Content Bottom

A full-width block above the content body and the sidebars

Main Top

Main Upper

A full-width block below the content body and the sidebars

Main Lower

Main Bottom

To understand the order of the responsive regions, see this page on content hierarchy.

How to place your blocks

The simplist way to place your blocks is by editing the block configuration. Hover over the block, click the gear, and choose Configure block.

Configure block

In the Region Settings, choose which region in which you would like to place your block from the Open Framework theme dropdown.

Region settings

You can also use the module Context to create more management block layouts. See our page on how to manage layouts using Context.