Init mixin docs

docs/_data/links.json

@@ -79,19 +79,47 @@
       "icon": "tint",
       "path": "/documentation/overview/colors"
     },
-    "overview-functions": {
+    "utilities": {
+      "name": "Utilities",
+      "subtitle": "Sass tools used by Bulma and available for you",
+      "color": "primary",
+      "icon": "eye",
+      "path": "/documentation/utilities"
+    },
+    "utilities-functions": {
       "name": "Functions",
       "subtitle": "Utility functions to calculate colors and other values",
       "color": "orange",
       "icon": "code",
-      "path": "/documentation/overview/functions"
+      "path": "/documentation/utilities/functions"
     },
-    "overview-mixins": {
+    "utilities-mixins": {
       "name": "Mixins",
       "subtitle": "Utility mixins for custom elements and responsive helpers",
       "color": "purple",
       "icon": "plus",
-      "path": "/documentation/overview/mixins"
+      "path": "/documentation/utilities/mixins"
+    },
+    "utilities-responsive-mixins": {
+      "name": "Responsive Mixins",
+      "subtitle": "Utility mixins for custom elements and responsive helpers",
+      "color": "purple",
+      "icon": "plus",
+      "path": "/documentation/utilities/responsive-mixins"
+    },
+    "utilities-extends": {
+      "name": "Extends",
+      "subtitle": "Utility mixins for custom elements and responsive helpers",
+      "color": "purple",
+      "icon": "plus",
+      "path": "/documentation/utilities/extends"
+    },
+    "utilities-control-mixins": {
+      "name": "Controls",
+      "subtitle": "Utility mixins for custom elements and responsive helpers",
+      "color": "purple",
+      "icon": "plus",
+      "path": "/documentation/utilities/controls"
     },
     "customize": {
       "name": "Customize",
@@ -661,6 +689,7 @@
   "categoryIds": [
     "overview",
     "customize",
+    "utilities",
     "columns",
     "elements",
     "components",
@@ -675,9 +704,14 @@
       "overview-modifiers",
       "overview-modular",
       "overview-responsiveness",
-      "overview-colors",
+      "overview-colors"
-      "overview-functions",
+    ],
-      "overview-mixins"
+    "utilities": [
+      "utilities-mixins",
+      "utilities-responsive-mixins",
+      "utilities-control-mixins",
+      "utilities-functions",
+      "utilities-extends"
     ],
     "customize": [
       "customize-concepts",

docs/_includes/components/categories.html

@@ -8,17 +8,15 @@
     {% assign category_links = site.data.links.categories[category_id] %}
     {% assign category_link = site.data.links.by_id[category_id] %}
 
-    {% comment %}
     {% if category_id == 'overview' %}
       <p class="bd-category-group">
-        Learn
+        Concepts
       </p>
     {% elsif category_id == 'columns' %}
       <p class="bd-category-group">
-        Style
+        Library
       </p>
     {% endif %}
-    {% endcomment %}
 
     <div class="bd-category {% if category_id == current_category %}is-current{% endif %}">
       <header class="bd-category-header">

docs/_sass/examples/mixins.scss

@@ -0,0 +1,11 @@
+.bulma-arrow-mixin {
+  @include arrow(purple);
+}
+
+.bulma-hamburger-mixin {
+  @include hamburger(2.5rem);
+}
+
+.bulma-delete-mixin {
+  @include delete;
+}

docs/bulma-docs.scss

@@ -40,77 +40,77 @@ $radius: 0.375em;
 $bd-edge-width: 11.25rem;
 $bd-edge-offset: 2rem;
 
-@import '../sass/utilities/initial-variables';
+@import "../sass/utilities/initial-variables";
-@import '../sass/utilities/functions';
+@import "../sass/utilities/functions";
 
 $custom-colors: (
-  'expo': (
+  "expo": (
     $star,
     $white,
     findLightColor($star),
     findDarkColor($star),
   ),
-  'love': (
+  "love": (
     $red,
     $white,
     findLightColor($red),
     findDarkColor($red),
   ),
-  'patreon': (
+  "patreon": (
     $patreon,
     $white,
     findLightColor($patreon),
     findDarkColor($patreon),
   ),
-  'rss': (
+  "rss": (
     $rss,
     $white,
     findLightColor($rss),
     findDarkColor($rss),
   ),
-  'bleeding': (
+  "bleeding": (
     $bleeding-green,
     findColorInvert($bleeding-green),
     findLightColor($bleeding-green),
     findDarkColor($bleeding-green),
   ),
-  'sass': (
+  "sass": (
     $sass,
     $white,
     findLightColor($sass),
     findDarkColor($sass),
   ),
-  'amazon': (
+  "amazon": (
     $amazon,
     findColorInvert($amazon),
     findLightColor($amazon),
     findDarkColor($amazon),
   ),
-  'sponsor': (
+  "sponsor": (
     $rose,
     $white,
     findLightColor($rose),
     findDarkColor($rose),
   ),
-  'twitter': (
+  "twitter": (
     $twitter,
     $white,
     findLightColor($twitter),
     findDarkColor($twitter),
   ),
-  'videos': (
+  "videos": (
     $green,
     $white,
     findLightColor($green),
     findDarkColor($green),
   ),
-  'extensions': (
+  "extensions": (
     $cyan,
     $white,
     findLightColor($cyan),
     findDarkColor($cyan),
   ),
-  'bootstrap': (
+  "bootstrap": (
     $bootstrap,
     $white,
     findLightColor($bootstrap),
@@ -118,11 +118,11 @@ $custom-colors: (
   ),
 );
 
-@import '../sass/utilities/derived-variables';
+@import "../sass/utilities/derived-variables";
 
 $navbar-breakpoint: $tablet;
 
-@import '../bulma';
+@import "../bulma";
 
 %center {
   align-items: center;
@@ -175,7 +175,7 @@ $navbar-breakpoint: $tablet;
     @include overlay;
     background-color: $scheme-main-bis;
     border-radius: $radius-large;
-    content: '';
+    content: "";
     display: block;
     opacity: 0;
     pointer-events: none;
@@ -193,56 +193,58 @@ $navbar-breakpoint: $tablet;
   }
 }
 
-@import './_sass/base/css-vars';
+@import "./_sass/base/css-vars";
-@import './_sass/base/custom';
+@import "./_sass/base/custom";
-@import './_sass/base/helpers';
+@import "./_sass/base/helpers";
 
-@import './_sass/components/anchors';
+@import "./_sass/components/anchors";
-@import './_sass/components/options';
+@import "./_sass/components/options";
-@import './_sass/components/banner';
+@import "./_sass/components/banner";
-@import './_sass/components/call';
+@import "./_sass/components/call";
-@import './_sass/components/carbon';
+@import "./_sass/components/carbon";
-@import './_sass/components/categories';
+@import "./_sass/components/categories";
-@import './_sass/components/code';
+@import "./_sass/components/code";
-@import './_sass/components/content';
+@import "./_sass/components/content";
-@import './_sass/components/hero';
+@import "./_sass/components/hero";
-@import './_sass/components/highlight';
+@import "./_sass/components/highlight";
-@import './_sass/components/klmn';
+@import "./_sass/components/klmn";
-@import './_sass/components/navbar';
+@import "./_sass/components/navbar";
-@import './_sass/components/notification';
+@import "./_sass/components/notification";
-@import './_sass/components/pagination';
+@import "./_sass/components/pagination";
-@import './_sass/components/features';
+@import "./_sass/components/features";
-@import './_sass/components/links';
+@import "./_sass/components/links";
-@import './_sass/components/screenshots';
+@import "./_sass/components/screenshots";
-@import './_sass/components/drawing';
+@import "./_sass/components/drawing";
-@import './_sass/components/variables';
+@import "./_sass/components/variables";
-@import './_sass/components/book';
+@import "./_sass/components/book";
-@import './_sass/components/native';
+@import "./_sass/components/native";
-@import './_sass/components/fortyfour';
+@import "./_sass/components/fortyfour";
-@import './_sass/components/spacing-table';
+@import "./_sass/components/spacing-table";
-@import './_sass/components/survey';
+@import "./_sass/components/survey";
 
-@import './_sass/pages/index';
+@import "./_sass/pages/index";
-@import './_sass/pages/docs';
+@import "./_sass/pages/docs";
-@import './_sass/pages/videos';
+@import "./_sass/pages/videos";
-@import './_sass/pages/love';
+@import "./_sass/pages/love";
-@import './_sass/pages/expo';
+@import "./_sass/pages/expo";
-@import './_sass/pages/backers';
+@import "./_sass/pages/backers";
-@import './_sass/pages/blog';
+@import "./_sass/pages/blog";
-@import './_sass/pages/single';
+@import "./_sass/pages/single";
-@import './_sass/pages/extensions';
+@import "./_sass/pages/extensions";
-@import './_sass/pages/made-with-bulma';
+@import "./_sass/pages/made-with-bulma";
-@import './_sass/pages/bootstrap';
+@import "./_sass/pages/bootstrap";
 
-@import './_sass/index/hello';
+@import "./_sass/index/hello";
-@import './_sass/index/focus';
+@import "./_sass/index/focus";
-@import './_sass/index/focus-animations';
+@import "./_sass/index/focus-animations";
-@import './_sass/index/best';
+@import "./_sass/index/best";
-@import './_sass/index/sponsors';
+@import "./_sass/index/sponsors";
-@import './_sass/index/heading';
+@import "./_sass/index/heading";
-@import './_sass/index/columns';
+@import "./_sass/index/columns";
-@import './_sass/index/custom';
+@import "./_sass/index/custom";
 
-@import './_sass/global/support';
+@import "./_sass/global/support";
-@import './_sass/global/newsletter';
+@import "./_sass/global/newsletter";
-@import './_sass/global/cc';
+@import "./_sass/global/cc";
+
+@import "./_sass/examples/mixins";

docs/css/bulma-docs.css

@@ -183,8 +183,7 @@ fieldset[disabled] .pagination-ellipsis {
 }
 
 .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
-  -webkit-animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 9999px;
   border-right-color: transparent;
@@ -325,9 +324,7 @@ html {
   overflow-x: hidden;
   overflow-y: scroll;
   text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-          text-size-adjust: 100%;
 }
 
 article,
@@ -453,15 +450,6 @@ table th {
   color: #363636;
 }
 
-@-webkit-keyframes spinAround {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-
 @keyframes spinAround {
   from {
     transform: rotate(0deg);
@@ -4426,14 +4414,10 @@ div.icon-text {
 }
 
 .progress:indeterminate {
-  -webkit-animation-duration: 1.5s;
+  animation-duration: 1.5s;
-          animation-duration: 1.5s;
+  animation-iteration-count: infinite;
-  -webkit-animation-iteration-count: infinite;
+  animation-name: moveIndeterminate;
-          animation-iteration-count: infinite;
+  animation-timing-function: linear;
-  -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;
@@ -4465,15 +4449,6 @@ div.icon-text {
   height: 1.5rem;
 }
 
-@-webkit-keyframes moveIndeterminate {
-  from {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
-}
-
 @keyframes moveIndeterminate {
   from {
     background-position: 200% 0;
@@ -9590,6 +9565,11 @@ body.has-navbar-fixed-bottom {
 
 .navbar-burger {
   color: #4a4a4a;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  border: none;
   cursor: pointer;
   display: block;
   height: 3.25rem;
@@ -12524,8 +12504,6 @@ 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;
 }
 
@@ -16913,7 +16891,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   top: 0;
   background-color: #fafafa;
   border-radius: 6px;
-  content: '';
+  content: "";
   display: block;
   opacity: 0;
   pointer-events: none;
@@ -17158,7 +17136,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 
 .bd-anchors {
   padding: var(--docs-side-padding);
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
@@ -17594,7 +17571,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 .bd-categories {
   --height: 1.25;
   padding: var(--docs-side-padding);
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
@@ -20986,8 +20962,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   --device-md-width: 24px;
   --device-lg-height: 40px;
   --device-lg-width: 48px;
-  -webkit-animation: bdDeviceBounce 3.5s infinite;
+  animation: bdDeviceBounce 3.5s infinite;
-          animation: bdDeviceBounce 3.5s infinite;
   border: 0 solid hsl(var(--device-deg), 100%, 53%);
   border-width: var(--device-y) var(--device-x);
   border-radius: 0.375em;
@@ -21032,44 +21007,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   color: #333333;
 }
 
-@-webkit-keyframes bdDeviceBounce {
-  0% {
-    --device-deg: var(--device-sm-deg);
-    height: var(--device-sm-height);
-    width: var(--device-sm-width);
-  }
-  28% {
-    --device-deg: var(--device-sm-deg);
-    height: var(--device-sm-height);
-    width: var(--device-sm-width);
-  }
-  33% {
-    --device-deg: var(--device-md-deg);
-    height: var(--device-md-height);
-    width: var(--device-md-width);
-  }
-  62% {
-    --device-deg: var(--device-md-deg);
-    height: var(--device-md-height);
-    width: var(--device-md-width);
-  }
-  67% {
-    --device-deg: var(--device-lg-deg);
-    height: var(--device-lg-height);
-    width: var(--device-lg-width);
-  }
-  95% {
-    --device-deg: var(--device-lg-deg);
-    height: var(--device-lg-height);
-    width: var(--device-lg-width);
-  }
-  100% {
-    --device-deg: var(--device-sm-deg);
-    height: var(--device-sm-height);
-    width: var(--device-sm-width);
-  }
-}
-
 @keyframes bdDeviceBounce {
   0% {
     --device-deg: var(--device-sm-deg);
@@ -21108,15 +21045,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdGrow {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
 @keyframes bdGrow {
   from {
     transform: scale(0);
@@ -21126,17 +21054,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdSlideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes bdSlideDown {
   from {
     opacity: 0;
@@ -21148,17 +21065,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes bdSlideUp {
   from {
     opacity: 0;
@@ -21171,96 +21077,67 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 .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 {
-  -webkit-animation-duration: 500ms;
+  animation-duration: 500ms;
-          animation-duration: 500ms;
+  animation-fill-mode: both;
-  -webkit-animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
-          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;
 }
 
 .bd-focus-item .title {
-  -webkit-animation-name: bdSlideDown;
+  animation-name: bdSlideDown;
-          animation-name: bdSlideDown;
 }
 
 .bd-focus-item .subtitle {
-  -webkit-animation-name: bdSlideUp;
+  animation-name: bdSlideUp;
-          animation-name: bdSlideUp;
 }
 
 .bd-focus-item:nth-child(1) .title {
-  -webkit-animation-delay: 0;
+  animation-delay: 0;
-          animation-delay: 0;
 }
 
 .bd-focus-item:nth-child(1) .subtitle {
-  -webkit-animation-delay: 125ms;
+  animation-delay: 125ms;
-          animation-delay: 125ms;
 }
 
 .bd-focus-item:nth-child(2) .title {
-  -webkit-animation-delay: 500ms;
+  animation-delay: 500ms;
-          animation-delay: 500ms;
 }
 
 .bd-focus-item:nth-child(2) .subtitle {
-  -webkit-animation-delay: 625ms;
+  animation-delay: 625ms;
-          animation-delay: 625ms;
 }
 
 .bd-focus-item:nth-child(3) .title {
-  -webkit-animation-delay: 1000ms;
+  animation-delay: 1000ms;
-          animation-delay: 1000ms;
 }
 
 .bd-focus-item:nth-child(3) .subtitle {
-  -webkit-animation-delay: 1125ms;
+  animation-delay: 1125ms;
-          animation-delay: 1125ms;
 }
 
 .bd-focus-item:nth-child(4) .title {
-  -webkit-animation-delay: 1500ms;
+  animation-delay: 1500ms;
-          animation-delay: 1500ms;
 }
 
 .bd-focus-item:nth-child(4) .subtitle {
-  -webkit-animation-delay: 1625ms;
+  animation-delay: 1625ms;
-          animation-delay: 1625ms;
 }
 
 .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
-  -webkit-animation-name: bdGrow;
+  animation-name: bdGrow;
-          animation-name: bdGrow;
   transform-origin: bottom center;
 }
 
 .bd-focus-mobile {
-  -webkit-animation-delay: 0;
+  animation-delay: 0;
-          animation-delay: 0;
 }
 
 .bd-focus-tablet {
-  -webkit-animation-delay: 250ms;
+  animation-delay: 250ms;
-          animation-delay: 250ms;
 }
 
 .bd-focus-desktop {
-  -webkit-animation-delay: 500ms;
+  animation-delay: 500ms;
-          animation-delay: 500ms;
-}
-
-@-webkit-keyframes bdCube1 {
-  0% {
-    transform: translate3d(0, -50px, 0);
-    opacity: 0;
-  }
-  25%,
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
 }
 
 @keyframes bdCube1 {
@@ -21275,18 +21152,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-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);
@@ -21299,18 +21164,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-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);
@@ -21324,42 +21177,24 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
-  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
-          animation-direction: alternate;
+  animation-duration: 2000ms;
-  -webkit-animation-duration: 2000ms;
+  animation-iteration-count: infinite;
-          animation-duration: 2000ms;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
 }
 
 .bd-focus-cube-1 {
-  -webkit-animation-delay: 500ms;
+  animation-delay: 500ms;
-          animation-delay: 500ms;
+  animation-name: bdCube1;
-  -webkit-animation-name: bdCube1;
-          animation-name: bdCube1;
 }
 
 .bd-focus-cube-2 {
-  -webkit-animation-name: bdCube2;
+  animation-name: bdCube2;
-          animation-name: bdCube2;
+  animation-delay: 750ms;
-  -webkit-animation-delay: 750ms;
-          animation-delay: 750ms;
 }
 
 .bd-focus-cube-3 {
-  -webkit-animation-name: bdCube3;
+  animation-name: bdCube3;
-          animation-name: bdCube3;
+  animation-delay: 1000ms;
-  -webkit-animation-delay: 1000ms;
-          animation-delay: 1000ms;
-}
-
-@-webkit-keyframes bdFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
 }
 
 @keyframes bdFadeIn {
@@ -21371,17 +21206,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdSlowIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes bdSlowIn {
   from {
     opacity: 0;
@@ -21393,17 +21217,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-@-webkit-keyframes bdScaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 @keyframes bdScaleIn {
   from {
     opacity: 0;
@@ -21416,103 +21229,14 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 .bd-focus-css3 {
-  -webkit-animation-delay: 1000ms;
+  animation-delay: 1000ms;
-          animation-delay: 1000ms;
+  animation-name: bdScaleIn;
-  -webkit-animation-name: bdScaleIn;
-          animation-name: bdScaleIn;
 }
 
 .bd-focus-github {
-  -webkit-animation-delay: 1500ms;
+  animation-delay: 1500ms;
-          animation-delay: 1500ms;
+  animation-duration: 1500ms;
-  -webkit-animation-duration: 1500ms;
+  animation-name: bdJellyPop;
-          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 {
@@ -21608,23 +21332,18 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 
 .bd-best-list {
   align-items: stretch;
-  -webkit-animation-duration: 93.6s;
+  animation-duration: 93.6s;
-          animation-duration: 93.6s;
+  animation-iteration-count: infinite;
-  -webkit-animation-iteration-count: infinite;
+  animation-timing-function: linear;
-          animation-iteration-count: infinite;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
   display: flex;
   left: 0;
   position: absolute;
   top: 1.5rem;
-  -webkit-animation-name: bdBestCarousel;
+  animation-name: bdBestCarousel;
-          animation-name: bdBestCarousel;
 }
 
 .bd-best-list:hover {
-  -webkit-animation-play-state: paused;
+  animation-play-state: paused;
-          animation-play-state: paused;
 }
 
 .bd-best-item {
@@ -21672,12 +21391,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   width: auto;
 }
 
-@-webkit-keyframes bdBestCarousel {
-  100% {
-    transform: translateX(calc(-100% + 3120px));
-  }
-}
-
 @keyframes bdBestCarousel {
   100% {
     transform: translateX(calc(-100% + 3120px));
@@ -22495,4 +22208,157 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   }
 }
 
-/*# sourceMappingURL=bulma-docs.css.map */
+.bulma-arrow-mixin {
+  border: 3px solid purple;
+  border-radius: 2px;
+  border-right: 0;
+  border-top: 0;
+  content: " ";
+  display: block;
+  height: 0.625em;
+  margin-top: -0.4375em;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: rotate(-45deg);
+  transform-origin: center;
+  width: 0.625em;
+}
+
+.bulma-hamburger-mixin {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: block;
+  height: 2.5rem;
+  position: relative;
+  width: 2.5rem;
+}
+
+.bulma-hamburger-mixin span {
+  background-color: currentColor;
+  display: block;
+  height: 1px;
+  left: calc(50% - 8px);
+  position: absolute;
+  transform-origin: center;
+  transition-duration: 86ms;
+  transition-property: background-color, opacity, transform;
+  transition-timing-function: ease-out;
+  width: 16px;
+}
+
+.bulma-hamburger-mixin span:nth-child(1) {
+  top: calc(50% - 6px);
+}
+
+.bulma-hamburger-mixin span:nth-child(2) {
+  top: calc(50% - 1px);
+}
+
+.bulma-hamburger-mixin span:nth-child(3) {
+  top: calc(50% + 4px);
+}
+
+.bulma-hamburger-mixin:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.bulma-hamburger-mixin.is-active span:nth-child(1) {
+  transform: translateY(5px) rotate(45deg);
+}
+
+.bulma-hamburger-mixin.is-active span:nth-child(2) {
+  opacity: 0;
+}
+
+.bulma-hamburger-mixin.is-active span:nth-child(3) {
+  transform: translateY(-5px) rotate(-45deg);
+}
+
+.bulma-delete-mixin {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background-color: rgba(10, 10, 10, 0.2);
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  pointer-events: auto;
+  display: inline-block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 0;
+  height: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  min-height: 20px;
+  min-width: 20px;
+  outline: none;
+  position: relative;
+  vertical-align: top;
+  width: 20px;
+}
+
+.bulma-delete-mixin::before, .bulma-delete-mixin::after {
+  background-color: white;
+  content: "";
+  display: block;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  transform-origin: center center;
+}
+
+.bulma-delete-mixin::before {
+  height: 2px;
+  width: 50%;
+}
+
+.bulma-delete-mixin::after {
+  height: 50%;
+  width: 2px;
+}
+
+.bulma-delete-mixin:hover, .bulma-delete-mixin:focus {
+  background-color: rgba(10, 10, 10, 0.3);
+}
+
+.bulma-delete-mixin:active {
+  background-color: rgba(10, 10, 10, 0.4);
+}
+
+.bulma-delete-mixin.is-small {
+  height: 16px;
+  max-height: 16px;
+  max-width: 16px;
+  min-height: 16px;
+  min-width: 16px;
+  width: 16px;
+}
+
+.bulma-delete-mixin.is-medium {
+  height: 24px;
+  max-height: 24px;
+  max-width: 24px;
+  min-height: 24px;
+  min-width: 24px;
+  width: 24px;
+}
+
+.bulma-delete-mixin.is-large {
+  height: 32px;
+  max-height: 32px;
+  max-width: 32px;
+  min-height: 32px;
+  min-width: 32px;
+  width: 32px;
+}

docs/documentation/overview/functions.html

@@ -11,11 +11,23 @@ breadcrumb:
 ---
 
 <div class="content">
-  <p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
+  <p>
+    Bulma has <strong>custom Sass functions</strong> to help find <strong>related colors</strong> dynamically:
+  </p>
+
   <ul>
-    <li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
+    <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color</li>
-    <li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
+    <li><code>findLightColor($color)</code>: returns the current color but with a lightness of at <em>least</em> 96%</li>
-    <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
+    <li><code>findDarkColor($color)</code>: returns the current color but with a lightness of at <em>most</em> 29%</li>
+  </ul>
+
+  <p>
+    Bulma also has a few utility functions to calculate useful values:
+  </p>
+
+  <ul>
+    <li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number</li>
+    <li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light</li>
   </ul>
 </div>
 
@@ -232,3 +244,11 @@ breadcrumb:
     </table>
   </div>
 </div>
+
+{% include elements/anchor.html name="The <code>findLightColor()</code> and <code>findDarkColor()</code> functions" %}
+
+<div class="content">
+  <p>
+    The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>:
+  </p>
+</div>

docs/documentation/overview/modifiers.html

@@ -11,75 +11,75 @@ breadcrumb:
 ---
 
 {% capture button_example %}
-<a class="button">
+<button class="button">
   Button
-</a>
+</button>
 {% endcapture %}
 
 {% capture button_primary_example %}
-<a class="button is-primary">
+<button class="button is-primary">
   Button
-</a>
+</button>
 {% endcapture %}
 
 {% capture button_colors %}
-<a class="button is-primary">
+<button class="button is-primary">
   Button
-</a>
+</button>
-<a class="button is-link">
+<button class="button is-link">
   Button
-</a>
+</button>
-<a class="button is-info">
+<button class="button is-info">
   Button
-</a>
+</button>
-<a class="button is-success">
+<button class="button is-success">
   Button
-</a>
+</button>
-<a class="button is-warning">
+<button class="button is-warning">
   Button
-</a>
+</button>
-<a class="button is-danger">
+<button class="button is-danger">
   Button
-</a>
+</button>
 {% endcapture %}
 
 {% capture button_sizes %}
-<a class="button is-small">
+<button class="button is-small">
   Button
-</a>
+</button>
-<a class="button">
+<button class="button">
   Button
-</a>
+</button>
-<a class="button is-medium">
+<button class="button is-medium">
   Button
-</a>
+</button>
-<a class="button is-large">
+<button class="button is-large">
   Button
-</a>
+</button>
 {% endcapture %}
 
 {% capture button_states %}
-<a class="button is-primary is-outlined">
+<button class="button is-primary is-outlined">
   Button
-</a>
+</button>
-<a class="button is-loading">
+<button class="button is-loading">
   Button
-</a>
+</button>
-<a class="button" disabled>
+<button class="button" disabled>
   Button
-</a>
+</button>
 {% endcapture %}
 
 {% capture button_combinations %}
-<a class="button is-primary is-small" disabled>
+<button class="button is-primary is-small" disabled>
   Button
-</a>
+</button>
-<a class="button is-info is-loading">
+<button class="button is-info is-loading">
   Button
-</a>
+</button>
-<a class="button is-danger is-outlined is-large">
+<button class="button is-danger is-outlined is-large">
   Button
-</a>
+</button>
 {% endcapture %}
 
 <div class="columns">
@@ -124,22 +124,22 @@ breadcrumb:
   </div>
   <div class="column">
     <p class="field">
-      <a class="button is-primary">Button</a>
+      <button class="button is-primary">Button</button>
     </p>
     <p class="field">
-      <a class="button is-link">Button</a>
+      <button class="button is-link">Button</button>
     </p>
     <p class="field">
-      <a class="button is-info">Button</a>
+      <button class="button is-info">Button</button>
     </p>
     <p class="field">
-      <a class="button is-success">Button</a>
+      <button class="button is-success">Button</button>
     </p>
     <p class="field">
-      <a class="button is-warning">Button</a>
+      <button class="button is-warning">Button</button>
     </p>
     <p class="field">
-      <a class="button is-danger">Button</a>
+      <button class="button is-danger">Button</button>
     </p>
   </div>
   <div class="column is-half">
@@ -162,16 +162,16 @@ breadcrumb:
   </div>
   <div class="column">
     <p class="field">
-      <a class="button is-small">Button</a>
+      <button class="button is-small">Button</button>
     </p>
     <p class="field">
-      <a class="button">Button</a>
+      <button class="button">Button</button>
     </p>
     <p class="field">
-      <a class="button is-medium">Button</a>
+      <button class="button is-medium">Button</button>
     </p>
     <p class="field">
-      <a class="button is-large">Button</a>
+      <button class="button is-large">Button</button>
     </p>
   </div>
   <div class="column is-half">
@@ -192,13 +192,13 @@ breadcrumb:
   </div>
   <div class="column">
     <p class="field">
-      <a class="button is-primary is-outlined">Button</a>
+      <button class="button is-primary is-outlined">Button</button>
     </p>
     <p class="field">
-      <a class="button is-loading">Button</a>
+      <button class="button is-loading">Button</button>
     </p>
     <p class="field">
-      <a class="button" disabled>Button</a>
+      <button class="button" disabled>Button</button>
     </p>
   </div>
   <div class="column is-half">
@@ -214,13 +214,13 @@ breadcrumb:
   </div>
   <div class="column">
     <p class="field">
-      <a class="button is-primary is-small" disabled>Button</a>
+      <button class="button is-primary is-small" disabled>Button</button>
     </p>
     <p class="field">
-      <a class="button is-info is-loading">Button</a>
+      <button class="button is-info is-loading">Button</button>
     </p>
     <p class="field">
-      <a class="button is-danger is-outlined is-large">Button</a>
+      <button class="button is-danger is-outlined is-large">Button</button>
     </p>
   </div>
   <div class="column is-half">

docs/documentation/utilities/control-mixins.html

@@ -0,0 +1,68 @@
+---
+title: Mixins
+layout: documentation
+doc-tab: overview
+doc-subtab: mixins
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-mixins
+---
+
+<div class="table-container">
+  <table class="table is-bordered">
+    <tr>
+      <td><code>=arrow($color)</code></td>
+      <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
+    </tr>
+    <tr>
+      <td><code>=block</code></td>
+      <td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
+    </tr>
+    <tr>
+      <td><code>=clearfix</code></td>
+      <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
+    </tr>
+    <tr>
+      <td><code>=center($size)</code></td>
+      <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
+    </tr>
+    <tr>
+      <td><code>=delete</code></td>
+      <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
+    </tr>
+    <tr>
+      <td><code>=fa($size, $dimensions)</code></td>
+      <td>Sets the style of a Font Awesome icon container.</td>
+    </tr>
+    <tr>
+      <td><code>=hamburger($dimensions)</code></td>
+      <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
+    </tr>
+    <tr>
+      <td><code>=loader</code></td>
+      <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
+    </tr>
+    <tr>
+      <td><code>=overflow-touch</code></td>
+      <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
+    </tr>
+    <tr>
+      <td><code>=overlay($offset: 0)</code></td>
+      <td>Makes the element overlay its parent container, like the transparent modal background.</td>
+    </tr>
+    <tr>
+      <td><code>=placeholder</code></td>
+      <td>Sets the styles of an input placeholder.</td>
+    </tr>
+    <tr>
+      <td><code>=unselectable</code></td>
+      <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
+    </tr>
+  </table>
+</div>
+
+<div class="content">
+  <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
+</div>

docs/documentation/utilities/extends.html

@@ -0,0 +1,68 @@
+---
+title: Mixins
+layout: documentation
+doc-tab: overview
+doc-subtab: mixins
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-mixins
+---
+
+<div class="table-container">
+  <table class="table is-bordered">
+    <tr>
+      <td><code>=arrow($color)</code></td>
+      <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
+    </tr>
+    <tr>
+      <td><code>=block</code></td>
+      <td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
+    </tr>
+    <tr>
+      <td><code>=clearfix</code></td>
+      <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
+    </tr>
+    <tr>
+      <td><code>=center($size)</code></td>
+      <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
+    </tr>
+    <tr>
+      <td><code>=delete</code></td>
+      <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
+    </tr>
+    <tr>
+      <td><code>=fa($size, $dimensions)</code></td>
+      <td>Sets the style of a Font Awesome icon container.</td>
+    </tr>
+    <tr>
+      <td><code>=hamburger($dimensions)</code></td>
+      <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
+    </tr>
+    <tr>
+      <td><code>=loader</code></td>
+      <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
+    </tr>
+    <tr>
+      <td><code>=overflow-touch</code></td>
+      <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
+    </tr>
+    <tr>
+      <td><code>=overlay($offset: 0)</code></td>
+      <td>Makes the element overlay its parent container, like the transparent modal background.</td>
+    </tr>
+    <tr>
+      <td><code>=placeholder</code></td>
+      <td>Sets the styles of an input placeholder.</td>
+    </tr>
+    <tr>
+      <td><code>=unselectable</code></td>
+      <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
+    </tr>
+  </table>
+</div>
+
+<div class="content">
+  <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
+</div>

docs/documentation/utilities/functions.html

@@ -0,0 +1,254 @@
+---
+title: Functions
+layout: documentation
+doc-tab: overview
+doc-subtab: functions
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-functions
+---
+
+<div class="content">
+  <p>
+    Bulma has <strong>custom Sass functions</strong> to help find <strong>related colors</strong> dynamically:
+  </p>
+
+  <ul>
+    <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color</li>
+    <li><code>findLightColor($color)</code>: returns the current color but with a lightness of at <em>least</em> 96%</li>
+    <li><code>findDarkColor($color)</code>: returns the current color but with a lightness of at <em>most</em> 29%</li>
+  </ul>
+
+  <p>
+    Bulma also has a few utility functions to calculate useful values:
+  </p>
+
+  <ul>
+    <li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number</li>
+    <li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light</li>
+  </ul>
+</div>
+
+{% include elements/anchor.html name="The <code>findColorInvert()</code> function" %}
+
+<div class="content">
+  <p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
+  <ul>
+    <li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
+    <li>otherwise, it outputs <code>#fff</code></li>
+  </ul>
+  <p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
+  <div class="table-container">
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>color</th>
+          <th>color luminance</th>
+          <th>findColorInvert()</th>
+          <th>result</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #00d1b2;"></span>
+            <code>#00d1b2</code>
+          </td>
+          <td>
+            <code>0.52831</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #3273dc;"></span>
+            <code>#3273dc</code>
+          </td>
+          <td>
+            <code>0.23119</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #23d160;"></span>
+            <code>#23d160</code>
+          </td>
+          <td>
+            <code>0.51067</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #ffdd57;"></span>
+            <code>#ffdd57</code>
+          </td>
+          <td>
+            <code>0.76863</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
+            <code>rgba(0, 0, 0, 0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #ff3860;"></span>
+            <code>#ff3860</code>
+          </td>
+          <td>
+            <code>0.27313</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #ffb3b3;"></span>
+            <code>#ffb3b3</code>
+          </td>
+          <td>
+            <code>0.61796</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+            <code>rgba(0,0,0,0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #ffbc6b;"></span>
+            <code>#ffbc6b</code>
+          </td>
+          <td>
+            <code>0.63053</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+            <code>rgba(0,0,0,0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
+            <code>hsl(294, 71%, 79%)</code>
+          </td>
+          <td>
+            <code>0.5529</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+            <code>rgba(0,0,0,0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <p>
+    For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
+    <br>
+    For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
+  </p>
+  <div class="table-container">
+    <table class="table is-bordered">
+      <tbody>
+        <tr>
+          <th>
+            with <code>findColorInvert()</code>
+          </th>
+          <td>
+            <code>$purple-invert: findColorInvert($purple)</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+            <code>rgba(0,0,0,0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            with manual setting
+          </th>
+          <td>
+            <code>$purple-invert: #fff</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{% include elements/anchor.html name="The <code>findLightColor()</code> and <code>findDarkColor()</code> functions" %}
+
+<div class="content">
+  <p>
+    The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>:
+  </p>
+</div>

docs/documentation/utilities/mixins.html

@@ -0,0 +1,119 @@
+---
+title: Mixins
+layout: documentation
+doc-tab: utilities
+doc-subtab: mixins
+breadcrumb:
+- home
+- documentation
+- utilities
+- utilities-mixins
+---
+
+<div class="content">
+  <p>
+    Throughout the codebase, Bulma uses Sass mixins to <strong>enhance</strong> and facilitate the CSS output. While these mixins are mainly used within the context of Bulma, they are of course available for you to <strong>re-use</strong> in your own projects.
+  </p>
+</div>
+
+{% include elements/anchor.html name="Element Mixins" %}
+
+<h4 class="title is-5">Arrow</h4>
+
+<div class="content">
+  <p>
+    The <code>arrow()</code> mixin creates a down-facing arrow. The <code>$color</code> parameter defines the color of the arrow.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-arrow-mixin {
+  @include arrow(purple);
+}{% endhighlight %}
+
+{% capture arrow %}
+<span class="bulma-arrow-mixin"></span>
+{% endcapture %}
+
+{% include elements/snippet.html content=arrow %}
+
+<!--  -->
+
+<h4 class="title is-5">Hamburger</h4>
+
+<div class="content">
+  <p>
+    The <code>hamburger()</code> mixin creates a 16x16px set of <strong>3 horizontal bars</strong> grouped within square. The dimensions of this square are defined by the <code>$dimensions</code> parameter.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-hamburger-mixin {
+  @include hamburger(2.5rem);
+}{% endhighlight %}
+
+{% capture hamburger %}
+<button class="bulma-hamburger-mixin">
+  <span></span>
+  <span></span>
+  <span></span>
+</button>
+{% endcapture %}
+
+{% include elements/snippet.html content=hamburger %}
+
+<!--  -->
+
+<h4 class="title is-5">Delete</h4>
+
+<div class="content">
+  <p>
+    The <code>delete()</code> mixin creates a 20x20px circle containing a <strong>cross</strong>. It comes with 3 modifiers: <code>is-small</code>, <code>is-medium</code> and <code>is-large</code>.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-delete-mixin {
+  @include delete;
+}{% endhighlight %}
+
+{% capture delete %}
+<button class="bulma-delete-mixin is-small"></button>
+<button class="bulma-delete-mixin"></button>
+<button class="bulma-delete-mixin is-medium"></button>
+<button class="bulma-delete-mixin is-large"></button>
+{% endcapture %}
+
+{% include elements/snippet.html content=delete %}
+
+<!--  -->
+
+@include loader
+
+@include fa($size, $dimensions)
+
+@include block($spacing: $block-spacing)
+
+@include overlay($offset: 0)
+
+@include placeholder
+
+// Tools
+
+@include clearfix
+
+@include center($width, $height: 0)
+
+@include overflow-touch
+
+@include reset
+
+@include unselectable
+
+// RTL
+
+@include ltr
+
+@include rtl
+
+@include ltr-property($property, $spacing, $right: true)
+
+@include ltr-position($spacing, $right: true)
+

docs/documentation/utilities/responsive-mixins.html

@@ -0,0 +1,68 @@
+---
+title: Mixins
+layout: documentation
+doc-tab: overview
+doc-subtab: mixins
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-mixins
+---
+
+<div class="table-container">
+  <table class="table is-bordered">
+    <tr>
+      <td><code>=arrow($color)</code></td>
+      <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
+    </tr>
+    <tr>
+      <td><code>=block</code></td>
+      <td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
+    </tr>
+    <tr>
+      <td><code>=clearfix</code></td>
+      <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
+    </tr>
+    <tr>
+      <td><code>=center($size)</code></td>
+      <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
+    </tr>
+    <tr>
+      <td><code>=delete</code></td>
+      <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
+    </tr>
+    <tr>
+      <td><code>=fa($size, $dimensions)</code></td>
+      <td>Sets the style of a Font Awesome icon container.</td>
+    </tr>
+    <tr>
+      <td><code>=hamburger($dimensions)</code></td>
+      <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
+    </tr>
+    <tr>
+      <td><code>=loader</code></td>
+      <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
+    </tr>
+    <tr>
+      <td><code>=overflow-touch</code></td>
+      <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
+    </tr>
+    <tr>
+      <td><code>=overlay($offset: 0)</code></td>
+      <td>Makes the element overlay its parent container, like the transparent modal background.</td>
+    </tr>
+    <tr>
+      <td><code>=placeholder</code></td>
+      <td>Sets the styles of an input placeholder.</td>
+    </tr>
+    <tr>
+      <td><code>=unselectable</code></td>
+      <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
+    </tr>
+  </table>
+</div>
+
+<div class="content">
+  <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
+</div>

sass/utilities/functions.sass

@@ -82,7 +82,7 @@
   @else
     @return #fff
 
-@function findLightColor($color)
+@function findLightColor($color, $l: 96%)
   @if type-of($color) == 'color'
     $l: 96%
     @if lightness($color) > 96%
@@ -90,9 +90,8 @@
     @return change-color($color, $lightness: $l)
   @return $background
 
-@function findDarkColor($color)
+@function findDarkColor($color, $base-l: 29%)
   @if type-of($color) == 'color'
-    $base-l: 29%
     $luminance: colorLuminance($color)
     $luminance-delta: (0.53 - $luminance)
     $target-l: round($base-l + ($luminance-delta * 53))

sass/utilities/mixins.sass

@@ -25,6 +25,11 @@
   width: $dimensions
 
 =hamburger($dimensions)
+  -moz-appearance: none
+  -webkit-appearance: none
+  appearance: none
+  background: none
+  border: none
   cursor: pointer
   display: block
   height: $dimensions