Enhancements

Add the Column Framework to a Page

Supported Versions

The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.

 

In This Article

 

When editing pages in your Out of the Sandbox theme, you can take advantage of our column framework to create unique and responsive page layouts. Please copy and paste the following code into your pages description box while in HTML mode "<>".

 

Creating Multiple Columns

  • One Column:

    <div class="row">
     <div class="sixteen columns">
       Add content
     </div>
    </div>

     

    Two Columns:

    <div class="row">
     <div class="eight columns alpha">
       Add content
     </div>
     <div class="eight columns omega">
       Add content
     </div>
    </div>

     

    Three Columns:

    <div class="row">
     <div class="five columns alpha">
       Add content
     </div>
     <div class="five columns">
       Add content
     </div>
     <div class="five columns omega">
       Add content
     </div>
    </div>

     

    Four Columns:

    <div class="row">
     <div class="four columns alpha">
       Add content
     </div>
     <div class="four columns">
       Add content
     </div>
     <div class="four columns">
       Add content
     </div>
     <div class="four columns omega">
       Add content
     </div>
    </div>

     

    Offset Columns:

    <div class="row">
     <div class="ten columns offset-by-three">
       Add content
     </div>
    </div>

  • Updated theme versions introduce some new column size names. Additionally, there are new helper classes that can be applied for different screen sizes.

    One Column:

    <div class="container">
     <div class="one-whole columns">
       Add content
     </div>
    </div>

     

    Two Columns:

    <div class="container">
     <div class="one-half columns">
       Add content
     </div>
     <div class="one-half columns">
       Add content
     </div>
    </div>

     

    Three Columns:

    <div class="container">
     <div class="one-third columns">
       Add content
     </div>
     <div class="one-third columns">
       Add content
     </div>
     <div class="one-third columns">
       Add content
     </div>
    </div>

     

    Four Columns:

    <div class="container">
     <div class="one-fourth columns">
       Add content
     </div>
     <div class="one-fourth columns">
       Add content
     </div>
     <div class="one-fourth columns">
       Add content
     </div>
     <div class="one-fourth columns">
       Add content
     </div>
    </div>

     

    Five Columns:

    <div class="container">
     <div class="one-fifth columns">
       Add content
     </div>
     <div class="one-fifth columns">
       Add content
     </div>
     <div class="one-fifth columns">
       Add content
     </div>
     <div class="one-fifth columns">
       Add content
     </div>
     <div class="one-fifth columns">
       Add content
     </div>
    </div>

     

    Six Columns:

    <div class="container">
     <div class="one-sixth columns">
       Add content
     </div>
     <div class="one-sixth columns">
       Add content
     </div>
     <div class="one-sixth columns">
       Add content
     </div>
     <div class="one-sixth columns">
       Add content
     </div>
     <div class="one-sixth columns">
       Add content
     </div>
     <div class="one-sixth columns">
       Add content
     </div>
    </div>

     

    Seven Columns:

    <div class="container">
     <div class="one-seventh columns">
       Add content
     </div>
     <div class="one-seventh columns">
       Add content
     </div>
     <div class="one-seventh columns">
       Add content
     </div>
     <div class="one-seventh columns">
       Add content
     </div>
     <div class="one-seventh columns">
       Add content
     </div>
     <div class="one-seventh columns">
       Add content
     </div>
     <div class="one-seventh columns">
       Add content
     </div>
    </div>

     

    Eight Columns:

    <div class="container">
     <div class="one-eighth columns">
       Add content
     </div>
     <div class="one-eighth columns">
       Add content
     </div>
     <div class="one-eighth columns">
       Add content
     </div>
     <div class="one-eighth columns">
       Add content
     </div>
     <div class="one-eighth columns">
       Add content
     </div>
     <div class="one-eighth columns">
       Add content
     </div>
     <div class="one-eighth columns">
       Add content
     </div>
     <div class="one-eighth columns">
       Add content
     </div>
    </div> 

     

    Additional Styles

    If you would like to add multiple rows of columns to a page, you will want to add the class of:

    equal-columns--clear

    to the container. This will ensure that your second row doesn’t float beside the first row. For example:

    <div class="container equal-columns--clear">
     <div class="one-third columns">
       Add content
     </div>
     <div class="one-third columns">
       Add content
     </div>
     <div class="one-third columns">
       Add content
     </div>
     <div class="one-third columns">
       Add content
     </div>
     <div class="one-third columns">
       Add content
     </div>
     <div class="one-third columns">
       Add content
     </div>
    </div>

     

    If you would like for the first and last column in your row to be flush with the container, you can add the class of: 

    equal-columns--outside-trim

    to the container. For example:

    <div class="container equal-columns--outside-trim">
     <div class="one-fourth columns">
       Add content
     </div>
     <div class="one-fourth columns">
       Add content
     </div>
     <div class="one-fourth columns">
       Add content
     </div>
     <div class="one-fourth columns">
       Add content
     </div>
    </div>

     

    If you would like for your columns to respond to the size of your browser/device, you can add classes that will only apply once your screen size reaches a certain width.  For example, to make your column full width on tablets and smaller, you can add the class of :

    medium-down--one-whole

    to the column. This would resemble the following example::

    <div class="container">
     <div class="one-third columns medium-down--one-whole">
       Add content
     </div>
     <div class="one-third columns medium-down--one-whole">
       Add content
     </div>
     <div class="one-third columns medium-down--one-whole">
       Add content
     </div>
    </div>

     

    If you would like for your column to be half the size, you could add the class of:

    medium-down--one-half

    to the column. This would resemble the following:

    <div class="container">
     <div class="one-fourth columns medium-down--one-half">
       Add content
     </div>
     <div class="one-fourth columns medium-down--one-half">
       Add content
     </div>
     <div class="one-fourth columns medium-down--one-half">
       Add content
     </div>
     <div class="one-fourth columns medium-down--one-half">
       Add content
     </div>
    </div>

     

    The same logic applies if you would like the column to become either full width or half width once you get to smaller screen sizes (eg. mobile devices). For example, the class of:

    small-down--one-whole

    could be applied like this:

    <div class="container">
     <div class="one-third columns small-down--one-whole">
       Add content
     </div>
     <div class="one-third columns small-down--one-whole">
       Add content
     </div>
     <div class="one-third columns small-down--one-whole">
       Add content
     </div>
    </div>

     

    Or the class of :

    small-down--one-half

    could be added to the column. This would resemble the following:

    <div class="container">
     <div class="one-fourth columns small-down--one-half">
       Add content
     </div>
     <div class="one-fourth columns small-down--one-half">
       Add content
     </div>
     <div class="one-fourth columns small-down--one-half">
       Add content
     </div>
     <div class="one-fourth columns small-down--one-half">
       Add content
     </div>
    </div>

     

 

Creating Multiple Columns Using Page Templates

To create columns using the "page.sidebar" and "page.narrow" templates, you'll need to make some minor adjustments to your column structure.

  • One Column:

    <div class="row">
     <div class="sixteen columns">
       Add content
     </div>
    </div>

     

    Two Columns:

    <div class="row">
     <div class="six columns alpha">
       Add content
     </div>
     <div class="six columns omega">
       Add content
     </div>
    </div>

     

    Three Columns:

    <div class="row">
     <div class="four columns alpha">
       Add content
     </div>
     <div class="four columns">
       Add content
     </div>
     <div class="four columns omega">
       Add content
     </div>
    </div>

     

    Four Columns:

    <div class="row">
     <div class="three columns alpha">
       Add content
     </div>
     <div class="three columns">
       Add content
     </div>
     <div class="three columns">
       Add content
     </div>
     <div class="three columns omega">
       Add content
     </div>
    </div>

     

    Offset Columns:

    <div class="row">
     <div class="eight columns offset-by-two">
       Add content
     </div>
    </div>

  • Due to the percentage-based grid, there is no need to change class names when working with these page templates. The instructions listed in this portion of the article will still apply to both the "page.narrow" and "page.sidebar" templates.

For a shortcut to creating multiple columns with HTML check out the Out of the Sandbox Content Creator Extension for Google Chrome

Advanced Customization

Please note that this tutorial is considered an advanced customization and is not supported by Out of the Sandbox. If you encounter difficulties with this, please contact a third party developer for more troubleshooting, customization or functionality.

Related articles