Add x-fifth documentation

docs/css/bulma-docs.css

@@ -109,7 +109,7 @@ th {
 }
 
 html {
-  background-color: #fff;
+  background-color: white;
   font-size: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -7862,6 +7862,34 @@ label.panel-block:hover {
   width: 25%;
 }
 
+.columns.is-mobile > .column.is-one-fifth {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  width: 20%;
+}
+
+.columns.is-mobile > .column.is-two-fifths {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  width: 40%;
+}
+
+.columns.is-mobile > .column.is-three-fifths {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  width: 60%;
+}
+
+.columns.is-mobile > .column.is-four-fifths {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  width: 80%;
+}
+
 .columns.is-mobile > .column.is-offset-three-quarters {
   margin-left: 75%;
 }
@@ -7882,6 +7910,22 @@ label.panel-block:hover {
   margin-left: 25%;
 }
 
+.columns.is-mobile > .column.is-offset-one-fifth {
+  margin-left: 20%;
+}
+
+.columns.is-mobile > .column.is-offset-two-fifths {
+  margin-left: 40%;
+}
+
+.columns.is-mobile > .column.is-offset-three-fifths {
+  margin-left: 60%;
+}
+
+.columns.is-mobile > .column.is-offset-four-fifths {
+  margin-left: 80%;
+}
+
 .columns.is-mobile > .column.is-1 {
   -webkit-box-flex: 0;
       -ms-flex: none;
@@ -8056,6 +8100,30 @@ label.panel-block:hover {
             flex: none;
     width: 25%;
   }
+  .column.is-one-fifth-mobile {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 20%;
+  }
+  .column.is-two-fifths-mobile {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 40%;
+  }
+  .column.is-three-fifths-mobile {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 60%;
+  }
+  .column.is-four-fifths-mobile {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 80%;
+  }
   .column.is-offset-three-quarters-mobile {
     margin-left: 75%;
   }
@@ -8071,6 +8139,18 @@ label.panel-block:hover {
   .column.is-offset-one-quarter-mobile {
     margin-left: 25%;
   }
+  .column.is-offset-one-fifth-mobile {
+    margin-left: 20%;
+  }
+  .column.is-offset-two-fifths-mobile {
+    margin-left: 40%;
+  }
+  .column.is-offset-three-fifths-mobile {
+    margin-left: 60%;
+  }
+  .column.is-offset-four-fifths-mobile {
+    margin-left: 80%;
+  }
   .column.is-1-mobile {
     -webkit-box-flex: 0;
         -ms-flex: none;
@@ -8223,6 +8303,30 @@ label.panel-block:hover {
             flex: none;
     width: 25%;
   }
+  .column.is-one-fifth, .column.is-one-fifth-tablet {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 20%;
+  }
+  .column.is-two-fifths, .column.is-two-fifths-tablet {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 40%;
+  }
+  .column.is-three-fifths, .column.is-three-fifths-tablet {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 60%;
+  }
+  .column.is-four-fifths, .column.is-four-fifths-tablet {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 80%;
+  }
   .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
     margin-left: 75%;
   }
@@ -8238,6 +8342,18 @@ label.panel-block:hover {
   .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet {
     margin-left: 25%;
   }
+  .column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet {
+    margin-left: 20%;
+  }
+  .column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet {
+    margin-left: 40%;
+  }
+  .column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet {
+    margin-left: 60%;
+  }
+  .column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet {
+    margin-left: 80%;
+  }
   .column.is-1, .column.is-1-tablet {
     -webkit-box-flex: 0;
         -ms-flex: none;
@@ -8390,6 +8506,30 @@ label.panel-block:hover {
             flex: none;
     width: 25%;
   }
+  .column.is-one-fifth-touch {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 20%;
+  }
+  .column.is-two-fifths-touch {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 40%;
+  }
+  .column.is-three-fifths-touch {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 60%;
+  }
+  .column.is-four-fifths-touch {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 80%;
+  }
   .column.is-offset-three-quarters-touch {
     margin-left: 75%;
   }
@@ -8405,6 +8545,18 @@ label.panel-block:hover {
   .column.is-offset-one-quarter-touch {
     margin-left: 25%;
   }
+  .column.is-offset-one-fifth-touch {
+    margin-left: 20%;
+  }
+  .column.is-offset-two-fifths-touch {
+    margin-left: 40%;
+  }
+  .column.is-offset-three-fifths-touch {
+    margin-left: 60%;
+  }
+  .column.is-offset-four-fifths-touch {
+    margin-left: 80%;
+  }
   .column.is-1-touch {
     -webkit-box-flex: 0;
         -ms-flex: none;
@@ -8557,6 +8709,30 @@ label.panel-block:hover {
             flex: none;
     width: 25%;
   }
+  .column.is-one-fifth-desktop {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 20%;
+  }
+  .column.is-two-fifths-desktop {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 40%;
+  }
+  .column.is-three-fifths-desktop {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 60%;
+  }
+  .column.is-four-fifths-desktop {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 80%;
+  }
   .column.is-offset-three-quarters-desktop {
     margin-left: 75%;
   }
@@ -8572,6 +8748,18 @@ label.panel-block:hover {
   .column.is-offset-one-quarter-desktop {
     margin-left: 25%;
   }
+  .column.is-offset-one-fifth-desktop {
+    margin-left: 20%;
+  }
+  .column.is-offset-two-fifths-desktop {
+    margin-left: 40%;
+  }
+  .column.is-offset-three-fifths-desktop {
+    margin-left: 60%;
+  }
+  .column.is-offset-four-fifths-desktop {
+    margin-left: 80%;
+  }
   .column.is-1-desktop {
     -webkit-box-flex: 0;
         -ms-flex: none;
@@ -8724,6 +8912,30 @@ label.panel-block:hover {
             flex: none;
     width: 25%;
   }
+  .column.is-one-fifth-widescreen {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 20%;
+  }
+  .column.is-two-fifths-widescreen {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 40%;
+  }
+  .column.is-three-fifths-widescreen {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 60%;
+  }
+  .column.is-four-fifths-widescreen {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 80%;
+  }
   .column.is-offset-three-quarters-widescreen {
     margin-left: 75%;
   }
@@ -8739,6 +8951,18 @@ label.panel-block:hover {
   .column.is-offset-one-quarter-widescreen {
     margin-left: 25%;
   }
+  .column.is-offset-one-fifth-widescreen {
+    margin-left: 20%;
+  }
+  .column.is-offset-two-fifths-widescreen {
+    margin-left: 40%;
+  }
+  .column.is-offset-three-fifths-widescreen {
+    margin-left: 60%;
+  }
+  .column.is-offset-four-fifths-widescreen {
+    margin-left: 80%;
+  }
   .column.is-1-widescreen {
     -webkit-box-flex: 0;
         -ms-flex: none;
@@ -8891,6 +9115,30 @@ label.panel-block:hover {
             flex: none;
     width: 25%;
   }
+  .column.is-one-fifth-fullhd {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 20%;
+  }
+  .column.is-two-fifths-fullhd {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 40%;
+  }
+  .column.is-three-fifths-fullhd {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 60%;
+  }
+  .column.is-four-fifths-fullhd {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    width: 80%;
+  }
   .column.is-offset-three-quarters-fullhd {
     margin-left: 75%;
   }
@@ -8906,6 +9154,18 @@ label.panel-block:hover {
   .column.is-offset-one-quarter-fullhd {
     margin-left: 25%;
   }
+  .column.is-offset-one-fifth-fullhd {
+    margin-left: 20%;
+  }
+  .column.is-offset-two-fifths-fullhd {
+    margin-left: 40%;
+  }
+  .column.is-offset-three-fifths-fullhd {
+    margin-left: 60%;
+  }
+  .column.is-offset-four-fifths-fullhd {
+    margin-left: 80%;
+  }
   .column.is-1-fullhd {
     -webkit-box-flex: 0;
         -ms-flex: none;

docs/documentation/columns/sizes.html

@@ -6,6 +6,12 @@ doc-subtab: sizes
 ---
 
 {% capture columns_sizes %}
+<div class="columns">
+  <div class="column is-four-fifths">is-four-fifths</div>
+  <div class="column">Auto</div>
+  <div class="column">Auto</div>
+</div>
+
 <div class="columns">
   <div class="column is-three-quarters">is-three-quarters</div>
   <div class="column">Auto</div>
@@ -18,12 +24,24 @@ doc-subtab: sizes
   <div class="column">Auto</div>
 </div>
 
+<div class="columns">
+  <div class="column is-three-fifths">is-three-fifths</div>
+  <div class="column">Auto</div>
+  <div class="column">Auto</div>
+</div>
+
 <div class="columns">
   <div class="column is-half">is-half</div>
   <div class="column">Auto</div>
   <div class="column">Auto</div>
 </div>
 
+<div class="columns">
+  <div class="column is-two-fifths">is-two-fifths</div>
+  <div class="column">Auto</div>
+  <div class="column">Auto</div>
+</div>
+
 <div class="columns">
   <div class="column is-one-third">is-one-third</div>
   <div class="column">Auto</div>
@@ -34,6 +52,12 @@ doc-subtab: sizes
   <div class="column is-one-quarter">is-one-quarter</div>
   <div class="column">Auto</div>
 </div>
+
+<div class="columns">
+  <div class="column is-one-fifth">is-one-fifth</div>
+  <div class="column">Auto</div>
+  <div class="column">Auto</div>
+</div>
 {% endcapture %}
 
 {% capture columns_offset %}
@@ -41,6 +65,10 @@ doc-subtab: sizes
   <div class="column is-half is-offset-one-quarter"></div>
 </div>
 
+<div class="columns is-mobile">
+  <div class="column is-three-fifths is-offset-one-fifth"></div>
+</div>
+
 <div class="columns is-mobile">
   <div class="column is-4 is-offset-8"></div>
 </div>
@@ -100,6 +128,40 @@ doc-subtab: sizes
       <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
     </div>
 
+    {% include elements/new-tag.html version="0.6.1" %}
+
+    <div class="content">
+      <p>You can now use the following multiples of <code>20%</code> as well:</p>
+      <ul>
+        <li>
+          <code>is-four-fifths</code>
+        </li>
+        <li>
+          <code>is-three-fifths</code>
+        </li>
+        <li>
+          <code>is-two-fifths</code>
+        </li>
+        <li>
+          <code>is-one-fifth</code>
+        </li>
+      </ul>
+    </div>
+
+    <div class="columns">
+      <div class="column is-four-fifths">
+        <p class="bd-notification is-info">
+          <code class="html">is-four-fifths</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">Auto</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Auto</p>
+      </div>
+    </div>
+
     <div class="columns">
       <div class="column is-three-quarters">
         <p class="bd-notification is-info">
@@ -107,10 +169,10 @@ doc-subtab: sizes
         </p>
       </div>
       <div class="column">
-        <p class="bd-notification is-warning">Auto</p>
+        <p class="bd-notification is-success">Auto</p>
       </div>
       <div class="column">
-        <p class="bd-notification is-danger">Auto</p>
+        <p class="bd-notification is-warning">Auto</p>
       </div>
     </div>
 
@@ -120,11 +182,25 @@ doc-subtab: sizes
           <code class="html">is-two-thirds</code>
         </p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-success">Auto</p>
+      </div>
       <div class="column">
         <p class="bd-notification is-warning">Auto</p>
       </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-three-fifths">
+        <p class="bd-notification is-info">
+          <code class="html">is-three-fifths</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">Auto</p>
+      </div>
       <div class="column">
-        <p class="bd-notification is-danger">Auto</p>
+        <p class="bd-notification is-warning">Auto</p>
       </div>
     </div>
 
@@ -134,11 +210,25 @@ doc-subtab: sizes
           <code class="html">is-half</code>
         </p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-success">Auto</p>
+      </div>
       <div class="column">
         <p class="bd-notification is-warning">Auto</p>
       </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-two-fifths">
+        <p class="bd-notification is-info">
+          <code class="html">is-two-fifths</code>
+        </p>
+      </div>
       <div class="column">
-        <p class="bd-notification is-danger">Auto</p>
+        <p class="bd-notification is-success">Auto</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Auto</p>
       </div>
     </div>
 
@@ -165,6 +255,23 @@ doc-subtab: sizes
       <div class="column">
         <p class="bd-notification is-success">Auto</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Auto</p>
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-fifth">
+        <p class="bd-notification is-info">
+          <code class="html">is-one-fifth</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">Auto</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Auto</p>
+      </div>
     </div>
 
     <div class="highlight-full">
@@ -198,9 +305,6 @@ doc-subtab: sizes
       <div class="column is-2">
         <p class="bd-notification is-info"><code>is-2</code></p>
       </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
@@ -228,14 +332,14 @@ doc-subtab: sizes
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
     </div>
     <div class="columns">
       <div class="column is-3">
         <p class="bd-notification is-info"><code>is-3</code></p>
       </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
@@ -260,14 +364,14 @@ doc-subtab: sizes
       <div class="column">
         <p class="bd-notification is-warning has-text-centered">1</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
     </div>
     <div class="columns">
       <div class="column is-4">
         <p class="bd-notification is-info"><code>is-4</code></p>
       </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
@@ -289,14 +393,14 @@ doc-subtab: sizes
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
     </div>
     <div class="columns">
       <div class="column is-5">
         <p class="bd-notification is-info"><code>is-5</code></p>
       </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
@@ -315,14 +419,14 @@ doc-subtab: sizes
       <div class="column">
         <p class="bd-notification is-warning has-text-centered">1</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
     </div>
     <div class="columns">
       <div class="column is-6">
         <p class="bd-notification is-info"><code>is-6</code></p>
       </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
@@ -338,14 +442,14 @@ doc-subtab: sizes
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
     </div>
     <div class="columns">
       <div class="column is-7">
         <p class="bd-notification is-info"><code>is-7</code></p>
       </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
@@ -358,14 +462,14 @@ doc-subtab: sizes
       <div class="column">
         <p class="bd-notification is-warning has-text-centered">1</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
     </div>
     <div class="columns">
       <div class="column is-8">
         <p class="bd-notification is-info"><code>is-8</code></p>
       </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
@@ -375,30 +479,33 @@ doc-subtab: sizes
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
     </div>
     <div class="columns">
       <div class="column is-9">
         <p class="bd-notification is-info"><code>is-9</code></p>
       </div>
-      <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
-      </div>
       <div class="column">
         <p class="bd-notification is-success has-text-centered">1</p>
       </div>
       <div class="column">
         <p class="bd-notification is-warning has-text-centered">1</p>
       </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
     </div>
     <div class="columns">
       <div class="column is-10">
         <p class="bd-notification is-info"><code>is-10</code></p>
       </div>
       <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
+        <p class="bd-notification is-success has-text-centered">1</p>
       </div>
       <div class="column">
-        <p class="bd-notification is-success has-text-centered">1</p>
+        <p class="bd-notification is-warning has-text-centered">1</p>
       </div>
     </div>
     <div class="columns">
@@ -406,7 +513,7 @@ doc-subtab: sizes
         <p class="bd-notification is-info"><code>is-11</code></p>
       </div>
       <div class="column">
-        <p class="bd-notification is-warning has-text-centered">1</p>
+        <p class="bd-notification is-success has-text-centered">1</p>
       </div>
     </div>
 
@@ -427,6 +534,15 @@ doc-subtab: sizes
       </div>
     </div>
 
+    <div class="columns is-mobile">
+      <div class="column is-three-fifths is-offset-one-fifth">
+        <p class="bd-notification is-info">
+          <code class="html">is-three-fifths</code><br>
+          <code class="html">is-offset-one-fifth</code>
+        </p>
+      </div>
+    </div>
+
     <div class="columns is-mobile">
       <div class="column is-4 is-offset-8">
         <p class="bd-notification is-info">
@@ -445,7 +561,9 @@ doc-subtab: sizes
       </div>
     </div>
 
-    {% highlight html %}{{ columns_offset }}{% endhighlight %}
+    <div class="highlight-full">
+      {% highlight html %}{{ columns_offset }}{% endhighlight %}
+    </div>
 
     {% include anchor.html name="Narrow column" %}