Merge pull request #1787 from jgthms/new-docs

New docs

CHANGELOG.md

@@ -24,6 +24,479 @@
 * #1707 Disable table hover in `.content` by default
 * #1428 Fix `media-content` overflow
 
+### Variable changes
+
+#### Updated default values
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="3">
+        File
+        <code>sass/utilities/initial-variables.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Variable</th>
+      <th>From</th>
+      <th>To</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$gap</code>
+        </td>
+        <td>
+          <code>32px</code>
+        </td>
+        <td>
+          <code>64px</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$radius</code>
+        </td>
+        <td>
+          <code>3px</code>
+        </td>
+        <td>
+          <code>4px</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$radius-large</code>
+        </td>
+        <td>
+          <code>5px</code>
+        </td>
+        <td>
+          <code>6px</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="3">
+        File
+        <code>sass/base/generic.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Variable</th>
+      <th>From</th>
+      <th>To</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$hr-background-color</code>
+        </td>
+        <td>
+          <code>$border</code>
+        </td>
+        <td>
+          <code>$background</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$hr-height</code>
+        </td>
+        <td>
+          <code>1px</code>
+        </td>
+        <td>
+          <code>2px</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="3">
+        File
+        <code>sass/elements/content.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Variable</th>
+      <th>From</th>
+      <th>To</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$content-heading-weight</code>
+        </td>
+        <td>
+          <code>$weight-normal</code>
+        </td>
+        <td>
+          <code>$weight-semibold</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="3">
+        File
+        <code>sass/components/message.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Variable</th>
+      <th>From</th>
+      <th>To</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$message-header-padding</code>
+        </td>
+        <td>
+          <code>0.5em 0.75em</code>
+        </td>
+        <td>
+          <code>0.75em 1em</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$message-body-padding</code>
+        </td>
+        <td>
+          <code>1em 1.25em</code>
+        </td>
+        <td>
+          <code>1.25em 1.5em</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="3">
+        File
+        <code>sass/components/navbar.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Variable</th>
+      <th>From</th>
+      <th>To</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$navbar-item-hover-background-color</code>
+        </td>
+        <td>
+          <code>$background</code>
+        </td>
+        <td>
+          <code>$white-bis</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$navbar-dropdown-border-top</code>
+        </td>
+        <td>
+          <code>1px solid $border</code>
+        </td>
+        <td>
+          <code>2px solid $border</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$navbar-divider-background-color</code>
+        </td>
+        <td>
+          <code>$border</code>
+        </td>
+        <td>
+          <code>$background</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="3">
+        File
+        <code>sass/layout/footer.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Variable</th>
+      <th>From</th>
+      <th>To</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$footer-background-color</code>
+        </td>
+        <td>
+          <code>$background</code>
+        </td>
+        <td>
+          <code>$white-bis</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+#### New variables
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="2">
+        File
+        <code>sass/components/breadcrumb.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Name</th>
+      <th>Value</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$breadcrumb-item-padding-vertical</code>
+        </td>
+        <td>
+          <code>0</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$breadcrumb-item-padding-horizontal</code>
+        </td>
+        <td>
+          <code>0.75em</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="2">
+        File
+        <code>sass/components/message.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Name</th>
+      <th>Value</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$message-body-border-color</code>
+        </td>
+        <td>
+          <code>$border</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$message-body-border-width</code>
+        </td>
+        <td>
+          <code>0 0 0 4px</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$message-header-weight</code>
+        </td>
+        <td>
+          <code>$weight-bold</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$message-header-body-border-width</code>
+        </td>
+        <td>
+          <code>0</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="2">
+        File
+        <code>sass/components/navbar.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Name</th>
+      <th>Value</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$navbar-box-shadow-size</code>
+        </td>
+        <td>
+          <code>0 2px 0 0</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$navbar-box-shadow-color</code>
+        </td>
+        <td>
+          <code>$background</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$navbar-padding-vertical</code>
+        </td>
+        <td>
+          <code>1rem</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$navbar-padding-horizontal</code>
+        </td>
+        <td>
+          <code>2rem</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$navbar-z</code>
+        </td>
+        <td>
+          <code>30</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+<table class="table is-bordered">
+  <tbody>
+    <tr>
+      <th class="is-light" colspan="2">
+        File
+        <code>sass/elements/title.sass</code>
+      </th>
+    </tr>
+    <tr>
+      <th>Name</th>
+      <th>Value</th>
+    </tr>
+
+      <tr>
+        <td>
+          <code>$title-line-height</code>
+        </td>
+        <td>
+          <code>1.125</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$subtitle-line-height</code>
+        </td>
+        <td>
+          <code>1.25</code>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <code>$subtitle-negative-margin</code>
+        </td>
+        <td>
+          <code>-1.25rem</code>
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
+#### Removed variables
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>File</th>
+      <th>Removed</th>
+      <th>Replaced with</th>
+    </tr>
+  </thead>
+  <tbody>
+
+      <tr>
+        <td>
+          <code>sass/components/message.sass</code>
+        </td>
+        <td>
+          <code>$message-body-border</code>
+        </td>
+        <td>
+
+            <code>$message-body-border-color</code>
+
+            <code>$message-body-border-width</code>
+
+        </td>
+      </tr>
+
+  </tbody>
+</table>
+
 ## 0.6.2
 
 ### New features

docs/.gitignore

@@ -12,6 +12,7 @@ css/bulma-test.css
 css/bulma-docs.css.map
 PUBLISHING.md
 npm-debug.log
+test.html
 test.sass
 test.scss
 

docs/_data/blog/migratingv070.json

@@ -0,0 +1,179 @@
+{
+  "removed": [
+    {
+      "file": "sass/components/message.sass",
+      "before": "$message-body-border",
+      "after": ["$message-body-border-color", "$message-body-border-width"]
+    }
+  ],
+  "updated": [
+    {
+      "file": "sass/utilities/initial-variables.sass",
+      "changes": [
+        {
+          "variable": "$gap",
+          "from": "32px",
+          "to": "64px"
+        },
+        {
+          "variable": "$radius",
+          "from": "3px",
+          "to": "4px"
+        },
+        {
+          "variable": "$radius-large",
+          "from": "5px",
+          "to": "6px"
+        }
+      ]
+    },
+    {
+      "file": "sass/base/generic.sass",
+      "changes": [
+        {
+          "variable": "$hr-background-color",
+          "from": "$border",
+          "to": "$background"
+        },
+        {
+          "variable": "$hr-height",
+          "from": "1px",
+          "to": "2px"
+        }
+      ]
+    },
+    {
+      "file": "sass/elements/content.sass",
+      "changes": [
+        {
+          "variable": "$content-heading-weight",
+          "from": "$weight-normal",
+          "to": "$weight-semibold"
+        }
+      ]
+    },
+    {
+      "file": "sass/components/message.sass",
+      "changes": [
+        {
+          "variable": "$message-header-padding",
+          "from": "0.5em 0.75em",
+          "to": "0.75em 1em"
+        },
+        {
+          "variable": "$message-body-padding",
+          "from": "1em 1.25em",
+          "to": "1.25em 1.5em"
+        }
+      ]
+    },
+    {
+      "file": "sass/components/navbar.sass",
+      "changes": [
+        {
+          "variable": "$navbar-item-hover-background-color",
+          "from": "$background",
+          "to": "$white-bis"
+        },
+        {
+          "variable": "$navbar-dropdown-border-top",
+          "from": "1px solid $border",
+          "to": "2px solid $border"
+        },
+        {
+          "variable": "$navbar-divider-background-color",
+          "from": "$border",
+          "to": "$background"
+        }
+      ]
+    },
+    {
+      "file": "sass/layout/footer.sass",
+      "changes": [
+        {
+          "variable": "$footer-background-color",
+          "from": "$background",
+          "to": "$white-bis"
+        }
+      ]
+    }
+  ],
+  "new": [
+    {
+      "file":"sass/components/breadcrumb.sass",
+      "newcomers":[
+        {
+          "name": "$breadcrumb-item-padding-vertical",
+          "value": "0"
+        },
+        {
+          "name": "$breadcrumb-item-padding-horizontal",
+          "value": "0.75em"
+        }
+      ]
+    },
+    {
+      "file":"sass/components/message.sass",
+      "newcomers":[
+        {
+          "name": "$message-body-border-color",
+          "value": "$border"
+        },
+        {
+          "name": "$message-body-border-width",
+          "value": "0 0 0 4px"
+        },
+        {
+          "name": "$message-header-weight",
+          "value": "$weight-bold"
+        },
+        {
+          "name": "$message-header-body-border-width",
+          "value": "0"
+        }
+      ]
+    },
+    {
+      "file":"sass/components/navbar.sass",
+      "newcomers":[
+        {
+          "name": "$navbar-box-shadow-size",
+          "value": "0 2px 0 0"
+        },
+        {
+          "name": "$navbar-box-shadow-color",
+          "value": "$background"
+        },
+        {
+          "name": "$navbar-padding-vertical",
+          "value": "1rem"
+        },
+        {
+          "name": "$navbar-padding-horizontal",
+          "value": "2rem"
+        },
+        {
+          "name": "$navbar-z",
+          "value": "30"
+        }
+      ]
+    },
+    {
+      "file":"sass/elements/title.sass",
+      "newcomers":[
+        {
+          "name": "$title-line-height",
+          "value": "1.125"
+        },
+        {
+          "name": "$subtitle-line-height",
+          "value": "1.25"
+        },
+        {
+          "name": "$subtitle-negative-margin",
+          "value": "-1.25rem"
+        }
+      ]
+    }
+  ]
+}

docs/_data/global.json

@@ -0,0 +1,67 @@
+{
+  "navbar_items": [
+    {
+      "id": "blog",
+      "color": "bd-has-text-rss",
+      "fa_type": "fas",
+      "fa_icon": "fa-rss",
+      "title": "Blog"
+    },
+    {
+      "id": "expo",
+      "color": "has-text-star",
+      "fa_type": "fas",
+      "fa_icon": "fa-star",
+      "title": "Expo"
+    },
+    {
+      "id": "love",
+      "color": "has-text-danger",
+      "fa_type": "fas",
+      "fa_icon": "fa-heart",
+      "title": "Love"
+    }
+  ],
+  "more_items": [
+    {
+      "id": "bulma-start",
+      "color": "success",
+      "fa_type": "fas",
+      "fa_icon": "fa-rocket",
+      "title": "Bulma start",
+      "description": "A tiny npm package to get started"
+    },
+    {
+      "id": "made-with-bulma",
+      "color": "primary",
+      "fa_type": "fas",
+      "fa_icon": "fa-certificate",
+      "title": "Made with Bulma",
+      "description": "The official community badge"
+    },
+    {
+      "id": "alternative-to-bootstrap",
+      "color": "bootstrap",
+      "fa_type": "fas",
+      "fa_icon": "fa-exchange-alt",
+      "title": "Coming from Bootstrap",
+      "description": "See how Bulma is an alternative to Bootstrap"
+    },
+    {
+      "id": "backers",
+      "color": "patreon",
+      "fa_type": "fab",
+      "fa_icon": "fa-patreon",
+      "title": "Patreon backers",
+      "description": "Everyone who is supporting Bulma"
+    },
+    {
+      "id": "extensions",
+      "color": "danger",
+      "fa_type": "fas",
+      "fa_icon": "fa-plug",
+      "title": "Extensions",
+      "description": "Side projects to enhance Bulma",
+    }
+  ]
+}

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.0.6/js/all.js",
+  "fontawesome5": "https://use.fontawesome.com/releases/v5.0.7/js/all.js",
   "iconic": "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css",
   "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

@@ -0,0 +1,513 @@
+{
+  "by_id": {
+    "home": {
+      "name": "Home",
+      "path": ""
+    },
+    "documentation": {
+      "name": "Documentation",
+      "subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
+      "path": "/documentation"
+    },
+    "overview": {
+      "name": "Overview",
+      "subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
+      "color": "primary",
+      "icon": "eye",
+      "path": "/documentation/overview"
+    },
+    "overview-start": {
+      "name": "Getting started",
+      "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
+      "color": "danger",
+      "icon": "rocket",
+      "path": "/documentation/overview/start"
+    },
+    "overview-customize": {
+      "name": "Customize",
+      "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
+      "color": "star",
+      "icon": "paint-brush",
+      "path": "/documentation/overview/customize"
+    },
+    "overview-classes": {
+      "name": "CSS Classes",
+      "subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
+      "color": "link",
+      "icon_brand": "true",
+      "icon": "css3",
+      "path": "/documentation/overview/classes"
+    },
+    "overview-modular": {
+      "name": "Modularity",
+      "subtitle": "Just import what you <strong>need</strong>",
+      "color": "success",
+      "icon": "cubes",
+      "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"
+    },
+    "overview-variables": {
+      "name": "Variables",
+      "subtitle": "See how Bulma uses <strong>Sass variables</strong> to allows easy customization",
+      "color": "grey",
+      "icon": "cogs",
+      "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"
+    },
+    "overview-functions": {
+      "name": "Functions",
+      "subtitle": "Utility functions to calculate colors and other values",
+      "color": "orange",
+      "icon": "code",
+      "path": "/documentation/overview/functions"
+    },
+    "overview-mixins": {
+      "name": "Mixins",
+      "subtitle": "Utility mixins for custom elements and responsive helpers",
+      "color": "purple",
+      "icon": "plus",
+      "path": "/documentation/overview/mixins"
+    },
+    "modifiers": {
+      "name": "Modifiers",
+      "subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
+      "color": "grey",
+      "icon": "cogs",
+      "path": "/documentation/modifiers"
+    },
+    "modifiers-syntax": {
+      "name": "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/modifiers/syntax"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "columns": {
+      "name": "Columns",
+      "subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
+      "color": "star",
+      "icon": "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "columns-nesting": {
+      "name": "Nesting",
+      "subtitle": "A simple way to build <strong>responsive columns</strong>",
+      "color": "danger",
+      "icon": "sitemap",
+      "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"
+    },
+    "columns-options": {
+      "name": "Options",
+      "subtitle": "Design different <strong>types</strong> of column layouts",
+      "color": "grey",
+      "icon": "cogs",
+      "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"
+    },
+    "layout-container": {
+      "name": "Container",
+      "subtitle": "A simple <strong>container</strong> to center your content horizontally",
+      "path": "/documentation/layout/container"
+    },
+    "layout-level": {
+      "name": "Level",
+      "subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
+      "path": "/documentation/layout/level"
+    },
+    "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"
+    },
+    "layout-hero": {
+      "name": "Hero",
+      "subtitle": "An imposing <strong>hero banner</strong> to showcase something",
+      "path": "/documentation/layout/hero"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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"
+    },
+    "form": {
+      "name": "Form",
+      "subtitle": "The indispensable <strong>form controls</strong>, designed for maximum clarity",
+      "color": "link",
+      "icon_brand": "true",
+      "icon": "wpforms",
+      "path": "/documentation/form"
+    },
+    "form-general": {
+      "name": "General",
+      "subtitle": "All generic <strong>form controls</strong>, designed for consistency",
+      "color": "link",
+      "icon": "keyboard",
+      "icon_regular": "true",
+      "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"
+    },
+    "form-textarea": {
+      "name": "Textarea",
+      "subtitle": "The multiline <strong>textarea</strong> and its variations",
+      "color": "link",
+      "icon": "square",
+      "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"
+    },
+    "form-checkbox": {
+      "name": "Checkbox",
+      "subtitle": "The 2-state <strong>checkbox</strong> in its native format",
+      "color": "link",
+      "icon": "check-square",
+      "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"
+    },
+    "form-file": {
+      "name": "File",
+      "subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
+      "color": "link",
+      "icon": "cloud-upload-alt",
+      "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"
+    },
+    "elements-box": {
+      "name": "Box",
+      "subtitle": "A white <strong>box</strong> to contain other elements",
+      "color": "grey",
+      "icon": "square",
+      "icon_regular": "true",
+      "path": "/documentation/elements/box"
+    },
+    "elements-button": {
+      "name": "Button",
+      "subtitle": "The classic <strong>button</strong>, in different colors, sizes, and states",
+      "color": "success",
+      "icon": "hand-pointer",
+      "icon_regular": "true",
+      "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"
+    },
+    "elements-delete": {
+      "name": "Delete",
+      "subtitle": "A versatile <strong>delete</strong> cross",
+      "color": "danger",
+      "icon": "times-circle",
+      "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"
+    },
+    "elements-image": {
+      "name": "Image",
+      "subtitle": "A container for <strong>responsive images</strong>",
+      "color": "purple",
+      "icon": "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"
+    },
+    "elements-progress": {
+      "name": "Progress bars",
+      "subtitle": "Native HTML <strong>progress</strong> bars",
+      "color": "warning",
+      "icon": "spinner",
+      "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"
+    },
+    "elements-tag": {
+      "name": "Tag",
+      "subtitle": "Small <strong>tag labels</strong> to insert anywhere",
+      "color": "success",
+      "icon": "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"
+    },
+    "components": {
+      "name": "Components",
+      "subtitle": "Advanced multi-part components with lots of possibilities",
+      "color": "danger",
+      "icon": "cubes",
+      "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"
+    },
+    "components-card": {
+      "name": "Card",
+      "subtitle": "An all-around flexible and composable component",
+      "color": "success",
+      "icon": "id-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"
+    },
+    "components-menu": {
+      "name": "Menu",
+      "subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
+      "icon": "bars",
+      "path": "/documentation/components/menu"
+    },
+    "components-message": {
+      "name": "Message",
+      "subtitle": "Colored <strong>message</strong> blocks, to emphasize part of your page",
+      "color": "info",
+      "icon": "window-maximize",
+      "icon_regular": "true",
+      "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"
+    },
+    "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"
+    },
+    "components-pagination": {
+      "name": "Pagination",
+      "subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
+      "color": "orange",
+      "icon": "caret-square-right",
+      "path": "/documentation/components/pagination"
+    },
+    "components-panel": {
+      "name": "Panel",
+      "subtitle": "A composable <strong>panel</strong>, for compact controls",
+      "color": "grey-dark",
+      "icon": "list-alt",
+      "icon_regular": "true",
+      "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"
+    },
+    "blog": {
+      "name": "Blog",
+      "path": "/blog"
+    },
+    "expo": {
+      "name": "Expo",
+      "subtitle": "Official Bulma showcase",
+      "icon": "star",
+      "color": "star",
+      "path": "/expo"
+    },
+    "love": {
+      "name": "Love",
+      "subtitle": "Fans of Bulma around the world",
+      "color": "danger",
+      "icon": "heart",
+      "path": "/love"
+    },
+    "more": {
+      "name": "More",
+      "path": "/more"
+    },
+    "bulma-start": {
+      "name": "Bulma start",
+      "subtitle": "A tiny npm package to get started",
+      "icon": "rocket",
+      "color": "success",
+      "path": "/bulma-start"
+    },
+    "made-with-bulma": {
+      "name": "Made with Bulma",
+      "subtitle": "The official community badge",
+      "icon": "certificate",
+      "color": "primary",
+      "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"
+    },
+    "patreon-backers": {
+      "name": "Patreon backers",
+      "subtitle": "Everyone who is supporting Bulma",
+      "icon_brand": "true",
+      "icon": "patreon",
+      "color": "patreon",
+      "path": "/backers"
+    },
+    "extensions": {
+      "name": "Bulma extensions",
+      "subtitle": "Side projects to enhance Bulma",
+      "icon": "plug",
+      "color": "orange",
+      "path": "/extensions"
+    }
+  },
+  "more": [
+    "bulma-start",
+    "made-with-bulma",
+    "bootstrap",
+    "patreon-backers",
+    "extensions"
+  ],
+  "categories": {
+    "overview": ["overview-start", "overview-customize", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
+    "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
+    "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"],
+    "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
+  }
+}

docs/_data/love.json

@@ -1,5 +1,5 @@
 {
-  "tweetsById": {
+  "tweets_by_id": {
     "779966186121560064": {
       "id": "779966186121560064",
       "date": "9:50 AM - 25 Sep 2016",
@@ -83,7 +83,7 @@
     "835834634655174658": {
       "id": "835834634655174658",
       "date": "12:51 PM - 26 Feb 2017",
-      "content": "<a href=\"https://t.co/ClYmBd8tGR\">bulma.io</a> is an impressive CSS framework.  Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href=\"https://twitter.com/jgthms\">@jgthms</a>s.",
+      "content": "<a href=\"https://t.co/ClYmBd8tGR\">bulma.io</a> is an impressive CSS framework.  Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href=\"https://twitter.com/jgthms\">@jgthms</a>.",
       "fullname": "scottgallant",
       "username": "scottgallant",
       "avatar": "https://pbs.twimg.com/profile_images/737847066030936064/1yHqQT-h_normal.jpg",
@@ -693,7 +693,7 @@
     "915580081938018304": {
       "id": "915580081938018304",
       "date": "3:11 PM - 4 Oct 2017",
-      "content": "Best css framework, amazing implementation. No idea how I lived without this.<br><a href=\"https://t.co/FhBPLhWVIU\">bulma.io</a> <a href=\"https://twitter.com/search?q=%23bulmaio\">#bulmaio</a> via <a href=\"https://twitter.com/jgthms\">@jgthms</a>",
+      "content": "Best css framework, amazing implementation. No idea how I lived without this.",
       "fullname": "Juan Carlos Andreu",
       "username": "andreujuanc",
       "avatar": "https://pbs.twimg.com/profile_images/530443756114153472/nSmN8eUj_normal.jpeg",
@@ -1281,4 +1281,4 @@
     "963476902324391937",
     "966731525709619200"
   ]
-}
+}

docs/_data/meta.json

@@ -1,7 +1,7 @@
 {
   "title": "Bulma: a modern CSS framework based on Flexbox",
   "description": "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
-  "documentation": "/documentation/overview/start/",
+  "documentation": "/documentation",
   "download": "https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip",
   "github": "https://github.com/jgthms/bulma",
   "twitter": "https://twitter.com/jgthms",
@@ -9,4 +9,4 @@
   "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
   "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
   "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf"
-}
+}

docs/_data/variables/elements/title.json

@@ -31,6 +31,11 @@
       "name": "$title-strong-weight",
       "value": "inherit"
     },
+    "title-line-height": {
+      "id": "title-line-height",
+      "name": "$title-line-height",
+      "value": "1.125"
+    },
     "subtitle-color": {
       "id": "subtitle-color",
       "name": "$subtitle-color",
@@ -46,6 +51,11 @@
       "name": "$subtitle-weight",
       "value": "$weight-normal"
     },
+    "subtitle-line-height": {
+      "id": "subtitle-line-height",
+      "name": "$subtitle-line-height",
+      "value": "1.25"
+    },
     "subtitle-strong-color": {
       "id": "subtitle-strong-color",
       "name": "$subtitle-strong-color",
@@ -55,6 +65,11 @@
       "id": "subtitle-strong-weight",
       "name": "$subtitle-strong-weight",
       "value": "$weight-semibold"
+    },
+    "subtitle-negative-margin": {
+      "id": "subtitle-negative-margin",
+      "name": "$subtitle-negative-margin",
+      "value": "-1.25rem"
     }
   }
-}
+}

docs/_includes/blog-hero.html

@@ -1,27 +0,0 @@
-{% include navbar.html id="BlogHero" %}
-
-<section class="hero is-warning">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column">
-          <h1 class="title">
-            <a href="{{ site.url }}/blog">Blog</a>
-          </h1>
-          <p class="subtitle">
-            Stay updated about new features, bug fixes, and releases
-          </p>
-          <a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
-            <span class="icon">
-              <i class="fas fa-rss"></i>
-            </span>
-            <span>Subscribe</span>
-          </a>
-        </div>
-        <div class="column is-narrow">
-          {% include carbon.html %}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>

docs/_includes/book-banner.html → docs/_includes/book/book-banner.html

@@ -1,15 +1,15 @@
 <section id="bulma-book" class="bd-book-banner hero is-medium">
-  <div class="bd-book-pattern"></div>
+  <!-- <div class="bd-book-pattern"></div> -->
   <div class="hero-body">
     <div class="container">
       <div class="bd-book-columns">
         <div class="bd-book-column bd-is-cover">
-          {% include book-cover.html %}
+          {% include book/book-cover.html %}
         </div>
         <div class="bd-book-column bd-is-content">
-          {% include book-content.html show_cover=false %}
+          {% include book/book-content.html show_cover=false %}
         </div>
       </div>
     </div>
   </div>
-</section>
+</section>

docs/_includes/book-content.html → docs/_includes/book/book-content.html

@@ -7,7 +7,7 @@
 
   {% if include.show_cover %}
     <div class="bd-book-inline-cover">
-      {% include book-cover.html %}
+      {% include book/book-cover.html %}
     </div>
   {% endif %}
 

docs/_includes/book-modal.html → docs/_includes/book/book-modal.html

@@ -3,12 +3,12 @@
   <div class="modal-content">
     <div class="bd-book-modal-columns">
       <div class="bd-book-modal-column bd-is-cover">
-        {% include book-cover.html %}
+        {% include book/book-cover.html %}
       </div>
       <div class="bd-book-modal-column bd-is-content">
-        {% include book-content.html show_cover=true %}
+        {% include book/book-content.html show_cover=true %}
       </div>
     </div>
   </div>
   <button  class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
-</div>
+</div>

docs/_includes/components/anchors.html

@@ -0,0 +1,8 @@
+<div id="anchorsReference" class="bd-anchors-reference"></div>
+<nav id="anchors" class="bd-anchors">
+  <p class="bd-anchors-title">
+    On this page
+  </p>
+
+  <ul class="bd-anchors-list"></ul>
+</nav>

docs/_includes/components/breadcrumb.html

@@ -0,0 +1,36 @@
+<div class="bd-breadcrumb">
+  <nav class="breadcrumb" aria-label="breadcrumbs">
+    <ul>
+      {% for key in page.breadcrumb %}
+        {% assign link = site.data.links.by_id[key] %}
+        <li{% if forloop.last %} class="is-active"{% endif %}>
+          <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+
+  {% if previous_link or next_link %}
+    <nav class="bd-prev-next">
+      {% if previous_link %}
+        <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+          ←
+        </a>
+      {% else %}
+        <span>
+          ←
+        </span>
+      {% endif %}
+
+      {% if next_link %}
+        <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+          →
+        </a>
+      {% else %}
+        <span>
+          →
+        </span>
+      {% endif %}
+    </nav>
+  {% endif %}
+</div>

docs/_includes/components/categories.html

@@ -0,0 +1,31 @@
+<nav id="categories" class="bd-categories">
+  {% for category in site.data.links.categories %}
+    {% assign category_id = category[0] %}
+    {% assign category_links = category[1] %}
+    {% assign category_link = site.data.links.by_id[category_id] %}
+
+    <div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
+      <header class="bd-category-header">
+        <a class="bd-category-toggle">
+          <span class="icon">
+            <i class="fas fa-chevron-down"></i>
+          </span>
+        </a>
+        <a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
+          <strong>{{ category_link.name }}</strong>
+        </a>
+      </header>
+
+      <ul class="bd-category-list">
+        {% for link_id in category_links %}
+          {% assign link = site.data.links.by_id[link_id] %}
+          <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
+            <a href="{{ site.url }}{{ link.path }}">
+              {{ link.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+</nav>

docs/_includes/components/docs.html

@@ -0,0 +1,28 @@
+<nav class="bd-docs">
+  {% for category in site.data.links.categories %}
+    {% assign category_id = category[0] %}
+    {% assign category_links = category[1] %}
+    {% assign category_link = site.data.links.by_id[category_id] %}
+
+    <article class="bd-doc">
+      <h2 class="bd-doc-title title is-5">
+        <a href="{{ site.url }}{{ category_link.path }}">
+          <strong>{{ category_link.name }}</strong>
+        </a>
+      </h2>
+
+      <div class="bd-doc-content">
+        <ul class="bd-doc-list">
+          {% for link_id in category_links %}
+            {% assign link = site.data.links.by_id[link_id] %}
+            <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
+              <a href="{{ site.url }}{{ link.path }}">
+                {{ link.name }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </article>
+  {% endfor %}
+</nav>

docs/_includes/components/links.html

@@ -0,0 +1,28 @@
+<nav class="bd-links">
+  {% if include.category_id %}
+    {% assign category_id = include.category_id %}
+    {% assign category_links = site.data.links.categories[category_id] %}
+  {% else %}
+    {% assign category_links = site.data.links.categories %}
+  {% endif %}
+
+  {% for link_id in category_links %}
+    {% if include.category_id %}
+      {% assign link = site.data.links.by_id[link_id] %}
+    {% else %}
+      {% assign thingy = link_id[0] %}
+      {% assign link = site.data.links.by_id[thingy] %}
+    {% endif %}
+    {% assign link_url = site.url | append: link.path %}
+    {%
+      include elements/link.html
+      url=link_url
+      color=link.color
+      icon_brand=link.icon_brand
+      icon_regular=link.icon_regular
+      icon=link.icon
+      name=link.name
+      subtitle=link.subtitle
+    %}
+  {% endfor %}
+</nav>

docs/_includes/components/more.html

@@ -0,0 +1,15 @@
+{% assign current_link_id = page.breadcrumb | last %}
+
+<nav class="bd-categories">
+  {% for link_id in site.data.links.more %}
+    {% assign link = site.data.links.by_id[link_id] %}
+
+    <div class="bd-category">
+      <header class="bd-category-header">
+        <a class="bd-category-name {% if link_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}">
+          <strong>{{ link.name }}</strong>
+        </a>
+      </header>
+    </div>
+  {% endfor %}
+</nav>

docs/_includes/klmn.html → docs/_includes/content/klmn.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="column is-9">
-        <div class="bd-notification is-info has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           Main
         </div>
       </div>
@@ -27,17 +27,17 @@
 
     <div class="columns is-variable bd-klmn-columns">
       <div class="column is-4">
-        <div class="bd-notification is-success has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           Three columns
         </div>
       </div>
       <div class="column is-4">
-        <div class="bd-notification is-warning has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           Three columns
         </div>
       </div>
       <div class="column is-4">
-        <div class="bd-notification is-danger has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           Three columns
         </div>
       </div>
@@ -50,22 +50,22 @@
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-info has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           2
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-success has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           3
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-warning has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           4
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-danger has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           5
         </div>
       </div>
@@ -75,22 +75,22 @@
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-info has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           7
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-success has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           8
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-warning has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           9
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-danger has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           10
         </div>
       </div>
@@ -100,7 +100,7 @@
         </div>
       </div>
       <div class="column">
-        <div class="bd-notification is-info has-text-centered">
+        <div class="bd-notification is-primary has-text-centered">
           12
         </div>
       </div>

docs/_includes/pro.html → docs/_includes/content/pro.html

@@ -10,6 +10,11 @@
     </p>
     <div class="bd-pro-content">
       {{ include.content | markdownify }}
+
+      {% if include.title == 'No JavaScript' %}
+        {% assign tweet = site.data.love.tweets_by_id.860885116909998080 %}
+        {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
+      {% endif %}
     </div>
   </div>
 </article>

docs/_includes/anchor.html → docs/_includes/elements/anchor.html

@@ -1,7 +1,9 @@
-<hr style="margin-bottom: 0;">
+<hr class="hr" style="margin-bottom: 0;">
 
 <h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
-  {{ include.name }}
+  <span class="bd-anchor-name">
+    {{ include.name }}
+  </span>
   <a class="bd-anchor-link" href="#{{ include.name | slugify }}">
     #
   </a>

docs/_includes/carbon.html → docs/_includes/elements/carbon.html

@@ -1,5 +1,5 @@
 <div id="carboncontainer">
-<div id="carbon" class="box">
+<div id="carbon">
   <script>
     var _0xa6d2 = [
       '\x73\x63\x72\x69\x70\x74',

docs/_includes/elements/drawing.html

@@ -0,0 +1,6 @@
+<img
+  class="bd-drawing bd-is-{{ include.id }}"
+  src="{{ site.url }}/images/drawing/{{ include.id }}.png"
+  width="{{ include.width }}"
+  height="{{ include.height }}"
+>

docs/_includes/elements/improve-page.html

@@ -0,0 +1,14 @@
+<div id="typo" class="bd-typo">
+  <p class="has-text-grey-light">
+    <a href="{{ site.url }}/made-with-bulma/">
+      <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
+    </a>
+    <br>
+    This page is <strong class="has-text-grey">open source</strong>.
+    Noticed a typo? Or something unclear?
+    <br>
+    <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
+      Improve this page on GitHub
+    </a>
+  </p>
+</div>

docs/_includes/elements/link.html

@@ -0,0 +1,27 @@
+<a class="bd-link" href="{{ include.url }}">
+  {% if include.surtitle %}
+    <p class="bd-link-surtitle">
+      {{ include.surtitle }}
+    </p>
+  {% endif %}
+  <h2 class="bd-link-name">
+    <figure class="bd-link-figure">
+      {% if include.icon %}
+        <span class="bd-link-icon has-text-{% if include.color %}{{ include.color }}{% else %}link{% endif %}">
+          <i class="{% if include.icon_brand %}fab{% elsif include.icon_regular %}far{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
+        </span>
+      {% else %}
+        <span class="bd-link-counter"></span>
+      {% endif %}
+    </figure>
+    {{ include.name }}
+  </h2>
+  <p class="bd-link-subtitle">
+    {{ include.subtitle }}
+  </p>
+  {% if include.more %}
+    <div class="bd-link-more">
+      {{ include.more }}
+    </div>
+  {% endif %}
+</a>

docs/_includes/elements/patreon.html

@@ -0,0 +1,10 @@
+<a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
+  {%
+    include elements/responsive-image.html
+    path="become-a-patron"
+    extension="png"
+    alt="Become a Patron"
+    width="148"
+    height="36"
+  %}
+</a>

docs/_includes/snippet.html → docs/_includes/elements/snippet.html

@@ -16,9 +16,16 @@
     {% if include.clipped %}bd-is-clipped{% endif %}
     {% if include.size %}bd-is-{{ include.size }}{% endif %}
     {% if include.one_fifth %}bd-is-one-fifth{% endif %}
+    {% if include.fullwidth %}bd-is-fullwidth{% endif %}
     ">
     <div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
-      {{ include.content }}
+      {% if include.wrapper %}
+        <div class="{{ include.wrapper }}">
+          {{ include.content }}
+        </div>
+      {% else %}
+        {{ include.content }}
+      {% endif %}
     </div>
     <div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %} {% if include.more %}bd-is-more bd-is-more-clipped{% endif %}">
       {% highlight html %}{{ include.content }}{% endhighlight %}

docs/_includes/tw.html → docs/_includes/elements/tw.html

@@ -1,6 +1,6 @@
 {% assign twUrl = "https://twitter.com/" | append: include.tweet.username | append: "/status/" | append: include.tweet.id %}
 
-<article class="bd-tw">
+<article class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
   <header class="bd-tw-header">
     <a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
       <figure class="bd-tw-avatar">
@@ -54,4 +54,12 @@
       </a>
     </li>
   </ul>
+
+  {% if include.drawing_id %}
+    {% include elements/drawing.html
+      id=include.drawing_id
+      width=include.drawing_width
+      height=include.drawing_height
+    %}
+  {% endif %}
 </article>

docs/_includes/elements/tws.html

@@ -0,0 +1,45 @@
+<div class="container">
+  <div class="columns">
+    <div class="column is-4">
+      {% assign tweet = site.data.love.tweets_by_id.910956939886043136 %}
+      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+      {% assign tweet = site.data.love.tweets_by_id.912690697416753152 %}
+      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+      {% assign tweet = site.data.love.tweets_by_id.834140257054502913 %}
+      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+    </div>
+
+    <div class="column is-4">
+      {% assign tweet = site.data.love.tweets_by_id.869284735440363520 %}
+      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+      {% assign tweet = site.data.love.tweets_by_id.835834634655174658 %}
+      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+      {% assign tweet = site.data.love.tweets_by_id.874925154475929602 %}
+      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+    </div>
+
+    <div class="column is-4">
+      {% assign tweet = site.data.love.tweets_by_id.915580081938018304 %}
+      {% include
+        elements/tw.html
+        modifier='bd-is-white'
+        tweet=tweet
+        drawing_id='love-letters'
+        drawing_width=240
+        drawing_height=120
+      %}
+      {% assign tweet = site.data.love.tweets_by_id.903629781744439297 %}
+      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+      {% assign tweet = site.data.love.tweets_by_id.909653512010833920 %}
+      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+    </div>
+  </div>
+
+  <div class="bd-more-loves">
+    <p class="bd-more-loves-container">
+      <a class="button is-medium is-danger bd-rainbow" href="{{ love_url }}">
+        <span>See more <strong>love</strong> 🤗</span>
+      </a>
+    </p>
+  </div>
+</div>

docs/_includes/variables.html → docs/_includes/elements/variables.html

@@ -24,7 +24,7 @@
 
 {% endcapture %}
 
-{% include anchor.html name=anchor_name %}
+{% include elements/anchor.html name=anchor_name %}
 
 <div class="content">
   <p>{{ content | strip }}</p>

docs/_includes/footer.html

@@ -1,88 +0,0 @@
-{% include native.html %}
-
-{% include book-banner.html %}
-
-{% include sponsors.html %}
-
-{% include newsletter.html %}
-
-<footer class="footer">
-  <div class="container">
-    <div class="columns">
-      <div class="column is-4">
-        <div id="about" class="content">
-          <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
-          <div class="twitter-container">
-            <a href="{{ site.data.meta.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
-          </div>
-          <p id="alternative">
-            <a href="{{ site.url }}/alternative-to-bootstrap/">An alternative to <strong>Bootstrap</strong></a>
-          </p>
-        </div>
-      </div>
-      <div class="column is-4">
-        <div id="share" class="content">
-          <div>
-            <strong>Support</strong> and share the love!
-          </div>
-          <div id="social">
-            <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
-
-            <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
-
-            <div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
-
-            <a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
-              <img src="/images/patreon.png" alt="Become a patron">
-            </a>
-
-            <form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-              <input type="hidden" name="cmd" value="_s-xclick">
-              <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
-              <input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
-              <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
-            </form>
-          </div>
-        </div>
-      </div>
-      <div class="column is-4">
-        <div id="sister">
-          <p>
-            More <strong>helpful</strong> tools:
-          </p>
-          <ul>
-            <li>
-              <a href="http://cssreference.io">
-                <img src="{{site.url}}/images/css-reference-logo.png" alt="CSS Reference logo">
-              </a>
-            </li>
-            <li>
-              <a href="http://htmlreference.io">
-                <img src="{{site.url}}/images/html-reference-logo.png" alt="HTML Reference logo">
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <div id="tsp">
-      <p>
-        <a href="{{ site.url }}/made-with-bulma/">
-          <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
-        </a>
-        <small>
-          Get the <a href="{{ site.url }}/made-with-bulma/">badge</a>!
-          <br>
-          Source code licensed <a href="https://opensource.org/licenses/mit-license.php">MIT</a>.
-          <br>
-          Website content licensed <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
-        </small>
-      </p>
-    </div>
-  </div>
-</footer>
-
-{% include book-modal.html %}
-
-{% include scripts.html %}

docs/_includes/footer/about.html

@@ -0,0 +1,13 @@
+<h4 class="bd-footer-title">
+  <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL" target="_blank">Jeremy Thomas</a>.
+</h4>
+
+<div class="bd-footer-iframe">
+  <a href="{{ site.data.meta.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
+</div>
+
+<div class="bd-footer-tsp">
+  Source code licensed <a href="https://opensource.org/licenses/mit-license.php">MIT</a>.
+  <br>
+  Website content licensed <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
+</div>

docs/_includes/footer/boxes.html

@@ -0,0 +1,48 @@
+{% assign bootstrap_link = site.data.links.by_id['bootstrap'] %}
+{% assign expo_link = site.data.links.by_id['expo'] %}
+{% assign love_link = site.data.links.by_id['love'] %}
+
+<div class="bd-footer-stars">
+  <a class="bd-footer-star bd-is-bootstrap" href="{{ site.url }}{{ bootstrap_link.path }}">
+    <header class="bd-footer-star-header">
+      <h4 class="bd-footer-title">
+        <strong>{{ bootstrap_link.name }}</strong>
+      </h4>
+      <p class="bd-footer-subtitle">
+        An alternative to Bootstrap
+      </p>
+    </header>
+
+    <figure class="bd-footer-star-figure">
+      <img src="{{ site.url }}/images/footer/bootstrap-to-bulma.png" width="160" height="48">
+    </figure>
+  </a>
+
+  <a class="bd-footer-star bd-is-expo" href="{{ site.url }}{{ expo_link.path }}">
+    <header class="bd-footer-star-header">
+      <h4 class="bd-footer-title">
+        <span class="icon has-text-{{ expo_link.color }}">
+          <i class="fas fa-{{ expo_link.icon }}"></i>
+        </span>
+        <strong>{{ expo_link.name }}</strong>
+      </h4>
+      <p class="bd-footer-subtitle">
+        See what you can build with Bulma
+      </p>
+    </header>
+  </a>
+
+  <a class="bd-footer-star bd-is-love" href="{{ site.url }}{{ love_link.path }}">
+    <header class="bd-footer-star-header">
+      <h4 class="bd-footer-title">
+        <span class="icon has-text-{{ love_link.color }}">
+          <i class="fas fa-{{ love_link.icon }}"></i>
+        </span>
+        <strong>{{ love_link.name }}</strong>
+      </h4>
+      <p class="bd-footer-subtitle">
+        Fans of Bulma
+      </p>
+    </header>
+  </a>
+</div>

docs/_includes/footer/contribute.html

@@ -0,0 +1,9 @@
+<h4 class="bd-footer-title">
+  <strong>Contribute</strong> on GitHub
+</h4>
+
+<div class="bd-footer-iframe">
+  <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+
+  <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&type=follow&count=true&size=large" frameborder="0" scrolling="0" width="170px" height="30px"></iframe>
+</div>

docs/_includes/footer/link.html

@@ -0,0 +1,13 @@
+<p class="bd-footer-link bd-has-subtitle">
+  <a href="{{ site.url }}{{ link.path }}">
+    <span class="bd-footer-link-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>
+    <strong>
+      {{ link.name }}
+    </strong>
+    <em>
+      {{ link.subtitle }}
+    </em>
+  </a>
+</p>

docs/_includes/footer/links.html

@@ -0,0 +1,65 @@
+{% assign blog_link = site.data.links.by_id['blog'] %}
+{% assign documentation_link = site.data.links.by_id['documentation'] %}
+{% assign more_link = site.data.links.by_id['more'] %}
+
+<div class="bd-footer-links">
+  <div class="columns">
+    <div class="column is-3">
+      <p class="bd-footer-link-title">
+        <a href="{{ site.url }}">Home</a>
+      </p>
+
+      <p class="bd-footer-link-title">
+        <a href="{{ site.url }}{{ blog_link.path }}">Blog</a>
+      </p>
+
+      {% for post in site.posts | limit: 4 %}
+        <p class="bd-footer-link">
+          <a href="{{ post.url }}">
+            {{ post.name }}
+          </a>
+        </p>
+      {% endfor %}
+
+      <p class="bd-footer-link bd-is-more">
+        <a href="{{ site.url }}{{ blog_link.path }}">
+          View all posts
+        </a>
+      </p>
+    </div>
+
+    <div class="column is-3">
+      <p class="bd-footer-link-title">
+        <a href="{{ site.url }}{{ documentation_link.path }}">Documentation</a>
+      </p>
+
+      {% for category in site.data.links.categories %}
+        {% assign category_id = category[0] %}
+        {% assign category_link = site.data.links.by_id[category_id] %}
+
+        <p class="bd-footer-link">
+          <a href="{{ site.url }}{{ category_link.path }}">
+            {{ category_link.name }}
+          </a>
+        </p>
+      {% endfor %}
+    </div>
+
+    <div class="column is-6">
+      <p class="bd-footer-link-title">
+        <a href="{{ site.url }}{{ more_link.path }}">More</a>
+      </p>
+
+      {% assign link = site.data.links.by_id['expo'] %}
+      {% include footer/link.html %}
+
+      {% assign link = site.data.links.by_id['love'] %}
+      {% include footer/link.html %}
+
+      {% for link_id in site.data.links.more %}
+        {% assign link = site.data.links.by_id[link_id] %}
+        {% include footer/link.html %}
+      {% endfor %}
+    </div>
+  </div>
+</div>

docs/_includes/footer/main.html

@@ -0,0 +1,18 @@
+<footer class="footer">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-4">
+        {% include footer/about.html %}
+      </div>
+      <div class="column is-4">
+        {% include footer/contribute.html %}
+      </div>
+      <div class="column is-4">
+        {% include footer/share.html %}
+      </div>
+    </div>
+    {% include footer/support.html %}
+    {% include footer/boxes.html %}
+    {% include footer/links.html %}
+  </div>
+</footer>

docs/_includes/footer/share.html

@@ -0,0 +1,9 @@
+<h4 class="bd-footer-title">
+  <strong>Share</strong> on social media
+</h4>
+
+<div class="bd-footer-iframe">
+  <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
+
+  <div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
+</div>

docs/_includes/footer/support.html

@@ -0,0 +1,48 @@
+<div class="bd-footer-support">
+  <h4 class="bd-footer-title">
+    <strong>Support</strong> Bulma
+  </h4>
+
+  <div class="bd-footer-donations columns">
+    <div class="bd-footer-donation column">
+      <p class="bd-footer-donation-title">
+        <strong>One-time</strong> donation
+      </p>
+      <div class="bd-footer-donation-action">
+        <form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+          <input type="hidden" name="cmd" value="_s-xclick">
+          <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
+          <input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
+          <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
+        </form>
+      </div>
+    </div>
+
+    <div class="bd-footer-donation column">
+      <p class="bd-footer-donation-title">
+        <strong>Visit</strong> our sponsor
+      </p>
+      <div class="bd-footer-donation-action">
+        <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
+          {%
+            include elements/responsive-image.html
+            path="sponsors/chainaxe"
+            extension="png"
+            alt="chainaxe logo"
+            width="99"
+            height="70"
+          %}
+        </a>
+      </div>
+    </div>
+
+    <div class="bd-footer-donation column">
+      <p class="bd-footer-donation-title">
+        <strong>Monthly</strong> donation
+      </p>
+      <div class="bd-footer-donation-action">
+        {% include elements/patreon.html %}
+      </div>
+    </div>
+  </div>
+</div>

docs/_includes/global/footer.html

@@ -0,0 +1,11 @@
+{% include global/native.html %}
+
+{% include book/book-banner.html %}
+
+{% include global/newsletter.html %}
+
+{% include footer/main.html %}
+
+{% include book/book-modal.html %}
+
+{% include global/scripts.html %}

docs/_includes/native.html → docs/_includes/global/native.html

@@ -59,7 +59,7 @@
       }
 
       .native-cta:hover {
-        color: #native_cta_color_hover;
+        color: #native_cta_color_hover#;
         background-color: #native_cta_bg_color_hover#;
       }
     </style>
@@ -70,6 +70,6 @@
         <span class="native-desc">#native_desc#</span>
       </div>
     </div>
-    <span class="native-cta">#native_cta#</span>
+    <span class="button is-medium native-cta">#native_cta#</span>
   </a>
 </div>

docs/_includes/global/navbar.html

@@ -0,0 +1,97 @@
+<nav id="navbar" class="navbar is-spaced">
+  <div class="container">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
+    </a>
+
+    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
+      <span class="icon" style="color: #333;">
+        <i class="fab fa-lg fa-github-alt"></i>
+      </span>
+    </a>
+
+    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
+      <span class="icon" style="color: #55acee;">
+        <i class="fab fa-lg fa-twitter"></i>
+      </span>
+    </a>
+
+    <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+  <div id="navMenu{{ include.id }}" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item bd-navbar-item-documentation {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
+        <span class="icon has-text-primary">
+          <i class="fas fa-book"></i>
+        </span>
+        <span>Documentation</span>
+      </a>
+
+      {% for item in site.data.global.navbar_items %}
+        <a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
+          <span class="icon {{ item.color }}">
+            <i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
+          </span>
+          <span>{{ item.title }}</span>
+        </a>
+      {% endfor %}
+
+      <div class="navbar-item has-dropdown is-hoverable">
+        {% assign link = site.data.links.by_id['more'] %}
+        <a class="navbar-link" href="{{ site.url }}{{ link.path }}">
+          {{ link.name }}
+        </a>
+        <div id="moreDropdown" class="navbar-dropdown">
+          {% for link_id in site.data.links.more %}
+            {% assign link = site.data.links.by_id[link_id] %}
+            <a class="navbar-item {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}/{{ link.path }}">
+              <span>
+                <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>
+                <strong>{{ link.name }}</strong>
+                <br>
+                {{ link.subtitle }}
+              </span>
+            </a>
+            {% unless forloop.last %}
+              <hr class="navbar-divider">
+            {% endunless %}
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <a class="navbar-item is-hidden-mobile" href="{{ site.data.meta.github }}" target="_blank">
+        <span class="icon" style="color: #333;">
+          <i class="fab fa-lg fa-github-alt"></i>
+        </span>
+      </a>
+      <a class="navbar-item is-hidden-mobile" href="{{ site.data.meta.twitter }}" target="_blank">
+        <span class="icon" style="color: #55acee;">
+          <i class="fab fa-lg fa-twitter"></i>
+        </span>
+      </a>
+      <div class="navbar-item">
+        <div class="field is-grouped is-grouped-multiline">
+          <p class="control">
+            {% include elements/patreon.html %}
+          </p>
+          <p class="control">
+            <a class="button is-primary" href="{{ site.data.meta.download }}">
+              <strong>Download</strong>
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+</nav>

docs/_includes/global/newsletter.html

@@ -0,0 +1,34 @@
+<section id="newsletter" class="section is-medium">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
+        <p class="title">Newsletter</p>
+        <p class="subtitle is-4 has-text-grey-light">Features, releases, showcase… stay in the loop!</p>
+      </div>
+
+      <div class="column">
+        <form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
+          <div class="field is-grouped">
+            <div class="control has-icons-left is-expanded">
+              <input type="email" value="" name="email" class="input is-medium is-flat" placeholder="email address" required>
+              <span class="icon is-small is-left">
+                <i class="fas fa-envelope"></i>
+              </span>
+              {% include elements/drawing.html id='spam-free' width=112 height=88 %}
+            </div>
+
+            <div class="control">
+              <div class="is-hidden">
+                <input type="text" name="hp" id="hp">
+              </div>
+              <input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
+              <button class="button is-medium is-link">
+                <strong>Subscribe</strong>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/scripts.html → docs/_includes/global/scripts.html

@@ -3,8 +3,21 @@
 <script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
 
 {% if page.route == 'index' %}
-  <script src="https://player.vimeo.com/api/player.js"></script>
+  <script src="https://player.vimeo.com/api/player.js" ></script>
   <script type="text/javascript" src="{{ site.url }}/lib/index.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
+  <script>
+    WebFontConfig = {
+      google: {
+        families: ['Nunito:400,700']
+      }
+    };
+    (function(d) {
+      var wf = d.createElement('script'), s = d.scripts[0];
+      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
+      wf.async = true;
+      s.parentNode.insertBefore(wf, s);
+   })(document);
+  </script>
 {% elsif page.doc-subtab == 'navbar' %}
   {% include examples/navbar-bottom.html %}
   <script type="text/javascript" src="{{ site.url }}/lib/navbar.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>

docs/_includes/global/sponsors.html

@@ -0,0 +1,23 @@
+<section class="section">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column is-4">
+        <p class="title">Sponsors</p>
+      </div>
+      <div class="column is-8">
+        <div class="bd-sponsors">
+          <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
+            {%
+              include elements/responsive-image.html
+              path="sponsors/chainaxe"
+              extension="png"
+              alt="chainaxe logo"
+              width="99"
+              height="70"
+            %}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/header.html

@@ -1,69 +0,0 @@
-<nav class="nav">
-  <div class="nav-left">
-    <a class="nav-item is-brand" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
-    </a>
-  </div>
-
-  <div class="nav-center">
-    <a class="nav-item" href="{{ site.data.meta.github }}">
-      <span class="icon">
-        <i class="fab fa-github"></i>
-      </span>
-    </a>
-    <a class="nav-item" href="{{ site.data.meta.twitter }}">
-      <span class="icon">
-        <i class="fab fa-twitter"></i>
-      </span>
-    </a>
-  </div>
-
-  <span id="nav-toggle" class="nav-toggle">
-    <span></span>
-    <span></span>
-    <span></span>
-  </span>
-
-  <div id="nav-menu" class="nav-right nav-menu">
-    <a class="nav-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
-      Home
-    </a>
-    <a class="is-hidden nav-item {% if page.route == 'templates' %}is-active{% endif %} {% if page.layout == 'templates' %}is-active{% endif %}" href="{{ site.url }}/templates/">
-      <span>Templates</span>
-      <span class="tag is-small is-success">New!</span>
-    </a>
-    <a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
-      Documentation
-    </a>
-    <a class="nav-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
-      Blog
-    </a>
-
-    <div class="nav-item">
-      <div class="field is-grouped">
-        <p class="control">
-          <a id="twitter"
-            class="button"
-            data-social-network="Twitter"
-            data-social-action="tweet"
-            data-social-target="{{ site.url }}"
-            target="_blank"
-            href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&url={{ site.url }}&via=jgthms">
-            <span class="icon">
-              <i class="fab fa-twitter"></i>
-            </span>
-            <span>Tweet</span>
-          </a>
-        </p>
-        <p class="control">
-          <a class="button is-primary" href="{{ site.data.meta.download }}">
-            <span class="icon">
-              <i class="fas fa-download"></i>
-            </span>
-            <span>Download</span>
-          </a>
-        </p>
-      </div>
-    </div>
-  </div>
-</nav>

docs/_includes/index/columns.html

@@ -0,0 +1,124 @@
+{% capture columns %}
+<div class="columns">
+  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+  <div class="column">5</div>
+</div>
+{% endcapture %}
+
+{% assign columns_link = site.data.links.by_id['columns-basics'] %}
+
+<section class="bd-columns section is-medium">
+  <div class="container">
+    <header class="bd-index-header">
+      <h3 class="title is-3">
+        <a href="{{ site.url }}{{ columns_link.path }}">
+          The <strong>simplest</strong> grid system
+        </a>
+      </h3>
+      <h4 class="subtitle is-4">
+        Just add columns, they will resize themselves
+      </h4>
+    </header>
+
+    <div class="message is-warning is-hidden-tablet">
+      <p class="message-header">
+        Better on desktop
+      </p>
+      <p class="message-body">
+        This interactive tool works better on larger screens! That's because Bulma columns are <strong>vertical by default</strong>. I recommend revisiting this page later when you're on desktop. 😉
+      </p>
+    </div>
+
+    <div id="grid" class="columns">
+      <div class="column">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">1</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">2</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">3</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">4</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">5</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">6</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">7</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">8</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">9</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">10</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">11</p>
+        </div>
+      </div>
+      <div class="column" style="display: none;">
+        <div class="notification is-primary has-text-centered">
+          <p class="title">12</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="bd-columns-tools">
+      <div class="bd-columns-tool bd-is-try">
+        <div class="buttons bd-has-drawing">
+          <a id="add" class="button is-large is-link is-unselectable">
+            <strong>Add column</strong>
+          </a>
+          <a id="remove" class="button is-large is-light is-unselectable">
+            <strong>Remove</strong>
+          </a>
+          {% include elements/drawing.html id='try-it-out' width=150 height=65 %}
+        </div>
+      </div>
+
+      <div class="bd-columns-tool bd-is-markup">
+        <div id="markup">
+          {% highlight html %}{{ columns }}{% endhighlight %}
+        </div>
+      </div>
+    </div>
+
+    <div id="message" class="message is-info">
+      <p class="message-header">Info</p>
+      <p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
+      If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
+    </div>
+  </div>
+</section>

docs/_includes/index/customize.html

@@ -0,0 +1,87 @@
+{% assign customize_link = site.data.links.by_id['overview-customize'] %}
+
+<section id="customize" class="bd-easy section is-medium">
+  <div class="container">
+    <header class="bd-index-header">
+      <h3 class="title is-3">
+        <a href="{{ site.url }}{{ customize_link.path }}">
+          So <strong>quick</strong> to customize
+        </a>
+      </h3>
+      <h4 class="subtitle is-4">
+        Simply set your own Sass variables before importing Bulma
+      </h4>
+    </header>
+
+    <div class="columns">
+      <div class="column is-6">
+        <div class="highlight-full bd-has-drawing">
+          {% highlight scss %}{% include snippets/customized.html %}{% endhighlight %}
+          {% include elements/drawing.html id='customize' width=152 height=76 %}
+        </div>
+      </div>
+
+      <div class="column is-6">
+        <div class="bd-index-custom bd-is-before">
+          <p class="bd-index-custom-title">Before</p>
+          <div class="bd-index-custom-example">
+            <h1 class="title">
+              Bulma
+            </h1>
+            <p class="subtitle">
+              Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
+            </p>
+            <div class="field">
+              <div class="control">
+                <input class="input" type="text" placeholder="Input">
+              </div>
+            </div>
+            <div class="field">
+              <p class="control">
+                <span class="select">
+                  <select>
+                    <option>Select dropdown</option>
+                  </select>
+                </span>
+              </p>
+            </div>
+            <div class="buttons">
+              <a class="button is-primary">Primary</a>
+              <a class="button is-link">Link</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="bd-index-custom bd-is-after">
+          <p class="bd-index-custom-title">After</p>
+          <div class="bd-index-custom-example">
+            <h1 class="title">
+              Bulma
+            </h1>
+            <p class="subtitle">
+              Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
+            </p>
+            <div class="field">
+              <div class="control">
+                <input class="input" type="text" placeholder="Input">
+              </div>
+            </div>
+            <div class="field">
+              <p class="control">
+                <span class="select">
+                  <select>
+                    <option>Select dropdown</option>
+                  </select>
+                </span>
+              </p>
+            </div>
+            <div class="buttons">
+              <a class="button is-primary">Primary</a>
+              <a class="button is-link">Link</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/index/focus.html

@@ -0,0 +1,73 @@
+{% assign responsiveness_link = site.data.links.by_id['overview-responsiveness'] %}
+{% assign modularity_link = site.data.links.by_id['overview-modular'] %}
+{% assign columns_link = site.data.links.by_id['columns-basics'] %}
+
+<div class="bd-focus">
+  <nav class="columns">
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ responsiveness_link.path }}">
+      <p class="title is-4">
+        <strong>100% Responsive</strong>
+      </p>
+      <p class="subtitle is-6">Designed for <strong>mobile</strong> first</p>
+      <figure class="bd-focus-icon">
+        <span class="bd-focus-mobile icon is-large">
+          <i class="fas fa-lg fa-mobile-alt"></i>
+        </span>
+        <span class="bd-focus-tablet icon is-large">
+          <i class="fas fa-2x fa-tablet-alt"></i>
+        </span>
+        <span class="bd-focus-desktop icon is-large">
+          <i class="fas fa-3x fa-desktop"></i>
+        </span>
+      </figure>
+    </a>
+
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ modularity_link.path }}">
+      <p class="title is-4">
+        <strong>Modular</strong>
+      </p>
+      <p class="subtitle is-6">
+        Just import what you <strong>need</strong>
+      </p>
+      <figure class="bd-focus-cubes bd-focus-icon">
+        <span class="bd-focus-cube bd-focus-cube-1 icon is-large">
+          <i class="fas fa-2x fa-cube"></i>
+        </span>
+        <span class="bd-focus-cube bd-focus-cube-2 icon is-large">
+          <i class="fas fa-2x fa-cube"></i>
+        </span>
+        <span class="bd-focus-cube bd-focus-cube-3 icon is-large">
+          <i class="fas fa-2x fa-cube"></i>
+        </span>
+      </figure>
+    </a>
+
+    <a class="bd-focus-item column has-text-centered" href="{{ site.url }}{{ columns_link.path }}">
+      <p class="title is-4">
+        <strong>Modern</strong>
+      </p>
+      <p class="subtitle is-6">
+        Built with <strong>Flexbox</strong>
+      </p>
+      <figure class="bd-focus-icon">
+        <span class="bd-focus-css3 icon is-large">
+          <i class="fab fa-3x fa-css3"></i>
+        </span>
+      </figure>
+    </a>
+
+    <a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}" target="_blank">
+      <p class="title is-4">
+        <strong>Free</strong>
+      </p>
+      <p class="subtitle is-6">
+        Open source on <strong>GitHub</strong>
+      </p>
+      <figure class="bd-focus-icon">
+        <span class="bd-focus-github icon is-large">
+          <i class="fab fa-3x fa-github-alt"></i>
+        </span>
+      </figure>
+    </a>
+  </nav>
+</div>

docs/_includes/index/fullheight.html

@@ -0,0 +1,38 @@
+{% assign hero_link = site.data.links.by_id['layout-hero'] %}
+
+<section class="bd-index-fullscreen hero is-fullheight is-light">
+  <div class="hero-head">
+    <div class="container">
+      <div class="tabs is-centered">
+        <ul>
+          <li><a>This is always at the top</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="hero-body">
+    <div class="container">
+      <header class="bd-index-header">
+        <h3 class="title is-3">
+          <a href="{{ site.url }}{{ hero_link.path }}">
+            <strong>Fullscreen</strong> vertical centering
+          </a>
+        </h3>
+        <h4 class="subtitle is-4">
+          Include any content you want, it's always centered
+        </h4>
+      </header>
+    </div>
+  </div>
+
+  <div class="hero-foot">
+    <div class="container">
+      <div class="tabs is-centered">
+        <ul>
+          <li><a>And this at the bottom</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/index/intro.html

@@ -5,12 +5,12 @@
         <div class="intro-column is-content">
           <div class="intro-content">
             <h1 class="title intro-title">
-              <strong>Bulma</strong> is a free and open source <strong>CSS</strong> framework based on <strong>Flexbox</strong>.
+              <strong>Bulma</strong> is an open source CSS framework based on <strong>Flexbox</strong> and used by more than <strong>100,000</strong> developers.
             </h1>
 
             <div id="ghbtns" class="intro-ghbtns">
               <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
-              <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
+              <img src="https://img.shields.io/npm/dm/bulma.svg">
             </div>
 
             {% assign npmInstall = 'npm install bulma' %}
@@ -48,14 +48,7 @@
         </div>
       </div>
 
-      <div class="intro-partners">
-        <div class="intro-sponsor">
-          {% include sponsor.html %}
-        </div>
-        <div class="intro-carbon">
-          {% include carbon.html %}
-        </div>
-      </div>
+      {% include index/focus.html %}
     </div>
   </div>
 </section>

docs/_includes/index/js.html

@@ -0,0 +1,35 @@
+{% assign css_only_link = site.data.links.by_id['overview-classes'] %}
+
+<section class="bd-easy section is-medium">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
+        <header class="bd-index-header bd-is-left">
+          <h3 class="title is-3">
+            <a href="{{ site.url }}{{ css_only_link.path }}">
+              No <strong>JavaScript</strong> required
+            </a>
+          </h3>
+          <h4 class="subtitle is-4">
+            CSS only, so it integrates in any JS environment
+          </h4>
+          <img src="{{ site.url }}/images/index/js-frameworks.png" width="568" height="91">
+        </header>
+      </div>
+
+      <div class="column">
+        <div class="bd-index-js-tweet">
+          {% assign tweet = site.data.love.tweets_by_id.860885116909998080 %}
+          {% include
+            elements/tw.html
+            tweet=tweet
+            modifier='bd-is-grey'
+            drawing_id='opinion-free'
+            drawing_width=152
+            drawing_height=52
+          %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/index/level.html

@@ -0,0 +1,60 @@
+<section class="section is-medium">
+  <div class="container">
+    <h3 class="title is-2">
+      <a href="{{ site.url }}/documentation/layout/level/">
+        Flexible <strong>horizontal level</strong>
+      </a>
+    </h3>
+    <h4 class="subtitle is-4">Include any type of element, they will remain vertically centered</h4>
+    <nav class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <p class="title is-4">
+            <strong>123</strong> posts
+          </p>
+        </div>
+        <p class="level-item">
+          <a class="button is-link">
+            New
+          </a>
+        </p>
+        <div class="level-item">
+          <div class="field has-addons">
+            <p class="control">
+              <input class="input" type="text" placeholder="Filter">
+            </p>
+            <p class="control">
+              <button class="button">
+                Search
+              </button>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="level-right">
+        <div class="level-item">
+          Show:
+        </div>
+        <p class="level-item">
+          <strong>All</strong>
+        </p>
+        <p class="level-item">
+          <a href="#">Published</a>
+        </p>
+        <p class="level-item">
+          <a href="#">Drafts</a>
+        </p>
+        <div class="level-item">
+          Sort:
+        </div>
+        <div class="level-item">
+          <span class="select">
+            <select>
+              <option>Date created</option>
+            </select>
+          </span>
+        </div>
+      </div>
+    </nav>
+  </div>
+</section>

docs/_includes/index/media-object.html

@@ -0,0 +1,51 @@
+<section class="section is-medium">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
+        <h3 class="title is-2">
+          <span class="icon is-medium">
+            <i class="fas fa-magic"></i>
+          </span>
+          <a href="{{ site.url }}/documentation/layout/media-object/">
+            Versatile <strong>media object</strong>
+          </a>
+        </h3>
+        <h4 class="subtitle is-4">A simple block with an image that will solve 90% of your UI problems</h4>
+      </div>
+
+      <div class="column">
+        <div class="box">
+          <article class="media">
+            <div class="media-left">
+              <figure class="image is-64x64">
+                <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
+              </figure>
+            </div>
+            <div class="media-content">
+              <div class="content">
+                <p>
+                  <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+                  <br>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+                </p>
+              </div>
+              <nav class="level is-mobile">
+                <div class="level-left">
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fas fa-reply"></i></span>
+                  </a>
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fas fa-retweet"></i></span>
+                  </a>
+                  <a class="level-item">
+                    <span class="icon is-small"><i class="fas fa-heart"></i></span>
+                  </a>
+                </div>
+              </nav>
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/index/modifiers.html

@@ -0,0 +1,65 @@
+{% assign modifiers_link = site.data.links.by_id['modifiers-syntax'] %}
+
+<section class="bd-easy section is-medium">
+  <div class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
+        <header class="bd-index-header bd-is-left">
+          <h3 class="title is-3">
+            <a href="{{ site.url }}{{ modifiers_link.path }}">
+              So <strong>easy</strong> to learn
+            </a>
+          </h3>
+          <h4 class="subtitle is-4">
+            Get a design started within minutes
+          </h4>
+        </header>
+
+        {% assign tweet = site.data.love.tweets_by_id.868829487072464897 %}
+        {% include
+          elements/tw.html
+          tweet=tweet
+          modifier='bd-is-grey'
+          drawing_id='crazy'
+          drawing_width=108
+          drawing_height=48
+        %}
+      </div>
+
+      <div class="column">
+        <div class="block">
+          <div class="field">
+            <p class="control">
+              <code>button</code>
+            </p>
+          </div>
+          <a class="button">Button</a>
+        </div>
+        <div class="block">
+          <div class="field">
+            <p class="control">
+              <code>button is-primary</code>
+            </p>
+          </div>
+          <a class="button is-primary">Button</a>
+        </div>
+        <div class="block">
+          <div class="field">
+            <p class="control">
+              <code>button is-primary is-large</code>
+            </p>
+          </div>
+          <a class="button is-primary is-large">Button</a>
+        </div>
+        <div class="block">
+          <div class="field">
+            <p class="control">
+              <code>button is-primary is-large is-loading</code>
+            </p>
+          </div>
+          <a class="button is-primary is-large is-loading">Button</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/index/sponsor.html

@@ -0,0 +1,51 @@
+<div class="section bd-partners">
+  <div class="container">
+    <div class="bd-partners-list">
+      <div class="bd-partner bd-is-sponsor">
+        <p class="bd-partner-title">Sponsors</p>
+        <div class="bd-partner-sponsors">
+          <a href="https://themeisle.com/" target="_blank" rel="nofollow">
+            <img src="{{ site.url }}/images/sponsors/themeisle.png" alt="themeisle logo" width="160" height="40">
+          </a>
+          <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
+            {%
+              include elements/responsive-image.html
+              path="sponsors/chainaxe"
+              extension="png"
+              alt="chainaxe logo"
+              width="85"
+              height="60"
+            %}
+          </a>
+          <a href="https://www.keycdn.com/" target="_blank" rel="nofollow">
+            {%
+              include elements/responsive-image.html
+              path="sponsors/keycdn"
+              extension="png"
+              alt="keycdn logo"
+              width="150"
+              height="43.5"
+            %}
+          </a>
+          <a href="http://tooltwist.com/" target="_blank" rel="nofollow">
+            {%
+              include elements/responsive-image.html
+              path="sponsors/tooltwist"
+              extension="png"
+              alt="tooltwist logo"
+              width="160"
+              height="51"
+            %}
+          </a>
+        </div>
+      </div>
+
+      <div class="bd-partner bd-is-carbon">
+        <p class="bd-partner-title">Ads via Carbon</p>
+        <div class="bd-partner-carbon">
+          {% include elements/carbon.html %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

docs/_includes/index/start.html

@@ -0,0 +1,33 @@
+{% assign docs_link = site.data.links.by_id['overview-start'] %}
+{% assign docs_url = site.url | append: docs_link.path %}
+
+<section class="section is-large">
+  <div class="container">
+    <header class="bd-index-header">
+      <h3 class="title is-3">
+        <a class="bd-has-drawing" href="{{ docs_url }}">
+          And so <strong>much more</strong>
+          {% include elements/drawing.html id='join-us' width=86 height=86 %}
+        </a>
+      </h3>
+      <h4 class="subtitle is-4">
+        Join more than <strong>100,000</strong> developers
+      </h4>
+    </header>
+
+    <div class="hero-buttons">
+      <a class="button is-primary is-large" href="{{ docs_url }}">
+        <span class="icon">
+          <i class="fas fa-book"></i>
+        </span>
+        <span>Get <strong>started</strong></span>
+      </a>
+      <a class="button is-black is-large" href="{{ site.data.meta.github }}" target="_blank">
+        <span class="icon">
+          <i class="fab fa-github"></i>
+        </span>
+        <span>Contribute</span>
+      </a>
+    </div>
+  </div>
+</section>

docs/_includes/index/tiles.html

@@ -0,0 +1,93 @@
+{% capture tiles %}
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child">
+          <!-- Any content you want here -->
+        </article>
+        <article class="tile is-child">
+          <!-- Any content you want here -->
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child">
+          <!-- Any content you want here -->
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child">
+        <!-- Any content you want here -->
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child">
+      <!-- Any content you want here -->
+    </article>
+  </div>
+</div>
+{% endcapture %}
+
+<section class="section is-medium">
+  <div class="container">
+    <h3 class="title is-2">
+      <span class="icon is-medium">
+        <i class="fas fa-th-large"></i>
+      </span>
+      <a href="{{ site.url }}/documentation/layout/tiles">
+        Magic <strong>tiles</strong>
+      </a>
+    </h3>
+    <h4 class="subtitle is-4">A single element for a Metro UI-style CSS grid</h4>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child notification is-primary">
+              <p class="title">Vertical...</p>
+              <p class="subtitle">Top tile</p>
+            </article>
+            <article class="tile is-child notification is-warning">
+              <p class="title">...tiles</p>
+              <p class="subtitle">Bottom tile</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child notification is-info">
+              <p class="title">Middle tile</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child notification is-danger">
+            <p class="title">Wide tile</p>
+            <p class="subtitle">Aligned with the right tile</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-success">
+          <p class="title">Tall tile</p>
+          <p class="subtitle">With even more content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+            <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+            <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="highlight-full">
+      {% highlight html %}{{ tiles }}{% endhighlight %}
+    </div>
+  </div>
+</section>

docs/_includes/index/tws.html

@@ -0,0 +1,17 @@
+{% assign love_link = site.data.links.by_id['love'] %}
+{% assign love_url = site.url | append: love_link.path %}
+
+<section class="bd-tws-home section is-medium">
+  <header class="bd-index-header">
+    <h3 class="title is-3">
+      <a href="{{ love_url }}">
+        A growing <strong>community</strong>
+      </a>
+    </h3>
+    <h4 class="subtitle is-4">
+      See what Bulma fans are saying
+    </h4>
+  </header>
+
+  {% include elements/tws.html %}
+</section>

docs/_includes/index/usual.html

@@ -0,0 +1,12 @@
+<section class="section is-medium">
+  <div class="container">
+    <h3 class="title is-2">
+      <span class="icon is-medium">
+        <i class="fas fa-asterisk"></i>
+      </span>
+      <a href="{{ site.url }}/documentation/elements/box/">
+        And all the usual <strong>elements</strong> and <strong>components</strong>
+      </a>
+    </h3>
+  </div>
+</section>

docs/_includes/layout/main-close.html

@@ -0,0 +1,15 @@
+{% assign current_category = page.doc-tab %}
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign category_links = site.data.links.categories[current_category] %}
+
+        </div>
+      </div>
+
+      <aside class="bd-side">
+        {% if include.show_categories %}
+          {% include components/categories.html %}
+        {% endif %}
+      </aside>
+    </div>
+  </div>
+</main>

docs/_includes/layout/main-open.html

@@ -0,0 +1,6 @@
+<main class="bd-main">
+  <div class="bd-side-background"></div>
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        <div class="bd-content">

docs/_includes/navbar.html

@@ -1,263 +0,0 @@
-<nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}">
-  <div id="specialShadow" class="bd-special-shadow"></div>
-
-  <div class="container">
-
-  <div class="navbar-brand">
-    <a class="navbar-item" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
-    </a>
-
-    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
-      <span class="icon" style="color: #333;">
-        <i class="fab fa-lg fa-github"></i>
-      </span>
-    </a>
-
-    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
-      <span class="icon" style="color: #55acee;">
-        <i class="fab fa-lg fa-twitter"></i>
-      </span>
-    </a>
-
-    <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-  </div>
-
-  <div id="navMenu{{ include.id }}" class="navbar-menu">
-    <div class="navbar-start">
-      <div class="navbar-item has-dropdown is-hoverable">
-        <a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
-          Docs
-        </a>
-        <div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
-          <a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
-            Overview
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
-            Modifiers
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
-            Columns
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
-            Layout
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/">
-            Form
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
-            Elements
-          </a>
-          <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
-            Components
-          </a>
-          <hr class="navbar-divider">
-          <div class="navbar-item">
-            <div>
-              <p class="is-size-6-desktop">
-                <strong>{{ site.data.meta.version }}</strong>
-              </p>
-              {{#unless site.deprecated}}
-                <small>
-                  <a class="bd-view-all-versions" href="https://versions.bulma.io/">View all versions</a>
-                </small>
-              {{/unless}}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="navbar-item has-dropdown is-hoverable">
-        <a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
-          Blog
-        </a>
-        <div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
-          {% for post in site.posts limit:3 %}
-            <a class="navbar-item" href="{{ post.url }}">
-              <div class="navbar-content">
-                <p>
-                  <small class="has-text-link">{{ post.date | date_to_string }}</small>
-                </p>
-                <p>{{ post.title }}</p>
-              </div>
-            </a>
-          {% endfor %}
-          <a class="navbar-item" href="{{ site.url }}/blog/">
-            More posts
-          </a>
-          <hr class="navbar-divider">
-          <div class="navbar-item">
-            <div class="navbar-content">
-              <div class="level is-mobile">
-                <div class="level-left">
-                  <div class="level-item">
-                    <strong>Stay up to date!</strong>
-                  </div>
-                </div>
-                <div class="level-right">
-                  <div class="level-item">
-                    <a class="button bd-is-rss is-small" href="{{ site.url }}/atom.xml">
-                      <span class="icon is-small">
-                        <i class="fas fa-rss"></i>
-                      </span>
-                      <span>Subscribe</span>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="navbar-item has-dropdown is-hoverable">
-        <div class="navbar-link">
-          More
-        </div>
-        <div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
-          <a class="navbar-item {% if page.route == 'bulma-start' %}is-active{% endif %}" href="{{ site.url }}/bulma-start/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large has-text-success">
-                  <i class="fas fa-rocket fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Bulma start</strong>
-                  <br>
-                  <small>A tiny npm package to get started</small>
-                </p>
-              </div>
-            </div>
-          </a>
-          <hr class="navbar-divider">
-          <a class="navbar-item {% if page.route == 'made-with-bulma' %}is-active{% endif %}" href="{{ site.url }}/made-with-bulma/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large has-text-primary">
-                  <i class="fas fa-certificate fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Made with Bulma</strong>
-                  <br>
-                  <small>The official community badge</small>
-                </p>
-              </div>
-            </div>
-          </a>
-          <hr class="navbar-divider">
-          <a id="moreDropdownBootstrap" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/alternative-to-bootstrap/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large">
-                  <i class="fas fa-exchange-alt fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Coming from Bootstrap</strong>
-                  <br>
-                  <small>See how Bulma is an alternative to Bootstrap</small>
-                </p>
-              </div>
-            </div>
-          </a>
-          <hr class="navbar-divider">
-          <a id="moreDropdownPatreon" class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/backers/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large">
-                  <i class="fab fa-patreon fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Patreon backers</strong>
-                  <br>
-                  <small>Everyone who is supporting Bulma</small>
-                </p>
-              </div>
-            </div>
-          </a>
-          <hr class="navbar-divider">
-          <a class="navbar-item {% if page.route == 'extensions' %}is-active{% endif %}" href="{{ site.url }}/extensions/">
-            <div class="media">
-              <div class="media-left">
-                <span class="icon is-large has-text-danger">
-                  <i class="fas fa-plug fa-2x"></i>
-                </span>
-              </div>
-              <div class="media-content">
-                <p>
-                  <strong>Extensions</strong>
-                  <br>
-                  <small>Side projects to enhance Bulma</small>
-                </p>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
-        <span class="bd-emoji">⭐️</span>
-        Expo
-      </a>
-      <a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
-        <span class="bd-emoji">❤️</span>
-        Love
-      </a>
-    </div>
-
-    <div class="navbar-end">
-      <a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
-        <span class="icon" style="color: #333;">
-          <i class="fab fa-lg fa-github"></i>
-        </span>
-      </a>
-      <a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
-        <span class="icon" style="color: #55acee;">
-          <i class="fab fa-lg fa-twitter"></i>
-        </span>
-      </a>
-      <div class="navbar-item">
-        <div class="field is-grouped is-grouped-multiline">
-          <p class="control">
-            <a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
-              <img
-                style="display: block; max-height: 36px;"
-                src="/images/become_a_patron_button.png"
-                width="153"
-                height="36"
-                srcset="/images/become_a_patron_button@3x.png 3x,
-                        /images/become_a_patron_button@2x.png 2x,
-                        /images/become_a_patron_button.png 1x"
-                alt="Become a patron">
-            </a>
-          </p>
-          <p class="control">
-            {% include elements/tw-button.html label="Tweet" %}
-          </p>
-          <p class="control">
-            <a class="button is-primary" href="{{ site.data.meta.download }}">
-              <span class="icon">
-                <i class="fas fa-download"></i>
-              </span>
-              <span>Download</span>
-            </a>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  </div>
-</nav>
-
-{% unless include.hide_fortyfour %}
-  {% include fortyfour.html %}
-{% endunless %}

docs/_includes/newsletter.html

@@ -1,32 +0,0 @@
-<section id="newsletter" class="hero is-primary">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column is-one-third is-left">
-          <p class="title">Bulma <strong>Newsletter</strong></p>
-          <p class="subtitle">Get notified when v1 is ready!</p>
-        </div>
-
-        <div class="column">
-          <form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
-              <div class="field is-grouped">
-                <div class="control has-icons-left is-expanded">
-                  <input type="email" value="" name="email" class="input is-flat required email" placeholder="email address" required>
-                  <span class="icon is-small is-left">
-                    <i class="fas fa-envelope"></i>
-                  </span>
-                </div>
-                <div class="control">
-                  <div class="is-hidden">
-                    <input type="text" name="hp" id="hp">
-                  </div>
-                  <input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
-                  <input type="submit" value="Subscribe" name="submit" id="mc-embedded-subscribe" class="button is-white is-outlined">
-                </div>
-              </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>

docs/_includes/patreon.html

@@ -1,8 +0,0 @@
-<div class="bd-banner is-patreon">
-  <p class="bd-banner-text">
-    <strong>Support Bulma</strong> on Patreon
-  </p>
-  <a class="bd-banner-button" href="https://www.patreon.com/jgthms" target="_blank">
-    <img src="/images/patreon.png" alt="Become a patron">
-  </a>
-</div>

docs/_includes/snippets/customized.html

@@ -0,0 +1,25 @@
+// Import a Google Font
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
+
+// Set your brand colors
+$purple: #8A4D76;
+$pink: #FA7C91;
+$brown: #757763;
+$beige-light: #D0D1CD;
+$beige-lighter: #EFF0EB;
+
+// Update Bulma's global variables
+$family-sans-serif: "Nunito", serif;
+$grey-dark: $brown;
+$grey-light: $beige-light;
+$primary: $purple;
+$link: $pink;
+
+// Update some of Bulma's component variables
+$control-border-width: 2px;
+$input-background-color: $beige-lighter;
+$input-border-color: transparent;
+$input-shadow: none;
+
+// Import the rest of Bulma
+@import "../bulma";

docs/_includes/sponsor.html

@@ -1,38 +0,0 @@
-<div class="bd-sponsor">
-  <p class="bd-sponsor-title">Sponsors</p>
-  <div class="bd-sponsor-list">
-    <a href="https://themeisle.com/" target="_blank" rel="nofollow">
-      <img src="{{ site.url }}/images/sponsors/themeisle.png" alt="themeisle logo">
-    </a>
-    <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
-      {%
-        include elements/responsive-image.html
-        path="sponsors/chainaxe"
-        extension="png"
-        alt="chainaxe logo"
-        width="99"
-        height="70"
-      %}
-    </a>
-    <a href="https://www.keycdn.com/" target="_blank" rel="nofollow">
-      {%
-        include elements/responsive-image.html
-        path="sponsors/keycdn"
-        extension="png"
-        alt="keycdn logo"
-        width="200"
-        height="58"
-      %}
-    </a>
-    <a href="http://tooltwist.com/" target="_blank" rel="nofollow">
-      {%
-        include elements/responsive-image.html
-        path="sponsors/tooltwist"
-        extension="png"
-        alt="tooltwist logo"
-        width="200"
-        height="64"
-      %}
-    </a>
-  </div>
-</div>

docs/_includes/sponsors.html

@@ -1,25 +0,0 @@
-<section class="hero">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column is-4">
-          <p class="title">Bulma <strong>Sponsors</strong></p>
-        </div>
-        <div class="column is-8">
-          <div class="bd-sponsors">
-            <a href="https://chainaxe.io/" target="_blank" rel="nofollow">
-              {%
-                include elements/responsive-image.html
-                path="sponsors/chainaxe"
-                extension="png"
-                alt="chainaxe logo"
-                width="99"
-                height="70"
-              %}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>

docs/_includes/subnav-columns.html

@@ -1,24 +0,0 @@
-<nav class="navbar has-shadow">
-  <div class="container">
-    <div class="navbar-tabs">
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'basics' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
-        Basics
-      </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'sizes' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/sizes/">
-        Sizes
-      </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/responsiveness/">
-        Responsiveness
-      </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
-        Nesting
-      </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
-        Gap
-      </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
-        Options
-      </a>
-    </div>
-  </div>
-</nav>

docs/_includes/test/features.html

@@ -0,0 +1,638 @@
+{% capture form %}
+<div class="field">
+  <label class="label">Form label</label>
+  <div class="control">
+    <input class="input" type="text" placeholder="Input">
+  </div>
+</div>
+<div class="field">
+  <p class="control">
+    <span class="select">
+      <select>
+        <option>Select dropdown</option>
+      </select>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <textarea class="textarea" placeholder="Textarea"></textarea>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <label class="checkbox">
+      <input type="checkbox">
+      Checkbox
+    </label>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <label class="radio">
+      <input type="radio" name="question">
+      Radio
+    </label>
+    <label class="radio">
+      <input type="radio" name="question">
+      Buttons
+    </label>
+  </p>
+</div>
+<div class="field">
+  <p class="control">
+    <a class="button is-link">Button</a>
+  </p>
+</div>
+{% endcapture %}
+
+{% capture box %}
+<div class="box">
+  <article class="media">
+    <div class="media-left">
+      <figure class="image is-64x64">
+        <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
+      </figure>
+    </div>
+    <div class="media-content">
+      <div class="content">
+        <p>
+          <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+          <br>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+        </p>
+      </div>
+      <nav class="level is-mobile">
+        <div class="level-left">
+          <a class="level-item">
+            <span class="icon is-small"><i class="fas fa-reply"></i></span>
+          </a>
+          <a class="level-item">
+            <span class="icon is-small"><i class="fas fa-retweet"></i></span>
+          </a>
+          <a class="level-item">
+            <span class="icon is-small"><i class="fas fa-heart"></i></span>
+          </a>
+        </div>
+      </nav>
+    </div>
+  </article>
+</div>
+{% endcapture %}
+
+{% capture button %}
+<div class="field is-grouped is-grouped-multiline">
+  <div class="control"><a class="button">Button</a></div>
+  <div class="control"><a class="button is-white">White</a></div>
+  <div class="control"><a class="button is-light">Light</a></div>
+  <div class="control"><a class="button is-dark">Dark</a></div>
+  <div class="control"><a class="button is-black">Black</a></div>
+  <div class="control"><a class="button is-text">Text</a></div>
+</div>
+
+<div class="field is-grouped is-grouped-multiline">
+  <div class="control"><a class="button is-primary">Primary</a></div>
+  <div class="control"><a class="button is-link">Link</a></div>
+  <div class="control"><a class="button is-info">Info</a></div>
+  <div class="control"><a class="button is-success">Success</a></div>
+  <div class="control"><a class="button is-warning">Warning</a></div>
+  <div class="control"><a class="button is-danger">Danger</a></div>
+</div>
+{% endcapture %}
+
+{% capture notification %}
+<div class="notification is-primary">
+  <button class="delete"></button>
+  Lorem ipsum dolor sit amet, consectetur
+  adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
+  consectetur adipiscing elit
+</div>
+{% endcapture %}
+
+{% capture progress %}
+<progress class="progress is-primary" value="30" max="100">30%</progress>
+{% endcapture %}
+
+{% capture tags %}
+<span class="tag is-black">Black</span>
+<span class="tag is-dark">Dark</span>
+<span class="tag is-light">Light</span>
+<span class="tag is-white">White</span>
+<span class="tag is-primary">Primary</span>
+<span class="tag is-link">Link</span>
+<span class="tag is-info">Info</span>
+<span class="tag is-success">Success</span>
+<span class="tag is-warning">Warning</span>
+<span class="tag is-danger">Danger</span>
+{% endcapture %}
+
+{% capture cards %}
+<div class="columns">
+  <div class="column is-half">
+    <div class="card">
+      <div class="card-image">
+        <figure class="image is-4by3">
+          <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
+        </figure>
+      </div>
+      <div class="card-content">
+        <div class="media">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
+            </figure>
+          </div>
+          <div class="media-content">
+            <p class="title is-4">John Smith</p>
+            <p class="subtitle is-6">@johnsmith</p>
+          </div>
+        </div>
+
+        <div class="content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+          <a>#css</a> <a>#responsive</a>
+          <br>
+          <small>11:09 PM - 1 Jan 2016</small>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="column is-half">
+    <div class="card">
+      <div class="card-content">
+        <p class="title">
+          “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
+        </p>
+        <p class="subtitle">
+          Jeff Atwood
+        </p>
+      </div>
+      <footer class="card-footer">
+        <p class="card-footer-item">
+          <span>
+            View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
+          </span>
+        </p>
+        <p class="card-footer-item">
+          <span>
+            Share on <a href="#">Facebook</a>
+          </span>
+        </p>
+      </footer>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture dropdown %}
+<div class="dropdown is-active">
+  <div class="dropdown-trigger">
+    <a class="button">
+      <span>Dropdown button</span>
+      <span class="icon is-small">
+        <i class="fas fa-angle-down"></i>
+      </span>
+    </a>
+  </div>
+  <div class="dropdown-menu">
+    <div class="dropdown-content">
+      <a class="dropdown-item">
+        Dropdown item
+      </a>
+      <a class="dropdown-item">
+        Other dropdown item
+      </a>
+      <a class="dropdown-item is-active">
+        Active dropdown item
+      </a>
+      <a class="dropdown-item">
+        Other item
+      </a>
+      <hr class="dropdown-divider">
+      <a class="dropdown-item">
+        With a divider
+      </a>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+{% capture message %}
+<article class="message is-primary">
+  <div class="message-header">
+    <p>Primary</p>
+    <button class="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+  </div>
+</article>
+{% endcapture %}
+
+{% capture pagination %}
+<nav class="pagination">
+  <a class="pagination-previous">Previous</a>
+  <a class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li>
+      <a class="pagination-link">1</a>
+    </li>
+    <li>
+      <span class="pagination-ellipsis">&hellip;</span>
+    </li>
+    <li>
+      <a class="pagination-link">45</a>
+    </li>
+    <li>
+      <a class="pagination-link is-current">46</a>
+    </li>
+    <li>
+      <a class="pagination-link">47</a>
+    </li>
+    <li>
+      <span class="pagination-ellipsis">&hellip;</span>
+    </li>
+    <li>
+      <a class="pagination-link">86</a>
+    </li>
+  </ul>
+</nav>
+{% endcapture %}
+
+{% capture panel %}
+<nav class="panel">
+  <p class="panel-heading">
+    Repositories
+  </p>
+  <div class="panel-block">
+    <p class="control has-icons-left">
+      <input class="input is-small" type="text" placeholder="Search">
+      <span class="icon is-small is-left">
+        <i class="fas fa-search"></i>
+      </span>
+    </p>
+  </div>
+  <p class="panel-tabs">
+    <a class="is-active">All</a>
+    <a>Public</a>
+    <a>Private</a>
+    <a>Sources</a>
+    <a>Forks</a>
+  </p>
+  <a class="panel-block is-active">
+    <span class="panel-icon">
+      <i class="fas fa-book"></i>
+    </span>
+    bulma
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book"></i>
+    </span>
+    marksheet
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book"></i>
+    </span>
+    minireset.css
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book"></i>
+    </span>
+    jgthms.github.io
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-code-branch"></i>
+    </span>
+    daniellowtw/infBoard
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-code-branch"></i>
+    </span>
+    mojs
+  </a>
+  <label class="panel-block">
+    <input type="checkbox">
+    Remember me
+  </label>
+  <div class="panel-block">
+    <button class="button is-link is-outlined is-fullwidth">
+      Reset all filters
+    </button>
+  </div>
+</nav>
+{% endcapture %}
+
+{% capture tabs %}
+<div class="tabs is-boxed">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fas fa-image"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fas fa-music"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fas fa-film"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
+{% endcapture %}
+
+{% capture media %}
+<article class="media">
+  <figure class="media-left">
+    <p class="image is-64x64">
+      <img src="{{ site.url }}/images/placeholders/128x128.png">
+    </p>
+  </figure>
+  <div class="media-content">
+    <div class="content">
+      <p>
+        <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
+        <br>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+      </p>
+    </div>
+    <nav class="level is-mobile">
+      <div class="level-left">
+        <a class="level-item">
+          <span class="icon is-small"><i class="fas fa-reply"></i></span>
+        </a>
+        <a class="level-item">
+          <span class="icon is-small"><i class="fas fa-retweet"></i></span>
+        </a>
+        <a class="level-item">
+          <span class="icon is-small"><i class="fas fa-heart"></i></span>
+        </a>
+      </div>
+    </nav>
+  </div>
+  <div class="media-right">
+    <button class="delete"></button>
+  </div>
+</article>
+{% endcapture %}
+
+{% capture menu %}
+<aside class="menu">
+  <p class="menu-label">
+    General
+  </p>
+  <ul class="menu-list">
+    <li><a>Dashboard</a></li>
+    <li><a>Customers</a></li>
+  </ul>
+  <p class="menu-label">
+    Administration
+  </p>
+  <ul class="menu-list">
+    <li><a>Team Settings</a></li>
+    <li>
+      <a class="is-active">Manage Your Team</a>
+      <ul>
+        <li><a>Members</a></li>
+        <li><a>Plugins</a></li>
+        <li><a>Add a member</a></li>
+      </ul>
+    </li>
+    <li><a>Invitations</a></li>
+    <li><a>Cloud Storage Environment Settings</a></li>
+    <li><a>Authentication</a></li>
+  </ul>
+  <p class="menu-label">
+    Transactions
+  </p>
+  <ul class="menu-list">
+    <li><a>Payments</a></li>
+    <li><a>Transfers</a></li>
+    <li><a>Balance</a></li>
+  </ul>
+</aside>
+{% endcapture %}
+
+<section class="section">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-2">
+        <h4 class="title is-4"><strong>Elements</strong></h4>
+      </div>
+      <div class="column is-10">
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/form/general/">
+                Form
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ form }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/elements/box/">
+                Box
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ box }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/elements/button/">
+                Button
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ button }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/elements/notification/">
+                Notification
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ notification }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/elements/progress/">
+                Progress bar
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ progress }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/elements/tag/">
+                Tags
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ tags }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section class="section">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-2">
+        <h4 class="title is-4"><strong>Components</strong></h4>
+      </div>
+      <div class="column is-10">
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/components/card/">
+                Card
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ cards }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/components/dropdown/">
+                Dropdown
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9" style="height: 16rem;">
+            {{ dropdown }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/components/message/">
+                Message
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ message }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/components/pagination/">
+                Pagination
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ pagination }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/components/tabs/">
+                Tabs
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ tabs }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/layout/media-object/">
+                Media object
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            {{ media }}
+          </div>
+        </div>
+
+        <div class="columns">
+          <div class="column is-3">
+            <h4 class="subtitle is-4 bd-feature-title">
+              <a href="{{ site.url }}/documentation/components/menu/">
+                Menu
+              </a>
+              and
+              <a href="{{ site.url }}/documentation/components/panel/">
+                Panel
+              </a>
+            </h4>
+          </div>
+          <div class="column is-9">
+            <div class="columns">
+              <div class="column is-half">
+                {{ menu }}
+              </div>
+              <div class="column is-half">
+                {{ panel }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/test/from-to.html

@@ -0,0 +1,31 @@
+<section class="section">
+  <div class="container">
+    <div class="bd-fromto">
+      <h1 class="title">
+        Bulma
+      </h1>
+      <p class="subtitle">
+        Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
+      </p>
+      <div class="field">
+        <label class="label">Form label</label>
+        <div class="control">
+          <input class="input" type="text" placeholder="Input">
+        </div>
+      </div>
+      <div class="field">
+        <p class="control">
+          <span class="select">
+            <select>
+              <option>Select dropdown</option>
+            </select>
+          </span>
+        </p>
+      </div>
+      <div class="buttons">
+        <a class="button is-primary">Primary</a>
+        <a class="button is-link">Link</a>
+      </div>
+    </div>
+  </div>
+</section>

docs/_includes/testimonials.html

@@ -1,41 +0,0 @@
-<div class="container">
-  <div class="columns">
-    <div class="column is-4">
-      <article class="bd-testimonial">
-        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/868829487072464897">May 28, 2017</a></blockquote>
-      </article>
-
-      <article class="bd-testimonial">
-        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! 😍</p>&mdash; Simon Jaeger (@simonjaegr) <a href="https://twitter.com/simonjaegr/status/834140257054502913">February 21, 2017</a></blockquote>
-      </article>
-    </div>
-
-    <div class="column is-4">
-      <article class="bd-testimonial">
-        <blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Bulma, I think I&#39;m in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; Jesse Schoff (@jesseschoff) <a href="https://twitter.com/jesseschoff/status/869284735440363520">May 29, 2017</a></blockquote>
-      </article>
-
-      <article class="bd-testimonial">
-        <blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">https://t.co/ClYmBd8tGR</a> is an impressive CSS framework.  Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯  <a href="https://twitter.com/jgthms">@jgthms</a>.</p>&mdash; scottgallant (@scottgallant) <a href="https://twitter.com/scottgallant/status/835834634655174658">February 26, 2017</a></blockquote>
-      </article>
-    </div>
-
-    <div class="column is-4">
-      <article class="bd-testimonial">
-        <blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">https://t.co/OAMLjKWzak</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far 👍</p>&mdash; mario zupan (@mzupzup) <a href="https://twitter.com/mzupzup/status/874925154475929602">June 14, 2017</a></blockquote>
-      </article>
-
-      <article class="bd-testimonial">
-        <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better 😍</p>&mdash; juliooooo (@juliooooo000) <a href="https://twitter.com/juliooooo000/status/819710615337857024">January 13, 2017</a></blockquote>
-      </article>
-    </div>
-  </div>
-
-  <div class="bd-more-loves">
-    <p class="bd-more-loves-container">
-      <a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
-        <span>See more <strong>love</strong> 🤗</span>
-      </a>
-    </p>
-  </div>
-</div>

docs/_includes/tws.html

@@ -1,32 +0,0 @@
-<div class="container">
-  <div class="columns">
-    <div class="column is-4">
-      {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include tw.html tweet=tweet%}
-    </div>
-
-    <div class="column is-4">
-      {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include tw.html tweet=tweet%}
-    </div>
-
-    <div class="column is-4">
-      {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include tw.html tweet=tweet%}
-      {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include tw.html tweet=tweet%}
-    </div>
-  </div>
-
-  <div class="bd-more-loves">
-    <p class="bd-more-loves-container">
-      <a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
-        <span>See more <strong>love</strong> 🤗</span>
-      </a>
-    </p>
-  </div>
-</div>

docs/_javascript/index.js

@@ -47,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => {
       $message.style.display = 'none';
     }
 
-    showing = Math.min(Math.max(parseInt(showing), 2), 12);
+    showing = Math.min(Math.max(parseInt(showing), 1), 12);
 
     $columns.forEach($el => {
       $el.style.display = 'none';

docs/_javascript/main.js

@@ -5,25 +5,95 @@ document.addEventListener('DOMContentLoaded', () => {
   const cookieBookModalName = 'bulma_closed_book_modal';
   const cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
 
-  // Book modal
-
-  // const $bookModal = document.getElementById('bookModal');
-  // const $bookModalCloseButtons = getAll('.bd-book-modal-close');
-
-  // if (!cookieBookModal) {
-  //   setTimeout(() => {
-  //     openModal('bookModal');
-  //   }, 5000);
-  // }
-
-  // if ($bookModalCloseButtons.length > 0) {
-  //   $bookModalCloseButtons.forEach($el => {
-  //     $el.addEventListener('click', event => {
-  //       event.stopPropagation();
-  //       Cookies.set(cookieBookModalName, true, { expires: 30 });
-  //     });
-  //   });
-  // }
+  // Sidebar links
+
+  const $categories = getAll('#categories .bd-category');
+
+  if ($categories.length > 0) {
+    $categories.forEach(el => {
+      const toggle_el = el.querySelector('.bd-category-toggle');
+
+      toggle_el.addEventListener('click', event => {
+        closeCategories(el);
+        el.classList.toggle('is-active');
+      });
+    });
+  }
+
+  function closeCategories(current_el) {
+    $categories.forEach(el => {
+      if (current_el == el) {
+        return;
+      }
+      el.classList.remove('is-active');
+    });
+  }
+
+  const anchors_ref_el = document.getElementById('anchorsReference');
+  const anchors_el = document.getElementById('anchors');
+  const anchor_links_el = getAll('.bd-anchor-link');
+
+  let anchors_by_id = {};
+  let anchors_order = [];
+  let anchor_nav_els = [];
+
+  if (anchors_el && anchor_links_el.length > 0) {
+    anchors_el.classList.add('is-active');
+    const anchors_el_list = anchors_el.querySelector('.bd-anchors-list');
+
+    anchor_links_el.forEach((el, index) => {
+      const link_target = el.getAttribute('href');
+      const link_text = el.previousElementSibling.innerText;
+
+      if (link_text != '') {
+        const item_el = createAnchorLink(link_text, link_target);
+        anchors_el_list.appendChild(item_el);
+
+        const anchor_key = link_target.substring(1); // #target -> target
+        anchors_by_id[anchor_key] = {
+          id: anchor_key,
+          index,
+          target: link_target,
+          text: link_text,
+          nav_el: item_el,
+        };
+        anchors_order.push(anchor_key);
+        anchor_nav_els.push(item_el);
+      }
+    });
+
+    const back_to_top_el = createAnchorLink('Back to top', '');
+    back_to_top_el.onclick = scrollToTop;
+    anchors_el_list.appendChild(back_to_top_el);
+  }
+
+  function scrollToTop() {
+    window.scrollTo(0, 0);
+  }
+
+  function createAnchorLink(text, target) {
+    const item_el = document.createElement('li');
+    const link_el = document.createElement('a');
+    const text_node = document.createTextNode(text);
+
+    if (target) {
+      link_el.setAttribute('href', target);
+    }
+
+    link_el.appendChild(text_node);
+    item_el.appendChild(link_el);
+
+    return item_el;
+  }
+
+  function closeCategories(current_el) {
+    $categories.forEach(el => {
+      if (current_el == el) {
+        return;
+      }
+      el.classList.remove('is-active');
+    });
+  }
 
   // Meta links
 
@@ -36,7 +106,6 @@ document.addEventListener('DOMContentLoaded', () => {
         const target = $el.getAttribute('href');
         const $target = document.getElementById(target.substring(1));
         $target.scrollIntoView(true);
-        // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
         return false;
       });
     });
@@ -197,6 +266,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Scrolling
 
+  const html_el = document.documentElement;
   const navbarEl = document.getElementById('navbar');
   const navbarBurger = document.getElementById('navbarBurger');
   const specialShadow = document.getElementById('specialShadow');
@@ -218,6 +288,76 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  // Anchors highlight
+
+  let past_anchors = [];
+  anchor_links_el.reverse();
+  const trigger_offset = 24 ; // In pixels
+  const typo_el = document.getElementById('typo');
+
+  function whenScrolling() {
+    if (anchors_ref_el) {
+      const bounds = anchors_ref_el.getBoundingClientRect();
+      const anchors_height = anchors_el.clientHeight;
+      const typo_bounds = typo_el.getBoundingClientRect();
+      const typo_height = typo_el.clientHeight;
+
+      if (bounds.top < 1 && typo_bounds.top - anchors_height + typo_height > 0) {
+        anchors_el.classList.add('is-pinned');
+      } else {
+        anchors_el.classList.remove('is-pinned');
+      }
+
+      anchor_links_el.some(el => {
+        const bounds = el.getBoundingClientRect();
+        const href = el.getAttribute('href');
+        const key = href.substring(1); // #target -> target
+
+        if (bounds.top < 1 + trigger_offset && past_anchors.indexOf(key) == -1) {
+          past_anchors.push(key);
+          highlightAnchor();
+          return;
+        } else if (bounds.top > 0 + trigger_offset && past_anchors.indexOf(key) != -1) {
+          removeFromArray(past_anchors, key);
+          highlightAnchor();
+          return;
+        }
+      });
+    }
+  }
+
+  function highlightAnchor() {
+    const future_anchors = anchors_order.diff(past_anchors);
+    let highest_index = -1;
+    let highest_anchor_key = '';
+
+    if (past_anchors.length > 0) {
+      past_anchors.forEach((key, index) => {
+        const anchor = anchors_by_id[key];
+        anchor.nav_el.className = 'is-past';
+
+        // Keep track of the bottom most item
+        if (anchor.index > highest_index) {
+          highest_index = anchor.index;
+          highest_anchor_key = key;
+        }
+      });
+
+      if (highest_anchor_key in anchors_by_id) {
+        anchors_by_id[highest_anchor_key].nav_el.className = 'is-current';
+      }
+    }
+
+    if (future_anchors.length > 0) {
+      future_anchors.forEach((key, index) => {
+        const anchor = anchors_by_id[key];
+        anchor.nav_el.className = '';
+      });
+    }
+  }
+
+  // Scroll
+
   function upOrDown(lastY, currentY) {
     if (currentY >= lastY) {
       return goingDown(currentY);
@@ -280,11 +420,12 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     const translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
-    specialShadow.style.opacity = scrollFactor;
-    specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
-  }
 
-  translateHeader(window.scrollY, false);
+    if (specialShadow) {
+      specialShadow.style.opacity = scrollFactor;
+      specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
+    }
+  }
 
   let ticking = false;
   let lastY = 0;
@@ -294,7 +435,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     if (!ticking) {
       window.requestAnimationFrame(function() {
-        upOrDown(lastY, currentY);
+        // upOrDown(lastY, currentY);
+        whenScrolling();
         ticking = false;
         lastY = currentY;
       });
@@ -303,4 +445,19 @@ document.addEventListener('DOMContentLoaded', () => {
     ticking = true;
   });
 
+  // Utils
+
+  function removeFromArray(array, value) {
+    if (array.includes(value)) {
+      const value_index = array.indexOf(value);
+      array.splice(value_index, 1);
+    }
+
+    return array;
+  }
+
+  Array.prototype.diff = function(a) {
+    return this.filter(function(i) {return a.indexOf(i) < 0;});
+  };
+
 });

docs/_layouts/default.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" class="has-navbar-fixed-top {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
-  {% include head.html %}
+<html lang="en" class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
+  {% include global/head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
-    {% include deprecated.html %}
+    {% include global/deprecated.html %}
     {{ content }}
-    {% include footer.html %}
+    {% include global/footer.html %}
   </body>
 </html>

docs/_layouts/documentation.html

@@ -3,73 +3,91 @@ layout: default
 route: documentation
 ---
 
-{% include navbar.html id="Documentation" has_container=true %}
+{% include global/navbar.html id="Documentation" %}
 
-<section class="hero is-link">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column">
-          <p class="title">
-            Documentation
-          </p>
-          <p class="subtitle">
-            Everything you need to <strong>create a website</strong> with Bulma
-          </p>
-        </div>
-        <div class="column is-narrow">
-          {% include carbon.html %}
+{% assign current_category = page.doc-tab %}
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign current_link = site.data.links.by_id[current_link_id] %}
+{% assign category_links = site.data.links.categories[current_category] %}
+
+{% for link_id in category_links %}
+  {% if link_id == current_link_id %}
+    {% unless forloop.first %}
+      {% assign previous_index = forloop.index0 | minus: 1 %}
+      {% assign previous_link_id = category_links[previous_index] %}
+      {% assign previous_link = site.data.links.by_id[previous_link_id] %}
+    {% endunless %}
+
+    {% unless forloop.last %}
+      {% assign next_index = forloop.index0 | plus: 1 %}
+      {% assign next_link_id = category_links[next_index] %}
+      {% assign next_link = site.data.links.by_id[next_link_id] %}
+    {% endunless %}
+  {% endif %}
+{% endfor %}
+
+<main class="bd-main">
+  <div class="bd-side-background"></div>
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        {% include components/breadcrumb.html %}
+
+        <header class="bd-header">
+          <div class="bd-header-titles">
+            <h1 class="title">
+              {{ page.title }}
+            </h1>
+            <p class="subtitle is-4">
+              {% if page.subtitle %}
+                {{ page.subtitle }}
+              {% else %}
+                {{ current_link.subtitle }}
+              {% endif %}
+            </p>
+            {% if page.meta %}
+              {%
+                include elements/meta.html
+                colors=page.meta.colors
+                sizes=page.meta.sizes
+                variables=page.meta.variables
+                experimental=page.meta.experimental
+              %}
+            {% endif %}
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include elements/carbon.html %}
+          </div>
+        </header>
+
+        <div class="bd-content">
+          {{ content }}
         </div>
-      </div>
-    </div>
-  </div>
 
-  <div class="hero-foot">
-    <div class="container">
-      <nav class="tabs is-boxed">
-        <ul>
-          <li {% if page.doc-tab == 'overview' %}class="is-active"{% endif %}>
-            <a href="{{ site.data.meta.documentation }}">Overview</a>
-          </li>
-          <li {% if page.doc-tab == 'modifiers' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/modifiers/syntax">Modifiers</a>
-          </li>
-          <li {% if page.doc-tab == 'columns' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/columns/basics">Columns</a>
-          </li>
-          <li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/layout/container/">Layout</a>
-          </li>
-          <li {% if page.doc-tab == 'form' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/form/general">Form</a>
-          </li>
-          <li {% if page.doc-tab == 'elements' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/elements/box/">Elements</a>
-          </li>
-          <li {% if page.doc-tab == 'components' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/components/breadcrumb/">Components</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-</section>
+        <nav class="bd-prev-next-bis">
+          {% if previous_link %}
+            <a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+              ← {{ previous_link.name }}
+            </a>
+          {% endif %}
 
-{{ content }}
+          {% if next_link %}
+            <a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+              {{ next_link.name }} →
+            </a>
+          {% endif %}
+        </nav>
 
-<section class="section bd-typo">
-  <div class="container">
-    <p class="has-text-centered has-text-grey-light">
-      <a href="{{ site.url }}/made-with-bulma/">
-        <img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
-      </a>
-      <br>
-      This page is <strong class="has-text-grey">open source</strong>.
-      Noticed a typo? Or something unclear?
-      <br>
-      <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
-        Improve this page on GitHub
-      </a>
-    </p>
+        {% include elements/improve-page.html %}
+      </div>
+
+      <aside class="bd-side">
+        {% unless page.hide_categories %}
+          {% include components/categories.html %}
+          {% include components/anchors.html %}
+        {% endunless %}
+      </aside>
+    </div>
   </div>
-</section>
+</main>

docs/_layouts/more.html

@@ -0,0 +1,85 @@
+---
+layout: default
+route: more
+---
+
+{% include global/navbar.html id="More" %}
+
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign current_link = site.data.links.by_id[current_link_id] %}
+
+{% assign category_links = site.data.links.more %}
+
+{% for link_id in category_links %}
+  {% if link_id == current_link_id %}
+    {% unless forloop.first %}
+      {% assign previous_index = forloop.index0 | minus: 1 %}
+      {% assign previous_link_id = category_links[previous_index] %}
+      {% assign previous_link = site.data.links.by_id[previous_link_id] %}
+    {% endunless %}
+
+    {% unless forloop.last %}
+      {% assign next_index = forloop.index0 | plus: 1 %}
+      {% assign next_link_id = category_links[next_index] %}
+      {% assign next_link = site.data.links.by_id[next_link_id] %}
+    {% endunless %}
+  {% endif %}
+{% endfor %}
+
+<main class="bd-main">
+  <div class="bd-side-background"></div>
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        {% include components/breadcrumb.html %}
+
+        <header class="bd-header">
+          <div class="bd-header-titles">
+            <h1 class="title">
+              {% if page.title %}
+                {{ page.title }}
+              {% else %}
+                {{ current_link.name }}
+              {% endif %}
+            </h1>
+            <p class="subtitle is-4">
+              {% if page.subtitle %}
+                {{ page.subtitle }}
+              {% else %}
+                {{ current_link.subtitle }}
+              {% endif %}
+            </p>
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include elements/carbon.html %}
+          </div>
+        </header>
+
+        <div class="bd-content">
+          {{ content }}
+        </div>
+
+        <nav class="bd-prev-next-bis">
+          {% if previous_link %}
+            <a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+              ← {{ previous_link.name }}
+            </a>
+          {% endif %}
+
+          {% if next_link %}
+            <a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+              {{ next_link.name }} →
+            </a>
+          {% endif %}
+        </nav>
+
+        {% include elements/improve-page.html %}
+      </div>
+
+      <aside class="bd-side">
+        {% include components/more.html %}
+      </aside>
+    </div>
+  </div>
+</main>

docs/_layouts/post.html

@@ -1,51 +1,99 @@
 ---
 layout: default
 route: blog
+breadcrumb:
+- home
+- blog
 ---
 
-{% include navbar.html id="BlogHero" %}
-
-<div class="bd-article-image is-single is-{{ page.color }}">
-  <span class="bd-article-overlay"></span>
-  <span class="bd-article-icon">
-    <i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
-  </span>
-  <strong class="bd-article-info">
-    <span>
-      <time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
-        {{ page.date | date_to_string }}
-      </time>
-      <strong class="bd-article-title">
-        {{ page.name }}
-      </strong>
-    </span>
-  </strong>
-</div>
-
-<section class="section">
-  <div class="container">
-    <div class="columns">
-      <div class="column is-offset-2 is-8">
-        <p class="subtitle is-6">
-          <a class="bd-article-back" href="{{ site.url }}/blog">Back to Blog home</a>
-        </p>
-        <h1 class="title is-2">
-          {{ page.title }}
-        </h1>
-        </article>
-        <hr>
-        <div class="content is-medium">
-          {{ content }}
+{% include global/navbar.html id="Blog" %}
+
+<main class="bd-main">
+  <div class="bd-side-background"></div>
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        <div class="bd-breadcrumb">
+          <nav class="breadcrumb" aria-label="breadcrumbs">
+            <ul>
+              <li>
+                {% assign link = site.data.links.by_id['home'] %}
+                <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
+              </li>
+              <li>
+                {% assign link = site.data.links.by_id['blog'] %}
+                <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
+              </li>
+              <li class="is-active">
+                <a href="{{ page.url }}">{{ page.name }}</a>
+              </li>
+            </ul>
+          </nav>
+
+          {% if page.previous.url or page.next.url %}
+            <nav class="bd-prev-next">
+              {% if page.previous.url %}
+                <a href="{{ site.url }}{{ page.previous.url }}">
+                  ←
+                </a>
+              {% else %}
+                <span>
+                  ←
+                </span>
+              {% endif %}
+
+              {% if page.next.url %}
+                <a href="{{ site.url }}{{ page.next.url }}">
+                  →
+                </a>
+              {% else %}
+                <span>
+                  →
+                </span>
+              {% endif %}
+            </nav>
+          {% endif %}
+        </div>
+
+        <header class="bd-header">
+          <div class="bd-header-titles">
+            <h1 class="title">
+              {{ page.title }}
+            </h1>
+            <p class="subtitle is-4">
+              {{ page.date | date_to_string }}
+            </p>
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include elements/carbon.html %}
+          </div>
+        </header>
+
+        <div class="bd-content">
+          <div class="columns">
+            <div class="column is-offset-2 is-8">
+              <div class="bd-post content is-medium">
+                {{ content }}
+              </div>
+            </div>
+          </div>
         </div>
-        <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+
+        <nav class="bd-prev-next-bis">
           {% if page.previous.url %}
-            <a class="pagination-previous" href="{{ page.previous.url }}">Previous post</a>
+            <a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
+              ← {{ page.previous.title }}
+            </a>
           {% endif %}
+
           {% if page.next.url %}
-            <a class="pagination-next" href="{{ page.next.url }}">Next post</a>
+            <a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
+              {{ page.next.title }} →
+            </a>
           {% endif %}
         </nav>
       </div>
     </div>
   </div>
-</section>
+</main>

docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: "Blog launched, new responsive columns, new helpers"
-introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes."
+introduction: "Stay updated with everything that's coming up with Bulma"
+long_introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes."
 color: "danger"
 name: "Launch!"
 icon: "rocket"

docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: "Metro UI CSS grid with Bulma tiles"
-introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
+introduction: "Build a **Metro-UI-like grid in CSS** with the new `tile` element"
+long_introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
 color: "info"
 name: "Metro UI"
 icon: "th-large"

docs/_posts/2017-03-10-new-field-element.md

@@ -2,10 +2,12 @@
 layout: post
 title: "New field element (for better controls)"
 published: true
-introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
+introduction: "A new versatile container for form controls"
+long_introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
 color: "success"
 name: "Field element"
 icon: "square"
+icon_regular: true
 ---
 
 **TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**

docs/_posts/2017-07-24-access-previous-bulma-versions.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: "Access previous Bulma versions"
-introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/)"
+introduction: "It is now possible to **access previous versions** of Bulma"
+long_introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/)"
 color: "primary"
 name: "Versions"
 icon: "undo"

docs/_posts/2017-08-01-bulma-bootstrap-comparison.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: "Bulma / Bootstrap comparison"
-introduction: "If you're unsure _how_ or _why_ you should try out Bulma if you're familiar to Bootstrap, the new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) tries to help you answer questions you might have."
+introduction: "New page \"Alternative to Bootstrap\""
+long_introduction: "If you're unsure _how_ or _why_ you should try out Bulma if you're familiar to Bootstrap, the new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) tries to help you answer questions you might have."
 color: "bootstrap"
 name: "Bulma over Bootstrap?"
 icon: "heart"

docs/_posts/2017-08-03-list-of-tags.md

@@ -2,7 +2,7 @@
 layout: post
 title: "New feature: list of tags"
 introduction: "What's better than one tag? Multiple tags!"
-color: "orange"
+color: "success"
 name: "List of tags"
 icon: "tag"
 ---
@@ -17,4 +17,4 @@ A tag rarely comes on its own though, so Bulma now supports [list of tags](/docu
   </a>
 </figure>
 
-As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!
+As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!

docs/_posts/2017-10-09-roses-are-red-links-are-blue.md

@@ -3,8 +3,8 @@ layout: post
 title: "Roses are red – Links are blue"
 introduction: "What's better than one tag? Multiple tags!"
 color: "link"
-name: "Roses are red<br>Links are blue"
-icon: "tag"
+name: "Roses are red and links are blue"
+icon: "link"
 ---
 
 By default, a browser will display links in <strong style="color: blue;">blue</strong>. Bulma has up until now used the `$primary` color as the `$link` color:
@@ -89,4 +89,4 @@ If you want to use the `$primary` color for your links, just **customize** your
 $link: $primary !default
 $link-invert: $primary-invert !default
 $link-focus-border: $primary !default
-```
+```

docs/_posts/2017-11-14-bulma-is-on-patreon.md

@@ -2,7 +2,7 @@
 title: "Bulma is on Patreon!"
 layout: post
 introduction: "Support Bulma's future"
-color: "primary"
+color: "patreon"
 name: "Bulma on Patreon"
 icon: "patreon"
 icon_brand: true