Fix #3743, Fix #3799, Fix #3846

docs/_includes/docs/content/klmn.html

@@ -108,4 +108,4 @@
   </div>
 </div>
 
-<script src="{{ site.url }}/lib/klmn.js"></script>
+<script src="{{ site.url }}/assets/javascript/klmn.js"></script>

docs/assets/javascript/klmn.js

@@ -0,0 +1,44 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const $klmnColumns = Array.prototype.slice.call(
+    document.querySelectorAll(".bd-klmn-columns"),
+    0,
+  );
+  const $klmnGaps = Array.prototype.slice.call(
+    document.querySelectorAll(".bd-klmn-gap"),
+    0,
+  );
+  const $klmnValue = document.getElementById("klmnValue");
+
+  $klmnGaps.forEach((el) => {
+    el.addEventListener("mouseenter", () => {
+      const index = el.dataset.value;
+      selectGap(index);
+    });
+  });
+
+  function resetGaps() {
+    $klmnGaps.forEach((el) => {
+      el.classList.remove("bd-is-selected");
+    });
+  }
+
+  function setColumns(n) {
+    $klmnColumns.forEach((el) => {
+      el.className = `columns is-variable bd-klmn-columns is-${n}`;
+    });
+  }
+
+  function setValue(n) {
+    const rem = `${n * 0.25}rem`;
+    $klmnValue.innerHTML = rem;
+  }
+
+  function selectGap(n) {
+    resetGaps();
+    $klmnGaps[n].classList.add("bd-is-selected");
+    setColumns(n);
+    setValue(n);
+  }
+
+  selectGap(3);
+});

docs/documentation/columns/gap.html

@@ -172,15 +172,6 @@ breadcrumb:
   </div>
 </div>
 
-<div class="message is-info">
-  <div class="message-body">
-    <p>
-      If your Sass setup doesn't support CSS Variables, you can
-      <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
-    </p>
-  </div>
-</div>
-
 {% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
 {% if vernum >= 72 %}
   {%