ISTWCMS-2286: Adding block layout for browsers that do not support grid

components/_patterns/00-base/_global.scss

@@ -14,20 +14,42 @@ body {
 }
 
 .layout-container {
+  @supports not (display: grid) {
+    clear: both;
+    float: left;
+    width: 100%;
+  }
+
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: minmax(60px, auto) minmax(451.5px, auto) minmax(100px, auto);
 }
 
 .layout-container header {
+  @supports not (display: grid) {
+    clear: both;
+    float: left;
+    width: 100%;
+  }
+
   grid-column: 1 / 2;
   grid-row: 1 / 2;
 }
 
 .layout-container main {
+  @supports not (display: grid) {
+    clear: both;
+    float: left;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @supports (display: grid) {
+    max-width: 63.125rem;
+  }
+
   grid-column: 1 / 2;
   grid-row: 2 / 3;
-  max-width: 63.125rem;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
@@ -35,11 +57,23 @@ body {
 }
 
 .layout-container .block-site-footer-block {
+  @supports not (display: grid) {
+    clear: both;
+    float: left;
+    width: 100%;
+  }
+
   grid-column: 1 / 2;
   grid-row: 3 / 4;
 }
 
 .layout-container footer {
+  @supports not (display: grid) {
+    clear: both;
+    float: left;
+    width: 100%;
+  }
+
   grid-column: 1 / 2;
   grid-row: 4 / 5;
 }

components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss

@@ -8,6 +8,11 @@ ul.global-footer-menu {
 }
 
 .global-footer-menu {
+  @supports not (display: grid) {
+    clear: both;
+    width: 100%;
+  }
+
   display: grid;
   grid-template-columns: auto auto auto;
   grid-template-rows: auto auto auto;
@@ -23,6 +28,23 @@ ul.global-footer-menu {
   border-right: 1px solid grey;
 }
 
+@supports not (display: grid) {
+  .global-footer-menu li:nth-child(1n) {
+    float: left;
+    width: 25%;
+  }
+
+  .global-footer-menu li:nth-child(2n) {
+    float: left;
+    width: 25%;
+  }
+
+  .global-footer-menu li:nth-child(3n) {
+    float: left;
+    width: 25%;
+  }
+}
+
 .global-footer-menu li:nth-child(1) {
   grid-column: 1;
   grid-row: 1;

components/_patterns/03-organisms/site/site-footer/_site-footer.scss

@@ -7,26 +7,52 @@ footer {
 }
 
 .uw-footer-grid {
-  max-width: 63.125rem;
-  margin-left: auto;
-  margin-right: auto;
+  @supports not (display: grid) {
+    clear: both;
+    width: 100%;
+    max-width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @supports (display: grid) {
+    max-width: 63.125rem;
+  }
+
   display: grid;
   grid-template-columns: 25% auto 30%;
   grid-template-rows: auto;
+  margin-left: auto;
+  margin-right: auto;
   padding: 1rem;
 }
 
 .uw-footer-grid .footer-1 {
+  @supports not (display: grid) {
+    float: left;
+    width: 25%;
+  }
+
   grid-column: 1 / 2;
   grid-row: 1 / 2;
 }
 
 .uw-footer-grid .footer-2 {
+  @supports not (display: grid) {
+    float: left;
+    width: 45%;
+  }
+
   grid-column: 2 / 3;
   grid-row: 1 / 2;
 }
 
 .uw-footer-grid .footer-3 {
+  @supports not (display: grid) {
+    float: left;
+    width: 30%;
+  }
+
   grid-column: 3 / 4;
   grid-row: 1 / 2;
   text-align: right;

components/_patterns/03-organisms/site/site-header/_site-header.scss

 .header {
+  @supports not (display: grid) {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   width: 100%;
   background-color: $uw-black;
   padding-top: 0.5rem;
@@ -19,22 +25,42 @@
 }
 
 .uw-header-grid {
+  @supports not (display: grid) {
+    clear: both;
+    max-width: 80%;
+  }
+
   display: grid;
   grid-template-columns: 17% auto 10%;
   grid-template-rows: auto;
 }
 
 .uw-header-grid .header-1 {
+  @supports not (display: grid) {
+    float: left;
+    width: 17%;
+  }
+
   grid-column: 1 / 2;
   grid-row: 1 / 2;
 }
 
 .uw-header-grid .header-2 {
+  @supports not (display: grid) {
+    float: left;
+    width: 73%;
+  }
+
   grid-column: 2 / 3;
   grid-row: 1 / 2;
 }
 
 .uw-header-grid .header-3 {
+  @supports not (display: grid) {
+    float: left;
+    width: 10%;
+  }
+
   grid-column: 3 / 4;
   grid-row: 1 / 2;
 }

components/_patterns/05-pages/_page.scss

+main.main {
+  background-color: $uw-white;
+  padding-bottom: 2rem;
+}
 
 .main-content-wrapper {
+  @supports not (display: grid) {
+    clear: both;
+    width: 100%;
+    max-width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   display: grid;
   grid-template-columns: 23% 77%;
   grid-template-rows: auto;
 
   .uw-main-navigation {
+    @supports not (display: grid) {
+      float: left;
+      width: 23%;
+    }
+
     grid-column: 1 / 2;
     grid-row: 1 / 2;
   }
 
   .main-content {
+    @supports not (display: grid) {
+      float: left;
+      width: 77%;
+    }
+
     grid-column: 2 / 3;
     grid-row: 1 / 2;
   }
 }
 
 .main-content--with-sidebar {
+  @supports not (display: grid) {
+    clear: both;
+    width: 100%;
+  }
+
   display: grid;
   grid-template-columns: 70% 30%;
   grid-template-rows: auto auto auto;
@@ -26,6 +53,11 @@
   }
 
   .main-content--tabs {
+    @supports not (display: grid) {
+      float: left;
+      width: 77%;
+    }
+
     grid-column: 1 / 3;
     grid-row: 2 / 3;
   }