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-xgrid items will form an irregular layout of 2 items in the first row and 1 item in the second row. The__col-4is 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-containeror.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:
- Place a grid container div inside a grid item. Just apply the normal classes to the nested grid container and its grid items.
- The grid item's div is also the grid container for the nested grid. In
this case, the
.layout3-col__grid-item-containerclass 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-content 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