162 lines
5 KiB
SCSS
162 lines
5 KiB
SCSS
// 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.
|
|
//
|
|
// Markup: layout-3col.twig
|
|
//
|
|
// Style guide: layouts.layout-3col
|
|
|
|
.layout-3col,
|
|
%layout-3col {
|
|
// We set the context to flow, so that this container can be used in most
|
|
// places in the HTML, i.e. it must be nested inside something that has
|
|
// padding.
|
|
@include zen-grid-container($context: flow);
|
|
|
|
&__full,
|
|
&__left-content,
|
|
&__right-content,
|
|
&__left-sidebar,
|
|
&__right-sidebar,
|
|
&__first-left-sidebar,
|
|
&__second-left-sidebar,
|
|
&__col-1,
|
|
&__col-2,
|
|
&__col-3,
|
|
&__col-4,
|
|
&__col-x {
|
|
@include zen-new-row(both);
|
|
@include zen-grid-item-base();
|
|
@include zen-grid-item(1, 1);
|
|
}
|
|
|
|
@include zen-respond-to(m) {
|
|
// Since our container's context is "flow" and we changed the gutter size,
|
|
// we need to re-apply the container's negative left/right margins.
|
|
@include zen-grid-container($context: flow);
|
|
|
|
&__full,
|
|
&__left-content,
|
|
&__right-content,
|
|
&__left-sidebar,
|
|
&__right-sidebar {
|
|
@include zen-grid-item(2, 1);
|
|
// Since we changed the gutter size for this media query, we need to
|
|
// re-apply the padding to every grid item.
|
|
@include zen-apply-gutter-padding();
|
|
}
|
|
|
|
&__first-left-sidebar,
|
|
&__col-1,
|
|
&__col-3,
|
|
&__col-x:nth-child(2n + 1) {
|
|
@include zen-grid-item(1, 1);
|
|
@include zen-apply-gutter-padding();
|
|
}
|
|
|
|
&__second-left-sidebar,
|
|
&__col-2,
|
|
&__col-4,
|
|
&__col-x:nth-child(2n) {
|
|
// Since this inherits from the mobile layout, we have to explicitly turn
|
|
// off the new-row mixin.
|
|
@include zen-new-row(none);
|
|
@include zen-grid-item(1, 2);
|
|
@include zen-apply-gutter-padding();
|
|
}
|
|
}
|
|
|
|
@include zen-respond-to(xl) {
|
|
&__full {
|
|
@include zen-grid-item(3, 1);
|
|
}
|
|
|
|
&__left-content {
|
|
@include zen-grid-item(2, 1);
|
|
}
|
|
|
|
&__right-content {
|
|
@include zen-grid-item(2, 2);
|
|
}
|
|
|
|
&__left-sidebar,
|
|
&__first-left-sidebar,
|
|
&__second-left-sidebar {
|
|
@include zen-new-row(right);
|
|
@include zen-grid-item(1, 3, right);
|
|
}
|
|
|
|
&__right-sidebar {
|
|
@include zen-new-row(right);
|
|
@include zen-grid-item(1, 1, right);
|
|
}
|
|
|
|
&__col-1,
|
|
&__col-x:nth-child(3n+1) {
|
|
@include zen-new-row(both);
|
|
@include zen-grid-item(1, 1);
|
|
}
|
|
|
|
&__col-2,
|
|
&__col-x:nth-child(3n+2) {
|
|
@include zen-new-row(none);
|
|
@include zen-grid-item(1, 2);
|
|
}
|
|
|
|
&__col-3,
|
|
&__col-x:nth-child(3n) {
|
|
@include zen-new-row(none);
|
|
@include zen-grid-item(1, 3);
|
|
}
|
|
|
|
&__col-4 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Place last so it can override the padding of grid items.
|
|
&__grid-item-container {
|
|
@include zen-grid-container($context: grid-item);
|
|
}
|
|
}
|