ED5C123D7D3F90111134E83D2CED5BCC 864F60685C26A2F9D0FBF379C1F8C03D 8943146F78E10B22E2B38F29B7518EAD

12 Column layout

The grid is built as a 12 column layout using utility classes to set the width and breakpoints to the columns. Each row should equal 12 columns to span full width. Please note that layout found in the admin under the design tab for each CMS page should be set to 1-column and the theme should be set to Blue Acorn - Site. The page layout is not the same as creating the layout of the content.

col-ba-xs-12
col-ba-xs-1
col-ba-xs-11
col-ba-xs-2
col-ba-xs-10
col-ba-xs-3
col-ba-xs-9
col-ba-xs-4
col-ba-xs-8
col-ba-xs-5
col-ba-xs-7
col-ba-xs-6
col-ba-xs-6

Responsive

col-ba-lg-6 col-ba-md-12
col-ba-lg-6 col-ba-md-12
col-ba-xs-4
col-ba-xs-4
col-ba-xs-4

The first two columns would translate to having the containers 6-columns wide on large (lg) viewport, then break down to full 12 columns on medium (md) breakpoints. The second set would translate to having 4 columns wide.


  <div class="row">
    <div class="col-ba-lg-6 col-ba-md-12">
        <div class="box"> 6 columns wide on lg breakpoints then 12 columns on md breakpints</div>
    </div>
    <div class="col-ba-lg-6 col-ba-md-12">
        <div class="box"> 6 columns wide on lg breakpoints then 12 columns on md breakpints</div>
    </div>
  </div>


  <div class="row">
    <div class="col-ba-xs-4">
        <div class="box"> 4 columns wide on all breakpoints</div>
    </div>
    <div class="col-ba-xs-4">
        <div class="box"> 4 columns wide on all breakpoints</div>
    </div>
    <div class="col-ba-xs-4">
        <div class="box"> 4 columns wide on all breakpoints</div>
    </div>
  </div>
  

Utility Classes

<div class="row">
    <div class="col-ba-xs-12 
                  col-ba-sm-3 
                  col-ba-md-2 
                  col-ba-lg-3">
        <div class="box bg-red text-primary">3 columns on large, 2 columns on medium, 3 columns on small, 12 columns on x-small viewports with background of 'red' and font color of 'primary'</div>
    </div>
</div>

<div class="row">
  <div class="col-ba-xs-12 
                col-ba-sm-3 
                col-ba-md-2 
                col-ba-lg-4">
      <div class="box bg-secondary text-tertiary">4 columns on large, 2 columns on medium, 3 columns on small, 12 columns on x-small viewports with background of 'orange' and font color of 'tertiary'</div>
  </div>
</div>

Offsets columns

<div class="row">
    <div class="offset-ba-xs-3 col-ba-xs-9">
        <div class="box">offset</div>
    </div>
</div>