Skip to content Skip to navigation

Understanding the responsive regions

Open Framework relies on a set of responsive regions to create complex responsive layouts. First, let's look at how the regions shift at each responsive breakpoint.

Starting with a large desktop width, as the screen width becomes smaller, first you will notice the second sidebar drop below the content region. Then the content region will drop below the first sidebar. Within each region, you may also notice flow and stacked behaviors adjusting the widths of blocks at different breakpoints and bumping blocks down the page.

See the diagram below (click to view bigger) for how these regions respond at different screen widths.

Responsive regions overview diagram

Flow and Stacked Regions

There are two special kinds of regions in Open Framework that help us create complex layouts, "flow" regions and "stacked" regions. These types of regions are found withint the Content section of the page template.

Flow regions force blocks to flow from one row to the next, bumping blocks down a row when there is not enough room.

Flow Region Diagram

Stacked regions force blocks to stack one on top of the other.

Stacked Region Diagram

By combining flow and stacked regions, you can create many different complex layouts.

Open Framework's Regions

responsive regions diagram

In the diagram to the left, we outline the responsive regions in the Content section of the page template (excludes sidebars, header, and footer). Green indicates a flow region, and orange indicates a stacked region.

The gray regions you see in the diagram, as well as the Header, Main Top, Main Upper, Main Lower, Main Bottom, and Footer regions, serve a multi-purpose use case and are helpful when creating custom layouts. When you place a block in these regions, it will by default fill the full width of the region, but you can override this behavior with custom block widths using span classes. To learn more about creating layouts, please see the Creating Responsive Layouts section of the guide.

View the Regions demo page to see all of Open Framework's regions in action.

Complex Layout Examples

Below are diagrams showing the way a complex layout can change at each breakpoint in the responsive design. These diagrams cover many use cases and possible combinations and are the source for our development of the responsive behavior found in Open Framework.

A complex layout with sidebars:
(Red is Main Top, Blue is Content, Green is Second Sidebar)
 

A layout without sidebars:

Micro-layouts inside the Content area: