feat: add feature flag for baseline grid (#2)

because: - not all projects require a global baseline grid - the compiling of a line-height declaration each time a font-size is declared may not be worth it in all cases this commit: - adds the ability to set the `$FLUIDMS-GLOBAL-BASELINE` to `false` to globally disable the baseline grid docs: remove SassDoc example (#2) because: - we don’t need to show an example for every little detail this commit: - removes purposeless SassDoc comment which outputs an code example refactor: eliminate code duplication (#2) style: improve readability (#2) style: reverse if-condition (#2)
csshugs · Feb 3, 2020 · 45f2b2b · 45f2b2b
1 parent 4ae74f1
commit 45f2b2b
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -185,6 +185,12 @@ $FLUIDMS-GLOBAL-BASELINE: 0.25rem !default;
 
 `$FLUIDMS-GLOBAL-BASELINE` needs to be defined with a `rem` unit. It has been proven to be a good idea to define a value between `0.1rem` – `0.333rem`.
 
+If your design doesn’t require a global baseline grid, you can also disable it:
+
+```scss
+$FLUIDMS-GLOBAL-BASELINE: false !default;
+```
+
 ### Changing the global line-height
 
 You can define an ideal line-height that is taken into account when calculating the actual line-height. The value you define here is more just a rough direction of what the resulting line-height will be.

diff --git a/src/generic/_generic.ms-custom-properties.scss b/src/generic/_generic.ms-custom-properties.scss
@@ -9,7 +9,9 @@
 :root {
     @each $scale in map-get($FLUIDMS-CONFIG, scales) {
         --ms#{$scale}-ratio:       #{fluidms-pow(map-get($FLUIDMS-CONFIG, ratio), $scale)};
-        --ms#{$scale}-line-height: #{fluidms-line-height($scale, map-get($FLUIDMS-CONFIG, ratio))};
+        @if $FLUIDMS-GLOBAL-BASELINE {
+            --ms#{$scale}-line-height: #{fluidms-line-height($scale, map-get($FLUIDMS-CONFIG, ratio))};
+        }
     }
 
     @each $key, $value in $FLUIDMS-CONFIG {
@@ -22,7 +24,9 @@
                         // smaller on larger viewports (#21).
                         @if not (str-index(#{$scale}, "-")) {
                             --ms#{$scale}-ratio:       #{fluidms-pow(map-get($value, ratio), $scale)};
-                            --ms#{$scale}-line-height: #{fluidms-line-height($scale, map-get($value, ratio))};
+                            @if $FLUIDMS-GLOBAL-BASELINE {
+                                --ms#{$scale}-line-height: #{fluidms-line-height($scale, map-get($value, ratio))};
+                            }
                         }
                     }
                 }

diff --git a/src/settings/_settings.config.scss b/src/settings/_settings.config.scss
@@ -9,10 +9,10 @@
 /// Define your baseline grid. Everything sits on this vertical grid. Works best
 /// with smaller values (i.e. smaller than one third of 1rem).
 ///
-/// @type `rem` value
+/// @type `rem` value or `false`
 ///
-/// @example scss - Sets the size of the baseline grid to `0.2rem`
-///   $FLUIDMS-GLOBAL-BASELINE: 0.2rem !default;
+/// @example scss - Disable the baseline grid
+///   $FLUIDMS-GLOBAL-BASELINE: false !default;
 $FLUIDMS-GLOBAL-BASELINE: 0.25rem !default;
 
 /// Define your optimal line-height (unit-less). The final line-height will be

diff --git a/src/tools/_tools.font-size.scss b/src/tools/_tools.font-size.scss
@@ -77,15 +77,21 @@
         font-size: $_font-size $important;
 
         @if ($line-height == auto) {
-            // Calculate the line-height at runtime by using the generated
-            // `--ms<n>-line-height` CSS custom properties.
-            $_line-height: var(--ms#{$font-size}-line-height);
-            // If the line-height is modified, add/subtract that from the
-            // calculated line-height.
-            @if $line-height-modifier {
-                $_line-height: calc(var(--ms#{$font-size}-line-height) + #{$line-height-modifier * $FLUIDMS-GLOBAL-BASELINE});
+            @if $FLUIDMS-GLOBAL-BASELINE {
+                // Calculate the line-height at runtime by using the generated
+                // `--ms<n>-line-height` CSS custom properties.
+                $_line-height: var(--ms#{$font-size}-line-height);
+                // If the line-height is modified, add/subtract that from the
+                // calculated line-height.
+                @if $line-height-modifier {
+                    $_line-height: calc(var(--ms#{$font-size}-line-height) + #{$line-height-modifier * $FLUIDMS-GLOBAL-BASELINE});
+                }
+                line-height: $_line-height $important;
+            } @else {
+                @if $line-height-modifier {
+                    @warn _lineHeightModifierHasNoEffect();
+                }
             }
-            line-height: $_line-height $important;
         } @else {
             line-height: _validateLineHeight($line-height) $important;
         }
@@ -95,23 +101,33 @@
         // Just output the passed in font-size value.
         font-size: $font-size $important;
         @if ($line-height == auto) {
-            // If the font-size is custom, just output the
-            // `$FLUIDMS-GLOBAL-LINE-HEIGHT` as `em` value, so we can use `calc`
-            // with it when a line-height modifier is used.
-            $_line-height: $FLUIDMS-GLOBAL-LINE-HEIGHT * 1em;
-            // If the line-height is modified, add/subtract that from the
-            // calculated line-height.
-            @if $line-height-modifier {
-                $_line-height: calc(#{$_line-height} + #{$line-height-modifier * $FLUIDMS-GLOBAL-BASELINE});
+            @if $FLUIDMS-GLOBAL-BASELINE {
+                // If the font-size is custom, just output the
+                // `$FLUIDMS-GLOBAL-LINE-HEIGHT` as `em` value, so we can use `calc`
+                // with it when a line-height modifier is used.
+                $_line-height: $FLUIDMS-GLOBAL-LINE-HEIGHT * 1em;
+                // If the line-height is modified, add/subtract that from the
+                // calculated line-height.
+                @if $line-height-modifier {
+                    $_line-height: calc(#{$_line-height} + #{$line-height-modifier * $FLUIDMS-GLOBAL-BASELINE});
+                }
+                line-height: $_line-height $important;
+            } @else {
+                @if $line-height-modifier {
+                    @warn _lineHeightModifierHasNoEffect();
+                }
             }
-            line-height: $_line-height $important;
         } @else {
             line-height: _validateLineHeight($line-height) $important;
         }
     }
 
 }
 
+@function _lineHeightModifierHasNoEffect() {
+    @return "`$line-height-modifier` has no effect when `$FLUIDMS-GLOBAL-BASELINE` is set to `false`.";
+}
+
 @function _validateLineHeight($value) {
     @if ($value == "none" or $value == false) {
         // Avoid CSS output (conditional declaration).

diff --git a/src/tools/_tools.line-height.scss b/src/tools/_tools.line-height.scss
@@ -20,15 +20,18 @@
 /// @return {length (in `rem`)} Outputs a `rem` value that is a multiple of
 ///   our `$FLUIDMS-GLOBAL-BASELINE`.
 @function fluidms-line-height($scale, $ratio) {
-    // Calculate the default line-height (in `rem`).
-    $_default-line-height: (fluidms-pow($ratio, $scale)) * ($FLUIDMS-GLOBAL-LINE-HEIGHT / fluidms-pow($FLUIDMS-GLOBAL-LINE-HEIGHT-RATIO, $scale));
-    // Get the “offset” of the vertical grid.
-    $_remainder: $_default-line-height;
-    @while $_remainder >= fluidms-strip-unit($FLUIDMS-GLOBAL-BASELINE) {
-        $_remainder: $_remainder - $FLUIDMS-GLOBAL-BASELINE;
+    $_optimal-line-height: $FLUIDMS-GLOBAL-LINE-HEIGHT;
+    @if $FLUIDMS-GLOBAL-BASELINE {
+        // Calculate the default line-height (in `rem`).
+        $_default-line-height: (fluidms-pow($ratio, $scale)) * ($FLUIDMS-GLOBAL-LINE-HEIGHT / fluidms-pow($FLUIDMS-GLOBAL-LINE-HEIGHT-RATIO, $scale));
+        // Get the “offset” of the vertical grid.
+        $_remainder: $_default-line-height;
+        @while ($_remainder >= fluidms-strip-unit($FLUIDMS-GLOBAL-BASELINE)) {
+            $_remainder: $_remainder - $FLUIDMS-GLOBAL-BASELINE;
+        }
+        // Subtract the “offset” so we stay in the exact vertical grid.
+        $_optimal-line-height: $_default-line-height - $_remainder;
     }
-    // Subtract the “offset” so we stay in the exact vertical grid.
-    $_optimal-line-height: $_default-line-height - $_remainder;
 
     @return $_optimal-line-height;
 }
diff --git a/test/style.scss b/test/style.scss
@@ -14,14 +14,16 @@ p {
     margin-bottom: 1.5rem;
 }
 
-html {
-    background-image: repeating-linear-gradient(
-        to bottom,
-        #ccc,
-        #ccc 1px,
-        transparent 1px,
-        transparent $FLUIDMS-GLOBAL-BASELINE
-    );
+@if ($FLUIDMS-GLOBAL-BASELINE) {
+    html {
+        background-image: repeating-linear-gradient(
+            to bottom,
+            #ccc,
+            #ccc 1px,
+            transparent 1px,
+            transparent $FLUIDMS-GLOBAL-BASELINE
+        );
+    }
 }
 
 h1 {