Do elements

docs/_data/links.json

@@ -40,10 +40,50 @@
       "name": "Elements",
       "path": "/documentation/elements"
     },
-    "button": {
+    "elements-box": {
+      "name": "Box",
+      "path": "/documentation/elements/box"
+    },
+    "elements-button": {
       "name": "Button",
       "path": "/documentation/elements/button"
     },
+    "elements-content": {
+      "name": "Content",
+      "path": "/documentation/elements/content"
+    },
+    "elements-delete": {
+      "name": "Delete",
+      "path": "/documentation/elements/delete"
+    },
+    "elements-icon": {
+      "name": "Icon",
+      "path": "/documentation/elements/icon"
+    },
+    "elements-image": {
+      "name": "Image",
+      "path": "/documentation/elements/image"
+    },
+    "elements-notification": {
+      "name": "Notification",
+      "path": "/documentation/elements/notification"
+    },
+    "elements-progress": {
+      "name": "Progress bars",
+      "path": "/documentation/elements/progress"
+    },
+    "elements-table": {
+      "name": "Table",
+      "path": "/documentation/elements/table"
+    },
+    "elements-tag": {
+      "name": "Tag",
+      "path": "/documentation/elements/tag"
+    },
+    "elements-title": {
+      "name": "Title",
+      "path": "/documentation/elements/title"
+    },
     "components": {
       "name": "Components",
       "path": "/documentation/components"
@@ -91,6 +131,7 @@
   },
   "order": {
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
+    "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/_includes/elements/improve-page.html

@@ -1,5 +1,4 @@
-<section class="section bd-typo">
-  <div class="container">
+<div 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">
@@ -13,4 +12,3 @@
     </a>
   </p>
 </div>
-</section>

docs/_layouts/documentation.html

@@ -41,6 +41,7 @@ route: documentation
             </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 }}">
@@ -62,6 +63,7 @@ route: documentation
                 </span>
               {% endif %}
             </nav>
+          {% endif %}
         </div>
 
         <header class="bd-header">
@@ -71,6 +73,15 @@ route: documentation
           <p class="subtitle is-4">
             {{ page.subtitle }}
           </p>
+
+          {% if page.meta %}
+            {%
+              include meta.html
+              colors=page.meta.colors
+              sizes=page.meta.sizes
+              variables=page.meta.variables
+            %}
+          {% endif %}
         </header>
 
         <div class="bd-content">

docs/_sass/main.sass

@@ -81,6 +81,7 @@
   .bd-main
     padding: 0 3rem
   .bd-lead
-    padding: 3rem 3rem 3rem 0
+    margin-left: -3rem
+    padding: 3rem
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/_sass/native.sass

@@ -1,4 +1,5 @@
 .native-js
+  border-top: 2px solid $background
   display: none
   font-size: 1rem
   opacity: 0

docs/_sass/specific.sass

@@ -1,3 +1,6 @@
+.bd-typo
+  margin-top: 3rem
+
 .bd-has-text-rss
   color: $rss
 

docs/css/bulma-docs.css

@@ -34,7 +34,7 @@
   width: 0.5em;
 }
 
-.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
+.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
 .subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child), .bd-snippet:not(:last-child), .bd-callout:not(:last-child) {
   margin-bottom: 1.5rem;
 }
@@ -4545,7 +4545,6 @@ a.box:active {
 .table {
   background-color: white;
   color: #363636;
-  margin-bottom: 1.5rem;
 }
 
 .table td,
@@ -9592,7 +9591,8 @@ label.panel-block:hover {
     padding: 0 3rem;
   }
   .bd-lead {
-    padding: 3rem 3rem 3rem 0;
+    margin-left: -3rem;
+    padding: 3rem;
   }
   .bd-side {
     padding: 3rem 0 3rem 1.5rem;
@@ -10391,6 +10391,10 @@ svg {
   text-decoration: underline;
 }
 
+.bd-typo {
+  margin-top: 3rem;
+}
+
 .bd-has-text-rss {
   color: #f26522;
 }
@@ -12330,6 +12334,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .native-js {
+  border-top: 2px solid whitesmoke;
   display: none;
   font-size: 1rem;
   opacity: 0;

docs/documentation.html

@@ -0,0 +1,8 @@
+---
+title: Documentation
+subtitle: "Everything you need to <strong>create a website</strong> with Bulma"
+layout: documentation
+breadcrumb:
+- home
+- documentation
+---

docs/documentation/components/breadcrumb.html

@@ -10,10 +10,9 @@ breadcrumb:
 - components
 - components-breadcrumb
 meta:
-- since: "0.4.3"
-- variables: true
-- colors: false
-- sizes: true
+  variables: true
+  colors: false
+  sizes: true
 ---
 
 {% capture breadcrumb_example %}

docs/documentation/components/card.html

@@ -1,6 +1,6 @@
 ---
 title: Card
-subtile: "An all-around flexible and composable component"
+subtitle: "An all-around flexible and composable component"
 layout: documentation
 doc-tab: components
 doc-subtab: card
@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-card
 meta:
-- variables: true
-- colors: false
-- sizes: false
+  variables: true
+  colors: false
+  sizes: false
 ---
 
 {% capture card_example %}

docs/documentation/components/dropdown.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-dropdown
 meta:
-- colors: false
-- sizes: false
-- variables: true
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture dropdown_example %}

docs/documentation/components/menu.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-menu
 meta:
-- colors: false
-- sizes: false
-- variables: true
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture menu_example %}

docs/documentation/components/message.html

@@ -4,15 +4,15 @@ subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your pa
 layout: documentation
 doc-tab: components
 doc-subtab: message
-meta:
-- colors: true
-- sizes: true
-- variables: true
 breadcrumb:
 - home
 - documentation
 - components
 - components-message
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture message_example %}

docs/documentation/components/modal.html

@@ -4,15 +4,15 @@ subtitle: "A classic <strong>modal</strong> overlay, in which you can include <e
 layout: documentation
 doc-tab: components
 doc-subtab: modal
-meta:
-- colors: false
-- sizes: false
-- variables: true
 breadcrumb:
 - home
 - documentation
 - components
 - components-modal
+meta:
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture modal %}

docs/documentation/components/navbar.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-navbar
 meta:
-- colors: true
-- sizes: false
-- variables: true
+  colors: true
+  sizes: false
+  variables: true
 ---
 
 {% capture navbar_example %}

docs/documentation/components/pagination.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-pagination
 meta:
-- colors: false
-- sizes: true
-- variables: true
+  colors: false
+  sizes: true
+  variables: true
 ---
 
 {% capture pagination_example %}

docs/documentation/components/panel.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-panel
 meta:
-- colors: false
-- sizes: false
-- variables: true
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture panel_example %}

docs/documentation/components/tabs.html

@@ -10,9 +10,9 @@ breadcrumb:
 - components
 - components-tabs
 meta:
-- colors: false
-- sizes: true
-- variables: true
+  colors: false
+  sizes: true
+  variables: true
 ---
 
 {% capture tabs_example %}

docs/documentation/elements/box.html

@@ -1,12 +1,20 @@
 ---
 title: Box
+subtitle: "A white <strong>box</strong> to contain other elements"
 layout: documentation
 doc-tab: elements
 doc-subtab: box
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-box
+meta:
+  colors: false
+  sizes: false
+  variables: true
 ---
 
-{% include subnav/subnav-elements.html %}
-
 {% capture box_example %}
 <div class="box">
   <article class="media">
@@ -47,21 +55,6 @@ doc-subtab: box
 </div>
 {% endcapture %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Box</h1>
-    <h2 class="subtitle">
-      A white <strong>box</strong> to contain other elements
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>
     The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
@@ -73,6 +66,3 @@ doc-subtab: box
 {% include snippet.html content=box_example more=true %}
 
 {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/button.html

@@ -8,11 +8,11 @@ breadcrumb:
 - home
 - documentation
 - elements
-- button
+- elements-button
 meta:
-- colors: true
-- sizes: true
-- variables: true
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture button_example %}

docs/documentation/elements/content.html

@@ -1,8 +1,18 @@
 ---
 title: Content
+subtitle: "A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available"
 layout: documentation
 doc-tab: elements
 doc-subtab: content
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-content
+meta:
+  colors: false
+  sizes: true
+  variables: true
 ---
 
 {% capture content_pre %}
@@ -101,23 +111,6 @@ doc-subtab: content
 </div>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Content</h1>
-    <h2 class="subtitle">
-      A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
   <ul>
@@ -182,6 +175,3 @@ doc-subtab: content
 </div>
 
 {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/delete.html

@@ -1,8 +1,18 @@
 ---
 title: Delete
+subtitle: "A versatile <strong>delete</strong> cross"
 layout: documentation
 doc-tab: elements
 doc-subtab: delete
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-delete
+meta:
+  colors: false
+  sizes: true
+  variables: false
 ---
 
 {% capture cross_example %}
@@ -40,23 +50,6 @@ doc-subtab: delete
 </article>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Delete</h1>
-    <h2 class="subtitle">
-      A versatile <strong>delete</strong> cross
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=true
-      variables=false
-    %}
-
-    <hr>
-
 <div class="content">
   <p>
     The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
@@ -87,6 +80,3 @@ doc-subtab: delete
 </div>
 
 {% include snippet.html content=cross_elements_example %}
-
-  </div>
-</section>

docs/documentation/elements/icon.html

@@ -1,5 +1,6 @@
 ---
 title: Icon
+subtitle: 'Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.'
 fontawesome4: true
 iconic: true
 ionicons: true
@@ -7,6 +8,15 @@ mdi: true
 layout: documentation
 doc-tab: elements
 doc-subtab: icon
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-icon
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture icon_example %}
@@ -48,22 +58,23 @@ doc-subtab: icon
 </span>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
+{% capture stacked_medium %}
+<span class="icon is-medium">
+  <span class="fa-stack">
+    <i class="fas fa-circle fa-stack-2x"></i>
+    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
+  </span>
+</span>
+{% endcapture %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Icons</h1>
-    <h2 class="subtitle">
-      Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
+{% capture stacked_large %}
+<span class="icon is-large">
+  <span class="fa-stack fa-lg">
+    <i class="fas fa-camera fa-stack-1x"></i>
+    <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
+  </span>
+</span>
+{% endcapture %}
 
 <div class="content">
   <p>
@@ -388,12 +399,7 @@ doc-subtab: icon
         Stacked
       </td>
       <td>
-            {% highlight html %}<span class="icon is-medium">
-  <span class="fa-stack">
-    <i class="fas fa-circle fa-stack-2x"></i>
-    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
-  </span>
-</span>{% endhighlight %}
+        {% highlight html %}{{ stacked_medium }}{% endhighlight %}
       </td>
       <td class="bd-icon-size">
         <span class="icon is-medium">
@@ -406,12 +412,7 @@ doc-subtab: icon
     </tr>
     <tr>
       <td>
-            {% highlight html %}<span class="icon is-large">
-  <span class="fa-stack fa-lg">
-    <i class="fas fa-camera fa-stack-1x"></i>
-    <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
-  </span>
-</span>{% endhighlight %}
+        {% highlight html %}{{ stacked_large }}{% endhighlight %}
       </td>
       <td class="bd-icon-size">
         <span class="icon is-large">
@@ -946,6 +947,3 @@ doc-subtab: icon
 </table>
 
 {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/image.html

@@ -1,5 +1,6 @@
 ---
 title: Image
+subtitle: "A container for <strong>responsive images</strong>"
 layout: documentation
 doc-tab: elements
 doc-subtab: image
@@ -11,6 +12,15 @@ dimensions:
 - 64
 - 96
 - 128
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-image
+meta:
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture image %}
@@ -25,23 +35,6 @@ dimensions:
 </figure>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Images</h1>
-    <h2 class="subtitle">
-      A container for <strong>responsive images</strong>
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
 </div>
@@ -170,6 +163,3 @@ dimensions:
 </div>
 
 {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/notification.html

@@ -1,8 +1,18 @@
 ---
 title: Notification
+subtitle: "Bold <strong>notification</strong> blocks, to alert your users of something"
 layout: documentation
 doc-tab: elements
 doc-subtab: notification
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-notification
+meta:
+  colors: true
+  sizes: false
+  variables: true
 ---
 
 {% capture notification %}
@@ -25,23 +35,6 @@ doc-subtab: notification
 {% endfor %}
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Notifications</h1>
-    <h2 class="subtitle">
-      Bold <strong>notification</strong> blocks, to alert your users of something
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 {% include snippet.html content=notification %}
 
 {% include anchor.html name="Colors" %}
@@ -49,6 +42,3 @@ doc-subtab: notification
 {% include snippet.html content=notification_colors %}
 
 {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/progress.html

@@ -1,8 +1,18 @@
 ---
 title: Progress Bar
+subtitle: "Native HTML <strong>progress</strong> bars"
 layout: documentation
 doc-tab: elements
 doc-subtab: progress
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-progress
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture progress %}
@@ -25,23 +35,6 @@ doc-subtab: progress
 <progress class="progress is-large" value="60" max="100">60%</progress>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Progress bars</h1>
-    <h2 class="subtitle">
-      Native HTML <strong>progress</strong> bars
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
 {% include snippet.html content=progress %}
 
 {% include anchor.html name="Colors" %}
@@ -53,6 +46,3 @@ doc-subtab: progress
 {% include snippet.html content=progress_sizes %}
 
 {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/table.html

@@ -1,8 +1,18 @@
 ---
 title: Table
+subtitle: "The inevitable HTML <strong>table</strong>, with special case cells"
 layout: documentation
 doc-tab: elements
 doc-subtab: table
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-table
+meta:
+  colors: false
+  sizes: false
+  variables: true
 ---
 
 {% capture table_example %}
@@ -305,21 +315,6 @@ doc-subtab: table
 </table>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Tables</h1>
-    <h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=false
-      variables=true
-    %}
-
-    <hr>
-
 <div class="content">
   <p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
   <ul>
@@ -591,6 +586,3 @@ doc-subtab: table
 </div>
 
 {% include variables.html type='element' %}
-
-  </div>
-</section>

docs/documentation/elements/tag.html

@@ -1,8 +1,18 @@
 ---
 title: Tags
+subtitle: "Small <strong>tag labels</strong> to insert anywhere"
 layout: documentation
 doc-tab: elements
 doc-subtab: tag
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-tag
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
 {% capture tag %}
@@ -179,21 +189,6 @@ doc-subtab: tag
 </div>
 {% endcapture %}
 
-<section class="section">
-  <div class="container">
-    <h1 class="title">Tags</h1>
-    <h2 class="subtitle">
-      Small <strong>tag labels</strong> to insert anywhere
-    </h2>
-    {%
-      include meta.html
-      colors=true
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
 <div class="columns">
   <div class="column is-4">
     By default, a <strong>tag</strong> is a 1.5rem high label.
@@ -448,5 +443,3 @@ doc-subtab: tag
 </div>
 
 {% include variables.html type='element' %}
-  </div>
-</section>

docs/documentation/elements/title.html

@@ -1,8 +1,18 @@
 ---
 title: Title and Subtitle
+subtitle: "Simple <strong>headings</strong> to add depth to your page"
 layout: documentation
 doc-tab: elements
 doc-subtab: title
+breadcrumb:
+- home
+- documentation
+- elements
+- elements-title
+meta:
+  colors: false
+  sizes: true
+  variables: true
 ---
 
 {% capture default %}
@@ -50,23 +60,6 @@ doc-subtab: title
 <p class="subtitle is-5">Subtitle 5</p>
 {% endcapture %}
 
-{% include subnav/subnav-elements.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Titles</h1>
-    <h2 class="subtitle">
-      Simple <strong>headings</strong> to add depth to your page
-    </h2>
-    {%
-      include meta.html
-      colors=false
-      sizes=true
-      variables=true
-    %}
-
-    <hr>
-
 <div class="columns">
   <div class="column">
     <div class="content">
@@ -183,6 +176,3 @@ doc-subtab: title
 </div>
 
 {% include variables.html type='element' %}
-
-  </div>
-</section>

sass/elements/table.sass

@@ -20,9 +20,9 @@ $table-striped-row-even-background-color: $white-bis !default
 $table-striped-row-even-hover-background-color: $white-ter !default
 
 .table
+  +block
   background-color: $table-background-color
   color: $table-color
-  margin-bottom: 1.5rem
   td,
   th
     border: $table-cell-border