feat: make config adjustable (#27)

because: - currently, the user has to override the complete `$FLUIDMS-CONFIG` Sass map in order to change only one entry of that list this commit: - provides a way to adjust individual attributes of the config - simplifies the default `$FLUIDMS-CONFIG` map
csshugs · May 18, 2020 · 7f6681a · 7f6681a
1 parent 0c32372
commit 7f6681a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 57 deletions.
diff --git a/src/settings/_settings.config.scss b/src/settings/_settings.config.scss
@@ -32,6 +32,9 @@ $FLUIDMS-GLOBAL-LINE-HEIGHT: 1.5 !default;
 /// @type number
 $FLUIDMS-GLOBAL-LINE-HEIGHT-RATIO: 1 !default;
 
+// Initiate empty Sass map, so we can (map-)merge the contents with user
+// adjustments of the map.
+$FLUIDMS-CONFIG: () !default;
 /// Hold all the relevant settings for Fluid Typography.
 ///
 /// @prop {length (in `px`)} min-font-size [16px] - Defines the font-size at
@@ -88,28 +91,24 @@ $FLUIDMS-GLOBAL-LINE-HEIGHT-RATIO: 1 !default;
 ///   ) !default;
 ///
 /// @type map
-$FLUIDMS-CONFIG: (
-    min-font-size: 16px,
-    max-font-size: 24px,
-    min-viewport: 480px,
-    max-viewport: 1280px,
-    ratio: 1.1,
-    768px: (
-        ratio: 1.2,
+$FLUIDMS-CONFIG: map-merge(
+    (
+        min-font-size: 15px,
+        max-font-size: 20px,
+        min-viewport: 480px,
+        max-viewport: 1280px,
+        ratio: 1.15,
+        scales: (
+            6,
+            5,
+            4,
+            3,
+            2,
+            1,
+            0,
+            -1,
+            -2,
+        ),
     ),
-    1280px: (
-        ratio: 1.3,
-    ),
-    scales: (
-        6,
-        5,
-        4,
-        3,
-        2,
-        1,
-        0,
-        -1,
-        -2,
-        -3,
-    ),
-) !default;
+    $FLUIDMS-CONFIG
+);
diff --git a/test/style.css b/test/style.css
@@ -26,36 +26,20 @@
   --ms-2-line-height: 1rem;
   --ms-3-ratio:       0.75131;
   --ms-3-line-height: 1rem; }
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 720px) {
     :root {
-      --ms6-ratio:       2.98598;
-      --ms6-line-height: 4.25rem;
-      --ms5-ratio:       2.48832;
-      --ms5-line-height: 3.5rem;
-      --ms4-ratio:       2.0736;
-      --ms4-line-height: 3rem;
-      --ms3-ratio:       1.728;
-      --ms3-line-height: 2.5rem;
-      --ms2-ratio:       1.44;
-      --ms2-line-height: 2rem;
-      --ms1-ratio:       1.2;
-      --ms1-line-height: 1.75rem;
-      --ms0-ratio:       1;
-      --ms0-line-height: 1.5rem; } }
-  @media screen and (min-width: 1280px) {
-    :root {
-      --ms6-ratio:       4.82681;
-      --ms6-line-height: 7rem;
-      --ms5-ratio:       3.71293;
-      --ms5-line-height: 5.5rem;
-      --ms4-ratio:       2.8561;
-      --ms4-line-height: 4.25rem;
-      --ms3-ratio:       2.197;
-      --ms3-line-height: 3.25rem;
-      --ms2-ratio:       1.69;
-      --ms2-line-height: 2.5rem;
-      --ms1-ratio:       1.3;
-      --ms1-line-height: 1.75rem;
+      --ms6-ratio:       2.02729;
+      --ms6-line-height: 3rem;
+      --ms5-ratio:       1.80203;
+      --ms5-line-height: 2.5rem;
+      --ms4-ratio:       1.60181;
+      --ms4-line-height: 2.25rem;
+      --ms3-ratio:       1.42383;
+      --ms3-line-height: 2rem;
+      --ms2-ratio:       1.26562;
+      --ms2-line-height: 1.75rem;
+      --ms1-ratio:       1.125;
+      --ms1-line-height: 1.5rem;
       --ms0-ratio:       1;
       --ms0-line-height: 1.5rem; } }
 
@@ -66,13 +50,13 @@
  * Apply fluid typography to the `<html>` element.
  */
 html {
-  font-size: 16px; }
+  font-size: 12px; }
   @media screen and (min-width: 480px) {
     html {
-      font-size: calc(16px + (8) * ((100vw - 480px) / (800))); } }
-  @media screen and (min-width: 1280px) {
+      font-size: calc(12px + (22) * ((100vw - 480px) / (480))); } }
+  @media screen and (min-width: 960px) {
     html {
-      font-size: 24px; } }
+      font-size: 34px; } }
 
 body {
   line-height: 1.5rem; }

diff --git a/test/style.scss b/test/style.scss
@@ -1,3 +1,25 @@
+$FLUIDMS-CONFIG: (
+    min-font-size: 12px,
+    max-font-size: 34px,
+    max-viewport: 960px,
+    ratio: 1.1,
+    720px: (
+        ratio: 1.125
+    ),
+    scales: (
+        6,
+        5,
+        4,
+        3,
+        2,
+        1,
+        0,
+        -1,
+        -2,
+        -3,
+    ),
+) !default;
+
 @import "../src/fluidms";
 
 * {