pull in v11.0.1 from upstream

resources/css/global/framework/_breakpoints.scss

@@ -0,0 +1,13 @@
+@each $label, $value in $breakpoints {
+  .min-#{$label} {
+    @media (min-width: $value) {
+      display: none;
+    }
+  }
+
+  .max-#{$label} {
+    @media (max-width: ($value - 0.0625)) {
+      display: none;
+    }
+  }
+}

resources/css/global/framework/_colours.scss

@@ -0,0 +1,9 @@
+::selection {
+  color: $white;
+  background: $primary;
+}
+
+@each $color, $hex in $colors {
+  @include generate_colour_classes($color, $hex);
+  @include generate_button_colors($color, $hex);
+}

resources/css/global/framework/_normalise.scss

@@ -0,0 +1,35 @@
+* {
+  box-sizing: border-box;
+  backface-visibility: hidden; // removes jagged edges on rotated elements
+}
+
+html {
+  font-size: 16px;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  background: $white;
+}
+
+.visually-hidden {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  transition: all 300ms ease;
+
+  &.lazy {
+    filter: blur(0.25em);
+  }
+}

resources/css/global/framework/_spacing.scss

@@ -0,0 +1,110 @@
+.brand {
+  display: block;
+  width: $brandWidth;
+  height: $brandHeight;
+
+  svg,
+  img {
+    display: block;
+    width: $brandWidth;
+    height: $brandHeight;
+  }
+
+  .knockout & {
+    @media screen {
+      .fill-primary {
+        fill: $white;
+      }
+
+      .fill-grey {
+        fill: rgba($white, 0.8);
+      }
+    }
+  }
+}
+
+.container {
+  width: 90%;
+  margin: auto;
+
+  &-large { max-width: $containerLarge; }
+  &-medium { max-width: $containerMedium; }
+  &-small { max-width: $containerSmall; }
+  &-narrow { max-width: $containerNarrow; }
+}
+
+.section {
+  padding: $sectionMedium 0;
+
+  &-small { padding: $sectionSmall 0; }
+  &-medium { padding: $sectionMedium 0; }
+  &-large { padding: $sectionLarge 0; }
+
+  &-zero-top { padding-top: 0; }
+  &-zero-bottom { padding-bottom: 0; }
+}
+
+.inner {
+  padding: $innerMedium;
+
+  &-small { padding: $innerSmall; }
+  &-large { padding: $innerLarge; }
+
+  &-zero-x {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &-zero-y {
+    padding-top: 0;
+    padding-top: 0;
+  }
+}
+
+.rounded {
+  border-radius: $borderRadius;
+
+  &-top {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-bottom {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+
+.border {
+  border-style: solid;
+  border-width: $borderWidth;
+
+  &-thin { border-width: 0.0625em; }
+  &-regular { border-width: $borderWidth; }
+  &-thick { border-width: $borderThick; }
+  &-thicker { border-width: $borderThicker; }
+
+  &-top {
+    border-right-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-right {
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-bottom {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+
+  &-left {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+  }
+}