From ff424860b77c59e0919ce29a3f8d5e2a0627832f Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 31 May 2022 15:45:08 -0400
Subject: [PATCH] ISTWCMS-5593: inital import of uw layouts and grid
---
src/patterns/01-core/mixins/_index.scss | 1 +
src/patterns/01-core/mixins/_uw-mixins.scss | 361 ++++++++++++++++++
src/patterns/01-core/props/_layout.scss | 8 +-
src/patterns/01-core/props/_media.scss | 14 +-
src/patterns/02-base/colors/colors.twig | 11 -
src/patterns/03-layouts/grid/_grid.scss | 42 ++
src/patterns/03-layouts/grid/grid.twig | 5 +
src/patterns/03-layouts/grid/grid.yml | 9 +
src/patterns/03-layouts/grid/grid~2col.yml | 9 +
src/patterns/03-layouts/grid/grid~3col.yml | 9 +
src/patterns/03-layouts/grid/grid~4col.yml | 9 +
src/patterns/03-layouts/grid/grid~6col.yml | 9 +
.../03-layouts/layout/_layout-base.scss | 27 ++
src/patterns/03-layouts/layout/_layout.scss | 117 ++++++
src/patterns/03-layouts/layout/_layout.twig | 70 ++++
.../layout/layout--1-col/_layout--1-col.scss | 8 +
.../layout/layout--1-col/layout--1-col.twig | 21 +
.../layout/layout--1-col/layout--1-col.yml | 4 +
.../layout/layout--2-col/_layout--2-col.scss | 37 ++
.../layout/layout--2-col/layout--2-col.twig | 21 +
.../layout/layout--2-col/layout--2-col.yml | 10 +
.../layout/layout--3-col/_layout--3-col.scss | 64 ++++
.../layout/layout--3-col/layout--3-col.twig | 21 +
.../layout/layout--3-col/layout--3-col.yml | 19 +
.../layout/layout--4-col/_layout--4-col.scss | 90 +++++
.../layout/layout--4-col/layout--4-col.twig | 21 +
.../layout/layout--4-col/layout--4-col.yml | 19 +
.../layout/layout--5-col/_layout--5-col.scss | 79 ++++
.../layout/layout--5-col/layout--5-col.twig | 21 +
.../layout/layout--5-col/layout--5-col.yml | 22 ++
.../_layout--inverted-l-left.scss | 59 +++
.../layout--inverted-l-left.twig | 23 ++
.../layout--inverted-l-left.yml | 10 +
.../_layout--inverted-l-right.scss | 62 +++
.../layout--inverted-l-right.twig | 23 ++
.../layout--inverted-l-right.yml | 10 +
src/patterns/03-layouts/layout/layout.yml | 0
src/patterns/03-layouts/region/region.scss | 10 +
src/patterns/03-layouts/region/region.twig | 15 +
src/patterns/03-layouts/region/region.yml | 4 +
src/patterns/global.scss | 3 +
41 files changed, 1356 insertions(+), 21 deletions(-)
create mode 100644 src/patterns/01-core/mixins/_uw-mixins.scss
create mode 100644 src/patterns/03-layouts/grid/_grid.scss
create mode 100644 src/patterns/03-layouts/grid/grid.twig
create mode 100644 src/patterns/03-layouts/grid/grid.yml
create mode 100644 src/patterns/03-layouts/grid/grid~2col.yml
create mode 100644 src/patterns/03-layouts/grid/grid~3col.yml
create mode 100644 src/patterns/03-layouts/grid/grid~4col.yml
create mode 100644 src/patterns/03-layouts/grid/grid~6col.yml
create mode 100644 src/patterns/03-layouts/layout/_layout-base.scss
create mode 100644 src/patterns/03-layouts/layout/_layout.scss
create mode 100644 src/patterns/03-layouts/layout/_layout.twig
create mode 100644 src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
create mode 100644 src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig
create mode 100644 src/patterns/03-layouts/layout/layout--1-col/layout--1-col.yml
create mode 100644 src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
create mode 100644 src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig
create mode 100644 src/patterns/03-layouts/layout/layout--2-col/layout--2-col.yml
create mode 100644 src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
create mode 100644 src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig
create mode 100644 src/patterns/03-layouts/layout/layout--3-col/layout--3-col.yml
create mode 100644 src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
create mode 100644 src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig
create mode 100644 src/patterns/03-layouts/layout/layout--4-col/layout--4-col.yml
create mode 100644 src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
create mode 100644 src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig
create mode 100644 src/patterns/03-layouts/layout/layout--5-col/layout--5-col.yml
create mode 100644 src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
create mode 100644 src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig
create mode 100644 src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.yml
create mode 100644 src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
create mode 100644 src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig
create mode 100644 src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml
create mode 100644 src/patterns/03-layouts/layout/layout.yml
create mode 100644 src/patterns/03-layouts/region/region.scss
create mode 100644 src/patterns/03-layouts/region/region.twig
create mode 100644 src/patterns/03-layouts/region/region.yml
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index b297b2a0..dcac9a9f 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -6,3 +6,4 @@
@forward 'list';
@forward 'svg-background';
@forward 'svg-icon';
+@forward 'uw-mixins';
diff --git a/src/patterns/01-core/mixins/_uw-mixins.scss b/src/patterns/01-core/mixins/_uw-mixins.scss
new file mode 100644
index 00000000..0fe17871
--- /dev/null
+++ b/src/patterns/01-core/mixins/_uw-mixins.scss
@@ -0,0 +1,361 @@
+$test-color-1: var(--teal-3);
+$test-color-2: var(--pink-3);
+$test-color-3: var(--blue-3);
+$test-color-4: var(--violet-3);
+$test-color-5: var(--indigo-3);
+$test-color-6: var(--red-3);
+$test-color-7: var(--red-8);
+$test-color-8: var(--orange-8);
+$test-color-9: var(--orange-5);
+$test-color-10: var(--yellow-2);
+$test-color-11: var(--green-2);
+$test-color-12: var(--green-5);
+
+@mixin uw-no-breakout {
+ overflow-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-all;
+ word-break: break-word;
+ word-wrap: break-word;
+}
+
+@mixin uw-contained-width($value:$max-width) {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: $value;
+ padding: 0 var(--size-1);
+
+ @include xl{
+ padding-left: 0;
+ padding-right: 0;
+
+ }
+}
+@mixin uw-full-width {
+ max-width: 100%;
+ padding: 0;
+ width: 100%;
+}
+@mixin uw-full-width-padding {
+ max-width: 100%;
+ padding: 0 var(--size-1);
+ width: 100%;
+}
+@mixin uw-full-width-margin {
+ left: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;
+ max-width: 100vw;
+ padding: 0;
+ position: relative;
+ right: 50%;
+ width: 100vw;
+}
+@mixin uw-full-width-reset {
+ left: inherit;
+ margin-left: -1rem;
+ margin-right: -2rem;
+ max-width: inherit;
+ padding: inherit;
+ position: relative;
+ right: inherit;
+ width: inherit;
+}
+@mixin uw-contained-width-reset() {
+ margin-left:inherit;
+ margin-right: inherit;
+ max-width: inherit;
+ padding: inherit;
+ @media(min-width: $screen-xl) {
+ padding-left:inherit;
+ padding-right:inherit;
+ }
+}
+// Flexbox display
+@mixin flexbox {
+ display: flex;
+}
+
+// Inline flex display
+@mixin inline-flex {
+ display: inline-flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+ // Set a variable to be used by box-flex properties
+ $fg-boxflex: $fg;
+ // Box-Flex only supports a flex-grow value so lets grab the
+ // first item in the list and just return that.
+ @if type-of($fg) == 'list' {
+ $fg-boxflex: nth($fg, 1);
+ }
+
+ -webkit-box: $fg-boxflex;
+ -moz-box: $fg-boxflex;
+ -webkit-flex: $fg $fs $fb;
+ -ms-flex: $fg $fs $fb;
+ flex: $fg $fs $fb;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row (default) | row-reverse | column | column-reverse
+@mixin flex-direction($direction: row) {
+ @if $direction == row-reverse {
+ -webkit-box-direction: reverse;
+ -moz-box-direction: reverse;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ } @else if $direction == column {
+ -webkit-box-direction: normal;
+ -moz-box-direction: normal;
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical;
+ } @else if $direction == column-reverse {
+ -webkit-box-direction: reverse;
+ -moz-box-direction: reverse;
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical;
+ } @else {
+ -webkit-box-direction: normal;
+ -moz-box-direction: normal;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ }
+ -ms-flex-direction: $direction;
+ -webkit-flex-direction: $direction;
+ flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($value: nowrap) {
+ // No Webkit/FF Box fallback.
+ -webkit-flex-wrap: $value;
+ @if $value == nowrap {
+ -ms-flex-wrap: inherit;
+ } @else {
+ -ms-flex-wrap: $value;
+ }
+ flex-wrap: $value;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($values: (row nowrap)) {
+ // No Webkit/FF Box fallback.
+ -webkit-flex-flow: $values;
+ -ms-flex-flow: $values;
+ flex-flow: $values;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($int: 0) {
+ -webkit-box-ordinal-group: $int + 1;
+ -moz-box-ordinal-group: $int + 1;
+ -ms-flex-order: $int;
+ -webkit-order: $int;
+
+ order: $int;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($int: 1) {
+ -webkit-box-flex: $int;
+ -moz-box-flex: $int;
+ -ms-flex: $int;
+ -webkit-flex-grow: $int;
+
+ flex-grow: $int;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($int: 0) {
+
+ -ms-flex: $int;
+ -webkit-flex-shrink: $int;
+ -moz-flex-shrink: $int;
+ flex-shrink: $int;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($value: auto) {
+ -webkit-flex-basis: $value;
+ flex-basis: $value;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($value: flex-start) {
+ @if $value == flex-start {
+ -webkit-box-pack: start;
+ -moz-box-pack: start;
+ -ms-flex-pack: start;
+ } @else if $value == flex-end {
+ -webkit-box-pack: end;
+ -moz-box-pack: end;
+ -ms-flex-pack: end;
+ } @else if $value == space-between {
+ -webkit-box-pack: justify;
+ -moz-box-pack: justify;
+ -ms-flex-pack: justify;
+ } @else if $value == space-around {
+ -ms-flex-pack: distribute;
+ } @else {
+ -webkit-box-pack: $value;
+ -moz-box-pack: $value;
+ -ms-flex-pack: $value;
+ }
+ -webkit-justify-content: $value;
+ justify-content: $value;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($value: stretch) {
+ // No Webkit Box Fallback.
+ -webkit-align-content: $value;
+ @if $value == flex-start {
+ -ms-flex-line-pack: start;
+ } @else if $value == flex-end {
+ -ms-flex-line-pack: end;
+ } @else {
+ -ms-flex-line-pack: $value;
+ }
+ align-content: $value;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($value: stretch) {
+ @if $value == flex-start {
+ -webkit-box-align: start;
+ -moz-box-align: start;
+ -ms-flex-align: start;
+ } @else if $value == flex-end {
+ -webkit-box-align: end;
+ -moz-box-align: end;
+ -ms-flex-align: end;
+ } @else {
+ -webkit-box-align: $value;
+ -moz-box-align: $value;
+ -ms-flex-align: $value;
+ }
+ -webkit-align-items: $value;
+ align-items: $value;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($value: auto) {
+ // No Webkit Box Fallback.
+ -webkit-align-self: $value;
+ @if $value == flex-start {
+ -ms-flex-item-align: start;
+ } @else if $value == flex-end {
+ -ms-flex-item-align: end;
+ } @else {
+ -ms-flex-item-align: $value;
+ }
+ align-self: $value;
+}
+
+
+
+// Display of elements in gridded style.
+@mixin uw-flex-grid($value: flexbox){
+ @if $value == inline-flex {
+ @include inline-flex();
+ @include flex-flow(row wrap);
+ gap: var(--grid-gap);
+ }@else if $value == term{
+ @include flexbox();
+ @include flex-wrap(wrap);
+ gap: var(--grid-gap);
+ }@else if $value == card{
+ @include flexbox();
+ @include flex-direction(column);
+ }@else if $value == masonry{
+ @include flexbox();
+ @include flex-flow(row wrap);
+ }@else{
+ @include flexbox();
+ @include flex-flow(row wrap);
+ gap: var(--grid-gap);
+ }
+}
+// Display of grid item.
+@mixin uw-flex-grid-item(){
+ @include flex();
+ @include align-items(flex-start);
+ width: 100%;
+ @media(min-width: $screen-md) {
+ @include flex(1 1 auto);
+ @include flex-grow(1);
+ width: 45%;
+ .uw-contained-width--narrow &,
+ .layout--uw-inverted-l-right &,
+ .layout--uw-inverted-l-left &,
+ .layout--uw-2-col &,
+ .layout--uw-3-col &,
+ .layout--uw-4-col &{
+ width: 100% !important;
+ }
+ }
+ @media(min-width: $screen-lg) {
+ width: 30%;
+ .uw-contained-width--wide &{
+ width: 45% !important;
+ }
+ }
+}
+
+// Display of list item.
+@mixin uw-flex-term-item(){
+ align-self: flex-start;
+ width: 100%;
+ @media(min-width: $screen-md) {
+ @include flex(1 1 auto);
+ @include flex-grow(1);
+ width: 45%;
+ }
+ @media(min-width: $screen-lg) {
+ //width: 30%;
+ }
+
+}
+
+// Display of elements in list style.
+@mixin uw-flex-list(){
+ //
+}
+// Display of list item.
+@mixin uw-flex-list-item(){
+}
+
+// Display of mosiac item.
+@mixin uw-flex-masonry-item(){
+}
+
+// Display of gallery item.
+@mixin uw-flex-gallery-item(){
+
+}
diff --git a/src/patterns/01-core/props/_layout.scss b/src/patterns/01-core/props/_layout.scss
index a11e1ebd..d3c0ae36 100644
--- a/src/patterns/01-core/props/_layout.scss
+++ b/src/patterns/01-core/props/_layout.scss
@@ -1,6 +1,6 @@
:where(html) {
- --layout-gutter: var(--size-6);
- --layout-max-width: 90rem; // 1440px
- --grid-gutter: var(--size-10);
- --grid-gap: var(--size-2);
+ --layout-gutter: var(--size-4);
+ --layout-max-width: 75rem;
+ --grid-gutter: var(--size-4);
+ --grid-gap: var(--size-4);
}
diff --git a/src/patterns/01-core/props/_media.scss b/src/patterns/01-core/props/_media.scss
index e7767ee0..ae3a18d9 100644
--- a/src/patterns/01-core/props/_media.scss
+++ b/src/patterns/01-core/props/_media.scss
@@ -1,8 +1,10 @@
// Media Query Ranges
$screen-xxs: 240px;
-$screen-xs: 360px;
-$screen-sm: 480px;
-$screen-md: 768px;
-$screen-lg: 1024px;
-$screen-xl: 1440px;
-$screen-xxl: 1920px;
+$screen-xs: 30rem;
+$screen-sm: 40.06rem;
+$screen-md: 48.06rem;
+$screen-lg: 63.1875rem;
+$screen-xl: 75rem;
+$screen-xxl: 102.5rem;
+$screen-onek: 120rem;
+$screen-twok: 159.93rem;
diff --git a/src/patterns/02-base/colors/colors.twig b/src/patterns/02-base/colors/colors.twig
index 4a359483..d7743570 100644
--- a/src/patterns/02-base/colors/colors.twig
+++ b/src/patterns/02-base/colors/colors.twig
@@ -21,14 +21,3 @@
</div>
{% endfor %}
</section>
-
-{#{% for title, list in colors %}#}
-{# <h3>{{ title|capitalize }}</h3>#}
-{# <div class="pl-swatch__group">#}
-{# {% for color, hex in list %}#}
-{# <div class="pl-swatch" style="background-color: {{ hex }}">#}
-{# <div class="pl-swatch__meta">{{ color }}<br>{{ hex }}</div>#}
-{# </div>#}
-{# {% endfor %}#}
-{# </div>#}
-{#{% endfor %}#}
diff --git a/src/patterns/03-layouts/grid/_grid.scss b/src/patterns/03-layouts/grid/_grid.scss
new file mode 100644
index 00000000..573a45d3
--- /dev/null
+++ b/src/patterns/03-layouts/grid/_grid.scss
@@ -0,0 +1,42 @@
+// @file
+// Styles for Grid layout.
+
+@use '../../01-core' as *;
+
+.l-grid {
+ display: grid;
+ gap: var(--grid-gap);
+ grid-auto-flow: row;
+}
+
+.l-grid--2col {
+ @media(min-width: $screen-sm) {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+.l-grid--3col {
+ @media(min-width: $screen-sm) {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+}
+
+.l-grid--4col {
+ @media(min-width: 600px) and (max-width: 800px) {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ @media(min-width: 801px) {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+}
+
+.l-grid--6col {
+ @media(min-width: 600px) and (max-width: 999px) {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ @media(min-width: 1000px) {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+}
diff --git a/src/patterns/03-layouts/grid/grid.twig b/src/patterns/03-layouts/grid/grid.twig
new file mode 100644
index 00000000..682fd39b
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid.twig
@@ -0,0 +1,5 @@
+<div class="l-grid {{ modifier }}">
+ {% block content %}
+ {{ grid_content }}
+ {% endblock %}
+</div>
diff --git a/src/patterns/03-layouts/grid/grid.yml b/src/patterns/03-layouts/grid/grid.yml
new file mode 100644
index 00000000..2dcdeaa8
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid.yml
@@ -0,0 +1,9 @@
+---
+modifier: ''
+grid_content: |-
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/grid/grid~2col.yml b/src/patterns/03-layouts/grid/grid~2col.yml
new file mode 100644
index 00000000..bac033fa
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid~2col.yml
@@ -0,0 +1,9 @@
+---
+modifier: 'l-grid--2col'
+grid_content: |-
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/grid/grid~3col.yml b/src/patterns/03-layouts/grid/grid~3col.yml
new file mode 100644
index 00000000..caeb3409
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid~3col.yml
@@ -0,0 +1,9 @@
+---
+modifier: 'l-grid--3col'
+grid_content: |-
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/grid/grid~4col.yml b/src/patterns/03-layouts/grid/grid~4col.yml
new file mode 100644
index 00000000..0f7afd8a
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid~4col.yml
@@ -0,0 +1,9 @@
+---
+modifier: 'l-grid--4col'
+grid_content: |-
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/grid/grid~6col.yml b/src/patterns/03-layouts/grid/grid~6col.yml
new file mode 100644
index 00000000..eef86ea0
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid~6col.yml
@@ -0,0 +1,9 @@
+---
+modifier: 'l-grid--6col'
+grid_content: |-
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+ <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
new file mode 100644
index 00000000..6427793b
--- /dev/null
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -0,0 +1,27 @@
+@use '../../01-core' as *;
+@use '../../03-layouts/layout/layout--1-col/layout--1-col' as *;
+@use '../../03-layouts/layout/layout--2-col/layout--2-col' as *;
+@use '../../03-layouts/layout/layout--3-col/layout--3-col' as *;
+@use '../../03-layouts/layout/layout--4-col/layout--4-col' as *;
+@use '../../03-layouts/layout/layout--5-col/layout--5-col' as *;
+@use '../../03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left' as *;
+@use '../../03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right' as *;
+.layout__region {
+ .layout-builder &{
+ //outline: 2px dashed #2f91da;
+ outline: 2px dashed var(--blue-6);
+ }
+ .pl & {
+ //outline: 2px dashed #2f91da;
+ outline: 2px dashed var(--blue-6);
+ padding: 1.5rem;
+ text-align: center;
+ .pl-labels{
+ text-align: center;
+ }
+ }
+}
+
+.pl-layout-h2 {
+ @include layout-constrain;
+}
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
new file mode 100644
index 00000000..6700c059
--- /dev/null
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -0,0 +1,117 @@
+@use '../../01-core' as *;
+
+.layout {
+ @include layout-constrain;
+
+ .uw-node__with-image .card__node & {
+ padding: var(--size-1);
+ @media(min-width: $screen-xxl) {
+ padding: var(--size-1) 0;
+ }
+ }
+ &.uw-contained-width {
+ @include layout-constrain;
+ padding: var(--size-1);
+ @media(min-width: $screen-xxl) {
+ padding: var(--size-1) 0;
+ }
+
+ &--narrow {
+ /* Match the width of WCMS2's narrow: 496px */
+ max-width: 31rem;
+ }
+
+ &--wide {
+ /* Match the width of WCMS2's wide: 753px */
+ max-width: 47.0625rem;
+ }
+ }
+
+ &.uw-full-width {
+ @include uw-full-width-padding;
+ overflow: hidden;
+ .uw-caption{
+ > p{
+ padding-left: var(--size-2);
+ }
+ }
+ .uw-section-has-full-width.uw-node__with-sidebar &{
+ padding: 0 var(--size-1) !important;
+ }
+ .dashboards-container &{
+ @include uw-full-width;
+ margin-bottom: var(--grid-gap);
+ overflow: visible; /* otherwise, dropdowns truncate at the border. */
+ }
+ .layout-builder &{
+ padding: var(--size-2);
+ }
+ .layout-builder__region {
+ padding: var(--size-2);
+ }
+ &.layout--uw-1-col{
+ .block-inline-blockuw-cbl-banner-images,
+ .block-inline-blockuw-cbl-image,
+ .block-uw-cbl-image,
+ .block-inline-blockuw-cbl-remote-video,
+ .block-inline-blockuw-cbl-image-gallery{
+ @include uw-full-width-margin;
+ .layout-builder &{
+ @include uw-full-width-reset;
+ margin-left: 0;
+ margin-right: 0;
+ }
+ h2{
+ margin-left: var(--size-2);
+ }
+ .uw-section-has-full-width.uw-node__with-sidebar &{
+ @include uw-full-width-reset;
+ }
+ }
+ .block-inline-blockuw-cbl-google-maps{
+ @include layout-constrain;
+ @media(min-width: $screen-md) {
+ @include uw-full-width-margin;
+ }
+ .layout-builder &{
+ @include uw-full-width-reset;
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .uw-section-has-full-width.uw-node__with-sidebar &{
+ @include uw-full-width-reset;
+ }
+ h2{
+ margin-left: var(--size-2);
+ }
+ }
+ }
+ }
+ // When wrapped with class to identify sidebar
+ .uw-node__with-sidebar & {
+ margin: inherit;
+ @media(min-width: $screen-md) {
+ @include layout-constrain;
+ }
+ &.uw-contained-width {
+ @include layout-constrain;
+ margin: inherit;
+ padding: var(--size-1);
+ @media(min-width: $screen-xxl) {
+ padding: var(--size-1) 0;
+ }
+ &--narrow {
+ /* Match the width of WCMS2's narrow: 496px */
+ margin: inherit;
+ }
+ &--wide {
+ /* Match the width of WCMS2's wide: 753px */
+ margin: inherit;
+ }
+ }
+ }
+}
+
+.uw-section-has-full-width .layout.layout--uw-1-col{
+ overflow: hidden;
+}
diff --git a/src/patterns/03-layouts/layout/_layout.twig b/src/patterns/03-layouts/layout/_layout.twig
new file mode 100644
index 00000000..fa8f0035
--- /dev/null
+++ b/src/patterns/03-layouts/layout/_layout.twig
@@ -0,0 +1,70 @@
+{% set section_names = {
+ 1: 'first',
+ 2: 'second',
+ 3: 'third',
+ 4: 'fourth',
+ 5: 'fifth',
+} %}
+
+{% set section_classes = '' %}
+<section
+ {% if pattern_lab %}
+ class="{{ classes }}"
+ {% else %}
+ {{ attributes.addClass(classes) }}
+ {% endif %}
+>
+
+ {% for i in 1..num_of_blocks %}
+
+ {% set section_name = section_names[loop.index] %}
+
+ {% if inverted_l_left or inverted_l_right %}
+ {% if loop.index == 1 %}
+ <div class="uw-inverted-l--left-side">
+ {% endif %}
+
+ {% if inverted_l_left and loop.index == 2 %}
+ <div class="uw-inverted-l--right-side">
+ {% endif %}
+
+ {% if inverted_l_right and loop.index == 4 %}
+ <div class="uw-inverted-l--right-side">
+ {% endif %}
+
+ {% endif %}
+
+ <div
+ {% if pattern_lab %}
+ {% set region_classes = 'layout__region ' ~ 'layout__region--' ~ section_name %}
+ class="{{ region_classes }}"
+ {% else %}
+ {{ region_attributes[section_name].addClass('layout__region', 'layout__region--' ~ section_name) }}
+ {% endif %}
+ >
+
+ {% if pattern_lab %}
+ {{ section_name }} column
+ {% else %}
+ {{ content[section_name] }}
+ {% endif %}
+ </div>
+
+ {% if inverted_l_left or inverted_l_right %}
+ {% if inverted_l_left %}
+ {% if loop.index == 1 or loop.index == 4 %}
+ </div>
+ {% endif %}
+ {% endif %}
+
+ {% if inverted_l_right %}
+ {% if loop.index == 3 or loop.index == 4 %}
+ </div>
+ {% endif %}
+ {% endif %}
+
+ {% endif %}
+
+ {% endfor %}
+
+</section>
diff --git a/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss b/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
new file mode 100644
index 00000000..0fc4b51a
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
@@ -0,0 +1,8 @@
+.layout--uw-1-col {
+ display: var(--grid-gap);
+ grid-template-columns: 100%;
+}
+
+.layout--uw-1-col .layout__region--first {
+ grid-column: 1 / 2;
+}
diff --git a/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig b/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig
new file mode 100644
index 00000000..838de14d
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 1 %}
+
+{% if pattern_lab %}
+
+ {% for column_class in column_classes %}
+ <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: column_class.classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+ {% endfor %}
+
+{% else %}
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.yml b/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.yml
new file mode 100644
index 00000000..cd9e3ba2
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.yml
@@ -0,0 +1,4 @@
+column_classes:
+ -
+ name: 'Full (100%)'
+ classes: 'layout layout--uw-1-col'
diff --git a/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss b/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
new file mode 100644
index 00000000..532358ab
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
@@ -0,0 +1,37 @@
+@use '../../../01-core' as *;
+
+.layout--uw-2-col {
+ display: grid;
+ gap: var(--grid-gap);
+ grid-template-columns: 100%;
+ &.larger-left {
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 2fr) 1fr;
+ }
+ }
+ &.larger-right {
+ @media(min-width: $screen-md){
+ grid-template-columns: 1fr minmax(0, 2fr);
+ }
+ }
+ &.even-split {
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+ .layout__region{
+ &--first {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ &--second {
+ grid-column: 1 / 2;
+ grid-row: 2/ 3;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig b/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig
new file mode 100644
index 00000000..708ac519
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 2 %}
+
+{% if pattern_lab %}
+
+ {% for column_class in column_classes %}
+ <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: column_class.classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+ {% endfor %}
+
+{% else %}
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.yml b/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.yml
new file mode 100644
index 00000000..e02d378e
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.yml
@@ -0,0 +1,10 @@
+column_classes:
+ -
+ name: 'Even Split (50%, 50%)'
+ classes: 'layout layout--uw-2-col even-split'
+ -
+ name: 'Larger Right (33%, 67%)'
+ classes: 'layout layout--uw-2-col larger-right'
+ -
+ name: 'Larger Left (67%, 33%)'
+ classes: 'layout layout--uw-2-col larger-left'
diff --git a/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss b/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
new file mode 100644
index 00000000..b4a83382
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
@@ -0,0 +1,64 @@
+@use '../../../01-core' as *;
+
+.layout--uw-3-col {
+ display: grid;
+ gap: var(--grid-gap);
+ &.even-split {
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-left {
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-middle {
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-right {
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
+ }
+ }
+ &.legacy-38-38-24 {
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24%;
+ }
+ }
+ &.legacy-24-38-38 {
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ .layout__region{
+ &--first {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ &--second {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ }
+ &--third {
+ grid-column: 1 / 2;
+ grid-row: 3 / 4;
+ @media(min-width: $screen-md) {
+ grid-column: 3 / 4;
+ grid-row: 1 / 2;
+ }
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig b/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig
new file mode 100644
index 00000000..94919c41
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 3 %}
+
+{% if pattern_lab %}
+
+ {% for column_class in column_classes %}
+ <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: column_class.classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+ {% endfor %}
+
+{% else %}
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.yml b/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.yml
new file mode 100644
index 00000000..97f3844a
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.yml
@@ -0,0 +1,19 @@
+column_classes:
+ -
+ name: 'Even Split (33%, 34%, 33%)'
+ classes: 'layout layout--uw-3-col even-split'
+ -
+ name: 'Larger Left (50%, 25%, 25%)'
+ classes: 'layout layout--uw-3-col larger-left'
+ -
+ name: 'Larger Middle (25%, 50%, 25%)'
+ classes: 'layout layout--uw-3-col larger-middle'
+ -
+ name: 'Larger Right (25%, 25%, 50%)'
+ classes: 'layout layout--uw-3-col larger-right'
+ -
+ name: 'Legacy (38%, 38%, 24%)'
+ classes: 'layout layout--uw-3-col legacy-38-38-24'
+ -
+ name: 'Legacy (24%, 38%, 38%)'
+ classes: 'layout layout--uw-3-col legacy-24-38-38'
diff --git a/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss b/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
new file mode 100644
index 00000000..171efeb6
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
@@ -0,0 +1,90 @@
+@use '../../../01-core' as *;
+.layout--uw-4-col {
+ display: grid;
+ gap: var(--grid-gap);
+ grid-template-columns: 100%;
+ &.even-split {
+ @media(min-width: $screen-sm) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-left {
+ @media(min-width: $screen-sm) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-second {
+ @media(min-width: $screen-sm) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-third {
+ @media(min-width: $screen-sm) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-right {
+ @media(min-width: $screen-sm) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
+ }
+ }
+ &.legacy-23-27-27-23 {
+ @media(min-width: $screen-sm) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
+ }
+ }
+ .layout__region{
+
+ &--first {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ &--second {
+ grid-column: 1 / 2;
+ @media(min-width: $screen-sm) {
+ grid-column: 2 / 3;
+ }
+ @media(min-width: $screen-lg) {
+ grid-column: 2 / 3;
+ }
+ }
+ &--third {
+ @media(min-width: $screen-sm) {
+ grid-column: 1 / 2;
+ }
+ @media(min-width: $screen-lg) {
+ grid-column: 3 / 4;
+ grid-row: 1 / 2;
+ }
+ }
+ &--fourth {
+ @media(min-width: $screen-sm) {
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+ }
+ @media(min-width: $screen-lg) {
+ grid-column: 4 / 5;
+ grid-row: 1 / 2;
+ }
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig b/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig
new file mode 100644
index 00000000..9c2a605b
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 4 %}
+
+{% if pattern_lab %}
+
+ {% for column_class in column_classes %}
+ <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: column_class.classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+ {% endfor %}
+
+{% else %}
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.yml b/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.yml
new file mode 100644
index 00000000..e33650c3
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.yml
@@ -0,0 +1,19 @@
+column_classes:
+ -
+ name: 'Even Split (25% 25% 25% 25%)'
+ classes: 'layout layout--uw-4-col even-split'
+ -
+ name: 'Larger Left (50%, 16.67%, 16.67%, 16.67%)'
+ classes: 'layout layout--uw-4-col larger-left'
+ -
+ name: 'Larger Second (16.67%, 50%, 16.67%, 16.67%)'
+ classes: 'layout layout--uw-4-col larger-second'
+ -
+ name: 'Larger Third (16.67%, 16.67%, 50%, 16.67%)'
+ classes: 'layout layout--uw-4-col larger-third'
+ -
+ name: 'Larger Right (16.67%, 16.67%, 16.67%, 50%)'
+ classes: 'layout layout--uw-4-col larger-right'
+ -
+ name: 'Legacy (23%, 27%, 27%, 23%)'
+ classes: 'layout layout--uw-4-col legacy-23-27-27-23'
diff --git a/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss b/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
new file mode 100644
index 00000000..5964fb87
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
@@ -0,0 +1,79 @@
+@use '../../../01-core' as *;
+.layout--uw-5-col {
+ display: grid;
+ gap: var(--grid-gap);
+ grid-template-columns: 100%;
+ &.even-split {
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-left {
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-second {
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-third {
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-fourth {
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-right {
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
+ }
+ }
+ &.legacy-23-19-19-19-20 {
+ @media(min-width: $screen-md) {
+ grid-template-columns: 23% minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20%;
+ }
+ }
+ .layout__region{
+ &--first {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ &--second {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ }
+ &--third {
+ grid-column: 1 / 2;
+ grid-row: 3 / 4;
+ @media(min-width: $screen-md) {
+ grid-column: 3 / 4;
+ grid-row: 1 / 2;
+ }
+ }
+ &--fourth {
+ grid-column: 1 / 2;
+ grid-row: 4 / 5;
+ @media(min-width: $screen-md) {
+ grid-column: 4 / 5;
+ grid-row: 1 / 2;
+ }
+ }
+ &--fifth {
+ grid-column: 1 / 2;
+ grid-row: 5 / 6;
+ @media(min-width: $screen-md) {
+ grid-column: 5 / 6;
+ grid-row: 1 / 2;
+ }
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig b/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig
new file mode 100644
index 00000000..8d531886
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 5 %}
+
+{% if pattern_lab %}
+
+ {% for column_class in column_classes %}
+ <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: column_class.classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+ {% endfor %}
+
+{% else %}
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: classes,
+ num_of_blocks: num_of_blocks,
+ } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.yml b/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.yml
new file mode 100644
index 00000000..d23eaf92
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.yml
@@ -0,0 +1,22 @@
+column_classes:
+ -
+ name: 'Even Split (20%, 20%, 20%, 20%, 20%)'
+ classes: 'layout layout--uw-5-col even-split'
+ -
+ name: 'Larger Left (40%, 15%, 15%, 15%, 15%)'
+ classes: 'layout layout--uw-5-col larger-left'
+ -
+ name: 'Larger Second (15%, 40%, 15%, 15%, 15%)'
+ classes: 'layout layout--uw-5-col larger-second'
+ -
+ name: 'Larger Third (15%, 15%, 40%, 15%, 15%)'
+ classes: 'layout layout--uw-5-col larger-third'
+ -
+ name: 'Larger Fourth (15%, 15%, 15%, 40%, 15%)'
+ classes: 'layout layout--uw-5-col larger-fourth'
+ -
+ name: 'Larger Right (15%, 15%, 15%, 15%, 40%)'
+ classes: 'layout layout--uw-5-col larger-right'
+ -
+ name: 'Legacy (23%, 19%, 19%, 19%, 20%)'
+ classes: 'layout layout--uw-5-col legacy-23-19-19-19-20'
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss b/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
new file mode 100644
index 00000000..2a86b770
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
@@ -0,0 +1,59 @@
+@use '../../../01-core' as *;
+.layout--uw-inverted-l-left {
+ display: grid;
+ gap: var(--grid-gap);
+ grid-template-columns: 100%;
+ &.even-split {
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-left {
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-right {
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+ }
+ }
+ .uw-inverted-l--left-side {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ .uw-inverted-l--right-side {
+ display: grid;
+ gap: var(--grid-gap);
+ grid-column: 1 / 2;
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+ @media(min-width: $screen-lg) {
+ grid-column: 2 / 3;
+ }
+ }
+ .layout__region{
+ &--first{
+ //
+ }
+ &--second {
+ @media(min-width: $screen-md) {
+ grid-column: 1 / 2;
+ }
+ }
+ &--third {
+ grid-column: 1 / 2;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ }
+ }
+ &--fourth {
+ grid-column: 1 / 2;
+ @media(min-width: $screen-md) {
+ grid-column: 1 / 3;
+ }
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig b/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig
new file mode 100644
index 00000000..0ce52523
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig
@@ -0,0 +1,23 @@
+{% set num_of_blocks = 4 %}
+
+{% if pattern_lab %}
+
+ {% for column_class in column_classes %}
+ <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: column_class.classes,
+ num_of_blocks: num_of_blocks,
+ inverted_l_left: 1,
+ } %}
+ {% endfor %}
+
+{% else %}
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: classes,
+ num_of_blocks: num_of_blocks,
+ inverted_l_left: 1,
+ } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.yml b/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.yml
new file mode 100644
index 00000000..d8f8296a
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.yml
@@ -0,0 +1,10 @@
+column_classes:
+ -
+ name: 'Even Split (50%, 50%)'
+ classes: 'layout layout--uw-inverted-l-left even-split'
+ -
+ name: 'Larger Left (33%, 67%)'
+ classes: 'layout layout--uw-inverted-l-left larger-left'
+ -
+ name: 'Larger Right (67%, 33%)'
+ classes: 'layout layout--uw-inverted-l-left larger-right'
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss b/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
new file mode 100644
index 00000000..c8fb4229
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
@@ -0,0 +1,62 @@
+@use '../../../01-core' as *;
+.layout--uw-inverted-l-right {
+ display: grid;
+ gap: var(--grid-gap);
+ grid-template-columns: 100%;
+ &.even-split {
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+ }
+ }
+ &.larger-left {
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+ }
+ }
+ &.larger-right {
+ @media(min-width: $screen-lg) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+ }
+ }
+ .uw-inverted-l--left-side {
+ display: grid;
+ gap: var(--grid-gap);
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ grid-template-columns: 100%;
+ @media(min-width: $screen-md) {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ }
+ }
+ .uw-inverted-l--right-side {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ @media(min-width: $screen-lg) {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ }
+ .layout__region{
+ &--first {
+ grid-column: 1 / 2;
+ @media(min-width: $screen-md) {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ }
+ &--second {
+ grid-column: 1 / 2;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ }
+ &--third {
+ grid-column: 1 / 2;
+ @media(min-width: $screen-md) {
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ }
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig b/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig
new file mode 100644
index 00000000..e869a26b
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig
@@ -0,0 +1,23 @@
+{% set num_of_blocks = 4 %}
+
+{% if pattern_lab %}
+
+ {% for column_class in column_classes %}
+ <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: column_class.classes,
+ num_of_blocks: num_of_blocks,
+ inverted_l_right: 1,
+ } %}
+ {% endfor %}
+
+{% else %}
+
+ {% include '@layouts/layout/_layout.twig' with {
+ classes: classes,
+ num_of_blocks: num_of_blocks,
+ inverted_l_right: 1,
+ } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml b/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml
new file mode 100644
index 00000000..6df994da
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml
@@ -0,0 +1,10 @@
+column_classes:
+ -
+ name: 'Even Split (50%, 50%)'
+ classes: 'layout layout--uw-inverted-l-right even-split'
+ -
+ name: 'Larger Left (67%, 33%)'
+ classes: 'layout layout--uw-inverted-l-right larger-left'
+ -
+ name: 'Larger Right (33%, 67%)'
+ classes: 'layout layout--uw-inverted-l-right larger-right'
diff --git a/src/patterns/03-layouts/layout/layout.yml b/src/patterns/03-layouts/layout/layout.yml
new file mode 100644
index 00000000..e69de29b
diff --git a/src/patterns/03-layouts/region/region.scss b/src/patterns/03-layouts/region/region.scss
new file mode 100644
index 00000000..ee15e652
--- /dev/null
+++ b/src/patterns/03-layouts/region/region.scss
@@ -0,0 +1,10 @@
+// @file
+// Styles for generic Region layout.
+
+.l-region {
+ .pl &{
+ outline: 1px dashed var(--gray-4);
+ padding: 1.5rem;
+ text-align: center;
+ }
+}
diff --git a/src/patterns/03-layouts/region/region.twig b/src/patterns/03-layouts/region/region.twig
new file mode 100644
index 00000000..5ba6da56
--- /dev/null
+++ b/src/patterns/03-layouts/region/region.twig
@@ -0,0 +1,15 @@
+{{ attach_library('ohana/region')}}
+
+<section class="l-{{ region_name ?: 'region' }}">
+ {% if constrain %}
+ <div class="l-constrain {{ constrain }}">
+ {% endif %}
+
+ {% block content %}
+ Region Content
+ {% endblock %}
+
+ {% if constrain %}
+ </div>
+ {% endif %}
+</section>
diff --git a/src/patterns/03-layouts/region/region.yml b/src/patterns/03-layouts/region/region.yml
new file mode 100644
index 00000000..efacb5c8
--- /dev/null
+++ b/src/patterns/03-layouts/region/region.yml
@@ -0,0 +1,4 @@
+---
+region_name: ''
+constrain: ''
+content: ''
diff --git a/src/patterns/global.scss b/src/patterns/global.scss
index 05b97748..78f14f32 100644
--- a/src/patterns/global.scss
+++ b/src/patterns/global.scss
@@ -5,3 +5,6 @@
@use '01-core/props' as *;
@use '01-core/utilities' as *;
@use '01-core/elements' as *;
+@use '03-layouts/grid/grid' as *;
+@use '03-layouts/layout/layout-base' as *;
+@use '03-layouts/layout/layout' as *;
--
GitLab