Add fluid typography classes

src/plugins/components/typography/fluid-typography.js

@@ -0,0 +1,37 @@
+/**
+ * Fluid type that increase font size smoothly and linearly between a min and max value
+ * over the viewport width range 360px (XS) to 1500px (2XL)
+ * See concept on https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
+ * Good for use in hero banners and horizontal cards where UI looks better with a smooth transition of font size
+ * Here we offer the sizes from fluid-type-4 to fluid-type-10. Their min and max values at the XS and 2XL breakpoints
+ * are the same as the corresponding modular typography classes (type-4 to type-10).
+ */
+module.exports = function () {
+  return function ({ addComponents }) {
+    const components = {
+      '.fluid-type-4': {
+        fontSize: 'clamp(3.1rem, 2.19vw + 2.31rem, 5.6rem)',
+      },
+      '.fluid-type-5': {
+        fontSize: 'clamp(3.6rem, 2.98vw + 2.53rem, 7rem)',
+      },
+      '.fluid-type-6': {
+        fontSize: 'clamp(4.2rem, 4.04vw + 2.75rem, 8.8rem)',
+      },
+      '.fluid-type-7': {
+        fontSize: 'clamp(4.8rem, 5.44vw + 2.84rem, 11rem)',
+      },
+      '.fluid-type-8': {
+        fontSize: 'clamp(5.5rem, 7.19vw + 2.91rem, 13.7rem)',
+      },
+      '.fluid-type-9': {
+        fontSize: 'clamp(6.3rem, 9.47vw + 2.89rem, 17.1rem)',
+      },
+      '.fluid-type-10': {
+        fontSize: 'clamp(7.3rem, 12.37vw + 2.85rem, 21.4rem)',
+      },
+    };
+
+    addComponents(components);
+  };
+};

static/index.html

@@ -35,6 +35,9 @@ <h2 class="type-5"><a href="#text"
             <li class="inline-block mb-12"><a href="#text__headings"
                 class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Headings</a>
             </li>
+            <li class="inline-block mb-12"><a href="#text__fluid-type"
+                class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Fluid Typography</a>
+            </li>
             <li class="inline-block mb-12"><a href="#text__paragraphs"
                 class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Paragraphs</a>
             </li>
@@ -179,6 +182,18 @@ <h5>Heading 5</h5>
               <h6>Heading 6</h6>
             </div>
           </article>
+          <article id="text__fluid-type" class="rs-mb-5 lg:w-[140%] lg:-ml-[20%]">
+            <h3 class="type-5 text-lagunita-light">Fluid Typography</h3>
+            <div>
+              <div class="fluid-type-4">Fluid type 4</div>
+              <div class="fluid-type-5">Fluid type 5</div>
+              <div class="fluid-type-6">Fluid type 6</div>
+              <div class="fluid-type-7">Fluid type 7</div>
+              <div class="fluid-type-8">Fluid type 8</div>
+              <div class="fluid-type-9">Fluid type 9</div>
+              <div class="fluid-type-10">Fluid type 10</div>
+            </div>
+          </article>
           <article id="text__paragraphs" class="rs-mb-5">
             <div>
               <h3 class="type-5 text-lagunita-light">Paragraphs</h3>

tailwind.config.js

@@ -89,6 +89,7 @@ module.exports = {
     require(`${dir}/components/skiplink/skiplink.js`)(),
     require(`${dir}/components/tables/borderless.js`)(),
     require(`${dir}/components/typography/modular-typography.js`)(),
+    require(`${dir}/components/typography/fluid-typography.js`)(),
     require(`${dir}/components/typography/styles.js`)(),
     require(`${dir}/components/typography/wysiwyg.js`)(),
     require(`${dir}/components/shadow/text-shadow.js`)(),