ISTWCMS-5593: inital import of uw layouts and grid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss

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

src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig

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

src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.yml

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

src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss

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

src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig

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

src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml

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

src/patterns/03-layouts/region/region.scss

+// @file
+// Styles for generic Region layout.
+
+.l-region {
+  .pl &{
+    outline: 1px dashed var(--gray-4);
+    padding: 1.5rem;
+    text-align: center;
+  }
+}

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

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

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

+---
+region_name: ''
+constrain: ''
+content: ''