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.

3.1 #layouts.landing-pageumn Responsive 3-column grid

The .landing-page layout is a responsive grid layout that is:

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

The .landing-page 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:

  • .landing-page__full : 3-column wide grid item; starts a new row
  • .landing-page__left-content : 2-column wide grid item, spanning columns 1 and 2; starts a new row
  • .landing-page__right-content : 2-column wide grid item, spanning columns 2 and 3; starts a new row
  • .landing-page__left-sidebar : 1-column wide grid item spanning column 1; starts a new row on tablet screens
  • .landing-page__right-sidebar : 1-column wide grid item spanning column 3; starts a new row on tablet screens
  • .landing-page__col-1 : 1-column wide grid item spanning column 1; starts a new row
  • .landing-page__col-2 : 1-column wide grid item spanning column 2
  • .landing-page__col-3 : 1-column wide grid item spanning column 3; starts a new row on tablet screens
  • .landing-page__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.
  • .landing-page__col-x : 1-column wide grid item spanning column 1; when several of these are used inside a .landing-page__grid-item-container or .landing-page, 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 .landing-page__full grid item.
The .landing-page__left-content grid item.
The .landing-page__right-sidebar grid item.
The .landing-page__right-content grid item.
The .landing-page__left-sidebar grid item.
The .landing-page__col-1 grid item.
The .landing-page__col-2 grid item.
The .landing-page__col-3 grid item. Don't forget to look for the .landing-page__col-4 grid item at tablet sizes.
The .landing-page__col-4 grid item.
The first .landing-page__col-x grid item in this nested grid.
The second .landing-page__col-x grid item in this nested grid.
The third .landing-page__col-x grid item in this nested grid.
The fourth .landing-page__col-x grid item in this nested grid.
The fifth .landing-page__col-x grid item in this nested grid.
The sixth .landing-page__col-x grid item in this nested grid. 
<div class="landing-page ">
  <div class="landing-page__full">
    The <code>.landing-page__full</code> grid item.
  </div>
  <div class="landing-page__left-content">
    The <code>.landing-page__left-content</code> grid item.
  </div>
  <div class="landing-page__right-sidebar">
    The <code>.landing-page__right-sidebar</code> grid item.
  </div>
  <div class="landing-page__right-content">
    The <code>.landing-page__right-content</code> grid item.
  </div>
  <div class="landing-page__left-sidebar">
    The <code>.landing-page__left-sidebar</code> grid item.
  </div>
  <div class="landing-page__col-1">
    The <code>.landing-page__col-1</code> grid item.
  </div>
  <div class="landing-page__col-2">
    The <code>.landing-page__col-2</code> grid item.
  </div>
  <div class="landing-page__col-3">
    The <code>.landing-page__col-3</code> grid item. Don't forget to look for the <code>.landing-page__col-4</code> grid item at tablet sizes.
  </div>
  <div class="landing-page__col-4">
    The <code>.landing-page__col-4</code> grid item.
  </div>
  <div class="landing-page__full landing-page__grid-item-container">
    <div class="landing-page__col-x">
      The first <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The second <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The third <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The fourth <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The fifth <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
    <div class="landing-page__col-x">
      The sixth <code>.landing-page__col-x</code> grid item in this nested grid.
    </div>
  </div>
</div>

3.2 #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--has-unnested-child variant instead.

Examples
Default styling
This is layout center that has content is centered on larger screens.
.layout-center--has-unnested-child
If .layout-center is applied to the same div as another .layout- class, then this variant should be used to fix the grid alignment. 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">
This is layout center that has content is centered on larger screens.
</div>

3.3 #layouts.two-column Two column

Example
The left column.
The left column. 
<div class="two-column">
    <div class="two-column__left">
      The left column.
    </div>
    <div class="two-column__right">
      The left column.
    </div>
</div>