3 layouts Layouts

The layout styling for major parts of the page that are included with the theme. Note: some Panels layouts are included in other parts of the system and are not documented.

Source: styles.scss, line 30

3.1 layouts.layout-center Layout Center

All other layouts should be nested inside this centered layout to ensure that content does not get too wide on very large screens.

Applying a .layout-* class to the same HTML element as .layout-center would cause that element's grid to mis-align with the rest of the grid on the page, but this component will automatically detect the other .layout-* class and automatically use the .layout-center--shared-grid variant instead.

Examples
Default styling
This is layout center that has content is centered on larger screens.
.layout-center--shared-grid
If .layout-center is applied to the same div as another .layout- class, then this variant should be used to prevent the shared layout's grid from mis-aligning. Note: Each time a new .layout- component is created, this component will need to be modified.
This is layout center that has content is centered on larger screens. 
<div class="layout-center [modifier class]">
  This is layout center that has content is centered on larger screens.
</div>
Source: layouts/layout-center/_layout-center.scss, line 5

3.2 layouts.layout-3column Responsive 3-column grid

The .layout-3col layout is a responsive grid layout that is:

  • 1 column at mobile sizes
  • 2 columns at tablet sizes
  • 3 columns at desktop sizes

The .layout-3col class is used on the container div for the layout. A grid item in the container can be created using one of the following classes:

  • .layout-3col__full : 3-column wide grid item; starts a new row
  • .layout-3col__left-content : 2-column wide grid item, spanning columns 1 and 2; starts a new row
  • .layout-3col__right-content : 2-column wide grid item, spanning columns 2 and 3; starts a new row
  • .layout-3col__left-sidebar : 1-column wide grid item spanning column 1; starts a new row on tablet screens
  • .layout-3col__first-left-sidebar : 1-column wide grid item spanning column 1; spans column 1 and starts a new row on tablet screens only
  • .layout-3col__second-left-sidebar : 1-column wide grid item spanning column 1; spans column 2 on tablet screens only
  • .layout-3col__right-sidebar : 1-column wide grid item spanning column 3; starts a new row on tablet screens
  • .layout-3col__col-1 : 1-column wide grid item spanning column 1; starts a new row
  • .layout-3col__col-2 : 1-column wide grid item spanning column 2
  • .layout-3col__col-3 : 1-column wide grid item spanning column 3; starts a new row on tablet screens
  • .layout-3col__col-4 : At tablet sizes, the __col-x grid items will form an irregular layout of 2 items in the first row and 1 item in the second row. The __col-4 is a "hidden" item that does not appear on the large-screen 3-column grid, but is a 1-column wide grid item spanning column 2 on tablet screens.
  • .layout-3col__col-x : 1-column wide grid item spanning column 1; when several of these are used inside a .layout-3col__grid-item-container or .layout-3col, the first one is positioned like __col-1, the second like __col-2, etc.

There are 2 ways to do a nested grid:

  1. Place a grid container div inside a grid item. Just apply the normal classes to the nested grid container and its grid items.
  2. The grid item's div is also the grid container for the nested grid. In this case, the .layout3-col__grid-item-container class should be added to the div to ensure its nested grid items align with the parent grid.
Example
The .layout-3col__full grid item.
The .layout-3col__left-content grid item.
The .layout-3col__right-sidebar grid item.
The .layout-3col__right-content grid item.
The .layout-3col__left-sidebar grid item.
The .layout-3col__right-content grid item.
The .layout-3col__first-left-sidebar grid item.
The .layout-3col__second-left-sidebar grid item.
The .layout-3col__col-1 grid item.
The .layout-3col__col-2 grid item.
The .layout-3col__col-3 grid item. Don't forget to look for the .layout-3col__col-4 grid item at tablet sizes.
The .layout-3col__col-4 grid item.
The first .layout-3col__col-x grid item in this nested grid.
The second .layout-3col__col-x grid item in this nested grid.
The third .layout-3col__col-x grid item in this nested grid.
The fourth .layout-3col__col-x grid item in this nested grid.
The fifth .layout-3col__col-x grid item in this nested grid.
The sixth .layout-3col__col-x grid item in this nested grid. 
<div class="layout-3col ">
  <div class="layout-3col__full">
    The <code>.layout-3col__full</code> grid item.
  </div>
  <div class="layout-3col__left-content">
    The <code>.layout-3col__left-content</code> grid item.
  </div>
  <div class="layout-3col__right-sidebar">
    The <code>.layout-3col__right-sidebar</code> grid item.
  </div>
  <div class="layout-3col__right-content">
    The <code>.layout-3col__right-content</code> grid item.
  </div>
  <div class="layout-3col__left-sidebar">
    The <code>.layout-3col__left-sidebar</code> grid item.
  </div>
  <div class="layout-3col__right-content">
    The <code>.layout-3col__right-content</code> grid item.
  </div>
  <div class="layout-3col__first-left-sidebar">
    The <code>.layout-3col__first-left-sidebar</code> grid item.
  </div>
  <div class="layout-3col__second-left-sidebar">
    The <code>.layout-3col__second-left-sidebar</code> grid item.
  </div>
  <div class="layout-3col__col-1">
    The <code>.layout-3col__col-1</code> grid item.
  </div>
  <div class="layout-3col__col-2">
    The <code>.layout-3col__col-2</code> grid item.
  </div>
  <div class="layout-3col__col-3">
    The <code>.layout-3col__col-3</code> grid item. Don't forget to look for the <code>.layout-3col__col-4</code> grid item at tablet sizes.
  </div>
  <div class="layout-3col__col-4">
    The <code>.layout-3col__col-4</code> grid item.
  </div>
  <div class="layout-3col__full layout-3col__grid-item-container">
    <div class="layout-3col__col-x">
      The first <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The second <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The third <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The fourth <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The fifth <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The sixth <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
  </div>
</div>
Source: layouts/layout-3col/_layout-3col.scss, line 1

3.3 layouts.layout-swap Layout swap

Uses absolute positioning and selective padding to make 2 elements appear to swap places in the visual order while maintaining their original HTML source order.

Example
This element comes first in the HTML source order.
This element comes second in the HTML source order.
<div class="layout-swap">
  <div>This element comes <strong>first</strong> in the HTML source order.</div>
  <div class="layout-swap__top">This element comes <strong>second</strong> in the HTML source order.</div>
</div>
Source: layouts/layout-swap/_layout-swap.scss, line 4