Add block documentation

docs/_data/icons.json

@@ -1,6 +1,6 @@
 {
   "fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
-  "fontawesome5": "https://use.fontawesome.com/releases/v5.3.1/js/all.js",
+  "fontawesome5": "https://use.fontawesome.com/releases/v5.14.0/js/all.js",
   "ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css",
   "mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"
 }

docs/_data/links.json

@@ -372,6 +372,13 @@
       "icon": "cube",
       "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"
+    },
     "elements-box": {
       "name": "Box",
       "subtitle": "A white <strong>box</strong> to contain other elements",
@@ -633,7 +640,7 @@
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
     "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
-    "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
+    "elements": ["elements-block", "elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
     "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
   }
 }

docs/_data/sponsors.json

@@ -253,6 +253,14 @@
       "title": "vpn for netflix",
       "width":"137",
       "height":"85"
+    },
+    "dfds": {
+      "name": "dfds",
+      "url": "https://www.dietfooddeliveryservice.com/",
+      "title": "vpn for netflix",
+      "width":"60",
+      "height":"60",
+      "follow": true
     }
   },
   "home": [
@@ -280,6 +288,7 @@
     ,"edusson"
     ,"inkoop"
     ,"vpnreview"
+    ,"dfds"
   ],
   "footer": [
     "polygon"

docs/_data/variables/components/card.json

@@ -22,7 +22,7 @@
     "$card-radius": {
       "name": "$card-radius",
       "value": "0",
-      "type": "size"
+      "type": "string"
     },
     "$card-header-background-color": {
       "name": "$card-header-background-color",
@@ -90,6 +90,7 @@
     "$card-color",
     "$card-background-color",
     "$card-shadow",
+    "$card-radius",
     "$card-header-background-color",
     "$card-header-color",
     "$card-header-padding",

docs/_data/variables/components/modal.json

@@ -116,6 +116,13 @@
       "name": "$modal-card-body-padding",
       "value": "20px",
       "type": "size"
+    },
+    "$modal-breakpoint": {
+      "name": "$modal-breakpoint",
+      "value": "$tablet",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "769px"
     }
   },
   "list": [
@@ -139,7 +146,8 @@
     "$modal-card-foot-radius",
     "$modal-card-foot-border-top",
     "$modal-card-body-background-color",
-    "$modal-card-body-padding"
+    "$modal-card-body-padding",
+    "$modal-breakpoint"
   ],
   "file_path": "components/modal.sass"
 }

docs/_data/variables/components/navbar.json

@@ -227,6 +227,13 @@
       "type": "variable",
       "computed_type": "computed",
       "computed_value": "960px + (2 * $gap)"
+    },
+    "$navbar-colors": {
+      "name": "$navbar-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
@@ -267,7 +274,8 @@
     "$navbar-divider-background-color",
     "$navbar-divider-height",
     "$navbar-bottom-box-shadow-size",
-    "$navbar-breakpoint"
+    "$navbar-breakpoint",
+    "$navbar-colors"
   ],
   "file_path": "components/navbar.sass"
 }

docs/_data/variables/elements/button.json

@@ -163,6 +163,13 @@
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 86%)"
+    },
+    "$button-colors": {
+      "name": "$button-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
@@ -191,7 +198,8 @@
     "$button-disabled-opacity",
     "$button-static-color",
     "$button-static-background-color",
-    "$button-static-border-color"
+    "$button-static-border-color",
+    "$button-colors"
   ],
   "file_path": "elements/button.sass"
 }

docs/_data/variables/elements/notification.json

@@ -25,13 +25,33 @@
       "name": "$notification-padding",
       "value": "1.25rem 2.5rem 1.25rem 1.5rem",
       "type": "size"
+    },
+    "$notification-padding-ltr": {
+      "name": "$notification-padding-ltr",
+      "value": "1.25rem 2.5rem 1.25rem 1.5rem",
+      "type": "size"
+    },
+    "$notification-padding-rtl": {
+      "name": "$notification-padding-rtl",
+      "value": "1.25rem 1.5rem 1.25rem 2.5rem",
+      "type": "size"
+    },
+    "$notification-colors": {
+      "name": "$notification-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
     "$notification-background-color",
     "$notification-code-background-color",
     "$notification-radius",
-    "$notification-padding"
+    "$notification-padding",
+    "$notification-padding-ltr",
+    "$notification-padding-rtl",
+    "$notification-colors"
   ],
   "file_path": "elements/notification.sass"
 }

docs/_data/variables/elements/progress.json

@@ -25,13 +25,21 @@
       "name": "$progress-indeterminate-duration",
       "value": "1.5s",
       "type": "string"
+    },
+    "$progress-colors": {
+      "name": "$progress-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
     "$progress-bar-background-color",
     "$progress-value-background-color",
     "$progress-border-radius",
-    "$progress-indeterminate-duration"
+    "$progress-indeterminate-duration",
+    "$progress-colors"
   ],
   "file_path": "elements/progress.sass"
 }

docs/_data/variables/elements/table.json

@@ -109,6 +109,13 @@
       "type": "variable",
       "computed_type": "color",
       "computed_value": "hsl(0, 0%, 96%)"
+    },
+    "$table-colors": {
+      "name": "$table-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
@@ -129,7 +136,8 @@
     "$table-row-active-background-color",
     "$table-row-active-color",
     "$table-striped-row-even-background-color",
-    "$table-striped-row-even-hover-background-color"
+    "$table-striped-row-even-hover-background-color",
+    "$table-colors"
   ],
   "file_path": "elements/table.sass"
 }

docs/_data/variables/elements/tag.json

@@ -25,13 +25,21 @@
       "name": "$tag-delete-margin",
       "value": "1px",
       "type": "size"
+    },
+    "$tag-colors": {
+      "name": "$tag-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
     "$tag-background-color",
     "$tag-color",
     "$tag-radius",
-    "$tag-delete-margin"
+    "$tag-delete-margin",
+    "$tag-colors"
   ],
   "file_path": "elements/tag.sass"
 }

docs/_data/variables/form/file.json

@@ -63,6 +63,11 @@
       "name": "$file-name-max-width",
       "value": "16em",
       "type": "size"
+    },
+    "$file-colors": {
+      "name": "$file-colors",
+      "value": "$form-colors",
+      "type": "variable"
     }
   },
   "list": [
@@ -75,7 +80,8 @@
     "$file-name-border-color",
     "$file-name-border-style",
     "$file-name-border-width",
-    "$file-name-max-width"
+    "$file-name-max-width",
+    "$file-colors"
   ],
   "file_path": "form/file.sass"
 }

docs/_data/variables/form/input-textarea.json

@@ -14,12 +14,18 @@
       "name": "$textarea-min-height",
       "value": "8em",
       "type": "size"
+    },
+    "$textarea-colors": {
+      "name": "$textarea-colors",
+      "value": "$form-colors",
+      "type": "variable"
     }
   },
   "list": [
     "$textarea-padding",
     "$textarea-max-height",
-    "$textarea-min-height"
+    "$textarea-min-height",
+    "$textarea-colors"
   ],
   "file_path": "form/input-textarea.sass"
 }

docs/_data/variables/form/select.json

@@ -0,0 +1,13 @@
+{
+  "by_name": {
+    "$select-colors": {
+      "name": "$select-colors",
+      "value": "$form-colors",
+      "type": "variable"
+    }
+  },
+  "list": [
+    "$select-colors"
+  ],
+  "file_path": "form/select.sass"
+}

docs/_data/variables/form/shared.json

@@ -1,5 +1,12 @@
 {
   "by_name": {
+    "$form-colors": {
+      "name": "$form-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
+    },
     "$input-color": {
       "name": "$input-color",
       "value": "$text-strong",
@@ -130,6 +137,7 @@
     }
   },
   "list": [
+    "$form-colors",
     "$input-color",
     "$input-background-color",
     "$input-border-color",

docs/_data/variables/form/tools.json

@@ -20,12 +20,18 @@
       "type": "variable",
       "computed_type": "size",
       "computed_value": "0.75rem"
+    },
+    "$label-colors": {
+      "name": "$label-colors",
+      "value": "$form-colors",
+      "type": "variable"
     }
   },
   "list": [
     "$label-color",
     "$label-weight",
-    "$help-size"
+    "$help-size",
+    "$label-colors"
   ],
   "file_path": "form/tools.sass"
 }

docs/_data/variables/helpers/spacing.json

@@ -0,0 +1,37 @@
+{
+  "by_name": {
+    "$spacing-shortcuts": {
+      "name": "$spacing-shortcuts",
+      "value": "(\"margin\": \"m\", \"padding\": \"p\")",
+      "type": "string"
+    },
+    "$spacing-directions": {
+      "name": "$spacing-directions",
+      "value": "(\"top\": \"t\", \"right\": \"r\", \"bottom\": \"b\", \"left\": \"l\")",
+      "type": "string"
+    },
+    "$spacing-horizontal": {
+      "name": "$spacing-horizontal",
+      "value": "\"x\"",
+      "type": "string"
+    },
+    "$spacing-vertical": {
+      "name": "$spacing-vertical",
+      "value": "\"y\"",
+      "type": "string"
+    },
+    "$spacing-values": {
+      "name": "$spacing-values",
+      "value": "(\"0\": 0, \"1\": 0.25rem, \"2\": 0.5rem, \"3\": 0.75rem, \"4\": 1rem, \"5\": 1.5rem, \"6\": 3rem)",
+      "type": "string"
+    }
+  },
+  "list": [
+    "$spacing-shortcuts",
+    "$spacing-directions",
+    "$spacing-horizontal",
+    "$spacing-vertical",
+    "$spacing-values"
+  ],
+  "file_path": "helpers/spacing.sass"
+}

docs/_data/variables/layout/hero.json

@@ -19,13 +19,21 @@
       "name": "$hero-body-padding-large",
       "value": "18rem 1.5rem",
       "type": "size"
+    },
+    "$hero-colors": {
+      "name": "$hero-colors",
+      "value": "$colors",
+      "type": "variable",
+      "computed_type": "function",
+      "computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
     }
   },
   "list": [
     "$hero-body-padding",
     "$hero-body-padding-small",
     "$hero-body-padding-medium",
-    "$hero-body-padding-large"
+    "$hero-body-padding-large",
+    "$hero-colors"
   ],
   "file_path": "layout/hero.sass"
 }

docs/_data/variables/utilities/derived-variables.json

@@ -311,10 +311,8 @@
     },
     "$code": {
       "name": "$code",
-      "value": "$red",
-      "type": "variable",
-      "computed_type": "color",
-      "computed_value": "hsl(348, 86%, 61%)"
+      "value": "darken($red, 15%)",
+      "type": "compound"
     },
     "$code-background": {
       "name": "$code-background",

docs/_data/variables/utilities/initial-variables.json

@@ -249,6 +249,11 @@
       "name": "$variable-columns",
       "value": "true",
       "type": "boolean"
+    },
+    "$rtl": {
+      "name": "$rtl",
+      "value": "false",
+      "type": "boolean"
     }
   },
   "list": [
@@ -301,7 +306,8 @@
     "$radius-large",
     "$radius-rounded",
     "$speed",
-    "$variable-columns"
+    "$variable-columns",
+    "$rtl"
   ],
   "file_path": "utilities/initial-variables.sass"
 }

docs/_sass/sponsors.sass

@@ -21,7 +21,7 @@ $bd-partner-width: 12rem
   justify-content: space-around
   justify-content: center
   margin: 0 auto
-  max-width: (8 * $bd-partner-width)
+  // max-width: (8 * $bd-partner-width)
 
 .bd-partner-sponsor
   align-items: stretch
@@ -120,9 +120,9 @@ $bd-partnrs-4: 1130px
     width: $bd-partner-width
 
 +widescreen
-  .bd-partnrs
-    .container
-      max-width: 1536px
+  // .bd-partnrs
+  //   .container
+  //     max-width: 1536px
   .bd-partner
     &.bd-is-carbon
       margin-left: 3rem

docs/css/bulma-docs.css

@@ -342,6 +342,7 @@ section {
 body,
 button,
 input,
+optgroup,
 select,
 textarea {
   font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
@@ -377,7 +378,7 @@ a:hover {
 
 code {
   background-color: whitesmoke;
-  color: #f14668;
+  color: #da1039;
   font-size: 0.875em;
   font-weight: normal;
   padding: 0.25em 0.5em 0.25em;
@@ -2593,6 +2594,10 @@ fieldset[disabled] .button {
   background-color: transparent;
 }
 
+.progress:indeterminate::-ms-fill {
+  animation-name: none;
+}
+
 .progress.is-small {
   height: 0.75rem;
 }
@@ -3458,7 +3463,9 @@ fieldset[disabled] .select select:-ms-input-placeholder,
 
 .checkbox[disabled], .radio[disabled],
 fieldset[disabled] .checkbox,
-fieldset[disabled] .radio {
+fieldset[disabled] .radio,
+.checkbox input[disabled],
+.radio input[disabled] {
   color: #7a7a7a;
   cursor: not-allowed;
 }
@@ -5213,7 +5220,7 @@ button.dropdown-item.is-active {
   width: 100%;
 }
 
-@media screen and (min-width: 769px), print {
+@media screen and (min-width: 769px) {
   .modal-content,
   .modal-card {
     margin: 0 auto;
@@ -9155,6 +9162,222 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   background-color: #fafafa !important;
 }
 
+.is-flex-direction-row {
+  flex-direction: row !important;
+}
+
+.is-flex-direction-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.is-flex-direction-column {
+  flex-direction: column !important;
+}
+
+.is-flex-direction-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.is-flex-wrap-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.is-flex-wrap-wrap {
+  flex-wrap: wrap !important;
+}
+
+.is-flex-wrap-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.is-justify-content-flex-start {
+  justify-content: flex-start !important;
+}
+
+.is-justify-content-flex-end {
+  justify-content: flex-end !important;
+}
+
+.is-justify-content-center {
+  justify-content: center !important;
+}
+
+.is-justify-content-space-between {
+  justify-content: space-between !important;
+}
+
+.is-justify-content-space-around {
+  justify-content: space-around !important;
+}
+
+.is-justify-content-space-evenly {
+  justify-content: space-evenly !important;
+}
+
+.is-justify-content-start {
+  justify-content: start !important;
+}
+
+.is-justify-content-end {
+  justify-content: end !important;
+}
+
+.is-justify-content-left {
+  justify-content: left !important;
+}
+
+.is-justify-content-right {
+  justify-content: right !important;
+}
+
+.is-align-content-flex-start {
+  align-content: flex-start !important;
+}
+
+.is-align-content-flex-end {
+  align-content: flex-end !important;
+}
+
+.is-align-content-center {
+  align-content: center !important;
+}
+
+.is-align-content-space-between {
+  align-content: space-between !important;
+}
+
+.is-align-content-space-around {
+  align-content: space-around !important;
+}
+
+.is-align-content-space-evenly {
+  align-content: space-evenly !important;
+}
+
+.is-align-content-stretch {
+  align-content: stretch !important;
+}
+
+.is-align-content-start {
+  align-content: start !important;
+}
+
+.is-align-content-end {
+  align-content: end !important;
+}
+
+.is-align-content-baseline {
+  align-content: baseline !important;
+}
+
+.is-align-items-stretch {
+  align-items: stretch !important;
+}
+
+.is-align-items-flex-start {
+  align-items: flex-start !important;
+}
+
+.is-align-items-flex-end {
+  align-items: flex-end !important;
+}
+
+.is-align-items-center {
+  align-items: center !important;
+}
+
+.is-align-items-baseline {
+  align-items: baseline !important;
+}
+
+.is-align-items-start {
+  align-items: start !important;
+}
+
+.is-align-items-end {
+  align-items: end !important;
+}
+
+.is-align-items-self-start {
+  align-items: self-start !important;
+}
+
+.is-align-items-self-end {
+  align-items: self-end !important;
+}
+
+.is-align-self-auto {
+  align-self: auto !important;
+}
+
+.is-align-self-flex-start {
+  align-self: flex-start !important;
+}
+
+.is-align-self-flex-end {
+  align-self: flex-end !important;
+}
+
+.is-align-self-center {
+  align-self: center !important;
+}
+
+.is-align-self-baseline {
+  align-self: baseline !important;
+}
+
+.is-align-self-stretch {
+  align-self: stretch !important;
+}
+
+.is-flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.is-flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.is-flex-grow-2 {
+  flex-grow: 2 !important;
+}
+
+.is-flex-grow-3 {
+  flex-grow: 3 !important;
+}
+
+.is-flex-grow-4 {
+  flex-grow: 4 !important;
+}
+
+.is-flex-grow-5 {
+  flex-grow: 5 !important;
+}
+
+.is-flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.is-flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.is-flex-shrink-2 {
+  flex-shrink: 2 !important;
+}
+
+.is-flex-shrink-3 {
+  flex-shrink: 3 !important;
+}
+
+.is-flex-shrink-4 {
+  flex-shrink: 4 !important;
+}
+
+.is-flex-shrink-5 {
+  flex-shrink: 5 !important;
+}
+
 .is-clearfix::after {
   clear: both;
   content: " ";
@@ -9177,6 +9400,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   box-shadow: none !important;
 }
 
+.is-clickable {
+  cursor: pointer !important;
+}
+
 .is-clipped {
   overflow: hidden !important;
 }
@@ -9193,6 +9420,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding: 0 !important;
 }
 
+.m-0 {
+  margin: 0 !important;
+}
+
 .mt-0 {
   margin-top: 0 !important;
 }
@@ -9219,6 +9450,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0 !important;
 }
 
+.m-1 {
+  margin: 0.25rem !important;
+}
+
 .mt-1 {
   margin-top: 0.25rem !important;
 }
@@ -9245,6 +9480,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.25rem !important;
 }
 
+.m-2 {
+  margin: 0.5rem !important;
+}
+
 .mt-2 {
   margin-top: 0.5rem !important;
 }
@@ -9271,6 +9510,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.5rem !important;
 }
 
+.m-3 {
+  margin: 0.75rem !important;
+}
+
 .mt-3 {
   margin-top: 0.75rem !important;
 }
@@ -9297,6 +9540,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 0.75rem !important;
 }
 
+.m-4 {
+  margin: 1rem !important;
+}
+
 .mt-4 {
   margin-top: 1rem !important;
 }
@@ -9323,6 +9570,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 1rem !important;
 }
 
+.m-5 {
+  margin: 1.5rem !important;
+}
+
 .mt-5 {
   margin-top: 1.5rem !important;
 }
@@ -9349,6 +9600,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 1.5rem !important;
 }
 
+.m-6 {
+  margin: 3rem !important;
+}
+
 .mt-6 {
   margin-top: 3rem !important;
 }
@@ -9375,6 +9630,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   margin-bottom: 3rem !important;
 }
 
+.p-0 {
+  padding: 0 !important;
+}
+
 .pt-0 {
   padding-top: 0 !important;
 }
@@ -9401,6 +9660,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0 !important;
 }
 
+.p-1 {
+  padding: 0.25rem !important;
+}
+
 .pt-1 {
   padding-top: 0.25rem !important;
 }
@@ -9427,6 +9690,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.25rem !important;
 }
 
+.p-2 {
+  padding: 0.5rem !important;
+}
+
 .pt-2 {
   padding-top: 0.5rem !important;
 }
@@ -9453,6 +9720,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.5rem !important;
 }
 
+.p-3 {
+  padding: 0.75rem !important;
+}
+
 .pt-3 {
   padding-top: 0.75rem !important;
 }
@@ -9479,6 +9750,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 0.75rem !important;
 }
 
+.p-4 {
+  padding: 1rem !important;
+}
+
 .pt-4 {
   padding-top: 1rem !important;
 }
@@ -9505,6 +9780,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 1rem !important;
 }
 
+.p-5 {
+  padding: 1.5rem !important;
+}
+
 .pt-5 {
   padding-top: 1.5rem !important;
 }
@@ -9531,6 +9810,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   padding-bottom: 1.5rem !important;
 }
 
+.p-6 {
+  padding: 3rem !important;
+}
+
 .pt-6 {
   padding-top: 3rem !important;
 }
@@ -15049,7 +15332,6 @@ svg {
   justify-content: space-around;
   justify-content: center;
   margin: 0 auto;
-  max-width: 96rem;
 }
 
 .bd-partner-sponsor {
@@ -15166,9 +15448,6 @@ svg {
 }
 
 @media screen and (min-width: 1216px) {
-  .bd-partnrs .container {
-    max-width: 1536px;
-  }
   .bd-partner.bd-is-carbon {
     margin-left: 3rem;
   }

docs/documentation/elements/block.html

@@ -0,0 +1,112 @@
+---
+title: Block
+layout: documentation
+doc-tab: elements
+doc-subtab: block
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-block
+meta:
+  colors: false
+  sizes: false
+  variables: true
+---
+
+{% capture block_example %}
+<div class="block">
+  This text is within a <strong>block</strong>.
+</div>
+<div class="block">
+  This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+</div>
+<div class="block">
+  This text is within a <strong>third block</strong>. This block has no margin at the bottom.
+</div>
+{% endcapture %}
+
+{% capture no_block_example %}
+<div>
+  This text is within a <strong>block</strong>.
+</div>
+<div>
+  This text is within a longer <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+</div>
+<div>
+  This text is within a <strong>third block</strong>. This block has no margin at the bottom.
+</div>
+{% endcapture %}
+
+{% capture block_css %}
+.block:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+{% endcapture %}
+
+<div class="content">
+  <p>
+    The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML elements to have a consistent margin between them:
+  </p>
+</div>
+
+{% include elements/snippet.html content=block_example %}
+
+<div class="content">
+  <p>
+    As you can see, the first two blocks have a <code>margin-bottom</code> applied, but <strong>not the third one.</strong>. That is because Bulma applies a space on all blocks, <strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only appear <strong>between them</strong>.
+  </p>
+  <p>
+    Without using <code>block</code>, the HTML elements would have no space between them:
+  </p>
+</div>
+
+{% include elements/snippet.html content=no_block_example %}
+
+{% include elements/anchor.html name="One line of CSS" %}
+
+<div class="content">
+  <p>
+    As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all siblings, <strong>except the last one</strong>.
+  </p>
+</div>
+
+{% highlight css %}{{ block_css }}{% endhighlight %}
+
+<div class="content">
+  <p>
+    This prevents the last sibling to add unnecessary space at the bottom.
+  </p>
+</div>
+
+{% include elements/anchor.html name="Already used everywhere in Bulma" %}
+<div class="content">
+  <p>
+    As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. The <code>block</code> CSS properties are <strong>shared</strong> across several Bulma elements and components:
+  </p>
+
+  <ul>
+    <li><code>breadcrumb</code></li>
+    <li><code>level</code></li>
+    <li><code>message</code></li>
+    <li><code>pagination</code></li>
+    <li><code>tabs</code></li>
+    <li><code>box</code></li>
+    <li><code>content</code></li>
+    <li><code>notification</code></li>
+    <li><code>other</code></li>
+    <li><code>progress</code></li>
+    <li><code>table</code></li>
+    <li><code>title</code></li>
+  </ul>
+
+  <p>
+    This is thanks to the <code>@extend %block</code> Sass placeholder feature.
+  </p>
+
+  <p>
+    As a result, no matter which Bulma elements and components you are using, and no matter their order, they will have a <strong>consistent space</strong> between them.
+  </p>
+</div>
+
+{% include elements/variables.html type='element' %}

docs/documentation/elements/box.html

@@ -11,7 +11,7 @@ breadcrumb:
 meta:
   colors: false
   sizes: false
-  variables: true
+  variables: false
 ---
 
 {% capture box_example %}