ISTWCMS-5593: inital import of uw layouts and grid

src/patterns/01-core/mixins/_index.scss

@@ -6,3 +6,4 @@
 @forward 'list';
 @forward 'svg-background';
 @forward 'svg-icon';
+@forward 'uw-mixins';

src/patterns/01-core/mixins/_uw-mixins.scss

+$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(){
+
+}

src/patterns/01-core/props/_layout.scss

 :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);
 }

src/patterns/01-core/props/_media.scss

 // 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;

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 %}#}

src/patterns/03-layouts/grid/_grid.scss

+// @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));
+  }
+}

src/patterns/03-layouts/grid/grid.twig

+<div class="l-grid {{ modifier }}">
+  {% block content %}
+    {{ grid_content }}
+  {% endblock %}
+</div>

src/patterns/03-layouts/grid/grid.yml

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

src/patterns/03-layouts/grid/grid~2col.yml

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

src/patterns/03-layouts/grid/grid~3col.yml

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

src/patterns/03-layouts/grid/grid~4col.yml

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

src/patterns/03-layouts/grid/grid~6col.yml

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

src/patterns/03-layouts/layout/_layout-base.scss

+@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;
+}

src/patterns/03-layouts/layout/_layout.scss

+@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;
+}

src/patterns/03-layouts/layout/_layout.twig

+{% 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>

src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss

+.layout--uw-1-col {
+  display: var(--grid-gap);
+  grid-template-columns: 100%;
+}
+
+.layout--uw-1-col .layout__region--first {
+  grid-column: 1 / 2;
+}

src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig

+{% 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

src/patterns/03-layouts/layout/layout--1-col/layout--1-col.yml

+column_classes:
+  -
+    name: 'Full (100%)'
+    classes: 'layout layout--uw-1-col'

src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss

+@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;
+      }
+    }
+  }
+}

src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig

+{% 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