3 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 19

3.1 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__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__full">
  <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>
<div class="landing-page__full">
  <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>
Source: layouts/landing-page/landing-page.scss, line 5