Skip to content Skip to navigation

Translating designs to responsive layouts

Let's take a look at an example design and think about how it can be translated to Open Framework to create the layout.

In the example below, I know I have several blocks of content. What we need to do is figure out which blocks will go in what regions in Open Framework. First, think about which content you want to show up first in mobile, then refer to the order of regions in mobile to decide on the best block placement.

Below is a wireframe that I am trying to build in Open Framework:

Example wireframe

I have now defined the order of the block content for mobile:

Example wireframe with block order overlay

And this is what it will look like on mobile:

To get my blocks to show up this way, all I need to do is figure out which regions to place them in using Open Framework's responsive regions.

(1) is the logo. I don't need to place this as a block, I just need to define it in my theme settings (Appearance > Settings > Open Framework).

(2) is the search form. For this, I need to place it in the Search Box region.

(3) is the main navigation. I will edit my main menu which is already by default placed in the Navigation region.

(4) and (5) are block content that I have created. For these to show up side by side, I can place them in the 2-Column Flow region and they will automatically span 1/2 of the width of the page.

(6), (7), and (8) are blocks of content that I can easily place in the 3-Column Flow region and they will automatically span 1/3 of the width of the page.

(9) and (10) are a little more complex. I will place them in the Footer region, and give (9) a block class of "span9" to get it to span 3/4 the width of the page. On (10) I will add a block class of "span3" to make up the 1/4 difference. These block classes override the default behavior of blocks placed in the footer (which is to fill the whole width of the region).

For more information on creating layouts, see the Creating Responsive Layouts section of the guide.