feat(utilities): Added breakspointsAndArtboards variable, modified fluid util functions. Updated error logic.

Author: Jen Downs

examples/bootstrap/css-gridish/bootstrap-grid.sketch

@@ -6,7 +6,7 @@
 /// @param {String} $breakpointName Breakpoint name.
 /// @return {Length} The breakpoint value in rems.
 @function getBreakpointValue($breakpointName) {
-  $breakpointValue: map-deep-get($allBreakpoints, $breakpointName, 'breakpoint');
+  $breakpointValue: map-deep-get($breakpointsAndArtboards, $breakpointName, 'breakpoint');
 
   @return $breakpointValue * 1rem;
 }
@@ -29,14 +29,15 @@
 ///   }
 /// }
 @function getFluidSize($breakpointName, $columnSpan) {
-  $breakpoint: map-get($allBreakpoints, $breakpointName);
-  $columnTotal: map-get($breakpoint, columns);
-  $margin: map-get($breakpoint, margin);
+  $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
-  @if ($breakpoint == null) {
+  @if ($breakpoint == null or type-of($breakpoint) != 'map') {
     @error 'The provided breakpoint `#{$breakpointName}` is not a valid breakpoint found in breakpoints or extraArtboards in $grid-values. Please double-check your grid configuration.';
   }
 
+  $columnTotal: map-get($breakpoint, columns);
+  $margin: map-get($breakpoint, margin);
+
   @if ($columnTotal == null or type-of($columnTotal) != 'number') {
     @error 'The provided breakpoint `#{$breakpointName}` needs to have a total number of columns set in $grid-values. Please double-check your grid configuration.';
   }
@@ -92,4 +93,4 @@
   @media screen and (min-width: #{getBreakpointValue($breakpointName)}) {
     @content;
   }
-}
+}

examples/bootstrap/css-gridish/scss/_utilities.scss

@@ -11,4 +11,6 @@ $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
+$extraArtboards: map-get($grid-values, "extraArtboards");
 $allBreakpoints: allBreakpoints($breakpoints, $extraBreakpoints, $first, $last);
+$breakpointsAndArtboards: allBreakpoints($breakpoints, $extraArtboards, $first, $last);

examples/bootstrap/css-gridish/scss/_variables.scss

@@ -6,7 +6,7 @@
 /// @param {String} $breakpointName Breakpoint name.
 /// @return {Length} The breakpoint value in rems.
 @function getBreakpointValue($breakpointName) {
-  $breakpointValue: map-deep-get($allBreakpoints, $breakpointName, 'breakpoint');
+  $breakpointValue: map-deep-get($breakpointsAndArtboards, $breakpointName, 'breakpoint');
 
   @return $breakpointValue * 1rem;
 }
@@ -29,14 +29,15 @@
 ///   }
 /// }
 @function getFluidSize($breakpointName, $columnSpan) {
-  $breakpoint: map-get($allBreakpoints, $breakpointName);
-  $columnTotal: map-get($breakpoint, columns);
-  $margin: map-get($breakpoint, margin);
+  $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
-  @if ($breakpoint == null) {
+  @if ($breakpoint == null or type-of($breakpoint) != 'map') {
     @error 'The provided breakpoint `#{$breakpointName}` is not a valid breakpoint found in breakpoints or extraArtboards in $grid-values. Please double-check your grid configuration.';
   }
 
+  $columnTotal: map-get($breakpoint, columns);
+  $margin: map-get($breakpoint, margin);
+
   @if ($columnTotal == null or type-of($columnTotal) != 'number') {
     @error 'The provided breakpoint `#{$breakpointName}` needs to have a total number of columns set in $grid-values. Please double-check your grid configuration.';
   }
@@ -92,4 +93,4 @@
   @media screen and (min-width: #{getBreakpointValue($breakpointName)}) {
     @content;
   }
-}
+}

examples/carbon/css-gridish/bx-grid.sketch

@@ -11,4 +11,6 @@ $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
+$extraArtboards: map-get($grid-values, "extraArtboards");
 $allBreakpoints: allBreakpoints($breakpoints, $extraBreakpoints, $first, $last);
+$breakpointsAndArtboards: allBreakpoints($breakpoints, $extraArtboards, $first, $last);

examples/carbon/css-gridish/scss/_utilities.scss

@@ -6,7 +6,7 @@
 /// @param {String} $breakpointName Breakpoint name.
 /// @return {Length} The breakpoint value in rems.
 @function getBreakpointValue($breakpointName) {
-  $breakpointValue: map-deep-get($allBreakpoints, $breakpointName, 'breakpoint');
+  $breakpointValue: map-deep-get($breakpointsAndArtboards, $breakpointName, 'breakpoint');
 
   @return $breakpointValue * 1rem;
 }
@@ -29,14 +29,15 @@
 ///   }
 /// }
 @function getFluidSize($breakpointName, $columnSpan) {
-  $breakpoint: map-get($allBreakpoints, $breakpointName);
-  $columnTotal: map-get($breakpoint, columns);
-  $margin: map-get($breakpoint, margin);
+  $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
-  @if ($breakpoint == null) {
+  @if ($breakpoint == null or type-of($breakpoint) != 'map') {
     @error 'The provided breakpoint `#{$breakpointName}` is not a valid breakpoint found in breakpoints or extraArtboards in $grid-values. Please double-check your grid configuration.';
   }
 
+  $columnTotal: map-get($breakpoint, columns);
+  $margin: map-get($breakpoint, margin);
+
   @if ($columnTotal == null or type-of($columnTotal) != 'number') {
     @error 'The provided breakpoint `#{$breakpointName}` needs to have a total number of columns set in $grid-values. Please double-check your grid configuration.';
   }
@@ -92,4 +93,4 @@
   @media screen and (min-width: #{getBreakpointValue($breakpointName)}) {
     @content;
   }
-}
+}

examples/carbon/css-gridish/scss/_variables.scss

@@ -11,4 +11,6 @@ $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
+$extraArtboards: map-get($grid-values, "extraArtboards");
 $allBreakpoints: allBreakpoints($breakpoints, $extraBreakpoints, $first, $last);
+$breakpointsAndArtboards: allBreakpoints($breakpoints, $extraArtboards, $first, $last);

examples/material/css-gridish/material-grid.sketch

@@ -6,7 +6,7 @@
 /// @param {String} $breakpointName Breakpoint name.
 /// @return {Length} The breakpoint value in rems.
 @function getBreakpointValue($breakpointName) {
-  $breakpointValue: map-deep-get($allBreakpoints, $breakpointName, 'breakpoint');
+  $breakpointValue: map-deep-get($breakpointsAndArtboards, $breakpointName, 'breakpoint');
 
   @return $breakpointValue * 1rem;
 }
@@ -29,14 +29,15 @@
 ///   }
 /// }
 @function getFluidSize($breakpointName, $columnSpan) {
-  $breakpoint: map-get($allBreakpoints, $breakpointName);
-  $columnTotal: map-get($breakpoint, columns);
-  $margin: map-get($breakpoint, margin);
+  $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
-  @if ($breakpoint == null) {
+  @if ($breakpoint == null or type-of($breakpoint) != 'map') {
     @error 'The provided breakpoint `#{$breakpointName}` is not a valid breakpoint found in breakpoints or extraArtboards in $grid-values. Please double-check your grid configuration.';
   }
 
+  $columnTotal: map-get($breakpoint, columns);
+  $margin: map-get($breakpoint, margin);
+
   @if ($columnTotal == null or type-of($columnTotal) != 'number') {
     @error 'The provided breakpoint `#{$breakpointName}` needs to have a total number of columns set in $grid-values. Please double-check your grid configuration.';
   }
@@ -92,4 +93,4 @@
   @media screen and (min-width: #{getBreakpointValue($breakpointName)}) {
     @content;
   }
-}
+}