feat: allow custom font-sizes

to not only to rely on sizes from the modular scale set, a custom font-size can be passed to the `fluidms-font-size()` mixin to allow to “break out” of the modular scale in special cases. BREAKING CHANGE: the name of the `$ms` argument for the `fluidms-font-size()` mixin has changed to `$font-size` to make it more natural to use if a custom font-size is used.
csshugs · Feb 3, 2020 · b438492 · b438492
1 parent a940ecf
commit b438492
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 49 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,3 +1,5 @@
 language: node_js
+install:
+  - npm ci
 script:
   - commitlint-travis
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ If you are following an [ITCSS](https://csswizardry.com/2018/11/itcss-and-skills
 
 // Tools
 @import "<path-to-fluidms-node-package>/src/tools/tools.utils";
+@import "<path-to-fluidms-node-package>/src/tools/tools.ms";
 @import "<path-to-fluidms-node-package>/src/tools/tools.font-size";
 @import "<path-to-fluidms-node-package>/src/tools/tools.line-height";
 
@@ -59,38 +60,54 @@ To use FluidMS, you only need to apply the `fluidms-font-size()` mixin to the el
 }
 ```
 
-Just calling the mixin without any arguments assigns the base font-size to the element along with a line-height that is calculated to automatically fit into the defined vertical grid.
+Just calling the mixin without any arguments assigns the base font-size to the element along with a line-height that is calculated to automatically fit into the defined baseline grid.
 
 Let’s see how we can affect the generated font-size of an element:
 
 ```scss
 .larger-text {
     @include fluidms-font-size(
-        $ms: 1
+        $font-size: ms(1)
     );
 }
 ```
 
-Here we are calling the mixin with altering the `$ms` parameter (`$ms` stands for “Modular Scale”). What we are doing here is to say: “Assign a font-size here, but set the font-size to the next bigger scale entity than our base font-size (hence **1**).” We could also set the font-size to the next bigger scale entity by passing `$ms: 2` and so on.
+Here we are calling the mixin with altering the `$font-size` parameter. For that, we are using the `ms()` function (`ms` stands for “Modular Scale”). What we are doing here is to say: “Assign a font-size here, but set the font-size to the next bigger scale entity than our base font-size (hence **1**).” We could also set the font-size to the next bigger scale entity by passing `$font-size: ms(2)` and so on.
 
 Negative entites are also possible:
 
 ```scss
 .smaller-text {
     @include fluidms-font-size(
-        $ms: -2
+        $font-size: ms(-2)
     );
 }
 ```
 
+Read more about Modular Scale [here](https://alistapart.com/article/more-meaningful-typography/).
+
+#### Custom font-size
+
+Instead of relying on the modular scale for a specific font-size and using the `ms()` function for the `$font-size` parameter, you can also pass a custom font-size:
+
+```scss
+.custom-font-size {
+    @include fluidms-font-size(
+        $font-size: 38px
+    );
+}
+```
+
+Any value that is [valid for the native CSS `font-size` property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Values) is also valid here.
+
 #### Changing the line-height
 
-By default, the line height is automatically calculated so that it fits onto the defined baseline grid. However, if you need to manually assign a custom line-height to an element, you can do so with an additional (optional) argument:
+By default, the line height is automatically calculated so that it fits onto the defined baseline grid. However, if you need to manually assign a custom line-height to an element, you can do so with an additional argument:
 
 ```scss
 .custom-line-height {
     @include fluidms-font-size(
-        $ms: 3,
+        $font-size: ms(3),
         $line-height: 50px
     );
 }
@@ -102,12 +119,12 @@ Possible values for the `$line-height` parameter are:
 * The keyword `inherit`
 * The keyword `normal`
 
-You can also completely omit the output of a line-height declaration:
+You can also completely omit the output of a line-height declaration by setting its value to `false`:
 
 ```scss
 .no-line-height {
     @include fluidms-font-size(
-        $ms: 3,
+        $font-size: ms(3),
         $line-height: false
     );
 }
@@ -117,7 +134,7 @@ You can also completely omit the output of a line-height declaration:
 
 ##### Increasing/Decreasing the line-height
 
-There may be situations where the generated line-height is not quite what you need, but you still want to benefit from the automatic vertical grid adaptation. So instead of assigning a custom line-height and risking loosing the anchoring to the baseline grid, you can tweak the line-height upwards or downwards and still be on the baseline grid:
+There may be situations where the generated line-height is not quite what you need, but you still want to benefit from the automatic baseline grid adaptation. So instead of assigning a custom line-height and risking loosing the anchoring to the baseline grid, you can tweak the line-height upwards or downwards and still be on the baseline grid:
 
 ```scss
 .slightly-smaller-line-height {
@@ -146,7 +163,7 @@ Anyhow, FluidMS has got you covered for these situations:
 ```scss
 .i-need-important {
     @include fluidms-font-size(
-        $ms: 1,
+        $font-size: ms(1),
         $important: true
     );
 }
@@ -209,7 +226,7 @@ Below a viewport of `480px`, the font-size will be `16px` and not smaller. Above
 ```scss
 .larger-text {
     @include fluidms-font-size(
-        $ms: 1
+        $font-size: ms(1)
     );
 }
 ```
@@ -230,7 +247,7 @@ $FLUIDMS-CONFIG: (
 
 With a ratio of `1.1`, the font-size of the example above will be `17.6px` (`16px * 1.1`) on screens smaller than `480px`. On screens larger than `1280px`, the font-size will be `26.4px` (`24px * 1.1`).
 
-If we use the mixin with `$ms: 2`, this font-size will be again 1.1x bigger than that one and so on and on.
+If we use the mixin with `$font-size: ms(2)`, this font-size will be again 1.1x bigger than that one and so on and on.
 
 #### Changing the ratio at different breakpoints
 
@@ -280,7 +297,7 @@ $FLUIDMS-CONFIG: (
 ) !default;
 ```
 
-Positive and negative integers are valid here. The numbers we add here basically result in the values we can use in the `fluidms-font-size()` mixin as the `$ms` argument.
+Positive and negative integers are valid here. The numbers we add here basically result in the values we can use in the `ms()` function.
 
 ## Browser Support
 

diff --git a/src/fluidms.scss b/src/fluidms.scss
@@ -3,6 +3,7 @@
 
 // Tools
 @import "src/tools/tools.utils";
+@import "src/tools/tools.ms";
 @import "src/tools/tools.font-size";
 @import "src/tools/tools.line-height";
 

diff --git a/src/tools/_tools.font-size.scss b/src/tools/_tools.font-size.scss
@@ -54,12 +54,13 @@
 /// @output The mixin outputs a `font-size` with a CSS `calc` function using CSS
 ///   custom properties and an optional `line-height` declaration.
 @mixin fluidms-font-size(
-    $ms: 0,
+    $font-size: ms(0),
     $line-height: auto,
     $line-height-modifier: false,
     $important: false
 ) {
 
+    // Enable/disable `!important` output.
     @if ($important == true) {
         $important: !important;
     } @else if ($important == false) {
@@ -68,35 +69,56 @@
         @error "`$important` needs to be `true` or `false`.";
     }
 
-    @if (type-of($ms) == number) {
-        @if (unit($ms) == "px") {
-            @error "`$ms` needs to be a unit-less integer.";
-        } @else {
-
-            // Calculate the font-size by using the generated `--ms<n>-ratio`
-            // CSS custom properties at runtime.
-            $_font-size: calc(var(--ms#{$ms}-ratio) * 1rem);
-            font-size: $_font-size $important;
+    // Only execute when `$font-size` is a unitless number.
+    @if (type-of($font-size) == number and unitless($font-size)) {
+        // Calculate the font-size at runtime by using the generated
+        // `--ms<n>-ratio` CSS custom properties.
+        $_font-size: calc(var(--ms#{$font-size}-ratio) * 1rem);
+        font-size: $_font-size $important;
 
-            @if ($line-height == auto) {
-                // Calculate the line-height by using the generated
-                // `--ms<n>-line-height` CSS custom properties at runtime.
-                $_line-height: var(--ms#{$ms}-line-height);
-                @if $line-height-modifier {
-                    $_line-height: calc(var(--ms#{$ms}-line-height) + #{$line-height-modifier * $FLUIDMS-GLOBAL-BASELINE});
-                }
-                line-height: $_line-height $important;
-            } @else {
-                @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {
-                    line-height: $line-height $important;
-                } @else if ($line-height != "none" and $line-height != false) {
-                    @error "`#{$line-height}` is not a valid value for `$line-height`.";
-                }
+        @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});
             }
-
+            line-height: $_line-height $important;
+        } @else {
+            line-height: _validateLineHeight($line-height) $important;
         }
-    } @else {
-        @error "`$ms` needs to be a unit-less integer.";
     }
+    // If `$font-size` is anything but a unitless number.
+    @else {
+        // 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});
+            }
+            line-height: $_line-height $important;
+        } @else {
+            line-height: _validateLineHeight($line-height) $important;
+        }
+    }
+
+}
 
+@function _validateLineHeight($value) {
+    @if ($value == "none" or $value == false) {
+        // Avoid CSS output (conditional declaration).
+        @return null;
+    } @elseif (type-of($value) == number or $value == "inherit" or $value == "normal") {
+        @return $value;
+    } @else {
+        @error "`#{$value}` is not a valid value for `$line-height`.";
+    }
 }
diff --git a/src/tools/_tools.ms.scss b/src/tools/_tools.ms.scss
@@ -0,0 +1,14 @@
+// /*------------------------------------*\
+//     #MS
+// \*------------------------------------*/
+
+// To clearly indicate that a scale value is used, use it with a custom
+// function which just passes the number through.
+@function ms($scale: 0) {
+    // Check if `scales` list has `$scale` entry.
+    @if (index(map-get($FLUIDMS-CONFIG, scales), $scale)) {
+        @return $scale;
+    } @else {
+        @error "`#{$scale}` is no valid entry in the `scales` list in `$FLUIDMS-CONFIG`.";
+    }
+}
diff --git a/test/style.scss b/test/style.scss
@@ -24,39 +24,41 @@ html {
     );
 }
 
+$h1-font-size: ms(6) !default;
+
 h1 {
     @include fluidms-font-size(
-        $ms: 6
+        $font-size: ms(6)
     );
 }
 
 h2 {
     @include fluidms-font-size(
-        $ms: 5
+        $font-size: ms(5)
     );
 }
 
 h3 {
     @include fluidms-font-size(
-        $ms: 4
+        $font-size: ms(4)
     );
 }
 
 h4 {
     @include fluidms-font-size(
-        $ms: 3
+        $font-size: ms(3)
     );
 }
 
 h5 {
     @include fluidms-font-size(
-        $ms: 2
+        $font-size: ms(2)
     );
 }
 
 h6 {
     @include fluidms-font-size(
-        $ms: 1
+        $font-size: ms(1)
     );
 }
 
@@ -70,18 +72,18 @@ h6 {
 
 .u-small {
     @include fluidms-font-size(
-        $ms: -1
+        $font-size: ms(-1)
     );
 }
 
 .u-milli {
     @include fluidms-font-size(
-        $ms: -2
+        $font-size: ms(-2)
     );
 }
 
 .u-micro {
     @include fluidms-font-size(
-        $ms: -3
+        $font-size: ms(-3)
     );
 }