Skip to content Skip to navigation

How to Use OFW

Open Framework is currently best used with blocks. Place blocks into new responsive regions to enable certain responsive behaviors. Although right now Open Framework does not add sophisticated responsive behavior for Display Suite or Panels regions, we are working on adding this support soon.

Modules that Play Nice

Open Framework works with the Block Class, BEAN, and Context modules to place your blocks into the responsive regions for sections of your site. Block Class lets you add classes to your blocks which can force blocks to span a specific width, or add classes that style images. Context will let you re-use blocks in different regions on different pages.

Span Overrides

In Open Framework, we take advantage of Twitter Bootstrap's set of "span" classes to force blocks to span a certain number of columns. For example, if you are placing blocks into the Main Top region (a region which by default force blocks to span the full width of the region), you can add a .span8 class to your first block and a .span4 class to your second block to get a 2:1 ration on the page. See the span classes in action on the Region demo pages.

Note: To start a new row of blocks within a given region when you are using span overrides, use the .clear-row class on the block with which you want to start the new row. Our intention is to remove the need for this class eventually.

responsive regions diagram

New Responsive Regions

Normally, when you place a block in a region, it fills the full width of the region. We have left several regions behaving in this fashion, including: Main Top, Main Upper, Content Top, Content Upper, Main Lower, Main Bottom, and Footer. These regions are helpful when creating custom ratios of block content, for example using a span override of span8 on your first block, and span4 on your second block to get a 2:1 ratio.

Open Framework also provides a set of new responsive regions inside the content region that provide both "flow" and "stacked" behavior. In the diagram to the left, green indicates a flow region, and orange indicates a stacked region. We designed this set of regions to support most use cases we had found in studying a large sampling of site layouts.

View the Regions demo page to see them in action.