Add from and until mixins docs

Add utilities documentation
Finish direction mixins
2021-09-20 00:34:41 +01:00 · 2021-09-19 23:36:15 +01:00 · 2021-09-19 18:08:24 +01:00 · 2021-09-19 01:38:25 +01:00 · 2021-09-19 01:23:53 +01:00
29 changed files with 2548 additions and 404 deletions
--- a/css/bulma.css.map
+++ b/css/bulma.css.map
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@ -2,17 +2,17 @@
  "by_id": {
    "home": {
      "name": "Home",
-      "path": ""
+      "path": "/"
    },
    "documentation": {
      "name": "Documentation",
      "subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
-      "path": "/documentation"
+      "path": "/documentation/"
    },
    "become-sponsor": {
      "name": "Become a Bulma sponsor",
      "subtitle": "Sponsor Bulma and Open Source via <a href=\"https://www.patreon.com/jgthms\" target=\"_blank\">Patreon</a> and <a href=\"https://github.com/sponsors/jgthms\" target=\"_blank\">GitHub</a>",
-      "path": "/become-a-bulma-sponsor"
+      "path": "/become-a-bulma-sponsor/"
    },
    "bulma-book": {
      "name": "The official Bulma book",
@ -20,28 +20,28 @@
      "subtitle": "A step-by-step guide that teaches you how to build a web interface from scratch using Bulma",
      "icon": "bookmark",
      "color": "bleeding",
-      "path": "/the-official-bulma-book"
+      "path": "/the-official-bulma-book/"
    },
    "overview": {
      "name": "Overview",
      "subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
      "color": "primary",
      "icon": "eye",
-      "path": "/documentation/overview"
+      "path": "/documentation/overview/"
    },
    "overview-start": {
      "name": "Start",
      "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
      "color": "danger",
      "icon": "rocket",
-      "path": "/documentation/overview/start"
+      "path": "/documentation/overview/start/"
    },
    "overview-customize": {
      "name": "Customize",
      "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
      "color": "purple",
      "icon": "paint-brush",
-      "path": "/documentation/overview/customize"
+      "path": "/documentation/overview/customize/"
    },
    "overview-classes": {
      "name": "CSS classes",
@ -49,70 +49,99 @@
      "color": "link",
      "icon_brand": "true",
      "icon": "css3",
-      "path": "/documentation/overview/classes"
+      "path": "/documentation/overview/classes/"
    },
    "overview-modular": {
      "name": "Modularity",
      "subtitle": "Just import what you <strong>need</strong>",
      "color": "success",
      "icon": "cubes",
-      "path": "/documentation/overview/modular"
+      "path": "/documentation/overview/modular/"
    },
    "overview-responsiveness": {
      "name": "Responsiveness",
      "subtitle": "Bulma is a <strong>mobile-first</strong> framework",
      "color": "primary",
      "icon": "arrows-alt-h",
-      "path": "/documentation/overview/responsiveness"
+      "path": "/documentation/overview/responsiveness/"
    },
    "overview-variables": {
      "name": "Variables",
      "subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
      "color": "grey",
      "icon": "cogs",
-      "path": "/documentation/overview/variables"
+      "path": "/documentation/overview/variables/"
    },
    "overview-colors": {
      "name": "Colors",
      "subtitle": "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components",
      "color": "info",
      "icon": "tint",
-      "path": "/documentation/overview/colors"
+      "path": "/documentation/overview/colors/"
    },
-    "overview-functions": {
+    "utilities": {
+      "name": "Utilities",
+      "subtitle": "Sass tools used by Bulma and available for you",
+      "color": "primary",
+      "icon": "tools",
+      "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",
+      "subtitle": "Utility mixins for custom elements and other CSS helpers",
      "color": "purple",
-      "icon": "plus",
-      "path": "/documentation/overview/mixins"
+      "icon": "equals",
+      "path": "/documentation/utilities/mixins/"
+    },
+    "utilities-responsive-mixins": {
+      "name": "Responsive mixins",
+      "subtitle": "Mixins that allows you to define different styles for each screen size",
+      "color": "purple",
+      "icon": "arrows-alt-h",
+      "path": "/documentation/utilities/responsive-mixins/"
+    },
+    "utilities-extends": {
+      "name": "Extends",
+      "subtitle": "Sass extends to keep your CSS code DRY",
+      "color": "purple",
+      "icon": "percentage",
+      "path": "/documentation/utilities/extends/"
+    },
+    "utilities-control-mixins": {
+      "name": "Form Control mixins",
+      "subtitle": "Mixins for Bulma's buttons and form controls",
+      "color": "purple",
+      "icon": "hand-pointer",
+      "icon_regular": "true",
+      "path": "/documentation/utilities/control-mixins/"
    },
    "customize": {
      "name": "Customize",
      "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
      "color": "purple",
      "icon": "paint-brush",
-      "path": "/documentation/customize"
+      "path": "/documentation/customize/"
    },
    "customize-concepts": {
      "name": "Concepts",
      "subtitle": "What makes Bulma <strong>customizable</strong>",
      "color": "info",
      "icon": "lightbulb",
-      "path": "/documentation/customize/concepts"
+      "path": "/documentation/customize/concepts/"
    },
    "customize-variables": {
      "name": "Variables",
      "subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
      "color": "grey",
      "icon": "cogs",
-      "path": "/documentation/customize/variables"
+      "path": "/documentation/customize/variables/"
    },
    "customize-node-sass": {
      "name": "With node-sass",
@ -120,7 +149,7 @@
      "color": "danger",
      "icon_brand": "true",
      "icon": "npm",
-      "path": "/documentation/customize/with-node-sass"
+      "path": "/documentation/customize/with-node-sass/"
    },
    "customize-sass-cli": {
      "name": "With Sass CLI",
@ -128,7 +157,7 @@
      "color": "purple",
      "icon_brand": "true",
      "icon": "sass",
-      "path": "/documentation/customize/with-sass-cli"
+      "path": "/documentation/customize/with-sass-cli/"
    },
    "customize-webpack": {
      "name": "With webpack",
@ -136,195 +165,195 @@
      "color": "warning",
      "icon_brand": "true",
      "icon": "js",
-      "path": "/documentation/customize/with-webpack"
+      "path": "/documentation/customize/with-webpack/"
    },
    "modifiers": {
      "name": "Modifiers",
      "subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
      "color": "grey",
      "icon": "cogs",
-      "path": "/documentation/modifiers"
+      "path": "/documentation/modifiers/"
    },
    "overview-modifiers": {
      "name": "Modifiers syntax",
      "subtitle": "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. They all start with <code>is-</code> or <code>has-</code>.",
      "color": "orange",
      "icon": "code",
-      "path": "/documentation/overview/modifiers"
+      "path": "/documentation/overview/modifiers/"
    },
    "modifiers-helpers": {
      "name": "Helpers",
      "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter its style",
      "color": "danger",
      "icon": "medkit",
-      "path": "/documentation/modifiers/helpers"
+      "path": "/documentation/modifiers/helpers/"
    },
    "modifiers-responsive-helpers": {
      "name": "Responsive helpers",
      "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
      "color": "primary",
      "icon": "arrows-alt-h",
-      "path": "/documentation/modifiers/responsive-helpers"
+      "path": "/documentation/modifiers/responsive-helpers/"
    },
    "modifiers-color-helpers": {
      "name": "Color helpers",
      "subtitle": "Change the <strong>color</strong> of the text and/or background",
      "color": "info",
      "icon": "tint",
-      "path": "/documentation/modifiers/color-helpers"
+      "path": "/documentation/modifiers/color-helpers/"
    },
    "modifiers-typography-helpers": {
      "name": "Typography helpers",
      "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
      "color": "grey-dark",
      "icon": "font",
-      "path": "/documentation/modifiers/typography-helpers"
+      "path": "/documentation/modifiers/typography-helpers/"
    },
    "helpers": {
      "name": "Helpers",
      "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
      "color": "danger",
      "icon": "medkit",
-      "path": "/documentation/helpers"
+      "path": "/documentation/helpers/"
    },
    "helpers-color": {
      "name": "Color",
      "subtitle": "Change the <strong>color</strong> of the text and/or background",
      "color": "info",
      "icon": "tint",
-      "path": "/documentation/helpers/color-helpers"
+      "path": "/documentation/helpers/color-helpers/"
    },
    "helpers-typography": {
      "name": "Typography",
      "subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
      "color": "grey-dark",
      "icon": "font",
-      "path": "/documentation/helpers/typography-helpers"
+      "path": "/documentation/helpers/typography-helpers/"
    },
    "helpers-spacing": {
      "name": "Spacing",
      "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",
-      "path": "/documentation/helpers/spacing-helpers"
+      "path": "/documentation/helpers/spacing-helpers/"
    },
    "helpers-visibility": {
      "name": "Visibility",
      "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
      "color": "primary",
      "icon": "eye",
-      "path": "/documentation/helpers/visibility-helpers"
+      "path": "/documentation/helpers/visibility-helpers/"
    },
    "helpers-flexbox": {
      "name": "Flexbox",
      "subtitle": "Helpers for all <strong>Flexbox</strong> properties",
      "color": "primary",
      "icon": "ellipsis-h",
-      "path": "/documentation/helpers/flexbox-helpers"
+      "path": "/documentation/helpers/flexbox-helpers/"
    },
    "helpers-other": {
      "name": "Other",
      "subtitle": "Other useful Bulma helpers",
      "color": "primary",
      "icon": "medkit",
-      "path": "/documentation/helpers/other-helpers"
+      "path": "/documentation/helpers/other-helpers/"
    },
    "columns": {
      "name": "Columns",
      "subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
      "color": "star",
      "icon": "columns",
-      "path": "/documentation/columns"
+      "path": "/documentation/columns/"
    },
    "columns-basics": {
      "name": "Basics",
      "subtitle": "A simple way to build <strong>responsive columns</strong>",
      "color": "star",
      "icon": "columns",
-      "path": "/documentation/columns/basics"
+      "path": "/documentation/columns/basics/"
    },
    "columns-sizes": {
      "name": "Sizes",
      "subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>",
      "color": "success",
      "icon": "expand-arrows-alt",
-      "path": "/documentation/columns/sizes"
+      "path": "/documentation/columns/sizes/"
    },
    "columns-responsiveness": {
      "name": "Responsiveness",
      "subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
      "color": "primary",
      "icon": "arrows-alt-h",
-      "path": "/documentation/columns/responsiveness"
+      "path": "/documentation/columns/responsiveness/"
    },
    "columns-nesting": {
      "name": "Nesting",
      "subtitle": "A simple way to build <strong>responsive columns</strong>",
      "color": "danger",
      "icon": "sitemap",
-      "path": "/documentation/columns/nesting"
+      "path": "/documentation/columns/nesting/"
    },
    "columns-gap": {
      "name": "Gap",
      "subtitle": "Customize the <strong>gap</strong> between the columns",
      "color": "info",
      "icon": "pause",
-      "path": "/documentation/columns/gap"
+      "path": "/documentation/columns/gap/"
    },
    "columns-options": {
      "name": "Options",
      "subtitle": "Design different <strong>types</strong> of column layouts",
      "color": "grey",
      "icon": "cogs",
-      "path": "/documentation/columns/options"
+      "path": "/documentation/columns/options/"
    },
    "layout": {
      "name": "Layout",
      "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
      "color": "success",
      "icon": "warehouse",
-      "path": "/documentation/layout"
+      "path": "/documentation/layout/"
    },
    "layout-container": {
      "name": "Container",
      "subtitle": "A simple <strong>container</strong> to center your content horizontally",
-      "path": "/documentation/layout/container",
+      "path": "/documentation/layout/container/",
      "icon": "arrows-alt-h"
    },
    "layout-level": {
      "name": "Level",
      "subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
-      "path": "/documentation/layout/level",
+      "path": "/documentation/layout/level/",
      "icon": "ruler-horizontal"
    },
    "layout-media": {
      "name": "Media Object",
      "subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
-      "path": "/documentation/layout/media-object",
+      "path": "/documentation/layout/media-object/",
      "icon": "th-list"
    },
    "layout-hero": {
      "name": "Hero",
      "subtitle": "An imposing <strong>hero banner</strong> to showcase something",
-      "path": "/documentation/layout/hero",
+      "path": "/documentation/layout/hero/",
      "icon": "star"
    },
    "layout-section": {
      "name": "Section",
      "subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
-      "path": "/documentation/layout/section",
+      "path": "/documentation/layout/section/",
      "icon": "square"
    },
    "layout-footer": {
      "name": "Footer",
      "subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
-      "path": "/documentation/layout/footer",
+      "path": "/documentation/layout/footer/",
      "icon": "window-minimize"
    },
    "layout-tiles": {
      "name": "Tiles",
      "subtitle": "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids",
-      "path": "/documentation/layout/tiles",
+      "path": "/documentation/layout/tiles/",
      "icon": "th"
    },
    "form": {
@ -333,7 +362,7 @@
      "color": "link",
      "icon_brand": "true",
      "icon": "wpforms",
-      "path": "/documentation/form"
+      "path": "/documentation/form/"
    },
    "form-general": {
      "name": "General",
@ -341,63 +370,63 @@
      "color": "link",
      "icon": "keyboard",
      "icon_regular": "true",
-      "path": "/documentation/form/general"
+      "path": "/documentation/form/general/"
    },
    "form-input": {
      "name": "Input",
      "subtitle": "The <strong>text input</strong> and its variations",
      "color": "link",
      "icon": "minus",
-      "path": "/documentation/form/input"
+      "path": "/documentation/form/input/"
    },
    "form-textarea": {
      "name": "Textarea",
      "subtitle": "The multiline <strong>textarea</strong> and its variations",
      "color": "link",
      "icon": "square",
-      "path": "/documentation/form/textarea"
+      "path": "/documentation/form/textarea/"
    },
    "form-select": {
      "name": "Select",
      "subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly",
      "color": "link",
      "icon": "mouse-pointer",
-      "path": "/documentation/form/select"
+      "path": "/documentation/form/select/"
    },
    "form-checkbox": {
      "name": "Checkbox",
      "subtitle": "The 2-state <strong>checkbox</strong> in its native format",
      "color": "link",
      "icon": "check-square",
-      "path": "/documentation/form/checkbox"
+      "path": "/documentation/form/checkbox/"
    },
    "form-radio": {
      "name": "Radio",
      "subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format",
      "color": "link",
      "icon": "dot-circle",
-      "path": "/documentation/form/radio"
+      "path": "/documentation/form/radio/"
    },
    "form-file": {
      "name": "File",
      "subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
      "color": "link",
      "icon": "cloud-upload-alt",
-      "path": "/documentation/form/file"
+      "path": "/documentation/form/file/"
    },
    "elements": {
      "name": "Elements",
      "subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>",
      "color": "orange",
      "icon": "cube",
-      "path": "/documentation/elements"
+      "path": "/documentation/elements/"
    },
    "elements-block": {
      "name": "Block",
      "subtitle": "Bulma's most basic spacer <strong>block</strong>",
      "color": "grey",
      "icon": "arrows-alt-v",
-      "path": "/documentation/elements/block"
+      "path": "/documentation/elements/block/"
    },
    "elements-box": {
      "name": "Box",
@ -405,7 +434,7 @@
      "color": "grey",
      "icon": "square",
      "icon_regular": "true",
-      "path": "/documentation/elements/box"
+      "path": "/documentation/elements/box/"
    },
    "elements-button": {
      "name": "Button",
@ -413,104 +442,104 @@
      "color": "success",
      "icon": "hand-pointer",
      "icon_regular": "true",
-      "path": "/documentation/elements/button"
+      "path": "/documentation/elements/button/"
    },
    "elements-content": {
      "name": "Content",
      "subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available",
      "color": "primary",
      "icon": "align-left",
-      "path": "/documentation/elements/content"
+      "path": "/documentation/elements/content/"
    },
    "elements-delete": {
      "name": "Delete",
      "subtitle": "A versatile <strong>delete</strong> cross",
      "color": "danger",
      "icon": "times-circle",
-      "path": "/documentation/elements/delete"
+      "path": "/documentation/elements/delete/"
    },
    "elements-icon": {
      "name": "Icon",
      "subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>",
      "icon": "font-awesome",
      "icon_brand": "true",
-      "path": "/documentation/elements/icon"
+      "path": "/documentation/elements/icon/"
    },
    "elements-image": {
      "name": "Image",
      "subtitle": "A container for <strong>responsive images</strong>",
      "color": "purple",
      "icon": "image",
-      "path": "/documentation/elements/image"
+      "path": "/documentation/elements/image/"
    },
    "elements-notification": {
      "name": "Notification",
      "subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
      "color": "orange",
      "icon": "exclamation-triangle",
-      "path": "/documentation/elements/notification"
+      "path": "/documentation/elements/notification/"
    },
    "elements-progress": {
      "name": "Progress bars",
      "subtitle": "Native HTML <strong>progress</strong> bars",
      "color": "warning",
      "icon": "spinner",
-      "path": "/documentation/elements/progress"
+      "path": "/documentation/elements/progress/"
    },
    "elements-table": {
      "name": "Table",
      "subtitle": "The inevitable HTML <strong>table</strong>, with special case cells",
      "color": "info",
      "icon": "table",
-      "path": "/documentation/elements/table"
+      "path": "/documentation/elements/table/"
    },
    "elements-tag": {
      "name": "Tag",
      "subtitle": "Small <strong>tag labels</strong> to insert anywhere",
      "color": "success",
      "icon": "tag",
-      "path": "/documentation/elements/tag"
+      "path": "/documentation/elements/tag/"
    },
    "elements-title": {
      "name": "Title",
      "subtitle": "Simple <strong>headings</strong> to add depth to your page",
      "color": "black",
      "icon": "heading",
-      "path": "/documentation/elements/title"
+      "path": "/documentation/elements/title/"
    },
    "components": {
      "name": "Components",
      "subtitle": "Advanced multi-part components with lots of possibilities",
      "color": "danger",
      "icon": "cubes",
-      "path": "/documentation/components"
+      "path": "/documentation/components/"
    },
    "components-breadcrumb": {
      "name": "Breadcrumb",
      "subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience",
      "color": "star",
      "icon": "ellipsis-h",
-      "path": "/documentation/components/breadcrumb"
+      "path": "/documentation/components/breadcrumb/"
    },
    "components-card": {
      "name": "Card",
      "subtitle": "An all-around flexible and composable component",
      "color": "success",
      "icon": "id-card",
-      "path": "/documentation/components/card"
+      "path": "/documentation/components/card/"
    },
    "components-dropdown": {
      "name": "Dropdown",
      "subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content",
      "color": "success",
      "icon": "angle-down",
-      "path": "/documentation/components/dropdown"
+      "path": "/documentation/components/dropdown/"
    },
    "components-menu": {
      "name": "Menu",
      "subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
      "icon": "bars",
-      "path": "/documentation/components/menu"
+      "path": "/documentation/components/menu/"
    },
    "components-message": {
      "name": "Message",
@ -518,28 +547,28 @@
      "color": "info",
      "icon": "window-maximize",
      "icon_regular": "true",
-      "path": "/documentation/components/message"
+      "path": "/documentation/components/message/"
    },
    "components-modal": {
      "name": "Modal",
      "subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want",
      "color": "danger",
      "icon": "clone",
-      "path": "/documentation/components/modal"
+      "path": "/documentation/components/modal/"
    },
    "components-navbar": {
      "name": "Navbar",
      "subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns",
      "color": "primary",
      "icon": "minus",
-      "path": "/documentation/components/navbar"
+      "path": "/documentation/components/navbar/"
    },
    "components-pagination": {
      "name": "Pagination",
      "subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
      "color": "orange",
      "icon": "caret-square-right",
-      "path": "/documentation/components/pagination"
+      "path": "/documentation/components/pagination/"
    },
    "components-panel": {
      "name": "Panel",
@ -547,21 +576,21 @@
      "color": "grey-dark",
      "icon": "list-alt",
      "icon_regular": "true",
-      "path": "/documentation/components/panel"
+      "path": "/documentation/components/panel/"
    },
    "components-tabs": {
      "name": "Tabs",
      "subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
      "color": "purple",
      "icon": "folder",
-      "path": "/documentation/components/tabs"
+      "path": "/documentation/components/tabs/"
    },
    "videos": {
      "name": "Videos",
      "color": "success",
      "icon": "play-circle",
      "title": "Videos",
-      "path": "/videos"
+      "path": "/videos/"
    },
    "blog": {
      "name": "Blog",
@ -569,7 +598,7 @@
      "subtitle": "Stay updated with new features",
      "color": "rss",
      "icon": "rss",
-      "path": "/blog"
+      "path": "/blog/"
    },
    "expo": {
      "name": "Expo",
@ -577,7 +606,7 @@
      "subtitle": "Official Bulma showcase",
      "icon": "star",
      "color": "expo",
-      "path": "/expo"
+      "path": "/expo/"
    },
    "love": {
      "name": "Love",
@ -585,7 +614,7 @@
      "subtitle": "Fans of Bulma around the world",
      "color": "love",
      "icon": "heart",
-      "path": "/love"
+      "path": "/love/"
    },
    "backers": {
      "id": "backers",
@ -593,14 +622,14 @@
      "title": "Backers",
      "color": "patreon",
      "icon": "patreon",
-      "path": "/backers",
+      "path": "/backers/",
      "icon_brand": true,
      "subtitle": "Everyone who is supporting Bulma via Patreon and GitHub",
      "description": "Everyone who is supporting Bulma"
    },
    "more": {
      "name": "More",
-      "path": "/more"
+      "path": "/more/"
    },
    "bulma-start": {
      "name": "Bulma start",
@ -608,7 +637,7 @@
      "subtitle": "A tiny npm package to get started",
      "icon": "rocket",
      "color": "success",
-      "path": "/bulma-start"
+      "path": "/bulma-start/"
    },
    "made-with-bulma": {
      "name": "Made with Bulma",
@ -616,14 +645,14 @@
      "subtitle": "The official community badge",
      "icon": "certificate",
      "color": "warning",
-      "path": "/made-with-bulma"
+      "path": "/made-with-bulma/"
    },
    "bootstrap": {
      "name": "Coming from Bootstrap",
      "subtitle": "See how Bulma is an alternative to Bootstrap",
      "icon": "exchange-alt",
      "color": "bootstrap",
-      "path": "/alternative-to-bootstrap"
+      "path": "/alternative-to-bootstrap/"
    },
    "patreon-backers": {
      "name": "Patreon and GitHub backers",
@ -631,7 +660,7 @@
      "icon_brand": "true",
      "icon": "patreon",
      "color": "patreon",
-      "path": "/backers"
+      "path": "/backers/"
    },
    "extensions": {
      "name": "Bulma extensions",
@ -639,7 +668,7 @@
      "subtitle": "Side projects to enhance Bulma",
      "icon": "plug",
      "color": "extensions",
-      "path": "/extensions"
+      "path": "/extensions/"
    }
  },
  "navbar": ["videos", "expo", "love", "backers"],
@ -661,6 +690,7 @@
  "categoryIds": [
    "overview",
    "customize",
+    "utilities",
    "columns",
    "elements",
    "components",
@ -675,9 +705,14 @@
      "overview-modifiers",
      "overview-modular",
      "overview-responsiveness",
-      "overview-colors",
-      "overview-functions",
-      "overview-mixins"
+      "overview-colors"
+    ],
+    "utilities": [
+      "utilities-mixins",
+      "utilities-responsive-mixins",
+      "utilities-control-mixins",
+      "utilities-functions",
+      "utilities-extends"
    ],
    "customize": [
      "customize-concepts",
--- a/docs/_includes/components/breakpoints-table.html
+++ b/docs/_includes/components/breakpoints-table.html
@ -0,0 +1,120 @@
+<div class="table-container">
+  <table class="table is-bordered">
+    <thead>
+      <tr>
+        {% for breakpoint_hash in site.data.breakpoints %}
+          {% assign breakpoint = breakpoint_hash[1] %}
+          <th style="width: 20%;">
+            {{ breakpoint.name }}<br>
+            {% if breakpoint.id == 'mobile' %}
+              Up to <code>{{ breakpoint.to }}px</code>
+            {% elsif breakpoint.id == 'fullhd' %}
+              <code>{{ breakpoint.from }}px</code> and above
+            {% else %}
+              Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
+            {% endif %}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <p class="notification is-primary">mobile</p>
+        </td>
+        <td colspan="4">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <p class="notification">-</p>
+        </td>
+        <td colspan="4">
+          <p class="notification is-primary">tablet</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+        <td colspan="3">
+          <p class="notification is-primary">desktop</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+        <td colspan="2">
+          <p class="notification is-primary">widescreen</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="4">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          <p class="notification is-primary">fullhd</p>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <p class="notification">-</p>
+        </td>
+        <td>
+          <p class="notification is-primary">tablet-only</p>
+        </td>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          <p class="notification is-primary">desktop-only</p>
+        </td>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          <p class="notification is-primary">widescreen-only</p>
+        </td>
+        <td>
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <p class="notification is-primary">touch</p>
+        </td>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <p class="notification is-primary">until-widescreen</p>
+        </td>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="4">
+          <p class="notification is-primary">until-fullhd</p>
+        </td>
+        <td colspan="1">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
--- a/docs/_includes/components/categories.html
+++ b/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">
--- a/docs/_includes/elements/anchor-bis.html
+++ b/docs/_includes/elements/anchor-bis.html
@ -0,0 +1,8 @@
+<h4 id="{{ include.name | slugify }}" class="title is-5 is-spaced bd-anchor-title">
+  <span class="bd-anchor-name">
+    {{ include.name }}
+  </span>
+  <a class="bd-anchor-link" href="#{{ include.name | slugify }}">
+    #
+  </a>
+</h4>
--- a/docs/_includes/elements/snippet-inline.html
+++ b/docs/_includes/elements/snippet-inline.html
@ -0,0 +1 @@
+<div class="bd-snippet-inline">{% highlight sass %}{{ include.content }}{% endhighlight %}</div>
--- a/docs/_includes/global/navbar-item.html
+++ b/docs/_includes/global/navbar-item.html
@ -11,7 +11,7 @@
    is-active
  {% endif %}
 "
-href="{{ site.url }}{{ link.path }}/">
+href="{{ site.url }}{{ link.path }}">
 <span class="icon has-text-{{ link.color }}">
  <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
 </span>
--- a/docs/_includes/index/beautified.html
+++ b/docs/_includes/index/beautified.html
@ -9,7 +9,7 @@
    </h2>

    <div class="subtitle mb-0 mt-0 has-text-grey-light is-size-4-widescreen">
-      See what Bulma developers are bulding
+      See what Bulma developers are building
    </div>

    <a class="button bd-fat-button is-expo is-light is-size-4-widescreen" href="{{ site.data.links.by_id.expo.path }}">
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@ -20,7 +20,17 @@ route: documentation
  <button class="button is-primary is-light bd-fat-button is-small" id="docsSideButton">Show sidebar</button>
 </header>

-<div id="docs" class="bd-docs {% if page.fullwidth %}bd-is-fullwidth{% else %}bd-is-contained{% endif %}">
+<div
+  id="docs"
+  class="
+  bd-docs
+    {% if page.fullwidth %}
+      bd-is-fullwidth
+    {% else %}
+      bd-is-contained
+    {% endif %}
+    {% if page.fullmain %}bd-is-full-main{% endif %}
+  ">
  <div id="docsNavOverlay" class="bd-docs-overlay"></div>

  <nav id="docsNav" class="bd-docs-nav {% if page.fullwidth %}bd-stickied{% endif %}">
--- a/docs/_sass/components/code.scss
+++ b/docs/_sass/components/code.scss
@ -37,6 +37,20 @@
  z-index: 1;
 }

+.bd-snippet-inline {
+  display: inline-block;
+  margin-bottom: -0.25em;
+  vertical-align: bottom;
+
+  .highlight pre {
+    padding: 0.5em 0.75em 0.625em;
+  }
+
+  .button.bd-copy {
+    display: none;
+  }
+}
+
 .bd-snippet {
  @extend %block;
  --snippet-spacing: #{$block-spacing};
@ -159,7 +173,7 @@
    &::before {
      background: linear-gradient(0deg, var(--hl-background), transparent);
      bottom: 0;
-      content: '';
+      content: "";
      display: block;
      left: 0;
      position: absolute;
--- a/docs/_sass/components/color.scss
+++ b/docs/_sass/components/color.scss
@ -0,0 +1,9 @@
+.bd-color {
+  border-radius: 2px;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  display: inline-block;
+  float: left;
+  height: 24px;
+  margin-right: 8px;
+  width: 24px;
+}
--- a/docs/_sass/components/content.scss
+++ b/docs/_sass/components/content.scss
@ -32,6 +32,11 @@

  &.title {
    font-size: 1.5em;
+
+    &.is-5 {
+      font-size: 1.25em;
+      margin-top: 0 !important;
+    }
  }

  @include until($widescreen) {
--- a/docs/_sass/components/variables.scss
+++ b/docs/_sass/components/variables.scss
@ -30,14 +30,14 @@

    pre {
      overflow: visible;
-      padding: 0;
+      padding: 0.25em 0.5em 0.375em;
      white-space: pre-wrap;
      white-space: break-spaces;
    }
  }

  .bd-copy {
-    font-size: 0.5em !important;
+    font-size: 0.75em !important;
    right: 0;
    top: 0;
  }
--- a/docs/_sass/examples/mixins.scss
+++ b/docs/_sass/examples/mixins.scss
@ -0,0 +1,186 @@
+.bulma-arrow-mixin {
+  @include arrow(purple);
+}
+
+.bulma-hamburger-mixin {
+  @include hamburger(2.5rem);
+}
+
+.bulma-delete-mixin {
+  @include delete;
+}
+
+.bulma-loader-mixin {
+  @include loader;
+}
+
+.bulma-block-mixin {
+  @include block(1rem);
+}
+
+.bulma-fa-mixin {
+  @include fa(1rem, 2rem);
+  background-color: lavender;
+}
+
+.bulma-overlay-mixin-parent {
+  background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320);
+  background-size: cover;
+  border-radius: 0.5em;
+  position: relative;
+  height: 11.25rem;
+  width: 20rem;
+}
+
+.bulma-overlay-mixin {
+  @include overlay(1.5rem);
+  background-color: darkorange;
+  border-radius: 0.25em;
+  color: white;
+  opacity: 0.9;
+  padding: 1em;
+}
+
+.bulma-placeholder-mixin {
+  @include placeholder {
+    color: lightblue;
+  }
+
+  border-color: hsl(195deg, 53%, 79%);
+
+  &:hover {
+    border-color: hsl(195deg, 83%, 66%);
+  }
+
+  &:focus,
+  &:active {
+    border-color: hsl(195deg, 100%, 56%) !important;
+    box-shadow: 0 0 0 0.125em hsla(195deg, 100%, 56%, 0.25) !important;
+  }
+}
+
+.bulma-clearfix-mixin {
+  @include clearfix;
+
+  img {
+    border-radius: 0.25em;
+    margin-right: 0.5em;
+  }
+}
+
+.bulma-center-mixin-parent {
+  background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320);
+  background-size: cover;
+  border-radius: 0.5em;
+  position: relative;
+  height: 11.25rem;
+  width: 20rem;
+}
+
+.bulma-center-mixin {
+  @include center(96px);
+  border-radius: 8px;
+  height: 96px;
+  width: 96px;
+}
+
+.bulma-reset-mixin {
+  @include reset;
+}
+
+.bulma-unselectable-mixin {
+  @include unselectable;
+}
+
+.bulma-ltr-rtl-mixin {
+  background-color: lightgreen;
+  padding: 0.5em 1em;
+  border: 1px solid seagreen;
+  margin-right: -1px;
+
+  &:first-child {
+    @include ltr {
+      border-bottom-left-radius: 0.5em;
+      border-top-left-radius: 0.5em;
+    }
+
+    @include rtl {
+      border-bottom-right-radius: 0.5em;
+      border-top-right-radius: 0.5em;
+    }
+  }
+
+  &:last-child {
+    @include ltr {
+      border-bottom-right-radius: 0.5em;
+      border-top-right-radius: 0.5em;
+    }
+
+    @include rtl {
+      border-bottom-left-radius: 0.5em;
+      border-top-left-radius: 0.5em;
+    }
+  }
+}
+
+.bulma-ltr-position-mixin-parent {
+  background-color: beige;
+  border-radius: 0.5em;
+  padding: 1rem;
+  padding-left: 5rem;
+  position: relative;
+
+  p {
+    margin-top: -0.25rem;
+  }
+}
+
+.bulma-ltr-position-mixin {
+  @include ltr-position(1rem, false);
+  border-radius: 0.25em;
+  position: absolute;
+  top: 1rem;
+}
+
+.bulma-ltr-property-mixin-parent {
+  align-items: flex-start;
+  background-color: midnightblue;
+  border-radius: 0.5em;
+  color: lightskyblue;
+  display: flex;
+  padding: 1.5rem;
+  position: relative;
+
+  p {
+    margin-top: -0.25rem;
+  }
+}
+
+.bulma-ltr-property-mixin {
+  @include ltr-property("margin", 1rem, false);
+  border-radius: 0.25em;
+}
+
+.bulma-control-mixin {
+  @include control;
+  background: deeppink;
+  color: white;
+
+  &.is-small {
+    @include control-small;
+  }
+
+  &.is-medium {
+    @include control-medium;
+  }
+
+  &.is-large {
+    @include control-large;
+  }
+}
+
+.bulma-control-extend {
+  @extend %control;
+  background: mediumblue;
+  color: white;
+}
--- a/docs/_sass/pages/docs.scss
+++ b/docs/_sass/pages/docs.scss
@ -150,6 +150,16 @@
    display: none;
  }

+  .bd-docs.bd-is-full-main {
+    .bd-docs-main {
+      grid-column: 2 / span 2;
+    }
+
+    .bd-docs-side {
+      display: none;
+    }
+  }
+
  .bd-docs.bd-is-fullwidth {
    display: block;

@ -199,7 +209,7 @@
          &::after {
            align-items: center;
            bottom: 0;
-            content: '•';
+            content: "•";
            display: flex;
            justify-content: center;
            position: absolute;
@ -236,7 +246,7 @@
          &::after {
            align-items: center;
            bottom: 0;
-            content: '•';
+            content: "•";
            display: flex;
            justify-content: center;
            position: absolute;
--- a/docs/bulma-docs.scss
+++ b/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/functions';
+@import "../sass/utilities/initial-variables";
+@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,67 @@ $navbar-breakpoint: $tablet;
  }
 }

-@import './_sass/base/css-vars';
-@import './_sass/base/custom';
-@import './_sass/base/helpers';
+@import "./_sass/base/css-vars";
+@import "./_sass/base/custom";
+@import "./_sass/base/helpers";

-@import './_sass/components/anchors';
-@import './_sass/components/options';
-@import './_sass/components/banner';
-@import './_sass/components/call';
-@import './_sass/components/carbon';
-@import './_sass/components/categories';
-@import './_sass/components/code';
-@import './_sass/components/content';
-@import './_sass/components/hero';
-@import './_sass/components/highlight';
-@import './_sass/components/klmn';
-@import './_sass/components/navbar';
-@import './_sass/components/notification';
-@import './_sass/components/pagination';
-@import './_sass/components/features';
-@import './_sass/components/links';
-@import './_sass/components/screenshots';
-@import './_sass/components/drawing';
-@import './_sass/components/variables';
-@import './_sass/components/book';
-@import './_sass/components/native';
-@import './_sass/components/fortyfour';
-@import './_sass/components/spacing-table';
-@import './_sass/components/survey';
+@import "./_sass/components/anchors";
+@import "./_sass/components/options";
+@import "./_sass/components/banner";
+@import "./_sass/components/call";
+@import "./_sass/components/carbon";
+@import "./_sass/components/categories";
+@import "./_sass/components/code";
+@import "./_sass/components/content";
+@import "./_sass/components/hero";
+@import "./_sass/components/highlight";
+@import "./_sass/components/klmn";
+@import "./_sass/components/navbar";
+@import "./_sass/components/notification";
+@import "./_sass/components/pagination";
+@import "./_sass/components/features";
+@import "./_sass/components/links";
+@import "./_sass/components/screenshots";
+@import "./_sass/components/drawing";
+@import "./_sass/components/variables";
+@import "./_sass/components/book";
+@import "./_sass/components/native";
+@import "./_sass/components/fortyfour";
+@import "./_sass/components/spacing-table";
+@import "./_sass/components/survey";
+@import "./_sass/components/color";

-@import './_sass/pages/index';
-@import './_sass/pages/docs';
-@import './_sass/pages/videos';
-@import './_sass/pages/love';
-@import './_sass/pages/expo';
-@import './_sass/pages/backers';
-@import './_sass/pages/blog';
-@import './_sass/pages/single';
-@import './_sass/pages/extensions';
-@import './_sass/pages/made-with-bulma';
-@import './_sass/pages/bootstrap';
+@import "./_sass/pages/index";
+@import "./_sass/pages/docs";
+@import "./_sass/pages/videos";
+@import "./_sass/pages/love";
+@import "./_sass/pages/expo";
+@import "./_sass/pages/backers";
+@import "./_sass/pages/blog";
+@import "./_sass/pages/single";
+@import "./_sass/pages/extensions";
+@import "./_sass/pages/made-with-bulma";
+@import "./_sass/pages/bootstrap";

-@import './_sass/index/hello';
-@import './_sass/index/focus';
-@import './_sass/index/focus-animations';
-@import './_sass/index/best';
-@import './_sass/index/sponsors';
-@import './_sass/index/heading';
-@import './_sass/index/columns';
-@import './_sass/index/custom';
+@import "./_sass/index/hello";
+@import "./_sass/index/focus";
+@import "./_sass/index/focus-animations";
+@import "./_sass/index/best";
+@import "./_sass/index/sponsors";
+@import "./_sass/index/heading";
+@import "./_sass/index/columns";
+@import "./_sass/index/custom";

-@import './_sass/global/support';
-@import './_sass/global/newsletter';
-@import './_sass/global/cc';
+@import "./_sass/global/support";
+@import "./_sass/global/newsletter";
+@import "./_sass/global/cc";
+
+@import "./_sass/examples/mixins";
+
+.my-element {
+  background: red;
+
+  @include from(1280px) {
+    background: blue;
+  }
+}
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@ -5,7 +5,7 @@
 .file-name, .pagination-previous,
 .pagination-next,
 .pagination-link,
-.pagination-ellipsis {
+.pagination-ellipsis, .bulma-control-extend {
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
@ -29,19 +29,19 @@
 .file-name:focus, .pagination-previous:focus,
 .pagination-next:focus,
 .pagination-link:focus,
-.pagination-ellipsis:focus, .is-focused.button, .is-focused.input, .is-focused.textarea, .select select.is-focused, .is-focused.file-cta,
+.pagination-ellipsis:focus, .bulma-control-extend:focus, .is-focused.button, .is-focused.input, .is-focused.textarea, .select select.is-focused, .is-focused.file-cta,
 .is-focused.file-name, .is-focused.pagination-previous,
 .is-focused.pagination-next,
 .is-focused.pagination-link,
-.is-focused.pagination-ellipsis, .button:active, .input:active, .textarea:active, .select select:active, .file-cta:active,
+.is-focused.pagination-ellipsis, .is-focused.bulma-control-extend, .button:active, .input:active, .textarea:active, .select select:active, .file-cta:active,
 .file-name:active, .pagination-previous:active,
 .pagination-next:active,
 .pagination-link:active,
-.pagination-ellipsis:active, .is-active.button, .is-active.input, .is-active.textarea, .select select.is-active, .is-active.file-cta,
+.pagination-ellipsis:active, .bulma-control-extend:active, .is-active.button, .is-active.input, .is-active.textarea, .select select.is-active, .is-active.file-cta,
 .is-active.file-name, .is-active.pagination-previous,
 .is-active.pagination-next,
 .is-active.pagination-link,
-.is-active.pagination-ellipsis {
+.is-active.pagination-ellipsis, .is-active.bulma-control-extend {
  outline: none;
 }

@ -49,7 +49,7 @@
 .file-name[disabled], .pagination-previous[disabled],
 .pagination-next[disabled],
 .pagination-link[disabled],
-.pagination-ellipsis[disabled],
+.pagination-ellipsis[disabled], .bulma-control-extend[disabled],
 fieldset[disabled] .button,
 fieldset[disabled] .input,
 fieldset[disabled] .textarea,
@ -60,7 +60,8 @@ fieldset[disabled] .file-name,
 fieldset[disabled] .pagination-previous,
 fieldset[disabled] .pagination-next,
 fieldset[disabled] .pagination-link,
-fieldset[disabled] .pagination-ellipsis {
+fieldset[disabled] .pagination-ellipsis,
+fieldset[disabled] .bulma-control-extend {
  cursor: not-allowed;
 }

@ -9590,6 +9591,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;
@ -16913,7 +16919,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;
@ -17770,6 +17776,20 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  z-index: 1;
 }

+.bd-snippet-inline {
+  display: inline-block;
+  margin-bottom: -0.25em;
+  vertical-align: bottom;
+}
+
+.bd-snippet-inline .highlight pre {
+  padding: 0.5em 0.75em 0.625em;
+}
+
+.bd-snippet-inline .button.bd-copy {
+  display: none;
+}
+
 .bd-snippet {
  --snippet-spacing: 1.5rem;
  font-size: 1rem;
@ -17864,7 +17884,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 .bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight::before {
  background: linear-gradient(0deg, var(--hl-background), transparent);
  bottom: 0;
-  content: '';
+  content: "";
  display: block;
  left: 0;
  position: absolute;
@ -17911,6 +17931,11 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  font-size: 1.5em;
 }

+.bd-anchor-title.title.is-5 {
+  font-size: 1.25em;
+  margin-top: 0 !important;
+}
+
@media screen and (max-width: 1215px) {
  .bd-anchor-title {
    padding-left: 1em;
@ -19095,13 +19120,13 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {

 .bd-var .highlight pre {
  overflow: visible;
-  padding: 0;
+  padding: 0.25em 0.5em 0.375em;
  white-space: pre-wrap;
  white-space: break-spaces;
 }

 .bd-var .bd-copy {
-  font-size: 0.5em !important;
+  font-size: 0.75em !important;
  right: 0;
  top: 0;
 }
@ -19475,6 +19500,16 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  margin-right: 1em;
 }

+.bd-color {
+  border-radius: 2px;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  display: inline-block;
+  float: left;
+  height: 24px;
+  margin-right: 8px;
+  width: 24px;
+}
+
 :root {
  --bd-index-vertical: 1.5rem;
  --bd-index-gap: 3rem;
@ -19706,6 +19741,12 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  .bd-docs-toggles {
    display: none;
  }
+  .bd-docs.bd-is-full-main .bd-docs-main {
+    grid-column: 2 / span 2;
+  }
+  .bd-docs.bd-is-full-main .bd-docs-side {
+    display: none;
+  }
  .bd-docs.bd-is-fullwidth {
    display: block;
  }
@ -19749,7 +19790,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  .bd-docs.bd-is-fullwidth .bd-docs-nav:not(:hover) .bd-category a::after {
    align-items: center;
    bottom: 0;
-    content: '•';
+    content: "•";
    display: flex;
    justify-content: center;
    position: absolute;
@ -19784,7 +19825,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  .bd-docs.bd-is-fullwidth .bd-docs-side:not(:hover) .bd-anchors-list li::after {
    align-items: center;
    bottom: 0;
-    content: '•';
+    content: "•";
    display: flex;
    justify-content: center;
    position: absolute;
@ -22495,4 +22536,403 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  }
 }

+.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;
+}
+
+.bulma-loader-mixin {
+  -webkit-animation: spinAround 500ms infinite linear;
+          animation: spinAround 500ms infinite linear;
+  border: 2px solid #dbdbdb;
+  border-radius: 9999px;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  display: block;
+  height: 1em;
+  position: relative;
+  width: 1em;
+}
+
+.bulma-block-mixin:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.bulma-fa-mixin {
+  display: inline-block;
+  font-size: 1rem;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  vertical-align: top;
+  width: 2rem;
+  background-color: lavender;
+}
+
+.bulma-overlay-mixin-parent {
+  background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320);
+  background-size: cover;
+  border-radius: 0.5em;
+  position: relative;
+  height: 11.25rem;
+  width: 20rem;
+}
+
+.bulma-overlay-mixin {
+  bottom: 1.5rem;
+  left: 1.5rem;
+  position: absolute;
+  right: 1.5rem;
+  top: 1.5rem;
+  background-color: darkorange;
+  border-radius: 0.25em;
+  color: white;
+  opacity: 0.9;
+  padding: 1em;
+}
+
+.bulma-placeholder-mixin {
+  border-color: lightblue;
+}
+
+.bulma-placeholder-mixin::-moz-placeholder {
+  color: lightblue;
+}
+
+.bulma-placeholder-mixin::-webkit-input-placeholder {
+  color: lightblue;
+}
+
+.bulma-placeholder-mixin:-moz-placeholder {
+  color: lightblue;
+}
+
+.bulma-placeholder-mixin:-ms-input-placeholder {
+  color: lightblue;
+}
+
+.bulma-placeholder-mixin:hover {
+  border-color: #60ccf0;
+}
+
+.bulma-placeholder-mixin:focus, .bulma-placeholder-mixin:active {
+  border-color: #1fc7ff !important;
+  box-shadow: 0 0 0 0.125em rgba(31, 199, 255, 0.25) !important;
+}
+
+.bulma-clearfix-mixin::after {
+  clear: both;
+  content: " ";
+  display: table;
+}
+
+.bulma-clearfix-mixin img {
+  border-radius: 0.25em;
+  margin-right: 0.5em;
+}
+
+.bulma-center-mixin-parent {
+  background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320);
+  background-size: cover;
+  border-radius: 0.5em;
+  position: relative;
+  height: 11.25rem;
+  width: 20rem;
+}
+
+.bulma-center-mixin {
+  position: absolute;
+  left: calc(50% - (96px * 0.5));
+  top: calc(50% - (96px * 0.5));
+  border-radius: 8px;
+  height: 96px;
+  width: 96px;
+}
+
+.bulma-reset-mixin {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  border: none;
+  color: currentColor;
+  font-family: inherit;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+}
+
+.bulma-unselectable-mixin {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.bulma-ltr-rtl-mixin {
+  background-color: lightgreen;
+  padding: 0.5em 1em;
+  border: 1px solid seagreen;
+  margin-right: -1px;
+}
+
+.bulma-ltr-rtl-mixin:first-child {
+  border-bottom-left-radius: 0.5em;
+  border-top-left-radius: 0.5em;
+}
+
+.bulma-ltr-rtl-mixin:last-child {
+  border-bottom-right-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+}
+
+.bulma-ltr-position-mixin-parent {
+  background-color: beige;
+  border-radius: 0.5em;
+  padding: 1rem;
+  padding-left: 5rem;
+  position: relative;
+}
+
+.bulma-ltr-position-mixin-parent p {
+  margin-top: -0.25rem;
+}
+
+.bulma-ltr-position-mixin {
+  left: 1rem;
+  border-radius: 0.25em;
+  position: absolute;
+  top: 1rem;
+}
+
+.bulma-ltr-property-mixin-parent {
+  align-items: flex-start;
+  background-color: midnightblue;
+  border-radius: 0.5em;
+  color: lightskyblue;
+  display: flex;
+  padding: 1.5rem;
+  position: relative;
+}
+
+.bulma-ltr-property-mixin-parent p {
+  margin-top: -0.25rem;
+}
+
+.bulma-ltr-property-mixin {
+  margin-left: 1rem;
+  border-radius: 0.25em;
+}
+
+.bulma-control-mixin {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 0.375em;
+  box-shadow: none;
+  display: inline-flex;
+  font-size: 1rem;
+  height: 2.5em;
+  justify-content: flex-start;
+  line-height: 1.5;
+  padding-bottom: calc(0.5em - 1px);
+  padding-left: calc(0.75em - 1px);
+  padding-right: calc(0.75em - 1px);
+  padding-top: calc(0.5em - 1px);
+  position: relative;
+  vertical-align: top;
+  background: deeppink;
+  color: white;
+}
+
+.bulma-control-mixin:focus, .bulma-control-mixin.is-focused, .bulma-control-mixin:active, .bulma-control-mixin.is-active {
+  outline: none;
+}
+
+.bulma-control-mixin[disabled],
+fieldset[disabled] .bulma-control-mixin {
+  cursor: not-allowed;
+}
+
+.bulma-control-mixin.is-small {
+  border-radius: 2px;
+  font-size: 0.75rem;
+}
+
+.bulma-control-mixin.is-medium {
+  font-size: 1.25rem;
+}
+
+.bulma-control-mixin.is-large {
+  font-size: 1.5rem;
+}
+
+.bulma-control-extend {
+  background: mediumblue;
+  color: white;
+}
+
+.my-element {
+  background: red;
+}
+
+@media screen and (min-width: 1280px) {
+  .my-element {
+    background: blue;
+  }
+}
+
 /*# sourceMappingURL=bulma-docs.css.map */
--- a/docs/css/bulma-docs.min.css
+++ b/docs/css/bulma-docs.min.css
--- a/docs/documentation/overview/functions.html
+++ b/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>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>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</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>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>

@ -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>
--- a/docs/documentation/overview/modifiers.html
+++ b/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>
-<a class="button is-link">
+</button>
+<button class="button is-link">
  Button
-</a>
-<a class="button is-info">
+</button>
+<button class="button is-info">
  Button
-</a>
-<a class="button is-success">
+</button>
+<button class="button is-success">
  Button
-</a>
-<a class="button is-warning">
+</button>
+<button class="button is-warning">
  Button
-</a>
-<a class="button is-danger">
+</button>
+<button class="button is-danger">
  Button
-</a>
+</button>
 {% endcapture %}

 {% capture button_sizes %}
-<a class="button is-small">
+<button class="button is-small">
  Button
-</a>
-<a class="button">
+</button>
+<button class="button">
  Button
-</a>
-<a class="button is-medium">
+</button>
+<button class="button is-medium">
  Button
-</a>
-<a class="button is-large">
+</button>
+<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>
-<a class="button is-loading">
+</button>
+<button class="button is-loading">
  Button
-</a>
-<a class="button" disabled>
+</button>
+<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>
-<a class="button is-info is-loading">
+</button>
+<button class="button is-info is-loading">
  Button
-</a>
-<a class="button is-danger is-outlined is-large">
+</button>
+<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">
--- a/docs/documentation/overview/responsiveness.html
+++ b/docs/documentation/overview/responsiveness.html
@ -44,7 +44,7 @@ $fullhd-enabled: false
 {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L81,L129" | prepend: site.data.meta.github %}

 <div class="content">
-  <p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
+  <p>Bulma has <a href="{{ variables_file_url }}" target="_blank">4 breakpoints</a> which defines <strong>5 screen sizes</strong>:</p>
  <ul>
    {% for breakpoint_hash in site.data.breakpoints %}
      {% assign breakpoint = breakpoint_hash[1] %}
@ -52,160 +52,17 @@ $fullhd-enabled: false
    {% endfor %}
  </ul>

-  <p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
-  <ul>
-    {% for breakpoint_hash in site.data.breakpoints %}
-      {% assign breakpoint = breakpoint_hash[1] %}
-      {% case breakpoint.id %}
-        {% when 'mobile' %}
-          <li>
-            <code>={{ breakpoint.id }}</code><br>
-            until <code>{{ breakpoint.to }}px</code>
-          </li>
-        {% when 'fullhd' %}
-          <li>
-            <code>={{ breakpoint.id }}</code><br>
-            from <code>{{ breakpoint.from }}px</code>
-          </li>
-        {% else %}
-          <li>
-            <code>={{ breakpoint.id }}</code><br>
-            from <code>{{ breakpoint.from }}px</code>
-          </li>
-          <li>
-            <code>={{ breakpoint.id }}-only</code><br>
-            from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
-          </li>
-          {% if breakpoint.id == 'tablet' %}
-            <li>
-              <code>=touch</code><br>
-              until <code>{{ breakpoint.to }}px</code>
-            </li>
-          {% endif %}
-      {% endcase %}
-    {% endfor %}
-  </ul>
+  <p>To make use of these breakpoints, Bulma provides <a href="{{ site.url }}/documentation/utilities/responsive-mixins/">9 responsive mixins</a>.</p>
 </div>

-<div class="table-container">
-  <table class="table is-bordered">
-    <thead>
-      <tr>
-        {% for breakpoint_hash in site.data.breakpoints %}
-          {% assign breakpoint = breakpoint_hash[1] %}
-          <th style="width: 20%;">
-            {{ breakpoint.name }}<br>
-            {% if breakpoint.id == 'mobile' %}
-              Up to <code>{{ breakpoint.to }}px</code>
-            {% elsif breakpoint.id == 'fullhd' %}
-              <code>{{ breakpoint.from }}px</code> and above
-            {% else %}
-              Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
-            {% endif %}
-          </th>
-        {% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <p class="notification is-success">mobile</p>
-        </td>
-        <td colspan="4">
-          <p class="notification">-</p>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <p class="notification">-</p>
-        </td>
-        <td colspan="4">
-          <p class="notification is-success">tablet</p>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="2">
-          <p class="notification">-</p>
-        </td>
-        <td colspan="3">
-          <p class="notification is-success">desktop</p>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="3">
-          <p class="notification">-</p>
-        </td>
-        <td colspan="2">
-          <p class="notification is-success">widescreen</p>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="4">
-          <p class="notification">-</p>
-        </td>
-        <td>
-          <p class="notification is-success">fullhd</p>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <p class="notification">-</p>
-        </td>
-        <td>
-          <p class="notification is-success">tablet-only</p>
-        </td>
-        <td colspan="3">
-          <p class="notification">-</p>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="2">
-          <p class="notification">-</p>
-        </td>
-        <td>
-          <p class="notification is-success">desktop-only</p>
-        </td>
-        <td colspan="2">
-          <p class="notification">-</p>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="3">
-          <p class="notification">-</p>
-        </td>
-        <td>
-          <p class="notification is-success">widescreen-only</p>
-        </td>
-        <td>
-          <p class="notification">-</p>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="2">
-          <p class="notification is-success">touch</p>
-        </td>
-        <td colspan="3">
-          <p class="notification">-</p>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="3">
-          <p class="notification is-success">until-widescreen</p>
-        </td>
-        <td colspan="2">
-          <p class="notification">-</p>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="4">
-          <p class="notification is-success">until-fullhd</p>
-        </td>
-        <td colspan="1">
-          <p class="notification">-</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+{% include components/breakpoints-table.html %}
+
+{% assign urm_link = site.data.links.by_id['utilities-responsive-mixins'] %}
+
+<div class="content">
+  <p>
+    To simplify using these breakpoints, Bulma provides <a href="{{ site.url }}{{ urm_link.path }}">easy-to-use responsive mixins</a>.
+  </p>
 </div>

 {% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
--- a/docs/documentation/utilities.html
+++ b/docs/documentation/utilities.html
@ -0,0 +1,13 @@
+---
+title: Utilities
+layout: documentation
+doc-tab: utilities
+hide_tabs: true
+hide_pagination: true
+breadcrumb:
+- home
+- documentation
+- utilities
+---
+
+{% include components/links.html category_id='utilities' %}
--- a/docs/documentation/utilities/control-mixins.html
+++ b/docs/documentation/utilities/control-mixins.html
@ -0,0 +1,130 @@
+---
+title: Form Control Mixins
+layout: documentation
+doc-tab: utilities
+doc-subtab: control-mixins
+breadcrumb:
+- home
+- documentation
+- utilities
+- utilities-control-mixins
+---
+
+<div class="content">
+  <p>
+    In Bulma, the <strong>form controls</strong> are an essential part of the framework. They comprise the following elements:
+  </p>
+
+  <ul>
+    <li>
+      <code>.button</code>
+    </li>
+    <li>
+      <code>.input</code>
+    </li>
+    <li>
+      <code>.select</code>
+    </li>
+    <li>
+      <code>.file-cta</code>
+      <code>.file-name</code>
+    </li>
+    <li>
+      <code>.pagination-previous</code>
+      <code>.pagination-next</code>
+      <code>.pagination-link</code>
+      <code>.pagination-ellipsis</code>
+    </li>
+  </ul>
+
+  <p>
+    The <code>control()</code> mixin ensures <strong>consistency</strong> by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:
+  </p>
+</div>
+
+{% highlight sass %}.bulma-control-mixin {
+  @include control;
+  background: deeppink;
+  color: white;
+}{% endhighlight %}
+
+{% capture control-mixin %}
+<button class="bulma-control-mixin">
+  My control
+</button>
+{% endcapture %}
+
+{% include elements/snippet.html content=control-mixin %}
+
+{% include elements/anchor.html name="Sizes" %}
+
+<div class="content">
+  <p>
+    Controls have a default font size of <code>$size-normal</code> also come in <strong>3 additional sizes</strong>, which can be accessed via 3 additional mixins:
+  </p>
+
+  <ul>
+    <li>
+      {% include elements/snippet-inline.html content="@include control-small;" %} with a font size <code>$size-small</code>
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="@include control-medium;" %} with a font size <code>$size-medium</code>
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="@include control-large;" %} with a font size <code>$size-large</code>
+    </li>
+  </ul>
+</div>
+
+{% highlight sass %}.bulma-control-mixin {
+  &.is-small {
+    @include control-small;
+  }
+
+  &.is-medium {
+    @include control-medium;
+  }
+
+  &.is-large {
+    @include control-large;
+  }
+}{% endhighlight %}
+
+{% capture control-mixin-sizes %}
+<button class="bulma-control-mixin is-small">
+  Small
+</button>
+<button class="bulma-control-mixin">
+  Normal
+</button>
+<button class="bulma-control-mixin is-medium">
+  Medium
+</button>
+<button class="bulma-control-mixin is-large">
+  Large
+</button>
+{% endcapture %}
+
+{% include elements/snippet.html content=control-mixin-sizes %}
+
+{% include elements/anchor.html name="Control placeholder" %}
+
+<div class="content">
+  <p>
+    The <code>control()</code> mixin also exists as <a href="https://sass-lang.com/documentation/at-rules/extend#placeholder-selectors" target="_blank">Sass placeholder</a> <code>%control</code>
+  </p>
+</div>
+
+{% highlight sass %}.bulma-control-extend {
+  @extend %control;
+  background: mediumblue;
+  color: white;
+}{% endhighlight %}
+
+{% capture control-extend %}
+<button class="bulma-control-extend">
+  My control
+</button>
+{% endcapture %}
+
+{% include elements/snippet.html content=control-extend %}
--- a/docs/documentation/utilities/extends.html
+++ b/docs/documentation/utilities/extends.html
@ -0,0 +1,59 @@
+---
+title: Extends
+layout: documentation
+doc-tab: utilities
+doc-subtab: extends
+breadcrumb:
+- home
+- documentation
+- utilities
+- utilities-extends
+---
+
+<div class="content">
+  <p>
+    In Bulma, a lot of element <strong>share</strong> a set of styles. While mixins allow sharing, they repeat the CSS rules everytime they are used.
+  </p>
+
+  <p>
+    To avoid the repetition, Bulma uses the <code>@extend</code> rule to share code. This rule tells Sass that one selector should inherit the styles of another. <a href="https://sass-lang.com/documentation/at-rules/extend" target="_blank">Learn more about the extend rule</a>.
+  </p>
+
+  <p>
+    Instead of creating CSS classes that might not be used to be the <strong>source</strong> of the set of styles, Bulma uses Sass <strong>placeholders</strong>:
+  </p>
+
+  <ul>
+    <li>
+      {% include elements/snippet-inline.html content="%control" %}
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="%unselectable" %}
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="%arrow" %}
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="%block" %}
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="%delete" %}
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="%loader" %}
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="%overlay" %}
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="%reset" %}
+    </li>
+  </ul>
+
+  {% assign mixins_link = site.data.links.by_id['utilities-mixins'] %}
+  {% assign controls_link = site.data.links.by_id['utilities-control-mixins'] %}
+
+  <p>
+    Each of these placeholders are simply the <code>@extend</code> version of their <a href="{{ site.url }}{{ mixins_link.path }}">corresponding mixins</a> (here for the <a href="{{ site.url }}{{ controls_link.path }}">control mixin</a>).
+  </p>
+</div>
--- a/docs/documentation/utilities/functions.html
+++ b/docs/documentation/utilities/functions.html
@ -0,0 +1,329 @@
+---
+title: Functions
+layout: documentation
+doc-tab: utilities
+doc-subtab: functions
+breadcrumb:
+- home
+- documentation
+- utilities
+- utilities-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>
+
+<div class="table-container">
+  <table class="table is-bordered">
+    <thead>
+      <tr>
+        <th>color</th>
+        <th>findLightColor</th>
+        <th>findDarkColor</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td>
+          {% include elements/color-square.html value="hsl(171deg, 100%, 41%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(171deg, 100%, 96%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(171deg, 100%, 29%)" %}
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          {% include elements/color-square.html value="hsl(229deg 53% 53%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(229deg 52% 96%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(229deg 53% 47%)" %}
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          {% include elements/color-square.html value="hsl(153deg 53% 53%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(153deg 52% 96%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(153deg 53% 31%)" %}
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          {% include elements/color-square.html value="hsl(44deg 100% 77%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(45deg 100% 96%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(44deg 100% 29%)" %}
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          {% include elements/color-square.html value="hsl(348deg 86% 61%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(347deg 90% 96%)" %}
+        </td>
+        <td>
+          {% include elements/color-square.html value="hsl(348deg 86% 43%)" %}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
--- a/docs/documentation/utilities/mixins.html
+++ b/docs/documentation/utilities/mixins.html
@ -0,0 +1,528 @@
+---
+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" %}
+
+<p class="block">
+  These mixins create a <strong>visual</strong> HTML element.
+</p>
+
+{% include elements/anchor-bis.html name="Arrow" %}
+
+<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 %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Hamburger" %}
+
+<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 %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Delete" %}
+
+<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 elements/anchor-bis.html name="Loader" %}
+
+<div class="content">
+  <p>
+    The <code>loader()</code> mixin creates a 1em <strong>spinning circle</strong>.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-loader-mixin {
+  @include loader;
+}{% endhighlight %}
+
+{% capture loader %}
+<span class="bulma-loader-mixin"></span>
+{% endcapture %}
+
+{% include elements/snippet.html content=loader %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Font Awesome container" %}
+
+<div class="content">
+  <p>
+    The <code>fa()</code> mixin creates a <strong>square inline-block element</strong>, ideal for containing a Font Awesome icon, or any other type of icon font.
+    <br>
+    The first <code>$size</code> parameter defines the icon font size.
+    <br>
+    The second <code>$dimensions</code> parameter defines the dimensions of the square container.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-fa-mixin {
+  @include fa(1rem, 2rem);
+  background-color: lavender; // For demo purposes
+}{% endhighlight %}
+
+{% capture fa %}
+<span class="bulma-fa-mixin">
+  <i class="fas fa-thumbs-up"></i>
+</span>
+{% endcapture %}
+
+{% include elements/snippet.html content=fa %}
+
+<!--  -->
+
+{% include elements/anchor.html name="CSS Mixins" %}
+
+<p class="block">
+  These mixins add <strong>CSS rules</strong> to the element.
+</p>
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Block" %}
+
+<div class="content">
+  <p>
+    The <code>block()</code> mixin adds <strong>spacing</strong> below an element, but only if it's <strong>not the last child</strong>.
+    <br>
+    The <code>$spacing</code> parameter defines the value of the <code>margin-bottom</code>.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-block-mixin {
+  @include block(1rem);
+}{% endhighlight %}
+
+{% capture block %}
+<p class="bulma-block-mixin">This element has a margin-bottom.</p>
+<p class="bulma-block-mixin">This element too.</p>
+<p class="bulma-block-mixin">Not this one because it's the last child.</p>
+{% endcapture %}
+
+{% include elements/snippet.html content=block %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Overlay" %}
+
+<div class="content">
+  <p>
+    The <code>overlay()</code> mixin makes the element <strong>cover</strong> its closest positioned ancestor.
+    <br>
+    The <code>$offset</code> parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).
+  </p>
+</div>
+
+{% highlight sass %}.bulma-overlay-mixin {
+  @include overlay(1.5rem);
+  background-color: darkorange;
+  border-radius: 0.25em;
+  color: white;
+  opacity: 0.9;
+  padding: 1em;
+}{% endhighlight %}
+
+{% capture overlay %}
+<div class="bulma-overlay-mixin-parent">
+  <div class="bulma-overlay-mixin">Overlay element</div>
+</div>
+{% endcapture %}
+
+{% include elements/snippet.html content=overlay %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Center" %}
+
+<div class="content">
+  <p>
+    The <code>center()</code> mixin allows you to absolutely position an element with <strong>fixed dimensions</strong> at the <strong>center</strong> of its closest positioned ancestor.
+    <br>
+    The value of the <code>$width</code> parameter should be the width of the element the mixin is applied on.
+    <br>
+    Unless the element has square dimensions, the second parameter <code>$height</code> is required and its value should be the height of the element the mixin is applied on.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-center-mixin {
+  @include center;
+}{% endhighlight %}
+
+{% capture center %}
+<div class="bulma-center-mixin-parent">
+  <img class="bulma-center-mixin" height="96" width="96" src="https://source.unsplash.com/mEZ3PoFGs_k/192x192">
+</div>
+{% endcapture %}
+
+{% include elements/snippet.html content=center %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Placeholder" %}
+
+<div class="content">
+  <p>
+    The <code>placeholder()</code> mixin allows you to change the style of an <strong>input's placeholder</strong>.
+    <br>
+    The <code>$offset</code> parameter defines how far inside the element is positioned from each edge (top, bottom, left and right).
+  </p>
+</div>
+
+{% highlight sass %}.bulma-placeholder-mixin {
+  @include placeholder {
+    color: lightblue;
+  }
+}{% endhighlight %}
+
+{% capture placeholder %}
+<input
+  class="input bulma-placeholder-mixin"
+  type="text"
+  placeholder="I am a styled placeholder"
+>
+{% endcapture %}
+
+{% include elements/snippet.html content=placeholder %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Clearfix" %}
+
+<div class="content">
+  <p>
+    The <code>clearfix()</code> mixin adds a <code>::after</code></strong> pseudo-element with a <code>clear: both</code> rule.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-clearfix-mixin {
+  @include clearfix;
+}{% endhighlight %}
+
+{% capture clearfix %}
+<div class="bulma-clearfix-mixin">
+  <img height="80" width="80" style="float: left;" src="https://source.unsplash.com/La2kOu2dmH4/160x160">
+  <p>This is a short image description.</p>
+</div>
+
+<p>This text is following the clearfix element and is correctly placed after.</p>
+{% endcapture %}
+
+{% include elements/snippet.html content=clearfix %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Reset" %}
+
+<div class="content">
+  <p>
+    The <code>reset()</code> mixin applies a soft style reset. This is especially useful for <code>&lt;button&gt;</code> elements.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-reset-mixin {
+  @include reset;
+}{% endhighlight %}
+
+{% capture reset %}
+<button>Default button</button>
+<button class="bulma-reset-mixin">Reset button</button>
+{% endcapture %}
+
+{% include elements/snippet.html content=reset %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Unselectable" %}
+
+<div class="content">
+  <p>
+    The <code>unselectable()</code> mixin makes an element not selectable. This is to prevent the text to be selected when double-clicked.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-unselectable-mixin {
+  @include unselectable;
+}{% endhighlight %}
+
+{% capture unselectable %}
+<p>This text is selectable.</p>
+<p class="bulma-unselectable-mixin">This text is not selectable.</p>
+{% endcapture %}
+
+{% include elements/snippet.html content=unselectable %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="Overflow Touch" %}
+
+<div class="content">
+  <p>
+    The <code>overflow-touch()</code> mixin add the <code>-webkit-overflow-scrolling: touch;</code> rule to the element.
+  </p>
+</div>
+
+<!--  -->
+
+{% include elements/anchor.html name="Direction Mixins" %}
+
+{% include elements/anchor-bis.html name="Left-to-right and Right-to-left Mixins" %}
+
+<div class="content">
+  <p>
+    Bulma has a global <code>$rtl</code> flag, which allows the framework to output a Right-to-left version of the CSS. By default, this flag's value is set to <code>false</code>. This means the framework output a Left-to-right version.
+  </p>
+
+  <p>
+    The mixins <code>@mixin ltr</code> and <code>@mixin rtl</code> are here to output CSS rules based on the value of <code>$rtl</code>:
+  </p>
+
+  <ul>
+    <li>
+      if <code>$rtl: true</code>, <code>@include ltr</code> outputs nothing
+    </li>
+    <li>
+      if <code>$rtl: false</code>, <code>@include rtl</code> outputs nothing
+    </li>
+  </ul>
+
+  <p>
+    This is useful for properties that are specific to the side of an element.
+  </p>
+</div>
+
+{% highlight sass %}.bulma-ltr-rtl-mixin {
+  background-color: lightgreen;
+  padding: 0.5em 1em;
+  border: 1px solid seagreen;
+  margin-right: -1px;
+
+  &:first-child {
+    @include ltr {
+      border-bottom-left-radius: 0.5em;
+      border-top-left-radius: 0.5em;
+    }
+
+    @include rtl {
+      border-bottom-right-radius: 0.5em;
+      border-top-right-radius: 0.5em;
+    }
+  }
+
+  &:last-child {
+    @include ltr {
+      border-bottom-right-radius: 0.5em;
+      border-top-right-radius: 0.5em;
+    }
+
+    @include rtl {
+      border-bottom-left-radius: 0.5em;
+      border-top-left-radius: 0.5em;
+    }
+  }
+}{% endhighlight %}
+
+{% capture ltr-rtl %}
+<div style="display: flex;">
+  <span class="bulma-ltr-rtl-mixin">One</span>
+  <span class="bulma-ltr-rtl-mixin">Two</span>
+  <span class="bulma-ltr-rtl-mixin">Three</span>
+</div>
+{% endcapture %}
+
+{% include elements/snippet.html content=ltr-rtl %}
+
+<!--  -->
+
+{% include elements/anchor-bis.html name="LTR Position" %}
+
+<div class="content">
+  <p>
+    The <code>ltr-position()</code> mixin is a quick way to switch between <code>left</code> and <code>right</code> CSS properties when dealing with positioned elements.
+    <br>
+    The first <code>$spacing</code> parameter defines the value of the offset, whether it's right or left.
+    <br>
+    The second <code>$right</code> parameter defines if the property outputs <code>right</code> (default) or <code>left</code>.
+  </p>
+
+  <p>
+    Here is what the output looks like with a <code>$spacing</code> parameter set to <code>1rem</code>:
+  </p>
+
+  <table class="table is-bordered">
+    <thead>
+      <tr>
+        <th>Flag →</th>
+        <th><code>$rtl: false;</code></th>
+        <th><code>$rtl: true;</code></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>@include ltr-position(1rem, true)</code></td>
+        <td><code>right: 1rem</code></td>
+        <td><code>left: 1rem</code></td>
+      </tr>
+      <tr>
+        <td><code>@include ltr-position(1rem, false)</code></td>
+        <td><code>left: 1rem</code></td>
+        <td><code>right: 1rem</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<p class="title is-6">Sass source</p>
+
+{% highlight sass %}.bulma-ltr-position-mixin {
+  @include ltr-position(1rem, false);
+  border-radius: 0.25em;
+  position: absolute;
+  top: 1rem;
+}{% endhighlight %}
+
+<p class="title is-6">CSS output</p>
+
+{% highlight css %}.bulma-ltr-position-mixin {
+  left: 1rem;
+  border-radius: 0.25em;
+  position: absolute;
+  top: 1rem;
+}{% endhighlight %}
+
+{% capture ltr-position %}
+<div class="bulma-ltr-position-mixin-parent">
+  <img class="bulma-ltr-position-mixin" height="48" width="48" src="https://source.unsplash.com/iFgRcqHznqg/96x96">
+  <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
+</div>
+{% endcapture %}
+
+{% include elements/snippet.html content=ltr-position %}
+<!--  -->
+
+{% include elements/anchor-bis.html name="LTR Property" %}
+
+<div class="content">
+  <p>
+    The <code>ltr-property()</code> mixin works like the <code>ltr-position()</code> mixin but allows you to choose <strong>which CSS property</strong> to set. The mixin will append <code>-right</code> or <code>-left</code> to that property. This is especially useful for <code>margin</code> and <code>padding</code>.
+    <br>
+    The first <code>$property</code> parameter which property you want to "flip" left and right.
+    <br>
+    The second <code>$spacing</code> parameter defines the value of the offset, whether it's right or left.
+    <br>
+    The third <code>$right</code> parameter defines if the property outputs <code>right</code> (default) or <code>left</code>.
+  </p>
+
+  <p>
+    Here is what the output looks like with a <code>$spacing</code> parameter set to <code>1rem</code>:
+  </p>
+
+  <table class="table is-bordered">
+    <thead>
+      <tr>
+        <th>Flag →</th>
+        <th><code>$rtl: false;</code></th>
+        <th><code>$rtl: true;</code></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>@include ltr-property("margin", 1rem, true)</code></td>
+        <td><code>margin-right: 1rem</code></td>
+        <td><code>margin-left: 1rem</code></td>
+      </tr>
+      <tr>
+        <td><code>@include ltr-property("margin", 1rem, false)</code></td>
+        <td><code>margin-left: 1rem</code></td>
+        <td><code>margin-right: 1rem</code></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<p class="title is-6">Sass source</p>
+
+{% highlight sass %}.bulma-ltr-property-mixin {
+  @include ltr-property("margin", 1rem, false);
+  border-radius: 0.25em;
+}{% endhighlight %}
+
+<p class="title is-6">CSS output</p>
+
+{% highlight css %}.bulma-ltr-property-mixin {
+  margin-left: 1rem;
+  border-radius: 0.25em;
+}{% endhighlight %}
+
+{% capture ltr-property %}
+<div class="bulma-ltr-property-mixin-parent">
+  <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
+  <img class="bulma-ltr-property-mixin" height="96" width="96" src="https://source.unsplash.com/jTSf1xnsoCs/192x192">
+</div>
+{% endcapture %}
+
+{% include elements/snippet.html content=ltr-property %}
--- a/docs/documentation/utilities/responsive-mixins.html
+++ b/docs/documentation/utilities/responsive-mixins.html
@ -0,0 +1,358 @@
+---
+title: Responsive Mixins
+layout: documentation
+doc-tab: utilities
+doc-subtab: responsive-mixins
+fullmain: true
+breadcrumb:
+- home
+- documentation
+- utilities
+- utilities-responsive-mixins
+---
+
+<div class="content">
+  <p>
+    Bulma is <strong>responsive by default</strong>. <a href="{{ site.url}}/overview/responsiveness/">Learn more about Bulma's responsiveness</a>.
+  </p>
+</div>
+
+{% include elements/anchor.html name="from() and until() mixins" %}
+
+<div class="content">
+  <p>
+    Responsiveness in CSS is based on <strong>media queries</strong> (see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank">MDN documentation</a>).
+  </p>
+
+  <p>
+    Bulma provides <strong>2 useful responsive mixins:</strong>
+  </p>
+
+  <ul>
+    <li>
+      {% include elements/snippet-inline.html content="@mixin from($breakpoint)" %} to target devices with a screen <em>wider</em> than or equal to the breakpoint
+    </li>
+    <li>
+      {% include elements/snippet-inline.html content="@mixin until($breakpoint)" %} to target devices with a screen <em>narrower</em> than the breakpoint
+    </li>
+  </ul>
+
+  <p>Their usage is very simple:</p>
+</div>
+
+{% include elements/anchor-bis.html name="from()" %}
+
+<div class="content">
+  <p>
+    The <code>from()</code> mixin has a single parameter which sets the <strong>screen width</strong> from which the styles it contains will be applied:
+  </p>
+</div>
+
+<p class="title is-6">Sass source</p>
+
+{% highlight sass %}.my-element {
+  background: red;
+
+  @include from(1280px) {
+    background: blue;
+  }
+}{% endhighlight %}
+
+<p class="title is-6">CSS output</p>
+
+{% highlight css %}.my-element {
+  background: red;
+}
+
+@media screen and (min-width: 1280px) {
+  .my-element {
+    background: blue;
+  }
+}{% endhighlight %}
+
+<div class="content">
+  <p>
+    For screens with a width of 1279px or less, the element's background will be <strong style="color: red;">red</strong>.
+    <br>
+    For screens 1280px-wide or more, the element's background will be <strong style="color: blue;">blue</strong>.
+  </p>
+</div>
+
+{% include elements/anchor-bis.html name="until()" %}
+
+<div class="content">
+  <p>
+    The <code>until()</code> mixin has a single parameter which sets the <strong>screen width (minus <code>1px</code>)</strong> until which the styles it contains will be applied.
+  </p>
+
+  <p>
+    This means that if you set a value of <code>1280px</code>, the styles will be applied on a screen width of <code>1279px</code> but <strong>not</strong> on a screen width of <code>1280px</code>.
+  </p>
+
+  <p>
+    The reason for this <strong>1px offset</strong> is to allow you to use both <code>from()</code> and <code>until()</code> with the <strong>same breakpoint value</strong>. This leaves <strong>no gap</strong> between the 2 sets of rules.
+  </p>
+</div>
+
+<p class="title is-6">Sass source</p>
+
+{% highlight sass %}$breakpoint: 1280px;
+
+.my-element {
+  @include until($breakpoint) {
+    background: green;
+  }
+
+  @include from($breakpoint) {
+    background: orange;
+  }
+}{% endhighlight %}
+
+<p class="title is-6">CSS output</p>
+
+{% highlight css %}@media screen and (max-width: 1279px) {
+  .my-element {
+    background: green;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .my-element {
+    background: orange;
+  }
+}{% endhighlight %}
+
+<div class="content">
+  <p>
+    For screens with a width of 1279px or less, the element's background will be <strong style="color: green;">green</strong>.
+    <br>
+    For screens 1280px-wide or more, the element's background will be <strong style="color: orange;">orange</strong>.
+  </p>
+</div>
+
+{% include elements/anchor.html name="Named mixins" %}
+
+<div class="content">
+  <p>
+    By having <strong>4 breakpoints</strong> and supporting <strong>5 screen sizes</strong>, Bulma can support a lot of different setups.
+  </p>
+</div>
+
+<div class="content">
+  While you could use the mixins {% include elements/snippet-inline.html content="@include from()" %} and {% include elements/snippet-inline.html content="@include until()" %}, Bulma provides <strong>quick shortcuts</strong> with <strong>11 named mixins</strong>.
+</div>
+
+<div class="content">
+  <p>
+      These <strong>responsive mixins</strong> are named after the screen sizes and breakpoints used in Bulma, so that you can use them to create a <strong>responsive designs</strong>:
+  </p>
+</div>
+
+{% capture inc-mobile %}
+@include mobile {
+  // Styles applied
+  // below $tablet
+}
+{% endcapture %}
+
+{% capture inc-tablet %}
+@include tablet {
+  // Styles applied
+  // above $tablet
+}
+{% endcapture %}
+
+{% capture inc-tablet-only %}
+@include tablet-only {
+  // Styles applied
+  // between $tablet
+  // and $desktop
+}
+{% endcapture %}
+
+{% capture inc-desktop-only %}
+@include desktop-only {
+  // Styles applied
+  // between $desktop
+  // and $widescreen
+}
+{% endcapture %}
+
+{% capture inc-widescreen-only %}
+@include widescreen-only {
+  // Styles applied
+  // between $widescreen
+  // and $fullhd
+}
+{% endcapture %}
+
+{% capture inc-desktop %}
+@include desktop {
+  // Styles applied
+  // above $desktop
+}
+{% endcapture %}
+
+{% capture inc-widescreen %}
+@include widescreen {
+  // Styles applied
+  // above $widescreen
+}
+{% endcapture %}
+
+{% capture inc-fullhd %}
+@include fullhd {
+  // Styles applied
+  // above $fullhd
+}
+{% endcapture %}
+
+{% capture inc-touch %}
+@include touch {
+  // Styles applied
+  // below $desktop
+}
+{% endcapture %}
+
+{% capture inc-until-widescreen %}
+@include until-widescreen {
+  // Styles applied
+  // below $widescreen
+}
+{% endcapture %}
+
+{% capture inc-until-fullhd %}
+@include until {
+  // Styles applied
+  // below $fullhd
+}
+{% endcapture %}
+
+<div class="table-container">
+  <table class="table is-bordered">
+    <thead>
+      <tr>
+        {% for breakpoint_hash in site.data.breakpoints %}
+          {% assign breakpoint = breakpoint_hash[1] %}
+          <th style="width: 20%;">
+            {{ breakpoint.name }}<br>
+            {% if breakpoint.id == 'mobile' %}
+              Up to <code>{{ breakpoint.to }}px</code>
+            {% elsif breakpoint.id == 'fullhd' %}
+              <code>{{ breakpoint.from }}px</code> and above
+            {% else %}
+              Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
+            {% endif %}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          {% highlight sass %}{{ inc-mobile }}{% endhighlight %}
+        </td>
+        <td colspan="4">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <p class="notification">-</p>
+        </td>
+        <td colspan="4">
+          {% highlight sass %}{{ inc-tablet }}{% endhighlight %}
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+        <td colspan="3">
+          {% highlight sass %}{{ inc-desktop }}{% endhighlight %}
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+        <td colspan="2">
+          {% highlight sass %}{{ inc-widescreen }}{% endhighlight %}
+        </td>
+      </tr>
+      <tr>
+        <td colspan="4">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          {% highlight sass %}{{ inc-fullhd }}{% endhighlight %}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <p class="notification">-</p>
+        </td>
+        <td>
+          {% highlight sass %}{{ inc-tablet-only }}{% endhighlight %}
+        </td>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          {% highlight sass %}{{ inc-desktop-only }}{% endhighlight %}
+        </td>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          {% highlight sass %}{{ inc-widescreen-only }}{% endhighlight %}
+        </td>
+        <td>
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          {% highlight sass %}{{ inc-touch }}{% endhighlight %}
+        </td>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          {% highlight sass %}{{ inc-until-widescreen }}{% endhighlight %}
+        </td>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="4">
+          {% highlight sass %}{{ inc-until-fullhd }}{% endhighlight %}
+        </td>
+        <td colspan="1">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{% assign or_link = site.data.links.by_id['overview-responsiveness'] %}
+
+<div class="content">
+  <p>
+    Learn more about <a href="{{ site.url }}{{ or_link.path }}">Bulma responsiveness</a>.
+  </p>
+</div>
--- a/sass/utilities/functions.sass
+++ b/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))
--- a/sass/utilities/mixins.sass
+++ b/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
@ -277,4 +282,3 @@
  position: absolute
  right: $offset
  top: $offset
-
Author	SHA1	Message	Date
Jeremy Thomas	b71d1cab55	Add from and until mixins docs	2021-09-20 00:34:41 +01:00
Jeremy Thomas	32107ab8dd	Add utilities documentation	2021-09-19 23:36:15 +01:00
Jeremy Thomas	89c5ed1a39	Finish direction mixins	2021-09-19 18:08:24 +01:00
Jeremy Thomas	d46cd95ad8	More mixin docs	2021-09-19 01:38:25 +01:00
Jeremy Thomas	90189e0a68	Init mixin docs	2021-09-19 01:23:53 +01:00
				`@ -0,0 +1 @@`
				`<div class="bd-snippet-inline">{% highlight sass %}{{ include.content }}{% endhighlight %}</div>`