Remove zen-grid and styleguide.
This commit is contained in:
Fredrik Jonsson
parent
a21a3765ac
commit
ccb8a2637a
6 changed files with 8 additions and 28546 deletions
|
|
@ -1,162 +0,0 @@
|
|||
// 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<div class="layout-3col {{modifier_class}}">
|
||||
<div class="layout-3col__full">
|
||||
The <code>.layout-3col__full</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__left-content">
|
||||
The <code>.layout-3col__left-content</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__right-sidebar">
|
||||
The <code>.layout-3col__right-sidebar</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__right-content">
|
||||
The <code>.layout-3col__right-content</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__left-sidebar">
|
||||
The <code>.layout-3col__left-sidebar</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__right-content">
|
||||
The <code>.layout-3col__right-content</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__first-left-sidebar">
|
||||
The <code>.layout-3col__first-left-sidebar</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__second-left-sidebar">
|
||||
The <code>.layout-3col__second-left-sidebar</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__col-1">
|
||||
The <code>.layout-3col__col-1</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__col-2">
|
||||
The <code>.layout-3col__col-2</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__col-3">
|
||||
The <code>.layout-3col__col-3</code> grid item. Don't forget to look for the <code>.layout-3col__col-4</code> grid item at tablet sizes.
|
||||
</div>
|
||||
<div class="layout-3col__col-4">
|
||||
The <code>.layout-3col__col-4</code> grid item.
|
||||
</div>
|
||||
<div class="layout-3col__full layout-3col__grid-item-container">
|
||||
<div class="layout-3col__col-x">
|
||||
The first <code>.layout-3col__col-x</code> grid item in this nested grid.
|
||||
</div>
|
||||
<div class="layout-3col__col-x">
|
||||
The second <code>.layout-3col__col-x</code> grid item in this nested grid.
|
||||
</div>
|
||||
<div class="layout-3col__col-x">
|
||||
The third <code>.layout-3col__col-x</code> grid item in this nested grid.
|
||||
</div>
|
||||
<div class="layout-3col__col-x">
|
||||
The fourth <code>.layout-3col__col-x</code> grid item in this nested grid.
|
||||
</div>
|
||||
<div class="layout-3col__col-x">
|
||||
The fifth <code>.layout-3col__col-x</code> grid item in this nested grid.
|
||||
</div>
|
||||
<div class="layout-3col__col-x">
|
||||
The sixth <code>.layout-3col__col-x</code> grid item in this nested grid.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
// Dependencies.
|
||||
// Allow layout-center's margin/padding to override layout-3col.
|
||||
@import 'layouts/layout-3col/layout-3col';
|
||||
|
||||
// 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--shared-grid` variant
|
||||
// instead.
|
||||
//
|
||||
// .layout-center--shared-grid - If `.layout-center` is applied to the same div
|
||||
// as another .layout-* class, then this variant should be used to prevent the
|
||||
// shared layout's grid from mis-aligning. Note: Each time a new .layout-*
|
||||
// component is created, this component will need to be modified.
|
||||
//
|
||||
// Markup: layout-center.twig
|
||||
//
|
||||
// Weight: -1
|
||||
//
|
||||
// Style guide: layouts.layout-center
|
||||
|
||||
.layout-center,
|
||||
%layout-center {
|
||||
@include zen-apply-gutter-padding();
|
||||
margin: 0 auto;
|
||||
|
||||
// We wrap the max-width declaration with zen-layout() so we can see the value
|
||||
// of $zen-gutters when it is at the larger "xl"-sized media query.
|
||||
@include zen-layout(xl) {
|
||||
max-width: $max-content-width + $zen-gutters;
|
||||
|
||||
.no-sidebars & {
|
||||
max-width: $max-no-sidebars-content-width + $zen-gutters;
|
||||
}
|
||||
}
|
||||
|
||||
@include zen-respond-to(m) {
|
||||
// Since we are using zen-respond-to(), the values in $zen-layouts will
|
||||
// override the global value for $zen-gutters.
|
||||
@include zen-apply-gutter-padding();
|
||||
}
|
||||
|
||||
// Since .layout-center has overridden the negative margin on another
|
||||
// .layout-* container, the grid children will be misaligned due to
|
||||
// .layout-center's gutter padding. So we remove it.
|
||||
&--shared-grid {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Fugly selectors.
|
||||
//
|
||||
|
||||
.layout-center {
|
||||
// Ensure the .layout-center--shared-grid variant is automatically used by
|
||||
// adding all other .layout-* classes here.
|
||||
&.layout-3col {
|
||||
@extend %layout-center--shared-grid;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="layout-center {{modifier_class}}">
|
||||
This is layout center that has content is centered on larger screens.
|
||||
</div>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// The height of the navigation container.
|
||||
$layout-swap-height: 2 * $base-line-height;
|
||||
|
||||
// Layout swap
|
||||
//
|
||||
// Uses absolute positioning and selective padding to make 2 elements appear to
|
||||
// swap places in the visual order while maintaining their original HTML source
|
||||
// order.
|
||||
//
|
||||
// Markup: layout-swap.twig
|
||||
//
|
||||
// Style guide: layouts.layout-swap
|
||||
|
||||
.layout-swap,
|
||||
%layout-swap {
|
||||
position: relative;
|
||||
|
||||
@include respond-to(s) {
|
||||
// Move all the children down to make room for the "top" element.
|
||||
padding-top: $layout-swap-height;
|
||||
}
|
||||
|
||||
&__top {
|
||||
@include respond-to(s) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: $layout-swap-height;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<div class="layout-swap">
|
||||
<div>This element comes <strong>first</strong> in the HTML source order.</div>
|
||||
<div class="layout-swap__top">This element comes <strong>second</strong> in the HTML source order.</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue