@codeforamerica/marcomms-design-system 1.1.4 → 1.2.1

package/src/core/grid.scss

@@ -1,690 +1,332 @@
 @use "sass:math";
 @use "sass:list";
-@use "sass:meta";
-
-// Flexbox Mixins
-// http://philipwalton.github.io/solved-by-flexbox/
-// https://github.com/philipwalton/solved-by-flexbox
-// 
-// Copyright (c) 2013 Brian Franco
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to
-// permit persons to whom the Software is furnished to do so, subject to
-// the following conditions:
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-//
-// This is a set of mixins for those who want to mess around with flexbox
-// using the native support of current browsers. For full support table
-// check: http://caniuse.com/flexbox
-//
-// Basically this will use:
-//
-// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
-// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
-//
-// This was inspired by:
-// 
-// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
-// 
-// With help from:
-// 
-// * http://w3.org/tr/css3-flexbox/
-// * http://the-echoplex.net/flexyboxes/
-// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
-// * http://css-tricks.com/using-flexbox/
-// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
-// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
-
-//----------------------------------------------------------------------
-
-// Flexbox Containers
-//
-// The 'flex' value causes an element to generate a block-level flex
-// container box.
-//
-// The 'inline-flex' value causes an element to generate a inline-level
-// flex container box. 
-//
-// display: flex | inline-flex
-//
-// http://w3.org/tr/css3-flexbox/#flex-containers
-//
-// (Placeholder selectors for each type, for those who rather @extend)
-
-@mixin flexbox {
-	display: -webkit-box;
-	display: -webkit-flex;
-	display: -moz-flex;
-	display: -ms-flexbox;
-	display: flex;
-}
-
-%flexbox { @include flexbox; }
-
-//----------------------------------
-
-@mixin inline-flex {
-	display: -webkit-inline-box;
-	display: -webkit-inline-flex;
-	display: -moz-inline-flex;
-	display: -ms-inline-flexbox;
-	display: inline-flex;
-}
-
-%inline-flex { @include inline-flex; }
-
-//----------------------------------------------------------------------
-
-// Flexbox Direction
-//
-// The 'flex-direction' property specifies how flex items are placed in
-// the flex container, by setting the direction of the flex container's
-// main axis. This determines the direction that flex items are laid out in. 
-//
-// Values: row | row-reverse | column | column-reverse
-// Default: row
-//
-// http://w3.org/tr/css3-flexbox/#flex-direction-property
-
-@mixin flex-direction($value: row) {
-	@if $value == row-reverse {
-		-webkit-box-direction: reverse;
-		-webkit-box-orient: horizontal;
-	} @else if $value == column {
-		-webkit-box-direction: normal;
-		-webkit-box-orient: vertical;
-	} @else if $value == column-reverse {
-		-webkit-box-direction: reverse;
-		-webkit-box-orient: vertical;
-	} @else {
-		-webkit-box-direction: normal;
-		-webkit-box-orient: horizontal;
-	}
-	-webkit-flex-direction: $value;
-	-moz-flex-direction: $value;
-	-ms-flex-direction: $value;
-	flex-direction: $value;
-}
-	// Shorter version:
-	@mixin flex-dir($args...) { @include flex-direction($args...); }
-
-//----------------------------------------------------------------------
-
-// Flexbox Wrap
-//
-// The 'flex-wrap' property controls whether the flex container is single-line
-// or multi-line, and the direction of the cross-axis, which determines
-// the direction new lines are stacked in. 
-//
-// Values: nowrap | wrap | wrap-reverse
-// Default: nowrap
-//
-// http://w3.org/tr/css3-flexbox/#flex-wrap-property
-
-@mixin flex-wrap($value: nowrap) {
-	// No Webkit Box fallback.
-	-webkit-flex-wrap: $value;
-	-moz-flex-wrap: $value;
-	@if $value == nowrap {
-		-ms-flex-wrap: none;
-	} @else { 
-		-ms-flex-wrap: $value; 
-	}
-	flex-wrap: $value;
-}
-
-//----------------------------------------------------------------------
-
-// Flexbox Flow (shorthand)
-//
-// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
-// and 'flex-wrap' properties, which together define the flex container's
-// main and cross axes.
-//
-// Values: <flex-direction> | <flex-wrap> 
-// Default: row nowrap
-//
-// http://w3.org/tr/css3-flexbox/#flex-flow-property
-
-@mixin flex-flow($values: (row nowrap)) {
-	// No Webkit Box fallback.
-	-webkit-flex-flow: $values;
-	-moz-flex-flow: $values;
-	-ms-flex-flow: $values;
-	flex-flow: $values;
-}
-
-//----------------------------------------------------------------------
-
-// Flexbox Order
-//
-// The 'order' property controls the order in which flex items appear within
-// their flex container, by assigning them to ordinal groups.
-//
-// Default: 0
-//
-// http://w3.org/tr/css3-flexbox/#order-property
-
-@mixin order($int: 0) {
-	-webkit-box-ordinal-group: $int + 1;
-	-webkit-order: $int;
-	-moz-order: $int;
-	-ms-flex-order: $int;
-	order: $int;
-}
-
-//----------------------------------------------------------------------
-
-// Flexbox Grow
-//
-// The 'flex-grow' property sets the flex grow factor. Negative numbers
-// are invalid.
-//
-// Default: 0
-//
-// http://w3.org/tr/css3-flexbox/#flex-grow-property
-
-@mixin flex-grow($int: 0) {
-	-webkit-box-flex: $int;
-	-webkit-flex-grow: $int;
-	-moz-flex-grow: $int;
-	-ms-flex-positive: $int;
-	flex-grow: $int;
-}
 
-//----------------------------------------------------------------------
-
-// Flexbox Shrink
-//
-// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
-// are invalid.
-//
-// Default: 1
-//
-// http://w3.org/tr/css3-flexbox/#flex-shrink-property
-
-@mixin flex-shrink($int: 1) {
-	-webkit-flex-shrink: $int;
-	-moz-flex-shrink: $int;
-	-ms-flex-negative: $int;
-	flex-shrink: $int;
-}
+// ===========
+// Grid System
+// ===========
 
-//----------------------------------------------------------------------
-
-// Flexbox Basis
-//
-// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
-//
-// Values: Like "width" 
-// Default: auto
-//
-// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
-
-@mixin flex-basis($value: auto) {
-	-webkit-flex-basis: $value;
-	-moz-flex-basis: $value;
-	-ms-flex-preferred-size: $value;
-	flex-basis: $value;
-}
+// -------------
+// Configuration
+// -------------
 
-//----------------------------------------------------------------------
-
-// Flexbox "Flex" (shorthand)
-//
-// The 'flex' property specifies the components of a flexible length: the
-// flex grow factor and flex shrink factor, and the flex basis. When an
-// element is a flex item, 'flex' is consulted instead of the main size
-// property to determine the main size of the element. If an element is
-// not a flex item, 'flex' has no effect.
-//
-// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
-// Default: See individual properties (1 1 0).
-//
-// http://w3.org/tr/css3-flexbox/#flex-property
-
-@mixin flex($fg: 1, $fs: null, $fb: null) {
-    
-	// Set a variable to be used by box-flex properties
-	$fg-boxflex: $fg;
-
-	// Box-Flex only supports a flex-grow value so let's grab the
-	// first item in the list and just return that.
-	@if meta.type-of($fg) == 'list' {
-		$fg-boxflex: list.nth($fg, 1);
-	}
-
-	-webkit-box-flex: $fg-boxflex;
-	-webkit-flex: $fg $fs $fb;
-	-moz-box-flex: $fg-boxflex;
-	-moz-flex: $fg $fs $fb;
-	-ms-flex: $fg $fs $fb;
-	flex: $fg $fs $fb;
+$grid-columns: 12;
+$base-font-size: 20px;
+$gutter-width: 1.5 * $base-font-size; // 30px - equivalent to --spacing-layout-1
+$outer-margin: 1.5 * $base-font-size; // 30px - equivalent to --spacing-layout-1
+$max-width: 1200px;
+
+// Breakpoints: name, min-width, container-width
+$breakpoints: (
+  sm: (480px, 480px),
+  md: (768px, 768px),
+  lg: (1024px, $max-width)
+);
+
+// Calculated values
+$gutter-compensation: calc($gutter-width * -0.5);
+$half-gutter-width: calc($gutter-width * 0.5);
+
+// ------
+// Mixins
+// ------
+
+@mixin flex-container($direction: row, $wrap: wrap) {
+  display: flex;
+  flex-flow: $direction $wrap;
 }
 
-//----------------------------------------------------------------------
-
-// Flexbox Justify Content
-//
-// The 'justify-content' property aligns flex items along the main axis
-// of the current line of the flex container. This is done after any flexible
-// lengths and any auto margins have been resolved. Typically it helps distribute
-// extra free space leftover when either all the flex items on a line are
-// inflexible, or are flexible but have reached their maximum size. It also
-// exerts some control over the alignment of items when they overflow the line.
-//
-// Note: 'space-*' values not supported in older syntaxes.
-//
-// Values: flex-start | flex-end | center | space-between | space-around
-// Default: flex-start
-//
-// http://w3.org/tr/css3-flexbox/#justify-content-property
-
-@mixin justify-content($value: flex-start) {
-	@if $value == flex-start {
-		-webkit-box-pack: start;
-		-ms-flex-pack: start;
-	} @else if $value == flex-end {
-		-webkit-box-pack: end;
-		-ms-flex-pack: end;
-	} @else if $value == space-between {
-		-webkit-box-pack: justify;
-		-ms-flex-pack: justify;
-	} @else if $value == space-around {
-		-ms-flex-pack: distribute;		
-	} @else {
-		-webkit-box-pack: $value;
-		-ms-flex-pack: $value;
-	}
-	-webkit-justify-content: $value;
-	-moz-justify-content: $value;
-	justify-content: $value;
-}
-	// Shorter version:
-	@mixin flex-just($args...) { @include justify-content($args...); }
-
-//----------------------------------------------------------------------
-
-// Flexbox Align Items
-//
-// Flex items can be aligned in the cross axis of the current line of the
-// flex container, similar to 'justify-content' but in the perpendicular
-// direction. 'align-items' sets the default alignment for all of the flex
-// container's items, including anonymous flex items. 'align-self' allows
-// this default alignment to be overridden for individual flex items. (For
-// anonymous flex items, 'align-self' always matches the value of 'align-items'
-// on their associated flex container.) 
-//
-// Values: flex-start | flex-end | center | baseline | stretch
-// Default: stretch
-//
-// http://w3.org/tr/css3-flexbox/#align-items-property
-
-@mixin align-items($value: stretch) {
-	@if $value == flex-start {
-		-webkit-box-align: start;
-		-ms-flex-align: start;
-	} @else if $value == flex-end {
-		-webkit-box-align: end;
-		-ms-flex-align: end;
-	} @else {
-		-webkit-box-align: $value;
-		-ms-flex-align: $value;
-	}
-	-webkit-align-items: $value;
-	-moz-align-items: $value;
-	align-items: $value;
-}
+@mixin col-base {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+
+@mixin col-size($size) {
+  // Calculate width accounting for gaps between columns
+  $gap-count: $grid-columns - 1;
+  $total-gap-width: $gap-count * $gutter-width;
+  $available-width: calc(100% - #{$total-gap-width});
+  $width: calc(#{$available-width} / #{$grid-columns} * #{$size});
+  
+  // For single column, add back the gap space
+  @if $size == $grid-columns {
+    $width: 100%;
+  }
 
-//----------------------------------
-
-// Flexbox Align Self
-//
-// Values: auto | flex-start | flex-end | center | baseline | stretch
-// Default: auto
-
-@mixin align-self($value: auto) {
-	// No Webkit Box Fallback.
-	-webkit-align-self: $value;
-	-moz-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;
-}
+  @else {
+    $additional-gaps: $size - 1;
+    $width: calc(#{$width} + #{$additional-gaps * $gutter-width});
+  }
 
-//----------------------------------------------------------------------
-
-// Flexbox Align Content
-//
-// The 'align-content' property aligns a flex container's lines within the
-// flex container when there is extra space in the cross-axis, similar to
-// how 'justify-content' aligns individual items within the main-axis. Note,
-// this property has no effect when the flexbox has only a single line.
-//
-// Values: flex-start | flex-end | center | space-between | space-around | stretch
-// Default: stretch
-//
-// http://w3.org/tr/css3-flexbox/#align-content-property
-
-@mixin align-content($value: stretch) {
-	// No Webkit Box Fallback.
-	-webkit-align-content: $value;
-	-moz-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;
+  flex-basis: $width;
+  max-width: $width;
 }
 
-$base-font-size: 20px;
-
-$grid-columns: 12;
-$gutter-width: 1.5 * $base-font-size; // equivalent to --gutter-width token (i.e. --spacing-layout-1)
-$outer-margin: 1.5 * $base-font-size; // equivalent to --outer-margin token (i.e. --spacing-layout-1)
-
-$breakpoints: sm 480px 480px, md 768px 768px;
-$flexboxgrid-max-width: 1200px;
-
-$gutter-compensation: $gutter-width * .5 * -1;
-$half-gutter-width: $gutter-width * .5;
+// ----------
+// Containers
+// ----------
 
 .wrapper {
   box-sizing: border-box;
-  max-width: $flexboxgrid-max-width;
+  max-width: $max-width;
   margin: 0 auto;
+  padding-inline: $outer-margin;
 }
 
 .container-fluid {
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: $outer-margin;
-  padding-left: $outer-margin;
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
-.row {
-  @include flexbox();
-  @include flex(0, 1, auto);
-  @include flex-direction(row);
-  @include flex-wrap(wrap);
-
-  box-sizing: border-box;
-  margin-right: $gutter-compensation;
-  margin-left: $gutter-compensation;
+// When wrapper and container-fluid are combined, wrapper handles padding
+.wrapper.container-fluid {
+  padding-inline: $outer-margin;
 }
 
-.row.reverse {
-  @include flex-direction(row-reverse);
+.container {
+  margin-inline: auto;
+  padding-inline: $outer-margin;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
-.col.reverse {
-  @include flex-direction(column-reverse);
-}
+// ----
+// Rows
+// ----
 
-@mixin flexboxgrid-sass-col-common {
-  box-sizing: border-box;
+.row {
+  @include flex-container(row, wrap);
 
-  // split @include flex(0, 0, auto) into individual props
-  @include flex-grow(0);
-  @include flex-shrink(0);
+  box-sizing: border-box;
+  flex-basis: 100%;
+  column-gap: $gutter-width;
+  row-gap: 0;
 
-  // we leave @include flex-basis(auto) out of common because  
-  // in some spots we need it and some we dont
-  // more why here: https://github.com/kristoferjoseph/flexboxgrid/issues/126
+  // Row variants
+  &.reverse {
+    flex-direction: row-reverse;
+  }
 
-  padding-right: $half-gutter-width;
-  padding-left: $half-gutter-width;
+  // No gutters modifier
+  &--no-gutters {
+    column-gap: 0;
+    row-gap: 0;
+  }
 }
 
-$name: xs;
-.col-#{$name} {
-  @include flexboxgrid-sass-col-common;
-  @include flex-basis(auto);
-}
-@for $i from 1 through $grid-columns {
-  .col-#{$name}-#{$i} {
-    @include flexboxgrid-sass-col-common;
-    @include flex-basis(math.div(100%, $grid-columns) * $i);
-    max-width: math.div(100%, $grid-columns) * $i;
+.container-fluid > .row {
+  flex: 1;
+}
+
+// Testing variant - shows grid lines between columns
+.container-fluid--grid-test {
+  position: relative;
+  
+  // Fill the outer margins with light grey
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 0;
+    background: 
+      // Left margin
+      linear-gradient(
+        to right,
+        rgba(200, 200, 200, 0.3) 0,
+        rgba(200, 200, 200, 0.3) $outer-margin,
+        transparent $outer-margin
+      ),
+      // Right margin  
+      linear-gradient(
+        to left,
+        rgba(200, 200, 200, 0.3) 0,
+        rgba(200, 200, 200, 0.3) $outer-margin,
+        transparent $outer-margin
+      );
   }
-}
-@for $i from 1 through $grid-columns {
-  .col-#{$name}-offset-#{$i} {
-    @include flexboxgrid-sass-col-common;
-    margin-left: math.div(100%, $grid-columns) * $i;
+  
+  // Fill the gaps between columns with light grey
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: $outer-margin;
+    right: $outer-margin;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1;
+    background-image: repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc((100% - #{$gutter-width * 11}) / 12), // Column width
+      rgba(200, 200, 200, 0.4) calc((100% - #{$gutter-width * 11}) / 12), // Start of gap
+      rgba(200, 200, 200, 0.4) calc((100% - #{$gutter-width * 11}) / 12 + #{$gutter-width}), // End of gap
+      transparent calc((100% - #{$gutter-width * 11}) / 12 + #{$gutter-width}) // Next column starts
+    );
+  }
+  
+  .row {
+    position: relative;
+    z-index: 2;
   }
-}
-.col-#{$name} {
-  @include flex-grow(1);
-  @include flex-basis(0);
-  max-width: 100%;
-}
-.start-#{$name} {
-  @include justify-content(flex-start);
-  text-align: start;
-}
-
-.center-#{$name} {
-  @include justify-content(center);
-  text-align: center;
-}
-
-.end-#{$name} {
-  @include justify-content(flex-end);
-  text-align: end;
 }
 
-.top-#{$name} {
-  @include align-items(flex-start);
-}
+// -------
+// Columns
+// -------
 
-.middle-#{$name} {
-  @include align-items(center);
-}
+// Auto-width column
+.col-xs {
+  @include col-base;
 
-.bottom-#{$name} {
-  @include align-items(flex-end);
-}
-
-.around-#{$name} {
-  @include justify-content(space-around);
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 100%;
 }
 
-.between-#{$name} {
-  @include justify-content(space-between);
+// Sized columns (1-12)
+@for $i from 1 through $grid-columns {
+  .col-xs-#{$i} {
+    @include col-base;
+    @include col-size($i);
+  }
 }
 
-.first-#{$name} {
-  order: -1;
+// Column reverse
+.col.reverse {
+  flex-direction: column-reverse;
 }
 
-.last-#{$name} {
-  order: 1;
-}
+// ------------------
+// Responsive columns
+// ------------------
 
+@each $name, $values in $breakpoints {
+  $min-width: list.nth($values, 1);
+  $container-width: list.nth($values, 2);
 
-@each $breakpoint in $breakpoints {
-  $name: list.nth($breakpoint, 1);
-  $size: list.nth($breakpoint, 2);
-  $container: list.nth($breakpoint, 3);
-  @media only screen and (min-width: $size) {
+  @media only screen and (min-width: $min-width) {
     .container {
-      width: $container;
+      width: $container-width;
     }
 
+    // Auto-width column
     .col-#{$name} {
-      @include flexboxgrid-sass-col-common;
-      @include flex-basis(auto);
+      @include col-base;
+
+      flex-grow: 1;
+      flex-basis: 0;
+      max-width: 100%;
     }
+
+    // Sized columns (1-12)
     @for $i from 1 through $grid-columns {
       .col-#{$name}-#{$i} {
-        @include flexboxgrid-sass-col-common;
-        @include flex-basis(math.div(100%, $grid-columns) * $i);
-        max-width: math.div(100%, $grid-columns) * $i;
+        @include col-base;
+        @include col-size($i);
       }
     }
-    @for $i from 1 through $grid-columns {
-      .col-#{$name}-offset-#{$i} {
-        @include flexboxgrid-sass-col-common;
-        margin-left: math.div(100%, $grid-columns) * $i
+
+    // Row flex sizing
+    @for $i from 1 through 3 {
+      .row-#{$name}-#{$i} {
+        flex: $i !important;
       }
     }
-    .col-#{$name} {
-      @include flex-grow(1);
-      @include flex-basis(0);
-      max-width: 100%;
-    }
-    .start-#{$name} {
-      @include justify-content(flex-start);
-      text-align: start;
-    }
 
-    .center-#{$name} {
-      @include justify-content(center);
-      text-align: center;
+    // Row ordering
+    .row-first-#{$name} {
+      order: -1;
     }
 
-    .end-#{$name} {
-      @include justify-content(flex-end);
-      text-align: end;
+    .row-last-#{$name} {
+      order: 1;
     }
+  }
+}
 
-    .top-#{$name} {
-      @include align-items(flex-start);
-    }
+// -------------------
+// Alignment Utilities
+// -------------------
 
-    .middle-#{$name} {
-      @include align-items(center);
-    }
+// Horizontal alignment (justify-content)
+.start-xs { justify-content: flex-start; }
 
-    .bottom-#{$name} {
-      @include align-items(flex-end);
-    }
+.center-xs { justify-content: center; }
 
-    .around-#{$name} {
-      @include justify-content(space-around);
-    }
+.end-xs { justify-content: flex-end; }
 
-    .between-#{$name} {
-      @include justify-content(space-between);
-    }
+.around-xs { justify-content: space-around; }
 
-    .first-#{$name} {
-      order: -1;
-    }
+.between-xs { justify-content: space-between; }
 
-    .last-#{$name} {
-      order: 1;
-    }
-  }
-}
+// Vertical alignment (align-items)
+.top-xs { align-items: flex-start; }
 
-.row {
-  flex-basis: 100%;
-  row-gap: var(--spacing-layout-1);
-}
+.middle-xs { align-items: center; }
 
-.row--no-gutters {
-  margin-left: 0;
-  margin-right: 0;
+.bottom-xs { align-items: flex-end; }
 
-  & > *[class*='col-'] {
-    padding-left: 0;
-    padding-right: 0;
+.stretch-xs { 
+  align-items: stretch;
+  
+  > * {
+    display: flex;
   }
 }
 
-.container-fluid {
-  display: flex;
-  flex-direction: column;
-
-  & > .row {
-    flex: 1;
-  }
-
-  @each $breakpoint in $breakpoints {
-    $name: list.nth($breakpoint, 1);
-    $size: list.nth($breakpoint, 2);
-    @media only screen and (min-width: $size) {
-      @for $i from 1 through 3 {
-        .row-#{$name}-#{$i} {
-          flex: $i !important;
-        }
-        .row-first-#{$name} {
-          order: -1;
-        }   
-        .row-last-#{$name} {
-          order: 1;
-        }
-      }
-    }  
-  }
+// Ordering
+.first-xs { order: -1; }
 
-}
+.last-xs { order: 1; }
 
-@each $breakpoint in $breakpoints {
-  $name: list.nth($breakpoint, 1);
-
-  // Stop Flexbox Grid alignment from affecting text-alignment
-  .start-xs,
-  .center-xs,
-  .end-xs,
-  .start-#{$name},
-  .center-#{$name},
-  .end-#{$name} {
-    text-align: inherit;
-  }
-
-  // Alignment class for aligning row items at the top of a row
-  .top-xs,
-  .top-#{$name} {
-    align-items: flex-start;
-  }
+// Responsive alignment utilities
+@each $name, $values in $breakpoints {
+  $min-width: list.nth($values, 1);
 
-  // Alignment class for aligning row items in the middle of a row vertically
-  .middle-xs,
-  .middle-#{$name} {
-    align-items: center;
-  }
+  @media only screen and (min-width: $min-width) {
+    // Horizontal alignment
+    .start-#{$name} { justify-content: flex-start; }
+    .center-#{$name} { justify-content: center; }
+    .end-#{$name} { justify-content: flex-end; }
+    .around-#{$name} { justify-content: space-around; }
+    .between-#{$name} { justify-content: space-between; }
 
-  // Alignment class for aligning row items at the bottom of a row
-  .bottom-xs,
-  .bottom-#{$name} {
-    align-items: flex-end;
-  }
+    // Vertical alignment
+    .top-#{$name} { align-items: flex-start; }
+    .middle-#{$name} { align-items: center; }
+    .bottom-#{$name} { align-items: flex-end; }
+    .stretch-#{$name} { 
+      align-items: stretch;
 
-  // Alignment class for stretching items to fill row
-  .stretch-xs,
-  .stretch-#{$name} {
-    align-items: stretch;
+      & > * {
+        display: flex;
+        flex-direction: column;
+      }
 
-    & > * {
-      display: flex;
+      & > * > *{
+        height: 100%;
+      }
     }
+
+    // Ordering
+    .first-#{$name} { order: -1; }
+    .last-#{$name} { order: 1; }
   }
 }
 
+// -----------------
+// Utility Functions
+// -----------------
+
 @function column-span($columns) {
-  $width: ( math.div($flexboxgrid-max-width - $outer-margin, $grid-columns) * $columns ) - $gutter-width;
+  $width: math.div($max-width - $outer-margin, $grid-columns) * $columns - $gutter-width;
+
   @return $width;
 }