Add Flexbox helpers documentation

docs/_data/links.json

@@ -190,6 +190,7 @@
     },
     "helpers-spacing": {
       "name": "Spacing",
+      "new": true,
       "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
       "color": "grey-dark",
       "icon": "arrows-alt-h",
@@ -202,6 +203,14 @@
       "icon": "eye",
       "path": "/documentation/helpers/visibility-helpers"
     },
+    "helpers-flexbox": {
+      "name": "Flexbox",
+      "new": true,
+      "subtitle": "Helpers for all <strong>Flexbox</strong> properties",
+      "color": "primary",
+      "icon": "ellipsis-h",
+      "path": "/documentation/helpers/flexbox-helpers"
+    },
     "helpers-other": {
       "name": "Other",
       "subtitle": "Other useful Bulma helpers",
@@ -636,7 +645,7 @@
   "categories": {
     "overview": ["overview-start", "overview-classes", "overview-modifiers", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
     "customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
-    "helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-other"],
+    "helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-flexbox", "helpers-other"],
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
     "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],

docs/_includes/components/categories.html

@@ -13,11 +13,6 @@
         </a>
         <a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
           <strong>{{ category_link.name }}</strong>
-          {% if category_link.name == 'Helpers' %}
-            <span class="tag bd-mini-tag is-primary">
-              New!
-            </span>
-          {% endif %}
         </a>
       </header>
 
@@ -27,6 +22,11 @@
           <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
             <a href="{{ site.url }}{{ link.path }}">
               {{ link.name }}
+              {% if link.new %}
+                <span class="ml-1 tag bd-mini-tag is-primary">
+                  New!
+                </span>
+              {% endif %}
             </a>
           </li>
         {% endfor %}

docs/_includes/components/links.html

@@ -22,6 +22,7 @@
       icon=link.icon
       name=link.name
       subtitle=link.subtitle
+      new=link.new
     %}
   {% endfor %}
 </nav>

docs/_includes/elements/flexbox-helper-table.html

@@ -0,0 +1,16 @@
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Property: Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for value in include.values %}
+      <tr>
+        <td><code>is-{{ include.property }}-{{ value }}</code></td>
+        <td><code>{{ include.property }}: {{ value }}</code></td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

docs/_includes/elements/link.html

@@ -14,6 +14,11 @@
         <span class="bd-link-counter"></span>
       {% endif %}
     </figure>
+    {% if include.new %}
+      <span style="float: right;" class="ml-2 tag is-primary">
+        New!
+      </span>
+    {% endif %}
     {{ include.name }}
   </h2>
   <p class="bd-link-subtitle">

docs/_layouts/documentation.html

@@ -72,6 +72,11 @@ route: documentation
                   <li {% if link_id == current_link_id %}class="is-active"{% endif %}>
                     <a href="{{ site.url }}{{ link.path }}">
                       {{ link.name }}
+                      {% if link.new %}
+                        <span class="ml-2 tag bd-mini-tag is-primary">
+                          New!
+                        </span>
+                      {% endif %}
                     </a>
                   </li>
                 {% endfor %}

docs/css/bulma-docs.css

@@ -1,6 +1,14 @@
 @charset "UTF-8";
 /*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
 /* Bulma Utilities */
+@-webkit-keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
 @keyframes spinAround {
   from {
     transform: rotate(0deg);
@@ -123,7 +131,8 @@
 }
 
 .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
-  animation: spinAround 500ms infinite linear;
+  -webkit-animation: spinAround 500ms infinite linear;
+          animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -314,7 +323,10 @@ html {
   overflow-x: hidden;
   overflow-y: scroll;
   text-rendering: optimizeLegibility;
-  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+     -moz-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+          text-size-adjust: 100%;
 }
 
 article,
@@ -2559,10 +2571,14 @@ fieldset[disabled] .button {
 }
 
 .progress:indeterminate {
-  animation-duration: 1.5s;
+  -webkit-animation-duration: 1.5s;
-  animation-iteration-count: infinite;
+          animation-duration: 1.5s;
-  animation-name: moveIndeterminate;
+  -webkit-animation-iteration-count: infinite;
-  animation-timing-function: linear;
+          animation-iteration-count: infinite;
+  -webkit-animation-name: moveIndeterminate;
+          animation-name: moveIndeterminate;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
   background-color: #ededed;
   background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
   background-position: top left;
@@ -2594,6 +2610,15 @@ fieldset[disabled] .button {
   height: 1.5rem;
 }
 
+@-webkit-keyframes moveIndeterminate {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
 @keyframes moveIndeterminate {
   from {
     background-position: 200% 0;
@@ -8711,6 +8736,8 @@ label.panel-block:hover {
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
+  min-height: -webkit-min-content;
+  min-height: -moz-min-content;
   min-height: min-content;
 }
 
@@ -12947,6 +12974,17 @@ svg {
   opacity: 1;
 }
 
+@-webkit-keyframes introSpinner {
+  from {
+    opacity: 0;
+    transform: scale(1.14);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes introSpinner {
   from {
     opacity: 0;
@@ -12960,9 +12998,11 @@ svg {
 
 .intro-spinner,
 .intro-shadow {
-  animation-duration: 500ms;
+  -webkit-animation-duration: 500ms;
+          animation-duration: 500ms;
   animation-easing-function: ease-out;
-  animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
   transform-origin: center;
 }
 
@@ -12972,11 +13012,13 @@ svg {
   position: absolute;
   right: 0;
   top: 0;
-  animation-name: introSpinner;
+  -webkit-animation-name: introSpinner;
+          animation-name: introSpinner;
 }
 
 .intro-spinner::before {
-  animation: spinAround 500ms infinite linear;
+  -webkit-animation: spinAround 500ms infinite linear;
+          animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -12995,6 +13037,17 @@ svg {
   width: 1.5em;
 }
 
+@-webkit-keyframes introShadow {
+  from {
+    opacity: 0;
+    transform: scale(0.86);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes introShadow {
   from {
     opacity: 0;
@@ -13017,7 +13070,8 @@ svg {
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
-  animation-name: introShadow;
+  -webkit-animation-name: introShadow;
+          animation-name: introShadow;
 }
 
 .intro-iframe {
@@ -14873,7 +14927,8 @@ svg {
 }
 
 .bd-rainbow {
-  animation: rainbow 8s ease infinite;
+  -webkit-animation: rainbow 8s ease infinite;
+          animation: rainbow 8s ease infinite;
   background-image: linear-gradient(124deg, #ff470f, #f14668, #b86bff, #3273dc);
   background-size: 800% 800%;
 }
@@ -14883,6 +14938,18 @@ svg {
   color: white;
 }
 
+@-webkit-keyframes rainbow {
+  0% {
+    background-position: 1% 80%;
+  }
+  50% {
+    background-position: 99% 20%;
+  }
+  100% {
+    background-position: 1% 80%;
+  }
+}
+
 @keyframes rainbow {
   0% {
     background-position: 1% 80%;
@@ -15389,6 +15456,15 @@ svg {
   }
 }
 
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -15398,6 +15474,15 @@ svg {
   }
 }
 
+@-webkit-keyframes zoomIn {
+  from {
+    transform: scale(0.8);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
 @keyframes zoomIn {
   from {
     transform: scale(0.8);
@@ -15542,17 +15627,21 @@ svg {
 
 .bd-book-modal .bd-book-modal-background,
 .bd-book-modal .modal-content {
-  animation-duration: 250ms;
+  -webkit-animation-duration: 250ms;
+          animation-duration: 250ms;
   animation-easing-function: ease-out;
-  animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
 }
 
 .bd-book-modal .bd-book-modal-background {
-  animation-name: fadeIn;
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
 }
 
 .bd-book-modal .modal-content {
-  animation-name: zoomIn;
+  -webkit-animation-name: zoomIn;
+          animation-name: zoomIn;
   transform-origin: center;
 }
 
@@ -15743,6 +15832,15 @@ svg {
   }
 }
 
+@-webkit-keyframes bdGrow {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
 @keyframes bdGrow {
   from {
     transform: scale(0);
@@ -15752,6 +15850,17 @@ svg {
   }
 }
 
+@-webkit-keyframes bdSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes bdSlideDown {
   from {
     opacity: 0;
@@ -15763,6 +15872,17 @@ svg {
   }
 }
 
+@-webkit-keyframes bdSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes bdSlideUp {
   from {
     opacity: 0;
@@ -15776,95 +15896,132 @@ svg {
 
 .intro-title, .intro-ghbtns,
 .intro-author, .intro-npm, .intro-buttons .button, .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github {
-  animation-duration: 500ms;
+  -webkit-animation-duration: 500ms;
-  animation-fill-mode: both;
+          animation-duration: 500ms;
-  animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
+          animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
   transform-origin: center center;
 }
 
 .intro-title {
-  animation-name: bdSlideDown;
+  -webkit-animation-name: bdSlideDown;
+          animation-name: bdSlideDown;
 }
 
 .intro-ghbtns,
 .intro-author {
-  animation-delay: 1s;
+  -webkit-animation-delay: 1s;
-  animation-duration: 1000ms;
+          animation-delay: 1s;
-  animation-name: bdFadeIn;
+  -webkit-animation-duration: 1000ms;
+          animation-duration: 1000ms;
+  -webkit-animation-name: bdFadeIn;
+          animation-name: bdFadeIn;
 }
 
 .intro-npm {
-  animation-delay: 250ms;
+  -webkit-animation-delay: 250ms;
-  animation-name: bdSlowIn;
+          animation-delay: 250ms;
+  -webkit-animation-name: bdSlowIn;
+          animation-name: bdSlowIn;
 }
 
 .intro-buttons .button {
-  animation-name: bdSlowIn;
+  -webkit-animation-name: bdSlowIn;
+          animation-name: bdSlowIn;
 }
 
 .intro-buttons .button:first-child {
-  animation-delay: 500ms;
+  -webkit-animation-delay: 500ms;
+          animation-delay: 500ms;
 }
 
 .intro-buttons .button:last-child {
-  animation-delay: 750ms;
+  -webkit-animation-delay: 750ms;
+          animation-delay: 750ms;
 }
 
 .bd-focus-item .title {
-  animation-name: bdSlideDown;
+  -webkit-animation-name: bdSlideDown;
+          animation-name: bdSlideDown;
 }
 
 .bd-focus-item .subtitle {
-  animation-name: bdSlideUp;
+  -webkit-animation-name: bdSlideUp;
+          animation-name: bdSlideUp;
 }
 
 .bd-focus-item:nth-child(1) .title {
-  animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
 }
 
 .bd-focus-item:nth-child(1) .subtitle {
-  animation-delay: 1.125s;
+  -webkit-animation-delay: 1.125s;
+          animation-delay: 1.125s;
 }
 
 .bd-focus-item:nth-child(2) .title {
-  animation-delay: 1.5s;
+  -webkit-animation-delay: 1.5s;
+          animation-delay: 1.5s;
 }
 
 .bd-focus-item:nth-child(2) .subtitle {
-  animation-delay: 1.625s;
+  -webkit-animation-delay: 1.625s;
+          animation-delay: 1.625s;
 }
 
 .bd-focus-item:nth-child(3) .title {
-  animation-delay: 2s;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
 }
 
 .bd-focus-item:nth-child(3) .subtitle {
-  animation-delay: 2.125s;
+  -webkit-animation-delay: 2.125s;
+          animation-delay: 2.125s;
 }
 
 .bd-focus-item:nth-child(4) .title {
-  animation-delay: 2.5s;
+  -webkit-animation-delay: 2.5s;
+          animation-delay: 2.5s;
 }
 
 .bd-focus-item:nth-child(4) .subtitle {
-  animation-delay: 2.625s;
+  -webkit-animation-delay: 2.625s;
+          animation-delay: 2.625s;
 }
 
 .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
-  animation-name: bdGrow;
+  -webkit-animation-name: bdGrow;
+          animation-name: bdGrow;
   transform-origin: bottom center;
 }
 
 .bd-focus-mobile {
-  animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
 }
 
 .bd-focus-tablet {
-  animation-delay: 1.25s;
+  -webkit-animation-delay: 1.25s;
+          animation-delay: 1.25s;
 }
 
 .bd-focus-desktop {
-  animation-delay: 1.5s;
+  -webkit-animation-delay: 1.5s;
+          animation-delay: 1.5s;
+}
+
+@-webkit-keyframes bdCube1 {
+  0% {
+    transform: translate3d(0, -50px, 0);
+    opacity: 0;
+  }
+  25%, 100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes bdCube1 {
@@ -15878,6 +16035,17 @@ svg {
   }
 }
 
+@-webkit-keyframes bdCube2 {
+  0% {
+    transform: translate3d(-40px, 30px, 0);
+    opacity: 0;
+  }
+  25%, 100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
 @keyframes bdCube2 {
   0% {
     transform: translate3d(-40px, 30px, 0);
@@ -15889,6 +16057,17 @@ svg {
   }
 }
 
+@-webkit-keyframes bdCube3 {
+  0% {
+    transform: translate3d(40px, 30px, 0);
+    opacity: 0;
+  }
+  25%, 100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
 @keyframes bdCube3 {
   0% {
     transform: translate3d(40px, 30px, 0);
@@ -15901,24 +16080,42 @@ svg {
 }
 
 .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
-  animation-direction: alternate;
+  -webkit-animation-direction: alternate;
-  animation-duration: 2000ms;
+          animation-direction: alternate;
-  animation-iteration-count: infinite;
+  -webkit-animation-duration: 2000ms;
+          animation-duration: 2000ms;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
 }
 
 .bd-focus-cube-1 {
-  animation-delay: 1.5s;
+  -webkit-animation-delay: 1.5s;
-  animation-name: bdCube1;
+          animation-delay: 1.5s;
+  -webkit-animation-name: bdCube1;
+          animation-name: bdCube1;
 }
 
 .bd-focus-cube-2 {
-  animation-name: bdCube2;
+  -webkit-animation-name: bdCube2;
-  animation-delay: 1.75s;
+          animation-name: bdCube2;
+  -webkit-animation-delay: 1.75s;
+          animation-delay: 1.75s;
 }
 
 .bd-focus-cube-3 {
-  animation-name: bdCube3;
+  -webkit-animation-name: bdCube3;
-  animation-delay: 2s;
+          animation-name: bdCube3;
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+}
+
+@-webkit-keyframes bdFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes bdFadeIn {
@@ -15930,6 +16127,17 @@ svg {
   }
 }
 
+@-webkit-keyframes bdSlowIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes bdSlowIn {
   from {
     opacity: 0;
@@ -15941,6 +16149,17 @@ svg {
   }
 }
 
+@-webkit-keyframes bdScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes bdScaleIn {
   from {
     opacity: 0;
@@ -15953,14 +16172,103 @@ svg {
 }
 
 .bd-focus-css3 {
-  animation-delay: 2s;
+  -webkit-animation-delay: 2s;
-  animation-name: bdScaleIn;
+          animation-delay: 2s;
+  -webkit-animation-name: bdScaleIn;
+          animation-name: bdScaleIn;
 }
 
 .bd-focus-github {
-  animation-delay: 2.5s;
+  -webkit-animation-delay: 2.5s;
-  animation-duration: 1500ms;
+          animation-delay: 2.5s;
-  animation-name: bdJellyPop;
+  -webkit-animation-duration: 1500ms;
+          animation-duration: 1500ms;
+  -webkit-animation-name: bdJellyPop;
+          animation-name: bdJellyPop;
+}
+
+@-webkit-keyframes bdJellyPop {
+  0% {
+    opacity: 0;
+    transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  3.4% {
+    opacity: 1;
+    transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  4.7% {
+    transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  6.81% {
+    transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  9.41% {
+    transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  10.21% {
+    transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  13.61% {
+    transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  14.11% {
+    transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  17.52% {
+    transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  18.72% {
+    transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  21.32% {
+    transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  24.32% {
+    transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  25.23% {
+    transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  29.03% {
+    transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  29.93% {
+    transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  35.54% {
+    transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  36.74% {
+    transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  41.04% {
+    transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  44.44% {
+    transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  52.15% {
+    transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  59.86% {
+    transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  63.26% {
+    transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  75.28% {
+    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  85.49% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  90.69% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
 }
 
 @keyframes bdJellyPop {
@@ -16046,3 +16354,5 @@ svg {
     transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
 }
+
+/*# sourceMappingURL=bulma-docs.css.map */

docs/documentation/helpers/flexbox-helpers.html

@@ -0,0 +1,131 @@
+---
+title: Flexbox helpers
+layout: documentation
+doc-tab: helpers
+doc-subtab: helpers-flexbox
+breadcrumb:
+- home
+- documentation
+- helpers
+- helpers-flexbox
+flex-direction-values:
+- row
+- row-reverse
+- column
+- column-reverse
+flex-wrap-values:
+- nowrap
+- wrap
+- wrap-reverse
+justify-content-values:
+- flex-start
+- flex-end
+- center
+- space-between
+- space-around
+- space-evenly
+- start
+- end
+- left
+- right
+align-content-values:
+- flex-start
+- flex-end
+- center
+- space-between
+- space-around
+- space-evenly
+- stretch
+- start
+- end
+- baseline
+align-items-values:
+- stretch
+- flex-start
+- flex-end
+- center
+- baseline
+- start
+- end
+- self-start
+- self-end
+align-self-values:
+- auto
+- flex-start
+- flex-end
+- center
+- baseline
+- stretch
+---
+
+<div class="content">
+  <p>
+    All of the <strong>Flexbox CSS properties</strong> are available as Bulma helpers:
+  </p>
+  <ul>
+    <li><code>flex-direction</code></li>
+    <li><code>flex-wrap</code></li>
+    <li><code>justify-content</code></li>
+    <li><code>align-content</code></li>
+    <li><code>align-items</code></li>
+    <li><code>align-self</code></li>
+    <li><code>flex-grow</code></li>
+    <li><code>flex-shrink</code></li>
+  </ul>
+</div>
+
+{% include elements/anchor.html name="Flex direction" %}
+
+{% include elements/flexbox-helper-table.html property="flex-direction" values=page.flex-direction-values %}
+
+{% include elements/anchor.html name="Flex wrap" %}
+
+{% include elements/flexbox-helper-table.html property="flex-wrap" values=page.flex-wrap-values %}
+
+{% include elements/anchor.html name="Justify content" %}
+
+{% include elements/flexbox-helper-table.html property="justify-content" values=page.justify-content-values %}
+
+{% include elements/anchor.html name="Align content" %}
+
+{% include elements/flexbox-helper-table.html property="align-content" values=page.align-content-values %}
+
+{% include elements/anchor.html name="Align items" %}
+
+{% include elements/flexbox-helper-table.html property="align-items" values=page.align-items-values %}
+
+{% include elements/anchor.html name="Align self" %}
+
+{% include elements/flexbox-helper-table.html property="align-self" values=page.align-self-values %}
+
+{% include elements/anchor.html name="Flex grow and flex shrink" %}
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Property: Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th colspan="2">Grow</th>
+    </tr>
+    {% for i in (0..5) %}
+      <tr>
+        <td><code>is-flex-grow-{{ i }}</code></td>
+        <td><code>flex-grow: {{ i }}</code></td>
+      </tr>
+    {% endfor %}
+    <tr>
+      <th colspan="2">Shrink</th>
+    </tr>
+    {% for i in (0..5) %}
+      <tr>
+        <td><code>is-flex-shrink-{{ i }}</code></td>
+        <td><code>flex-shrink: {{ i }}</code></td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>
+

sass/helpers/flexbox.sass

@@ -1,35 +1,35 @@
-$flex-directions-values: row, row-reverse, column, column-reverse
+$flex-direction-values: row, row-reverse, column, column-reverse
-@each $value in $flex-directions-values
+@each $value in $flex-direction-values
-    .is-flex-direction-#{$value}
+  .is-flex-direction-#{$value}
-        flex-direction: $value !important
+    flex-direction: $value !important
 
 $flex-wrap-values: nowrap, wrap, wrap-reverse
 @each $value in $flex-wrap-values
-    .is-flex-wrap-#{$value}
+  .is-flex-wrap-#{$value}
-        flex-wrap: $value !important
+    flex-wrap: $value !important
 
 $justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
 @each $value in $justify-content-values
-    .is-justify-content-#{$value}
+  .is-justify-content-#{$value}
-        justify-content: $value !important
+    justify-content: $value !important
 
 $align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
 @each $value in $align-content-values
-    .is-align-content-#{$value}
+  .is-align-content-#{$value}
-        align-content: $value !important
+    align-content: $value !important
 
 $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
 @each $value in $align-items-values
-    .is-align-items-#{$value}
+  .is-align-items-#{$value}
-        align-items: $value !important
+    align-items: $value !important
 
 $align-self-values: auto, flex-start, flex-end, center, baseline, stretch
 @each $value in $align-self-values
-    .is-align-self-#{$value}
+  .is-align-self-#{$value}
-        align-self: $value !important
+    align-self: $value !important
 
 $flex-operators: grow, shrink
 @each $operator in $flex-operators
-    @for $i from 0 through 5
+  @for $i from 0 through 5
-        .is-flex-#{$operator}-#{$i}
+    .is-flex-#{$operator}-#{$i}
-            flex-#{$operator}: $i !important
+      flex-#{$operator}: $i !important