Add klmn

docs/_includes/klmn.html

@@ -0,0 +1,111 @@
+<div id="klmn" class="bd-klmn">
+  <div class="bd-klmn-gaps">
+    <strong class="bd-klmn-label">
+      Gap:
+      <code id="klmnValue"></code>
+    </strong>
+    {% for i in (0..8) %}
+      <a class="bd-klmn-gap" data-value="{{ i }}">
+        is-{{ i }}
+      </a>
+    {% endfor %}
+  </div>
+
+  <div class="bd-klmn-lead">
+    <div class="columns is-variable bd-klmn-columns">
+      <div class="column is-3">
+        <div class="bd-notification is-primary has-text-centered">
+          Side
+        </div>
+      </div>
+      <div class="column is-9">
+        <div class="bd-notification is-info has-text-centered">
+          Main
+        </div>
+      </div>
+    </div>
+
+    <div class="columns is-variable bd-klmn-columns">
+      <div class="column is-4">
+        <div class="bd-notification is-success has-text-centered">
+          Three columns
+        </div>
+      </div>
+      <div class="column is-4">
+        <div class="bd-notification is-warning has-text-centered">
+          Three columns
+        </div>
+      </div>
+      <div class="column is-4">
+        <div class="bd-notification is-danger has-text-centered">
+          Three columns
+        </div>
+      </div>
+    </div>
+
+    <div class="columns is-variable bd-klmn-columns">
+      <div class="column">
+        <div class="bd-notification is-primary has-text-centered">
+          1
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-info has-text-centered">
+          2
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-success has-text-centered">
+          3
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-warning has-text-centered">
+          4
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-danger has-text-centered">
+          5
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-primary has-text-centered">
+          6
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-info has-text-centered">
+          7
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-success has-text-centered">
+          8
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-warning has-text-centered">
+          9
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-danger has-text-centered">
+          10
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-primary has-text-centered">
+          11
+        </div>
+      </div>
+      <div class="column">
+        <div class="bd-notification is-info has-text-centered">
+          12
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="{{ site.url }}/lib/klmn.js"></script>

docs/_includes/subnav-columns.html

@@ -13,12 +13,12 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
         Nesting
       </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
-        Options
-      </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
         Gap
       </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
+        Options
+      </a>
     </div>
   </div>
 </nav>

docs/_javascript/klmn.js

@@ -0,0 +1,40 @@
+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/_sass/example.sass

@@ -51,6 +51,8 @@
 
 .highlight-full,
 #navbarJsExample
+  &:not(:last-child)
+    margin-bottom: 1.5rem
   .highlight pre
     max-height: none
 

docs/_sass/klmn.sass

@@ -0,0 +1,32 @@
+.bd-klmn
+  margin-bottom: 1.5rem
+
+.bd-klmn-gaps
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  margin-bottom: 1.25rem
+
+.bd-klmn-label
+  margin: 0.25rem auto 0.25rem 0
+
+.bd-klmn-gap
+  background-color: $background
+  border-radius: $radius
+  color: $red
+  font-family: $family-monospace
+  font-size: 0.75rem
+  margin: 0.25rem 0 0.25rem 0.5rem
+  padding: 0.375em 0.75em
+  text-align: center
+  vertical-align: middle !important
+  white-space: nowrap
+  &.bd-is-selected
+    background-color: $green
+    color: $white
+
+.bd-klmn-columns:last-child
+  .bd-notification
+    font-size: 0.75rem
+    white-space: nowrap

docs/bulma-docs.sass

@@ -20,6 +20,7 @@ $twitter: #55acee
 @import "./_sass/expo"
 @import "./_sass/love"
 @import "./_sass/bootstrap"
+@import "./_sass/klmn"
 
 // .columns
 //   background-color: coral

docs/documentation/columns/gap.html

@@ -5,19 +5,73 @@ doc-tab: columns
 doc-subtab: gap
 ---
 
-{% capture columns_gap %}
+{% capture columns_default_gap %}
 <div class="columns">
   <div class="column">
-    First column
+    <p class="bd-notification is-info">
+      Default gap
+    </p>
   </div>
   <div class="column">
-    Second column
+    <p class="bd-notification is-success">
+      Default gap
+    </p>
   </div>
   <div class="column">
-    Third column
+    <p class="bd-notification is-warning">
+      Default gap
+    </p>
   </div>
   <div class="column">
-    Fourth column
+    <p class="bd-notification is-danger">
+      Default gap
+    </p>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture columns_gapless %}
+<div class="columns is-gapless">
+  <div class="column">
+    No gap
+  </div>
+  <div class="column">
+    No gap
+  </div>
+  <div class="column">
+    No gap
+  </div>
+  <div class="column">
+    No gap
+  </div>
+</div>
+{% endcapture %}
+
+{% capture columns_gapless_multiline %}
+<div class="columns is-gapless is-multiline is-mobile">
+  <div class="column is-one-quarter">
+    is-one-quarter
+  </div>
+  <div class="column is-one-quarter">
+    is-one-quarter
+  </div>
+  <div class="column is-one-quarter">
+    is-one-quarter
+  </div>
+  <div class="column is-one-quarter">
+    is-one-quarter
+  </div>
+  <div class="column is-half">
+    is-half
+  </div>
+  <div class="column is-one-quarter">
+    is-one-quarter
+  </div>
+  <div class="column is-one-quarter">
+    is-one-quarter
+  </div>
+  <div class="column">
+    Auto
   </div>
 </div>
 {% endcapture %}
@@ -27,17 +81,130 @@ doc-subtab: gap
 <section class="section">
   <div class="container">
     <h1 class="title">Columns gap</h1>
-    <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
-    <hr>
+    <h2 class="subtitle">
+      Customize the <strong>gap</strong> between the columns
+    </h2>
+
+    {% include anchor.html name="Default gap" %}
+
     <div class="content">
-      <p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
-      <ol>
-        <li>Add a <code>columns</code> container</li>
-        <li>Add as many <code>column</code> elements as you want</li>
-      </ol>
-      <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
+      <p>
+        Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
+        <br>
+        Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
+      </p>
+    </div>
+
+    {{ columns_default_gap }}
+
+    {% include anchor.html name="Gapless" %}
+
+    <div class="content">
+      <p>
+        If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
+      </p>
+    </div>
+
+    <div class="columns is-gapless">
+      <div class="column">
+        <p class="bd-notification is-info">First column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">Second column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Third column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Fourth column</p>
+      </div>
+    </div>
+
+    <div class="highlight-full">
+      {% highlight html %}{{ columns_gapless }}{% endhighlight %}
+    </div>
+
+    <div class="content">
+      <p>You can combine it with the <code>is-multiline</code> modifier:</p>
+    </div>
+
+    <div class="columns is-multiline is-mobile is-gapless">
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-info"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-half">
+        <p class="bd-notification is-info"><code>is-half</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-info">Auto</p>
+      </div>
+    </div>
+
+    <div class="highlight-full">
+      {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
+    </div>
+
+    {% include anchor.html name="Variable gap" %}
+
+    <div class="field is-grouped is-grouped-multiline">
+      <div class="control">
+        <div class="tags">
+          <span class="tag is-warning">Experimental</span>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag">New</span>
+          <span class="tag is-info">0.5.2</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <p>
+         You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
+      </p>
+      <ul>
+        <li>
+          <code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
+        </li>
+        <li>
+          <code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
+        </li>
+        <li>
+          <code>is-8</code> is the maximum gap of <code>2rem</code>
+        </li>
+      </ul>
+    </div>
+
+    {% include klmn.html %}
+
+    <div class="message is-warning">
+      <div class="message-body">
+        <p>
+          This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>:
+        </p>
+      </div>
     </div>
 
-    {% highlight html %}{{ columns_gap }}{% endhighlight %}
   </div>
 </section>

docs/documentation/columns/options.html

@@ -34,44 +34,6 @@ doc-subtab: options
 </div>
 {% endcapture %}
 
-{% capture columns_gapless %}
-<div class="columns is-gapless">
-  <div class="column">First column</div>
-  <div class="column">Second column</div>
-  <div class="column">Third column</div>
-  <div class="column">Fourth column</div>
-</div>
-{% endcapture %}
-
-{% capture columns_gapless_multiline %}
-<div class="columns is-gapless is-multiline is-mobile">
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-half">
-    <code>is-half</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column is-one-quarter">
-    <code>is-one-quarter</code>
-  </div>
-  <div class="column">
-    Auto
-  </div>
-</div>
-{% endcapture %}
-
 {% capture columns_mobile_centered %}
 <div class="columns is-mobile is-centered">
   <div class="column is-half is-narrow">
@@ -118,23 +80,6 @@ doc-subtab: options
 </div>
 {% endcapture %}
 
-{% capture columns_narrow %}
-<div class="columns">
-  <div class="column is-narrow">
-    <div class="box" style="width: 200px;">
-      <p class="title is-5">Narrow column</p>
-      <p class="subtitle">This column is only 200px wide.</p>
-    </div>
-  </div>
-  <div class="column">
-    <div class="box">
-      <p class="title is-5">Flexible column</p>
-      <p class="subtitle">This column will take up the remaining space available.</p>
-    </div>
-  </div>
-</div>
-{% endcapture %}
-
 {% include subnav-columns.html %}
 
 <section class="section">
@@ -182,67 +127,6 @@ doc-subtab: options
 
     {% highlight html %}{{ columns_multiline }}{% endhighlight %}
 
-    {% include anchor.html name="Gapless" %}
-
-    <div class="content">
-      <p>
-        If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
-      </p>
-    </div>
-
-    <div class="columns is-gapless">
-      <div class="column">
-        <p class="bd-notification is-info">First column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-success">Second column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-warning">Third column</p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-danger">Fourth column</p>
-      </div>
-    </div>
-
-    {% highlight html %}{{ columns_gapless }}{% endhighlight %}
-
-    <div class="content">
-      <p>You can combine it with the <code>is-multiline</code> modifier:</p>
-    </div>
-
-    <div class="columns is-multiline is-mobile is-gapless">
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-info"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-half">
-        <p class="bd-notification is-info"><code>is-half</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column is-one-quarter">
-        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
-      </div>
-      <div class="column">
-        <p class="bd-notification is-info">Auto</p>
-      </div>
-    </div>
-
-    {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
-
     {% include anchor.html name="Centering columns" %}
 
     <div class="content">
@@ -302,43 +186,5 @@ doc-subtab: options
     </div>
 
     {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
-
-    {% include anchor.html name="Narrow column" %}
-
-    <div class="content">
-      <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
-    </div>
-
-    <div class="columns">
-      <div class="column is-narrow">
-        <div class="box" style="width: 200px;">
-          <p class="title is-5">Narrow column</p>
-          <p class="subtitle">This column is only 200px wide.</p>
-        </div>
-      </div>
-      <div class="column">
-        <div class="box">
-          <p class="title is-5">Flexible column</p>
-          <p class="subtitle">This column will take up the remaining space available.</p>
-        </div>
-      </div>
-    </div>
-
-    {% highlight html %}{{ columns_narrow }}{% endhighlight %}
-
-    <div class="content">
-      <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
-      <ul>
-        <li>
-          <code>is-narrow-mobile</code>
-        </li>
-        <li>
-          <code>is-narrow-tablet</code>
-        </li>
-        <li>
-          <code>is-narrow-desktop</code>
-        </li>
-      </ul>
-    </div>
   </div>
 </section>

docs/documentation/columns/sizes.html

@@ -50,6 +50,23 @@ doc-subtab: sizes
 </div>
 {% endcapture %}
 
+{% capture columns_narrow %}
+<div class="columns">
+  <div class="column is-narrow">
+    <div class="box" style="width: 200px;">
+      <p class="title is-5">Narrow column</p>
+      <p class="subtitle">This column is only 200px wide.</p>
+    </div>
+  </div>
+  <div class="column">
+    <div class="box">
+      <p class="title is-5">Flexible column</p>
+      <p class="subtitle">This column will take up the remaining space available.</p>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
 {% include subnav-columns.html %}
 
 <section class="section">
@@ -429,5 +446,43 @@ doc-subtab: sizes
     </div>
 
     {% highlight html %}{{ columns_offset }}{% endhighlight %}
+
+    {% include anchor.html name="Narrow column" %}
+
+    <div class="content">
+      <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-narrow">
+        <div class="box" style="width: 200px;">
+          <p class="title is-5">Narrow column</p>
+          <p class="subtitle">This column is only 200px wide.</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="box">
+          <p class="title is-5">Flexible column</p>
+          <p class="subtitle">This column will take up the remaining space available.</p>
+        </div>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+
+    <div class="content">
+      <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
+      <ul>
+        <li>
+          <code>is-narrow-mobile</code>
+        </li>
+        <li>
+          <code>is-narrow-tablet</code>
+        </li>
+        <li>
+          <code>is-narrow-desktop</code>
+        </li>
+      </ul>
+    </div>
   </div>
 </section>

docs/lib/klmn.js

@@ -0,0 +1,41 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+  var $klmnColumns = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-columns'), 0);
+  var $klmnGaps = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-gap'), 0);
+  var $klmnValue = document.getElementById('klmnValue');
+
+  $klmnGaps.forEach(function (el) {
+    el.addEventListener('mouseenter', function () {
+      var index = el.dataset.value;
+      selectGap(index);
+    });
+  });
+
+  function resetGaps() {
+    $klmnGaps.forEach(function (el) {
+      el.classList.remove('bd-is-selected');
+    });
+  }
+
+  function setColumns(n) {
+    $klmnColumns.forEach(function (el) {
+      el.className = 'columns is-variable bd-klmn-columns is-' + n;
+    });
+  }
+
+  function setValue(n) {
+    var 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);
+});

sass/grid/columns.sass

@@ -287,15 +287,13 @@ $column-gap: 0.75rem !default
     margin-bottom: (-$column-gap)
   &:not(:last-child)
     margin-bottom: calc(1.5rem - #{$column-gap})
-  // .columns
-  //   margin-top: 1.5rem
   // Modifiers
   &.is-centered
     justify-content: center
   &.is-gapless
-    margin-bottom: 0
     margin-left: 0
     margin-right: 0
+    margin-top: 0
     & > .column
       margin: 0
       padding: 0 !important
@@ -325,6 +323,6 @@ $column-gap: 0.75rem !default
   .column
     padding-left: var(--columnGap)
     padding-right: var(--columnGap)
-  @for $i from 0 through 12
+  @for $i from 0 through 8
     &.is-#{$i}
       --columnGap: $i * 0.25rem