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:
- 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-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-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