Merge pull request #439 from jgthms/feature/rem

Feature/rem

CHANGELOG.md

@@ -1,5 +1,33 @@
 # Bulma Changelog
 
+## 0.3.0
+
+* Use `rem` and `em` (!)
+* Fix Font Awesome icons in buttons (!)
+* Fix message colors (!)
+* Use `{% capture %}` to ensure same display as code snippet (!)
+
+* Move variables to their own file
+* Remove small tag
+* Add `:focus` state
+* Fix table
+* Remove table `.is-icon` and `.is-link`
+* Add `.content` table
+* Fix inputs with icons
+* Input icons require the `.icon` container
+* Deprecate `.media-number`
+* Fix `.level-item` height
+* Fix `.menu` spacing
+* Deprecate `.menu-nav`
+* Add invert outlined buttons
+* Fix `.nav`
+* Fix `.pagination`
+* Fix `.tabs`
+* Fix `.panel`
+* Fix `.delete`
+* Add mixins documentation
+* Add functions documentation
+
 ## 0.2.2
 
 * Fix: remove multiple imports

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "homepage": "http://bulma.io",
   "authors": [
     "jgthms <bbxdesign@gmail.com>"

bulma.sass

@@ -1,4 +1,4 @@
-/*! bulma.io v0.2.3 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.3.0 | MIT License | github.com/jgthms/bulma */
 @charset "utf-8"
 
 @import "sass/utilities/_all"

docs/.gitignore

@@ -11,5 +11,6 @@ npm-debug.log
 .sass-cache
 /_sass
 /bulma
+/fontawesome
 /styles/node_modules
 _site

docs/_config.yml

@@ -8,10 +8,11 @@ description:   "Bulma is an open source CSS framework based on Flexbox and built
 markdown:      kramdown
 permalink:     pretty
 url:           http://bulma.io
+fontawesome:   https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
 
 # Variables
 
 documentation: "/documentation/overview/start/"
-download:      https://github.com/jgthms/bulma/archive/0.2.3.zip
+download:      https://github.com/jgthms/bulma/archive/0.3.0.zip
 github:        https://github.com/jgthms/bulma
-version:       0.2.3
+version:       0.3.0

docs/_includes/blog-hero.html

@@ -1,10 +1,8 @@
-<section class="hero is-primary">
+<div class="container">
-  <div class="hero-head">
-    <div class="container">
   {% include header.html %}
-    </div>
+</div>
-  </div>
 
+<section class="hero is-primary">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-vcentered">

docs/_includes/footer.html

@@ -14,7 +14,9 @@
               <div class="control is-grouped">
                 <div class="control has-icon is-expanded">
                   <input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
+                  <span class="icon is-small">
                     <i class="fa fa-envelope"></i>
+                  </span>
                 </div>
                 <div class="control">
                   <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
@@ -74,7 +76,7 @@
 
     .title.is-2 a {
       color: #242424;
-      padding-left: 60px;
+      padding-left: 48px;
       position: relative;
     }
 
@@ -82,10 +84,10 @@
       color: #00d1b2;
     }
 
-    .title.is-2 .icon.is-large {
+    .title.is-2 .icon.is-medium {
-      left: 0;
+      left: 8px;
       position: absolute;
-      top: -1px;
+      top: 10px;
     }
 
     .hero .title.is-2 a {

docs/_includes/head.html

@@ -6,7 +6,7 @@
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+  <link rel="stylesheet" href="{{ site.fontawesome }}">
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

docs/_includes/header.html

@@ -1,11 +1,7 @@
 <nav class="nav">
   <div class="nav-left">
-    <a class="nav-item is-brand" href="{{ site.url }}/">
+    <a class="nav-item is-brand" href="{{ site.url }}">
-      {% if page.route == 'index' %}
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}">
-        <img src="{{ site.url }}/images/bulma-type.png" alt="{{ site.title }}">
-      {% else %}
-        <img src="{{ site.url }}/images/bulma-type-white.png" alt="{{ site.title }}">
-      {% endif %}
     </a>
   </div>
 
@@ -43,7 +39,7 @@
       Blog
     </a>
 
-    {% if page.route == 'index' %}
+    {% if page.route != 'nothing' %}
       <span class="nav-item">
         <a id="twitter"
           class="button"
@@ -66,7 +62,7 @@
       </span>
     {% else %}
       <span class="nav-item">
-        <a class="button is-light is-outlined"
+        <a class="button is-primary is-inverted is-outlined"
         data-social-network="Twitter"
         data-social-action="tweet"
         data-social-target="http://bulma.io/"

docs/_includes/subnav-elements.html

@@ -10,6 +10,9 @@
       <a class="nav-item is-tab {% if page.doc-subtab == 'content' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/content/">
         Content
       </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/">
+        Delete
+      </a>
       <a class="nav-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/form/">
         Form
       </a>

docs/_includes/subnav-overview.html

@@ -4,17 +4,23 @@
       <a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
         Start
       </a>
-      <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
-        Variables
+        Classes
-      </a>
-      <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
-        Responsiveness
       </a>
       <a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
         Modular
       </a>
-      <a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
-        Classes
+        Responsiveness
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
+        Functions
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
+        Variables
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
+        Mixins
       </a>
     </div>
   </div>

docs/_layouts/documentation.html

@@ -3,13 +3,11 @@ layout: default
 route: documentation
 ---
 
-<section class="hero is-primary">
+<div class="container">
-  <div class="hero-head">
-    <div class="container">
   {% include header.html %}
-    </div>
+</div>
-  </div>
 
+<section class="hero is-primary">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-vcentered">

docs/blog.html

@@ -10,7 +10,7 @@ route: blog
     <div class="container">
       <div class="columns">
         <div class="column is-4">
-          <p class="subtitle4">
+          <p class="subtitle">
             {{ post.date | date_to_string }}
           </p>
           <h2 class="title">

docs/bulma-docs.sass

@@ -1,6 +1,7 @@
 @charset "utf-8"
 
 @import "../bulma"
+@import "./sass/highlight"
 
 // Override
 .button
@@ -20,7 +21,7 @@ body.page-grid .column > .notification
 
 +tablet
   .header-item .button + .button
-    margin-left: 10px
+    margin-left: 0.75rem
 
 // Additional
 svg
@@ -32,7 +33,10 @@ $carbon-space: 15px
 #carbon
   max-width: 340px
   min-height: 100px + ($carbon-space * 2)
-  padding: $carbon-space
+  padding: 0
+  position: relative
+  &:hover
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
   +tablet
     margin-left: auto
     margin-right: auto
@@ -40,23 +44,34 @@ $carbon-space: 15px
 
 #carbonads
   text-align: left
-  a:hover
+  a,
-    text-decoration: underline
   span
     display: block
+  .carbon-wrap
+    position: relative
   .carbon-img
     float: left
-    height: 100px
+    height: 130px
-    width: 130px
+    padding: 15px 0 15px 15px
+    width: 145px
     img
       display: block
+      height: 100px
+      width: 130px
   .carbon-text
     display: block
     color: $text-strong
-    margin-left: 130px + $carbon-space
+    line-height: 20px
+    padding: 15px 15px 35px 160px
   .carbon-poweredby
+    bottom: 0
+    color: $text-light
     font-size: $size-small
-    margin-left: $carbon-space
+    left: 160px
+    line-height: 20px
+    padding: 0 15px 10px 0
+    position: absolute
+    right: 0
 
 $github: #333333
 $twitter: #55acee
@@ -186,13 +201,17 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
   animation-delay: 1.2s
 
 #npm
+  align-items: center
   animation: fadeIn 500ms both
   animation-delay: 1.4s
   background: none
+  display: flex
+  justify-content: center
   margin: -10px 0 20px
   code
+    background: $background
     border-radius: $radius
-    color: $link
+    color: $primary
     display: inline-block
     font-size: 16px
     padding: 16px 32px
@@ -221,13 +240,13 @@ html.route-index #carbon
   background: $white
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  padding: 20px
+  padding: 1.5rem
 
 #mc_embed_signup
   .control
     margin-bottom: 0
   .notification
-    margin-top: 10px
+    margin-top: 0.75rem
 
 #social
   align-items: center
@@ -261,12 +280,12 @@ html.route-index #carbon
   border: 1px solid $warning
   border-top-right-radius: $radius
   color: $warning-invert
-  padding: 15px 20px
+  padding: 1.25rem 1.5rem
   position: relative
   &:not(:first-child)
-    margin-top: 30px
+    margin-top: 2rem
   &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: 1.5rem
   &:before
     background: $warning
     border-radius: $radius $radius 0 0
@@ -292,11 +311,11 @@ html.route-index #carbon
     border: 1px solid $warning
     border-radius: 0 0 $radius $radius
     border-top: none
-    margin-top: -20px
+    margin-top: -1.5rem
     pre
-      max-height: 600px
+      max-height: 50vh
     &:not(:last-child)
-      margin-bottom: 40px
+      margin-bottom: 1.5rem
 
 $structure: $danger
 $structure-invert: $danger-invert
@@ -304,7 +323,7 @@ $structure-invert: $danger-invert
 .structure
   border-color: $structure
   border-radius: $radius
-  padding: 20px
+  padding: 1.5rem
   &:before
     background: $structure
     color: $structure-invert
@@ -331,11 +350,11 @@ $structure-invert: $danger-invert
     padding: 3px 5px
     z-index: 2
   &.is-structure-container
-    padding: 20px 10px 10px
+    padding: 1.5rem 0.75rem 0.75rem
     &:after
       align-items: flex-start
       justify-content: flex-start
-      padding: 5px 10px
+      padding: 0.5rem 0.75rem
 
 .highlight
   position: relative
@@ -357,14 +376,17 @@ $structure-invert: $danger-invert
   .expand
     border-right-width: 1px
     right: 50px
+  +tablet
+    pre
+      white-space: pre-wrap
 
 +tablet
   .section:not(.is-fullwidth) > .example:not(.is-fullwidth)
-    margin-left: 20px
+    margin-left: 1.5rem
-    margin-right: 20px
+    margin-right: 1.5rem
     & + .highlight
-      margin-left: 20px
+      margin-left: 1.5rem
-      margin-right: 20px
+      margin-right: 1.5rem
 
 .section.is-fullwidth
   padding: 0 !important

docs/documentation/components/card.html

@@ -13,110 +13,65 @@ doc-subtab: card
 
     <hr>
 
-    <div class="columns">
+{% capture card_example %}
-      <div class="column is-one-third">
-        <div class="card">
-          <div class="card-image">
-            <figure class="image is-4by3">
-              <img src="http://placehold.it/300x225" alt="">
-            </figure>
-          </div>
-          <div class="card-content">
-            <div class="media">
-              <div class="media-left">
-                <figure class="image is-32x32">
-                  <img src="http://placehold.it/64x64" alt="Image">
-                </figure>
-              </div>
-              <div class="media-content">
-                <p class="title is-5">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 href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
-              <br>
-              <small>11:09 PM - 1 Jan 2016</small>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="column">
-{% highlight html %}
 <div class="card">
   <div class="card-image">
     <figure class="image is-4by3">
-      <img src="http://placehold.it/300x225" alt="">
+      <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-32x32">
+        <figure class="image" style="height: 40px; width: 40px;">
-          <img src="http://placehold.it/64x64" alt="Image">
+          <img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
         </figure>
       </div>
       <div class="media-content">
-        <p class="title is-5">John Smith</p>
+        <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 href="#">@bulmaio</a>.
+      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
-      <a href="#">#css</a> <a href="#">#responsive</a>
+      <a>#css</a> <a>#responsive</a>
       <br>
       <small>11:09 PM - 1 Jan 2016</small>
     </div>
   </div>
 </div>
-{% endhighlight %}
+{% endcapture %}
-      </div>
+<div class="columns">
-    </div>
-
-    <hr>
-
-    <div class="columns">
   <div class="column is-one-third">
-        <div class="card is-fullwidth">
+{{card_example}}
-          <header class="card-header">
-            <p class="card-header-title">
-              Component
-            </p>
-            <a class="card-header-icon">
-              <i class="fa fa-angle-down"></i>
-            </a>
-          </header>
-          <div class="card-content">
-            <div class="content">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
-              <br>
-              <small>11:09 PM - 1 Jan 2016</small>
-            </div>
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item">Save</a>
-            <a class="card-footer-item">Edit</a>
-            <a class="card-footer-item">Delete</a>
-          </footer>
-        </div>
   </div>
   <div class="column">
 {% highlight html %}
-<div class="card is-fullwidth">
+{{card_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <hr>
+
+{% capture card_header_example %}
+<div class="card">
   <header class="card-header">
     <p class="card-header-title">
       Component
     </p>
     <a class="card-header-icon">
+      <span class="icon">
         <i class="fa fa-angle-down"></i>
+      </span>
     </a>
   </header>
   <div class="card-content">
     <div class="content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
+      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>
@@ -127,8 +82,17 @@ doc-subtab: card
     <a class="card-footer-item">Delete</a>
   </footer>
 </div>
+{% endcapture %}
+<div class="columns">
+  <div class="column is-one-third">
+{{card_header_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{card_header_example}}
 {% endhighlight %}
   </div>
-    </div>
+</div>
+
   </div>
 </section>

docs/documentation/components/level.html

@@ -71,46 +71,7 @@ doc-subtab: level
       </nav>
     </div>
 
-    <div class="example">
+{% capture nav_example %}
-      <nav class="level">
-        <div class="level-left">
-          <div class="level-item">
-            <p class="subtitle is-5">
-              <strong>123</strong> posts
-            </p>
-          </div>
-          <div class="level-item">
-            <p class="control has-addons">
-              <input class="input" type="text" placeholder="Find a post">
-              <button class="button">
-                Search
-              </button>
-            </p>
-          </div>
-        </div>
-        <div class="level-right">
-          <p class="level-item">
-            <strong>All</strong>
-          </p>
-          <p class="level-item">
-            <a>Published</a>
-          </p>
-          <p class="level-item">
-            <a>Drafts</a>
-          </p>
-          <p class="level-item">
-            <a>Deleted</a>
-          </p>
-          <p class="level-item">
-            <a class="button is-success">
-              New
-            </a>
-          </p>
-        </div>
-      </nav>
-    </div>
-
-{% highlight html %}
 <!-- Main container -->
 <nav class="level">
   <!-- Left side -->
@@ -139,122 +100,120 @@ doc-subtab: level
     <p class="level-item"><a class="button is-success">New</a></p>
   </div>
 </nav>
+{% endcapture %}
+<div class="example">
+{{nav_example}}
+</div>
+{% highlight html %}
+{{nav_example}}
 {% endhighlight %}
 
     <hr>
-    <h3 class="title">Centered level</h3>
 
-    <div class="content">
+<h3 class="title">Centered level</h3>
+<div class="content">
   If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
-    </div>
+</div>
-
+{% capture nav_centered_example %}
-    <div class="example">
-      <nav class="level">
-        <div class="level-item has-text-centered">
-          <p class="heading">Tweets</p>
-          <p class="title">3,456</p>
-        </div>
-        <div class="level-item has-text-centered">
-          <p class="heading">Following</p>
-          <p class="title">123</p>
-        </div>
-        <div class="level-item has-text-centered">
-          <p class="heading">Followers</p>
-          <p class="title">456K</p>
-        </div>
-        <div class="level-item has-text-centered">
-          <p class="heading">Likes</p>
-          <p class="title">789</p>
-        </div>
-      </nav>
-    </div>
-
-{% highlight html %}
 <nav class="level">
   <div class="level-item has-text-centered">
+    <div>
       <p class="heading">Tweets</p>
       <p class="title">3,456</p>
     </div>
+  </div>
   <div class="level-item has-text-centered">
+    <div>
       <p class="heading">Following</p>
       <p class="title">123</p>
     </div>
+  </div>
   <div class="level-item has-text-centered">
+    <div>
       <p class="heading">Followers</p>
       <p class="title">456K</p>
     </div>
+  </div>
   <div class="level-item has-text-centered">
+    <div>
       <p class="heading">Likes</p>
       <p class="title">789</p>
     </div>
+  </div>
 </nav>
+{% endcapture %}
+{% capture nav_centered_bis_example %}
+<nav class="level">
+  <p class="level-item has-text-centered">
+    <a class="link is-info">Home</a>
+  </p>
+  <p class="level-item has-text-centered">
+    <a class="link is-info">Menu</a>
+  </p>
+  <p class="level-item has-text-centered">
+    <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 30px;">
+  </p>
+  <p class="level-item has-text-centered">
+    <a class="link is-info">Reservations</a>
+  </p>
+  <p class="level-item has-text-centered">
+    <a class="link is-info">Contact</a>
+  </p>
+</nav>
+{% endcapture %}
+<div class="example">
+{{nav_centered_example}}
+</div>
+{% highlight html %}
+{{nav_centered_example}}
 {% endhighlight %}
-
+<div class="example">
-    <div class="example">
+{{nav_centered_bis_example}}
-      <nav class="level">
+</div>
-        <p class="level-item has-text-centered">
-          <a class="link is-info">Home</a>
-        </p>
-        <p class="level-item has-text-centered">
-          <a class="link is-info">Menu</a>
-        </p>
-        <p class="level-item has-text-centered">
-          <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
-        </p>
-        <p class="level-item has-text-centered">
-          <a class="link is-info">Reservations</a>
-        </p>
-        <p class="level-item has-text-centered">
-          <a class="link is-info">Contact</a>
-        </p>
-      </nav>
-    </div>
-
 {% highlight html %}
-<nav class="level">
+{{nav_centered_bis_example}}
-  <p class="level-item has-text-centered">
-    <a class="link is-info">Home</a>
-  </p>
-  <p class="level-item has-text-centered">
-    <a class="link is-info">Menu</a>
-  </p>
-  <p class="level-item has-text-centered">
-    <img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
-  </p>
-  <p class="level-item has-text-centered">
-    <a class="link is-info">Reservations</a>
-  </p>
-  <p class="level-item has-text-centered">
-    <a class="link is-info">Contact</a>
-  </p>
-</nav>
 {% endhighlight %}
 
     <hr>
-    <h3 class="title">Mobile level</h3>
-    <div class="content">
-      By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
-    </div>
 
-    <div class="example">
+<h3 class="title">Mobile level</h3>
-      <nav class="level is-mobile">
+<div class="content">
+  By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
+</div>
+{% capture nav_mobile_example %}
+<nav class="level is-mobile">
   <div class="level-item has-text-centered">
+    <div>
       <p class="heading">Tweets</p>
       <p class="title">3,456</p>
     </div>
+  </div>
   <div class="level-item has-text-centered">
+    <div>
       <p class="heading">Following</p>
       <p class="title">123</p>
     </div>
+  </div>
   <div class="level-item has-text-centered">
+    <div>
       <p class="heading">Followers</p>
       <p class="title">456K</p>
     </div>
+  </div>
   <div class="level-item has-text-centered">
+    <div>
       <p class="heading">Likes</p>
       <p class="title">789</p>
     </div>
-      </nav>
   </div>
+</nav>
+{% endcapture %}
+<div class="example">
+{{nav_mobile_example}}
+</div>
+{% highlight html %}
+{{nav_mobile_example}}
+{% endhighlight %}
+
   </div>
 </section>

docs/documentation/components/media-object.html

@@ -21,7 +21,7 @@ doc-subtab: media-object
       <article class="media">
         <figure class="media-left structure-item" title="media-left">
           <p class="image is-64x64">
-            <img src="http://placehold.it/128x128">
+            <img src="{{site.url}}/images/placeholders/128x128.png">
           </p>
         </figure>
         <div class="media-content structure-item is-structure-right" title="media-content">
@@ -52,47 +52,11 @@ doc-subtab: media-object
       </article>
     </div>
 
-
+{% capture media_example %}
-    <div class="example">
-      <article class="media">
-        <figure class="media-left">
-          <p class="image is-64x64">
-            <img src="http://placehold.it/128x128">
-          </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">
-            <div class="level-left">
-              <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-reply"></i></span>
-              </a>
-              <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-retweet"></i></span>
-              </a>
-              <a class="level-item">
-                <span class="icon is-small"><i class="fa fa-heart"></i></span>
-              </a>
-            </div>
-          </nav>
-        </div>
-        <div class="media-right">
-          <button class="delete"></button>
-        </div>
-      </article>
-    </div>
-
-{% highlight html %}
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -121,46 +85,23 @@ doc-subtab: media-object
     <button class="delete"></button>
   </div>
 </article>
+{% endcapture %}
+<div class="example">
+{{media_example}}
+</div>
+{% highlight html %}
+{{media_example}}
 {% endhighlight %}
 
     <div class="content">
       <p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
     </div>
 
-    <div class="example">
+{% capture media_bis_example %}
-      <article class="media">
-        <figure class="media-left">
-          <p class="image is-64x64">
-            <img src="http://placehold.it/128x128">
-          </p>
-        </figure>
-        <div class="media-content">
-          <p class="control">
-            <textarea class="textarea" placeholder="Add a comment..."></textarea>
-          </p>
-          <nav class="level">
-            <div class="level-left">
-              <div class="level-item">
-                <a class="button is-info">Post comment</a>
-              </div>
-            </div>
-            <div class="level-right">
-              <div class="level-item">
-                <label class="checkbox">
-                  <input type="checkbox"> Press enter to submit
-                </label>
-              </div>
-            </div>
-          </nav>
-        </div>
-      </article>
-    </div>
-
-{% highlight html %}
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -183,6 +124,12 @@ doc-subtab: media-object
     </nav>
   </div>
 </article>
+{% endcapture %}
+<div class="example">
+{{media_bis_example}}
+</div>
+{% highlight html %}
+{{media_bis_example}}
 {% endhighlight %}
 
     <hr>
@@ -191,11 +138,11 @@ doc-subtab: media-object
     <div class="content">
       <p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
     </div>
-    <div class="example">
+{% capture media_nested_example %}
-      <article class="media">
+<article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-            <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -212,7 +159,7 @@ doc-subtab: media-object
     <article class="media">
       <figure class="media-left">
         <p class="image is-48x48">
-                <img src="http://placehold.it/96x96">
+          <img src="{{site.url}}/images/placeholders/96x96.png">
         </p>
       </figure>
       <div class="media-content">
@@ -239,7 +186,7 @@ doc-subtab: media-object
     <article class="media">
       <figure class="media-left">
         <p class="image is-48x48">
-                <img src="http://placehold.it/96x96">
+          <img src="{{site.url}}/images/placeholders/96x96.png">
         </p>
       </figure>
       <div class="media-content">
@@ -255,11 +202,11 @@ doc-subtab: media-object
       </div>
     </article>
   </div>
-      </article>
+</article>
-      <article class="media">
+<article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-            <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -270,88 +217,13 @@ doc-subtab: media-object
       <button class="button">Post comment</button>
     </p>
   </div>
-      </article>
+</article>
-    </div>
+{% endcapture %}
+<div class="example">
+{{media_nested_example}}
+</div>
 {% highlight html %}
-<article class="media">
+{{media_nested_example}}
-  <figure class="media-left">
-    <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
-    </p>
-  </figure>
-  <div class="media-content">
-    <div class="content">
-      <p>
-        <strong>Barbara Middleton</strong>
-        <br>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
-        <br>
-        <small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
-      </p>
-    </div>
-
-    <article class="media">
-      <figure class="media-left">
-        <p class="image is-48x48">
-          <img src="http://placehold.it/96x96">
-        </p>
-      </figure>
-      <div class="media-content">
-        <div class="content">
-          <p>
-            <strong>Sean Brown</strong>
-            <br>
-            Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
-            <br>
-            <small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
-          </p>
-        </div>
-
-        <article class="media">
-          Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
-        </article>
-
-        <article class="media">
-          Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
-        </article>
-      </div>
-    </article>
-
-    <article class="media">
-      <figure class="media-left">
-        <p class="image is-48x48">
-          <img src="http://placehold.it/96x96">
-        </p>
-      </figure>
-      <div class="media-content">
-        <div class="content">
-          <p>
-            <strong>Kayli Eunice </strong>
-            <br>
-            Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
-            <br>
-            <small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
-          </p>
-        </div>
-      </div>
-    </article>
-  </div>
-</article>
-<article class="media">
-  <figure class="media-left">
-    <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
-    </p>
-  </figure>
-  <div class="media-content">
-    <p class="control">
-      <textarea class="textarea" placeholder="Add a comment..."></textarea>
-    </p>
-    <p class="control">
-      <button class="button">Post comment</button>
-    </p>
-  </div>
-</article>
 {% endhighlight %}
 
   </div>

docs/documentation/components/menu.html

@@ -13,79 +13,52 @@ doc-subtab: menu
 
     <hr>
 
-    <div class="columns">
+{% capture menu_example %}
-      <div class="column is-3">
-        <aside class="menu">
-          <p class="menu-label">
-            General
-          </p>
-          <ul class="menu-list">
-            <li><a href="#">Dashboard</a></li>
-            <li><a href="#">Customers</a></li>
-          </ul>
-          <p class="menu-label">
-            Administration
-          </p>
-          <ul class="menu-list">
-            <li><a href="#">Team Settings</a></li>
-            <li>
-              <a class="is-active" href="#">Manage Your Team</a>
-              <ul>
-                <li><a href="#">Members</a></li>
-                <li><a href="#">Plugins</a></li>
-                <li><a href="#">Add a member</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Invitations</a></li>
-            <li><a href="#">Authentication</a></li>
-          </ul>
-          <p class="menu-label">
-            Transactions
-          </p>
-          <ul class="menu-list">
-            <li><a href="#">Payments</a></li>
-            <li><a href="#">Transfers</a></li>
-            <li><a href="#">Balance</a></li>
-          </ul>
-        </aside>
-      </div>
-      <div class="column">
-{% highlight html %}
 <aside class="menu">
   <p class="menu-label">
     General
   </p>
   <ul class="menu-list">
-    <li><a href="#">Dashboard</a></li>
+    <li><a>Dashboard</a></li>
-    <li><a href="#">Customers</a></li>
+    <li><a>Customers</a></li>
   </ul>
   <p class="menu-label">
     Administration
   </p>
   <ul class="menu-list">
-    <li><a href="#">Team Settings</a></li>
+    <li><a>Team Settings</a></li>
     <li>
-      <a class="is-active" href="#">Manage Your Team</a>
+      <a class="is-active">Manage Your Team</a>
       <ul>
-        <li><a href="#">Members</a></li>
+        <li><a>Members</a></li>
-        <li><a href="#">Plugins</a></li>
+        <li><a>Plugins</a></li>
-        <li><a href="#">Add a member</a></li>
+        <li><a>Add a member</a></li>
       </ul>
     </li>
-    <li><a href="#">Invitations</a></li>
+    <li><a>Invitations</a></li>
-    <li><a href="#">Authentication</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 href="#">Payments</a></li>
+    <li><a>Payments</a></li>
-    <li><a href="#">Transfers</a></li>
+    <li><a>Transfers</a></li>
-    <li><a href="#">Balance</a></li>
+    <li><a>Balance</a></li>
   </ul>
 </aside>
+{% endcapture %}
+<div class="columns">
+  <div class="column is-3">
+{{menu_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{menu_example}}
 {% endhighlight %}
   </div>
-    </div>
+</div>
+
   </div>
 </section>

docs/documentation/components/message.html

@@ -15,233 +15,135 @@ doc-subtab: message
 
     <hr>
 
-    <div class="columns">
+{% capture message_example %}
+<article class="message">
+  <div class="message-header">
+    <p>Hello World</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>
+<article class="message is-dark">
+  <div class="message-header">
+    <p>Dark</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>
+<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>
+<article class="message is-info">
+  <div class="message-header">
+    <p>Info</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>
+<article class="message is-success">
+  <div class="message-header">
+    <p>Success</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>
+<article class="message is-warning">
+  <div class="message-header">
+    <p>Warning</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>
+<article class="message is-danger">
+  <div class="message-header">
+    <p><strong>Danger</strong>! <a>Learn more</a></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 %}
+<div class="columns">
   <div class="column is-half">
-        <article class="message">
+{{message_example}}
-          <div class="message-header">
-            Hello World
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-primary">
-          <div class="message-header">
-            Primary
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-info">
-          <div class="message-header">
-            Info
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-success">
-          <div class="message-header">
-            Success
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-warning">
-          <div class="message-header">
-            Warning
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-danger">
-          <div class="message-header">
-            Danger
-          </div>
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
   </div>
   <div class="column is-half">
 {% highlight html %}
-<article class="message">
+{{message_example}}
-  <div class="message-header">
-    Hello World
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, 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>
-
-<article class="message is-primary">
-  <div class="message-header">
-    Primary
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, 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>
-
-<article class="message is-info">
-  <div class="message-header">
-    Info
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, 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>
-
-<article class="message is-success">
-  <div class="message-header">
-    Success
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, 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>
-
-<article class="message is-warning">
-  <div class="message-header">
-    Warning
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, 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>
-
-<article class="message is-danger">
-  <div class="message-header">
-    Danger
-  </div>
-  <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Pellentesque risus mi, tempus quis placerat ut, porta nec
-    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
-    gravida purus diam, et dictum felis venenatis efficitur.
-    Aenean ac eleifend lacus, 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>
 {% endhighlight %}
   </div>
-    </div>
+</div>
 
     <hr>
 
-    <h3 class="subtitle">Message body only</h3>
+<h3 class="subtitle">Message body only</h3>
-
+<div class="content">
-    <div class="content">
   <p>You can <strong>omit</strong> the message header:</p>
-    </div>
+</div>
-
+{% capture message_body_example %}
-    <div class="columns">
-      <div class="column is-half">
-        <article class="message">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-primary">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-info">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-success">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-warning">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-        <article class="message is-danger">
-          <div class="message-body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
-      </div>
-      <div class="column is-half">
-{% highlight html %}
 <article class="message">
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
+    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>
+<article class="message is-dark">
+  <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>
 <article class="message is-primary">
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
+    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>
 <article class="message is-info">
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
+    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>
 <article class="message is-success">
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
+    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>
 <article class="message is-warning">
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
+    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>
 <article class="message is-danger">
   <div class="message-body">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
+    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 %}
+<div class="columns">
+  <div class="column is-half">
+{{message_body_example}}
+  </div>
+  <div class="column is-half">
+{% highlight html %}
+{{message_body_example}}
 {% endhighlight %}
   </div>
-    </div>
+</div>
+
   </div>
 </section>

docs/documentation/components/modal.html

@@ -75,7 +75,7 @@ doc-subtab: modal
   <div class="modal-background"></div>
   <div class="modal-content">
     <p class="image is-4by3">
-      <img src="http://placehold.it/1280x960">
+      <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
   <button class="modal-close"></button>
@@ -122,7 +122,7 @@ doc-subtab: modal
       <article class="media">
         <div class="media-left">
           <figure class="image is-64x64">
-            <img src="http://placehold.it/128x128" alt="Image">
+            <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
           </figure>
         </div>
         <div class="media-content">
@@ -157,7 +157,7 @@ doc-subtab: modal
   <div class="modal-background"></div>
   <div class="modal-content">
     <p class="image is-4by3">
-      <img src="http://placehold.it/1280x960">
+      <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
   <button class="modal-close"></button>

docs/documentation/components/nav.html

@@ -24,6 +24,9 @@ doc-subtab: nav
         <li><code>nav-center</code></li>
         <li><code>nav-right</code></li>
       </ul>
+      <p>
+        Each nav item needs to be wrapped in a <code>nav-item</code> element.
+      </p>
       <p>
         For responsiveness, <strong>2 additional</strong> classes are available:
       </p>
@@ -33,41 +36,45 @@ doc-subtab: nav
       </ul>
     </div>
 
-<div class="example">
+{% capture nav_example %}
 <nav class="nav">
   <div class="nav-left">
-    <a class="nav-item is-brand" href="#">
+    <a class="nav-item">
-      <img src="{{ site.url }}/images/bulma-type.png" alt="Bulma logo">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
     </a>
   </div>
 
   <div class="nav-center">
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       <span class="icon">
         <i class="fa fa-github"></i>
       </span>
     </a>
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       <span class="icon">
         <i class="fa fa-twitter"></i>
       </span>
     </a>
   </div>
 
+  <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
+  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
   <span class="nav-toggle">
     <span></span>
     <span></span>
     <span></span>
   </span>
 
+  <!-- This "nav-menu" is hidden on mobile -->
+  <!-- Add the modifier "is-active" to display it on mobile -->
   <div class="nav-right nav-menu">
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       Home
     </a>
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       Documentation
     </a>
-    <a class="nav-item" href="#">
+    <a class="nav-item">
       Blog
     </a>
 
@@ -78,7 +85,7 @@ doc-subtab: nav
         </span>
         <span>Tweet</span>
       </a>
-      <a class="button is-primary" href="#">
+      <a class="button is-primary">
         <span class="icon">
           <i class="fa fa-download"></i>
         </span>
@@ -87,63 +94,14 @@ doc-subtab: nav
     </span>
   </div>
 </nav>
+{% endcapture %}
+
+<div class="example is-paddingless">
+{{nav_example}}
 </div>
 
 {% highlight html %}
-<nav class="nav">
+{{nav_example}}
-  <div class="nav-left">
-    <a class="nav-item is-brand" href="#">
-      <img src="{{ site.url }}/images/bulma-type.png" alt="Bulma logo">
-    </a>
-  </div>
-
-  <div class="nav-center">
-    <a class="nav-item" href="#">
-      <span class="icon">
-        <i class="fa fa-github"></i>
-      </span>
-    </a>
-    <a class="nav-item" href="#">
-      <span class="icon">
-        <i class="fa fa-twitter"></i>
-      </span>
-    </a>
-  </div>
-
-  <span class="nav-toggle">
-    <span></span>
-    <span></span>
-    <span></span>
-  </span>
-
-  <div class="nav-right nav-menu">
-    <a class="nav-item" href="#">
-      Home
-    </a>
-    <a class="nav-item" href="#">
-      Documentation
-    </a>
-    <a class="nav-item" href="#">
-      Blog
-    </a>
-
-    <span class="nav-item">
-      <a class="button" >
-        <span class="icon">
-          <i class="fa fa-twitter"></i>
-        </span>
-        <span>Tweet</span>
-      </a>
-      <a class="button is-primary" href="#">
-        <span class="icon">
-          <i class="fa fa-download"></i>
-        </span>
-        <span>Download</span>
-      </a>
-    </span>
-  </div>
-</nav>
-
 {% endhighlight %}
 
     <hr>
@@ -156,45 +114,52 @@ doc-subtab: nav
         <li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
         <li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
       </ul>
+      <p>
+        To optimise the space on desktop, but also allow the mobile view to be usable, you can <strong>duplicate</strong> nav items in both <code>nav-left</code> and <code>nav-right</code>, and show/hide them with <a href="{{site.url}}/documentation/modifiers/responsive-helpers/">responsive helpers</a>.
+      </p>
     </div>
   </div>
 
-<div class="example">
+{% capture nav_tabs_example %}
 <nav class="nav has-shadow">
   <div class="container">
     <div class="nav-left">
-      <a class="nav-item is-tab is-active">Card</a>
+      <a class="nav-item">
-      <a class="nav-item is-tab">Level</a>
+        <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
-      <a class="nav-item is-tab">Media object</a>
+      </a>
-      <a class="nav-item is-tab">Menu</a>
+      <a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
-      <a class="nav-item is-tab">Message</a>
+      <a class="nav-item is-tab is-hidden-mobile">Features</a>
-      <a class="nav-item is-tab">Modal</a>
+      <a class="nav-item is-tab is-hidden-mobile">Pricing</a>
-      <a class="nav-item is-tab">Nav</a>
+      <a class="nav-item is-tab is-hidden-mobile">About</a>
-      <a class="nav-item is-tab">Pagination</a>
+    </div>
-      <a class="nav-item is-tab">Panel</a>
+    <span class="nav-toggle">
-      <a class="nav-item is-tab">Tabs</a>
+      <span></span>
+      <span></span>
+      <span></span>
+    </span>
+    <div class="nav-right nav-menu">
+      <a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
+      <a class="nav-item is-tab is-hidden-tablet">Features</a>
+      <a class="nav-item is-tab is-hidden-tablet">Pricing</a>
+      <a class="nav-item is-tab is-hidden-tablet">About</a>
+      <a class="nav-item is-tab">
+        <figure class="image is-16x16" style="margin-right: 8px;">
+          <img src="{{site.url}}/images/jgthms.png">
+        </figure>
+        Profile
+      </a>
+      <a class="nav-item is-tab">Log out</a>
     </div>
   </div>
 </nav>
+{% endcapture %}
+
+<div class="example is-paddingless">
+{{nav_tabs_example}}
 </div>
 
 {% highlight html %}
-<nav class="nav has-shadow">
+{{nav_tabs_example}}
-  <div class="container">
-    <div class="nav-left">
-      <a class="nav-item is-tab is-active">Card</a>
-      <a class="nav-item is-tab">Level</a>
-      <a class="nav-item is-tab">Media object</a>
-      <a class="nav-item is-tab">Menu</a>
-      <a class="nav-item is-tab">Message</a>
-      <a class="nav-item is-tab">Modal</a>
-      <a class="nav-item is-tab">Nav</a>
-      <a class="nav-item is-tab">Pagination</a>
-      <a class="nav-item is-tab">Panel</a>
-      <a class="nav-item is-tab">Tabs</a>
-    </div>
-  </div>
-</nav>
 {% endhighlight %}
 
 </section>

docs/documentation/components/pagination.html

@@ -13,63 +13,146 @@ doc-subtab: pagination
 
     <hr>
 
-    <div class="example">
+    <div class="content">
-      <nav class="pagination">
+      <p>
-        <a class="button">Previous</a>
+        The pagination component consists of several elements:
-        <a class="button">Next page</a>
+      </p>
       <ul>
         <li>
-            <a class="button">1</a>
+          <code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
         </li>
         <li>
-            <span>...</span>
+          <code>pagination-list</code> which displays page items:
+          <ul>
+            <li>
+              <code>pagination-link</code> for the page numbers
             </li>
             <li>
-            <a class="button">45</a>
+              <code>pagination-ellipsis</code> for range separators
-          </li>
-          <li>
-            <a class="button is-primary">46</a>
-          </li>
-          <li>
-            <a class="button">47</a>
-          </li>
-          <li>
-            <span>...</span>
-          </li>
-          <li>
-            <a class="button">86</a>
             </li>
           </ul>
-      </nav>
+        </li>
+      </ul>
+      <p>
+        All elements are optional so you can compose your pagination as you wish.
+      </p>
     </div>
-{% highlight html %}
+
+{% capture pagination_example %}
 <nav class="pagination">
-  <a class="button">Previous</a>
+  <a class="pagination-previous">Previous</a>
-  <a class="button">Next page</a>
+  <a class="pagination-next">Next page</a>
-  <ul>
+  <ul class="pagination-list">
     <li>
-      <a class="button">1</a>
+      <a class="pagination-link">1</a>
     </li>
     <li>
-      <span>...</span>
+      <span class="pagination-ellipsis">&hellip;</span>
     </li>
     <li>
-      <a class="button">45</a>
+      <a class="pagination-link">45</a>
     </li>
     <li>
-      <a class="button is-primary">46</a>
+      <a class="pagination-link is-current">46</a>
     </li>
     <li>
-      <a class="button">47</a>
+      <a class="pagination-link">47</a>
     </li>
     <li>
-      <span>...</span>
+      <span class="pagination-ellipsis">&hellip;</span>
     </li>
     <li>
-      <a class="button">86</a>
+      <a class="pagination-link">86</a>
     </li>
   </ul>
 </nav>
+{% endcapture %}
+<div class="example">
+{{pagination_example}}
+</div>
+{% highlight html %}
+{{pagination_example}}
 {% endhighlight %}
+
+    <div class="content">
+      <p>
+        You can disable some links if they are not active, or change the amount of page numbers available.
+      </p>
+    </div>
+
+{% capture pagination_options_example %}
+<nav class="pagination">
+  <a class="pagination-previous is-disabled">Previous</a>
+  <a class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li>
+      <a class="pagination-link is-current">1</a>
+    </li>
+    <li>
+      <a class="pagination-link">2</a>
+    </li>
+    <li>
+      <a class="pagination-link">3</a>
+    </li>
+  </ul>
+</nav>
+{% endcapture %}
+<div class="example">
+{{pagination_options_example}}
+</div>
+{% highlight html %}
+{{pagination_options_example}}
+{% endhighlight %}
+
+    <div class="content">
+      <p>
+        By default, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
+      </p>
+    </div>
+
+{% capture pagination_centered_example %}
+<nav class="pagination is-centered">
+  <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 %}
+<div class="example">
+{{pagination_centered_example}}
+</div>
+{% highlight html %}
+{{pagination_centered_example}}
+{% endhighlight %}
+
+{% capture pagination_right_example %}
+<nav class="pagination is-right">
+  <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 %}
+<div class="example">
+{{pagination_right_example}}
+</div>
+{% highlight html %}
+{{pagination_right_example}}
+{% endhighlight %}
+
   </div>
 </section>

docs/documentation/components/panel.html

@@ -13,92 +13,88 @@ doc-subtab: panel
 
     <hr>
 
-    <div class="columns">
+    <div class="content">
-      <div class="column is-4">
+      <p>
-        <nav class="panel">
+        The <code>panel</code> is container for several types:
-          <p class="panel-heading">
-            Repositories
       </p>
-          <p class="panel-tabs">
+      <ul>
-            <a class="is-active" href="#">All</a>
+        <li>
-            <a href="#">Public</a>
+          <code>panel-heading</code> as the first child
-            <a href="#">Private</a>
+        </li>
-            <a href="#">Sources</a>
+        <li>
-            <a href="#">Forks</a>
+          <code>panel-tabs</code> for navigation
+        </li>
+        <li>
+          <code>panel-block</code> which can contain other elements, like:
+          <ul>
+            <li><code>control</code></li>
+            <li><code>input</code></li>
+            <li><code>button</code></li>
+            <li><code>panel-icon</code></li>
+          </ul>
+        </li>
+      </ul>
+      <p>
+        The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside.
       </p>
-          <a class="panel-block is-active" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma-website</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>marksheet</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>daniellowtw/infBoard</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>jgthms.github.io</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>mojs</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>grumpy-cat</a>
-          <label class="panel-block">
-            <input type="checkbox">
-            Remember me
-          </label>
-          <div class="panel-block">
-            <button class="button is-primary is-outlined is-fullwidth">
-              Reset all filters
-            </button>
     </div>
-        </nav>
+
-      </div>
+{% capture panel_example %}
-      <div class="column">
-{% highlight html %}
 <nav class="panel">
   <p class="panel-heading">
     Repositories
   </p>
-  <p class="panel-tabs">
+  <div class="panel-block">
-    <a class="is-active" href="#">All</a>
+    <p class="control has-icon">
-    <a href="#">Public</a>
+      <input class="input is-small" type="text" placeholder="Search">
-    <a href="#">Private</a>
+      <span class="icon is-small">
-    <a href="#">Sources</a>
+        <i class="fa fa-search"></i>
-    <a href="#">Forks</a>
-  </p>
-  <a class="panel-block is-active" href="#">
-    <span class="panel-icon">
-      <i class="fa fa-book"></i>
       </span>
-    bulma-website
+    </p>
-  </a>
+  </div>
-  <a class="panel-block" href="#">
+  <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="fa fa-book"></i>
     </span>
     bulma
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
     <span class="panel-icon">
       <i class="fa fa-book"></i>
     </span>
     marksheet
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-code-fork"></i>
+      <i class="fa fa-book"></i>
     </span>
-    daniellowtw/infBoard
+    minireset.css
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
     <span class="panel-icon">
       <i class="fa fa-book"></i>
     </span>
     jgthms.github.io
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fa fa-code-fork"></i>
+    </span>
+    daniellowtw/infBoard
+  </a>
+  <a class="panel-block">
     <span class="panel-icon">
       <i class="fa fa-code-fork"></i>
     </span>
     mojs
   </a>
-  <a class="panel-block" href="#">
-    <span class="panel-icon">
-      <i class="fa fa-book"></i>
-    </span>
-    grumpy-cat
-  </a>
   <label class="panel-block">
     <input type="checkbox">
     Remember me
@@ -109,8 +105,17 @@ doc-subtab: panel
     </button>
   </div>
 </nav>
+{% endcapture %}
+    <div class="columns">
+      <div class="column is-4">
+{{panel_example}}
+      </div>
+      <div class="column">
+{% highlight html %}
+{{panel_example}}
 {% endhighlight %}
       </div>
     </div>
+
   </div>
 </section>

docs/documentation/components/tabs.html

@@ -18,17 +18,7 @@ doc-subtab: tabs
         The <strong>default</strong> tabs style has a single border at the bottom.</p>
     </div>
 
-<div class="example">
+{% capture tabs_example %}
-  <div class="tabs">
-    <ul>
-      <li class="is-active"><a>Pictures</a></li>
-      <li><a>Music</a></li>
-      <li><a>Videos</a></li>
-      <li><a>Documents</a></li>
-    </ul>
-  </div>
-</div>
-{% highlight html %}
 <div class="tabs">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -37,29 +27,23 @@ doc-subtab: tabs
     <li><a>Documents</a></li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_example}}
+</div>
+{% highlight html %}
+{{tabs_example}}
 {% endhighlight %}
 
     <hr>
 
     <h3 class="title">Alignment</h3>
-
     <div class="content">
       <p>
         To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
       </p>
     </div>
-
+{% capture tabs_centered_example %}
-<div class="example">
-  <div class="tabs is-centered">
-    <ul>
-      <li class="is-active"><a>Pictures</a></li>
-      <li><a>Music</a></li>
-      <li><a>Videos</a></li>
-      <li><a>Documents</a></li>
-    </ul>
-  </div>
-</div>
-{% highlight html %}
 <div class="tabs is-centered">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -68,20 +52,15 @@ doc-subtab: tabs
     <li><a>Documents</a></li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_centered_example}}
+</div>
+{% highlight html %}
+{{tabs_centered_example}}
 {% endhighlight %}
 
-<div class="example">
+{% capture tabs_right_example %}
-  <div class="tabs is-right">
-    <ul>
-      <li class="is-active"><a>Pictures</a></li>
-      <li><a>Music</a></li>
-      <li><a>Videos</a></li>
-      <li><a>Documents</a></li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-right">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -90,97 +69,22 @@ doc-subtab: tabs
     <li><a>Documents</a></li>
   </ul>
 </div>
-{% endhighlight %}
+{% endcapture %}
-
-    <div class="content">
-      <p>
-        To have several lists aligned differently, use one of <strong>3 modifiers</strong> on the <code>ul</code>:
-      </p>
-      <ul>
-        <li><code>is-left</code></li>
-        <li><code>is-center</code></li>
-        <li><code>is-right</code></li>
-      </ul>
-    </div>
-
 <div class="example">
-  <div class="tabs">
+{{tabs_right_example}}
-    <ul class="is-left">
-      <li class="is-active"><a>Pictures</a></li>
-      <li><a>Music</a></li>
-      <li><a>Videos</a></li>
-      <li><a>Documents</a></li>
-    </ul>
-    <ul class="is-center">
-      <li><a>Previous</a></li>
-      <li><a>Up</a></li>
-      <li><a>Next</a></li>
-    </ul>
-    <ul class="is-right">
-      <li><a>Search</a></li>
-    </ul>
-  </div>
 </div>
-
 {% highlight html %}
-<div class="tabs">
+{{tabs_right_example}}
-  <ul class="is-left">
-    <li class="is-active"><a>Pictures</a></li>
-    <li><a>Music</a></li>
-    <li><a>Videos</a></li>
-    <li><a>Documents</a></li>
-  </ul>
-  <ul class="is-center">
-    <li><a>Previous</a></li>
-    <li><a>Up</a></li>
-    <li><a>Next</a></li>
-  </ul>
-  <ul class="is-right">
-    <li><a>Search</a></li>
-  </ul>
-</div>
 {% endhighlight %}
 
     <hr>
 
     <h3 class="title">Icons</h3>
-
     <div class="content">
       <p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
     </div>
 
-<div class="example">
+{% capture tabs_icons_example %}
-  <div class="tabs is-centered">
-    <ul>
-      <li class="is-active">
-        <a>
-          <span class="icon is-small"><i class="fa fa-image"></i></span>
-          <span>Pictures</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-music"></i></span>
-          <span>Music</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-film"></i></span>
-          <span>Videos</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
-          <span>Documents</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-centered">
   <ul>
     <li class="is-active">
@@ -209,6 +113,12 @@ doc-subtab: tabs
     </li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_icons_example}}
+</div>
+{% highlight html %}
+{{tabs_icons_example}}
 {% endhighlight %}
 
     <hr>
@@ -217,19 +127,7 @@ doc-subtab: tabs
     <div class="content">
       <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
     </div>
-
+{% capture tabs_small_example %}
-<div class="example">
-  <div class="tabs is-small">
-    <ul>
-      <li class="is-active"><a>Pictures</a></li>
-      <li><a>Music</a></li>
-      <li><a>Videos</a></li>
-      <li><a>Documents</a></li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-small">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -238,20 +136,15 @@ doc-subtab: tabs
     <li><a>Documents</a></li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_small_example}}
+</div>
+{% highlight html %}
+{{tabs_small_example}}
 {% endhighlight %}
 
-<div class="example">
+{% capture tabs_medium_example %}
-  <div class="tabs is-medium">
-    <ul>
-      <li class="is-active"><a>Pictures</a></li>
-      <li><a>Music</a></li>
-      <li><a>Videos</a></li>
-      <li><a>Documents</a></li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-medium">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -260,20 +153,15 @@ doc-subtab: tabs
     <li><a>Documents</a></li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_medium_example}}
+</div>
+{% highlight html %}
+{{tabs_medium_example}}
 {% endhighlight %}
 
-<div class="example">
+{% capture tabs_large_example %}
-  <div class="tabs is-large">
-    <ul>
-      <li class="is-active"><a>Pictures</a></li>
-      <li><a>Music</a></li>
-      <li><a>Videos</a></li>
-      <li><a>Documents</a></li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-large">
   <ul>
     <li class="is-active"><a>Pictures</a></li>
@@ -282,6 +170,12 @@ doc-subtab: tabs
     <li><a>Documents</a></li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_large_example}}
+</div>
+{% highlight html %}
+{{tabs_large_example}}
 {% endhighlight %}
 
     <hr>
@@ -290,39 +184,7 @@ doc-subtab: tabs
     <div class="content">
       If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
     </div>
-
+{% capture tabs_boxed_example %}
-<div class="example">
-  <div class="tabs is-boxed">
-    <ul>
-      <li class="is-active">
-        <a>
-          <span class="icon is-small"><i class="fa fa-image"></i></span>
-          <span>Pictures</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-music"></i></span>
-          <span>Music</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-film"></i></span>
-          <span>Videos</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
-          <span>Documents</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-boxed">
   <ul>
     <li class="is-active">
@@ -351,14 +213,19 @@ doc-subtab: tabs
     </li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_boxed_example}}
+</div>
+{% highlight html %}
+{{tabs_boxed_example}}
 {% endhighlight %}
 
     <p class="content">
       If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
     </p>
-
+{% capture tabs_toggle_example %}
-<div class="example">
+<div class="tabs is-toggle">
-  <div class="tabs is-toggle">
   <ul>
     <li class="is-active">
       <a>
@@ -385,68 +252,19 @@ doc-subtab: tabs
       </a>
     </li>
   </ul>
-  </div>
 </div>
-
+{% endcapture %}
+<div class="example">
+{{tabs_toggle_example}}
+</div>
 {% highlight html %}
-<div class="tabs is-toggle">
+{{tabs_toggle_example}}
-  <ul>
-    <li class="is-active">
-      <a>
-        <span class="icon is-small"><i class="fa fa-image"></i></span>
-        <span>Pictures</span>
-      </a>
-    </li>
-    <li>
-      <a>
-        <span class="icon is-small"><i class="fa fa-music"></i></span>
-        Music
-      </a>
-    </li>
-    <li>
-      <a>
-        <span class="icon is-small"><i class="fa fa-film"></i></span>
-        Videos
-      </a>
-    </li>
-    <li>
-      <a>
-        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
-        Documents
-      </a>
-    </li>
-  </ul>
-</div>
 {% endhighlight %}
 
     <p class="content">
       If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
     </p>
-    <div class="example">
+{% capture tabs_fullwidth_example %}
-      <div class="tabs is-fullwidth">
-        <ul>
-          <li>
-            <a>
-              <span class="icon"><i class="fa fa-angle-left"></i></span>
-              <span>Left</span>
-            </a>
-          </li>
-          <li>
-            <a>
-              <span class="icon"><i class="fa fa-angle-up"></i></span>
-              <span>Up</span>
-            </a>
-          </li>
-          <li>
-            <a>
-              <span>Right</span>
-              <span class="icon"><i class="fa fa-angle-right"></i></span>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-{% highlight html %}
 <div class="tabs is-fullwidth">
   <ul>
     <li>
@@ -469,6 +287,12 @@ doc-subtab: tabs
     </li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_fullwidth_example}}
+</div>
+{% highlight html %}
+{{tabs_fullwidth_example}}
 {% endhighlight %}
 
     <hr>
@@ -477,39 +301,7 @@ doc-subtab: tabs
     <div class="content">
       <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
     </div>
-
+{% capture tabs_centered_boxed_example %}
-<div class="example">
-  <div class="tabs is-centered is-boxed">
-    <ul>
-      <li class="is-active">
-        <a>
-          <span class="icon is-small"><i class="fa fa-image"></i></span>
-          <span>Pictures</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-music"></i></span>
-          <span>Music</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-film"></i></span>
-          <span>Videos</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
-          <span>Documents</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-centered is-boxed">
   <ul>
     <li class="is-active">
@@ -538,40 +330,15 @@ doc-subtab: tabs
     </li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_centered_boxed_example}}
+</div>
+{% highlight html %}
+{{tabs_centered_boxed_example}}
 {% endhighlight %}
 
-<div class="example">
+{% capture toggle_fullwidth_example %}
-  <div class="tabs is-toggle is-fullwidth">
-    <ul>
-      <li class="is-active">
-        <a>
-          <span class="icon is-small"><i class="fa fa-image"></i></span>
-          <span>Pictures</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-music"></i></span>
-          <span>Music</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-film"></i></span>
-          <span>Videos</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
-          <span>Documents</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-toggle is-fullwidth">
   <ul>
     <li class="is-active">
@@ -600,40 +367,15 @@ doc-subtab: tabs
     </li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_toggle_fullwidth_example}}
+</div>
+{% highlight html %}
+{{tabs_toggle_fullwidth_example}}
 {% endhighlight %}
 
-<div class="example">
+{% capture tabs_centered_boxed_medium_example %}
-  <div class="tabs is-centered is-boxed is-medium">
-    <ul>
-      <li class="is-active">
-        <a>
-          <span class="icon is-small"><i class="fa fa-image"></i></span>
-          <span>Pictures</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-music"></i></span>
-          <span>Music</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-film"></i></span>
-          <span>Videos</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
-          <span>Documents</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-centered is-boxed is-medium">
   <ul>
     <li class="is-active">
@@ -662,40 +404,15 @@ doc-subtab: tabs
     </li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_centered_boxed_medium_example}}
+</div>
+{% highlight html %}
+{{tabs_centered_boxed_medium_example}}
 {% endhighlight %}
 
-<div class="example">
+{% capture tabs_toggle_fullwidth_large_example %}
-  <div class="tabs is-toggle is-fullwidth is-large">
-    <ul>
-      <li class="is-active">
-        <a>
-          <span class="icon"><i class="fa fa-image"></i></span>
-          <span>Pictures</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon"><i class="fa fa-music"></i></span>
-          <span>Music</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon"><i class="fa fa-film"></i></span>
-          <span>Videos</span>
-        </a>
-      </li>
-      <li>
-        <a>
-          <span class="icon"><i class="fa fa-file-text-o"></i></span>
-          <span>Documents</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-
-{% highlight html %}
 <div class="tabs is-toggle is-fullwidth is-large">
   <ul>
     <li class="is-active">
@@ -724,6 +441,12 @@ doc-subtab: tabs
     </li>
   </ul>
 </div>
+{% endcapture %}
+<div class="example">
+{{tabs_toggle_fullwidth_large_example}}
+</div>
+{% highlight html %}
+{{tabs_toggle_fullwidth_large_example}}
 {% endhighlight %}
 
   </div>

docs/documentation/elements/box.html

@@ -31,7 +31,7 @@ doc-subtab: box
           <article class="media">
             <div class="media-left">
               <figure class="image is-64x64">
-                <img src="http://placehold.it/128x128" alt="Image">
+                <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
               </figure>
             </div>
             <div class="media-content">
@@ -66,7 +66,7 @@ doc-subtab: box
   <article class="media">
     <div class="media-left">
       <figure class="image is-64x64">
-        <img src="http://placehold.it/128x128" alt="Image">
+        <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
       </figure>
     </div>
     <div class="media-content">

docs/documentation/elements/button.html

@@ -15,180 +15,269 @@ doc-subtab: button
 
     <hr>
 
-    <div class="columns">
+{% capture button_example %}
-      <div class="column">
+<div class="block">
-        <div class="block">
   <a class="button">Button</a>
   <a class="button is-white">White</a>
   <a class="button is-light">Light</a>
   <a class="button is-dark">Dark</a>
   <a class="button is-black">Black</a>
   <a class="button is-link">Link</a>
-        </div>
+</div>
-        <div class="block">
+<div class="block">
   <a class="button is-primary">Primary</a>
   <a class="button is-info">Info</a>
   <a class="button is-success">Success</a>
   <a class="button is-warning">Warning</a>
   <a class="button is-danger">Danger</a>
-        </div>
+</div>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_example}}
   </div>
   <div class="column">
 {% highlight html %}
-<a class="button">Button</a>
+{{button_example}}
-<a class="button is-primary">Primary</a>
-<a class="button is-info">Info</a>
-<a class="button is-success">Success</a>
-<a class="button is-warning">Warning</a>
-<a class="button is-danger">Danger</a>
-<a class="button is-link">Link</a>
 {% endhighlight %}
   </div>
-    </div>
+</div>
 
     <hr>
 
     <h3 class="title">Sizes</h3>
 
-    <div class="columns">
+{% capture button_sizes_example %}
-      <div class="column">
-        <a class="button is-small">Small</a>
-        <a class="button">Normal</a>
-        <a class="button is-medium">Medium</a>
-        <a class="button is-large">Large</a>
-      </div>
-      <div class="column">
-{% highlight html %}
 <a class="button is-small">Small</a>
 <a class="button">Normal</a>
 <a class="button is-medium">Medium</a>
 <a class="button is-large">Large</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_sizes_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_sizes_example}}
 {% endhighlight %}
   </div>
-    </div>
+</div>
 
     <hr>
 
     <h3 class="title">Styles</h3>
     <h4 class="subtitle">Outlined</h4>
-
+{% capture button_outlined_example %}
-    <div class="columns">
-      <div class="column">
-        <a class="button is-outlined">Outlined</a>
-        <a class="button is-primary is-outlined">Outlined</a>
-        <a class="button is-info is-outlined">Outlined</a>
-        <a class="button is-success is-outlined">Outlined</a>
-        <a class="button is-danger is-outlined">Outlined</a>
-      </div>
-      <div class="column">
-{% highlight html %}
 <a class="button is-outlined">Outlined</a>
 <a class="button is-primary is-outlined">Outlined</a>
 <a class="button is-info is-outlined">Outlined</a>
 <a class="button is-success is-outlined">Outlined</a>
 <a class="button is-danger is-outlined">Outlined</a>
-{% endhighlight %}
+{% endcapture %}
-      </div>
+<div class="columns">
-    </div>
-
-    <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
-
-    <div class="columns">
   <div class="column">
-        <div class="notification is-primary">
+{{button_outlined_example}}
-          <a class="button is-primary is-inverted">Inverted</a>
-          <a class="button is-info is-inverted">Inverted</a>
-          <a class="button is-success is-inverted">Inverted</a>
-          <a class="button is-danger is-inverted">Inverted</a>
-        </div>
   </div>
   <div class="column">
 {% highlight html %}
+{{button_outlined_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
+
+{% capture button_inverted_example %}
 <a class="button is-primary is-inverted">Inverted</a>
 <a class="button is-info is-inverted">Inverted</a>
 <a class="button is-success is-inverted">Inverted</a>
 <a class="button is-danger is-inverted">Inverted</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+    <div class="notification is-primary">
+{{button_inverted_example}}
+    </div>
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_inverted_example}}
 {% endhighlight %}
   </div>
+</div>
+
+    <h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
+
+{% capture button_inverted_outlined_example %}
+<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
+<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
+<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
+<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+    <div class="notification is-primary">
+{{button_inverted_outlined_example}}
     </div>
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_inverted_outlined_example}}
+{% endhighlight %}
+  </div>
+</div>
 
     <hr>
 
     <h3 class="title">States</h3>
-    <h4 class="subtitle">Loading</h4>
+    <h4 class="subtitle">Normal</h4>
 
-    <div class="columns">
+{% capture button_normal_example %}
+<a class="button">Normal</a>
+<a class="button is-primary">Normal</a>
+<a class="button is-info">Normal</a>
+<a class="button is-success">Normal</a>
+<a class="button is-warning">Normal</a>
+<a class="button is-danger">Normal</a>
+{% endcapture %}
+<div class="columns">
   <div class="column">
-        <a class="button is-loading">Loading</a>
+{{button_normal_example}}
-        <a class="button is-primary is-loading">Loading</a>
-        <a class="button is-info is-loading">Loading</a>
-        <a class="button is-success is-loading">Loading</a>
-        <a class="button is-warning is-loading">Loading</a>
-        <a class="button is-danger is-loading">Loading</a>
   </div>
   <div class="column">
 {% highlight html %}
-<a class="button is-loading">Loading</a>
+{{button_normal_example}}
-<a class="button is-primary is-loading">Loading</a>
-<a class="button is-info is-loading">Loading</a>
-<a class="button is-success is-loading">Loading</a>
-<a class="button is-warning is-loading">Loading</a>
-<a class="button is-danger is-loading">Loading</a>
 {% endhighlight %}
   </div>
+</div>
+
+    <h4 class="subtitle">Hover</h4>
+
+{% capture button_hover_example %}
+<a class="button is-hovered">Hover</a>
+<a class="button is-primary is-hovered">Hover</a>
+<a class="button is-info is-hovered">Hover</a>
+<a class="button is-success is-hovered">Hover</a>
+<a class="button is-warning is-hovered">Hover</a>
+<a class="button is-danger is-hovered">Hover</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_hover_example}}
   </div>
+  <div class="column">
+{% highlight html %}
+{{button_hover_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <h4 class="subtitle">Focus</h4>
+
+{% capture button_focus_example %}
+<a class="button is-focused">Focus</a>
+<a class="button is-primary is-focused">Focus</a>
+<a class="button is-info is-focused">Focus</a>
+<a class="button is-success is-focused">Focus</a>
+<a class="button is-warning is-focused">Focus</a>
+<a class="button is-danger is-focused">Focus</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_focus_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_focus_example}}
+{% endhighlight %}
+  </div>
+</div>
 
     <h4 class="subtitle">Active</h4>
 
-    <div class="columns">
+{% capture button_active_example %}
-      <div class="column">
-        <a class="button is-active">Active</a>
-        <a class="button is-primary is-active">Active</a>
-        <a class="button is-info is-active">Active</a>
-        <a class="button is-success is-active">Active</a>
-        <a class="button is-warning is-active">Active</a>
-        <a class="button is-danger is-active">Active</a>
-      </div>
-      <div class="column">
-{% highlight html %}
 <a class="button is-active">Active</a>
 <a class="button is-primary is-active">Active</a>
 <a class="button is-info is-active">Active</a>
 <a class="button is-success is-active">Active</a>
 <a class="button is-warning is-active">Active</a>
 <a class="button is-danger is-active">Active</a>
-{% endhighlight %}
+{% endcapture %}
-      </div>
+<div class="columns">
-    </div>
-
-    <h4 class="subtitle">Disabled</h4>
-
-    <div class="columns">
   <div class="column">
-        <a class="button is-disabled">Disabled</a>
+{{button_active_example}}
-        <a class="button is-primary is-disabled">Disabled</a>
-        <a class="button is-info is-disabled">Disabled</a>
-        <a class="button is-success is-disabled">Disabled</a>
-        <a class="button is-warning is-disabled">Disabled</a>
-        <a class="button is-danger is-disabled">Disabled</a>
   </div>
   <div class="column">
 {% highlight html %}
+{{button_active_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <h4 class="subtitle">Loading</h4>
+
+{% capture button_loading_example %}
+<a class="button is-loading">Loading</a>
+<a class="button is-primary is-loading">Loading</a>
+<a class="button is-info is-loading">Loading</a>
+<a class="button is-success is-loading">Loading</a>
+<a class="button is-warning is-loading">Loading</a>
+<a class="button is-danger is-loading">Loading</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_loading_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_loading_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+    <h4 class="subtitle">Disabled</h4>
+
+{% capture button_disabled_example %}
 <a class="button is-disabled">Disabled</a>
 <a class="button is-primary is-disabled">Disabled</a>
 <a class="button is-info is-disabled">Disabled</a>
 <a class="button is-success is-disabled">Disabled</a>
 <a class="button is-warning is-disabled">Disabled</a>
 <a class="button is-danger is-disabled">Disabled</a>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_disabled_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_disabled_example}}
 {% endhighlight %}
   </div>
-    </div>
+</div>
 
     <h4 class="subtitle">With Font Awesome icons</h4>
 
-    <div class="columns">
+{% capture button_fa_example %}
-      <div class="column">
+<p class="control">
-        <p class="control">
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-bold"></i>
+    </span>
+  </a>
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-italic"></i>
+    </span>
+  </a>
+  <a class="button">
+    <span class="icon is-small">
+      <i class="fa fa-underline"></i>
+    </span>
+  </a>
+</p>
+<p class="control">
   <a class="button">
     <span class="icon">
       <i class="fa fa-github"></i>
@@ -213,8 +302,8 @@ doc-subtab: button
       <i class="fa fa-times"></i>
     </span>
   </a>
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <a class="button is-small">
     <span class="icon is-small">
       <i class="fa fa-github"></i>
@@ -239,43 +328,97 @@ doc-subtab: button
     </span>
     <span>GitHub</span>
   </a>
-        </p>
+</p>
+{% endcapture %}
+<div class="columns">
+  <div class="column">
+{{button_fa_example}}
   </div>
   <div class="column">
 {% highlight html %}
-<a class="button">
+{{button_fa_example}}
-  <span class="icon">
-    <i class="fa fa-github"></i>
-  </span>
-  <span>GitHub</span>
-</a>
-<a class="button is-primary">
-  <span class="icon">
-    <i class="fa fa-twitter"></i>
-  </span>
-  <span>Twitter</span>
-</a>
-<a class="button is-success">
-  <span class="icon">
-    <i class="fa fa-check"></i>
-  </span>
-  <span>Save</span>
-</a>
-<a class="button is-danger">
-  <span>Delete</span>
-  <span class="icon">
-    <i class="fa fa-times"></i>
-  </span>
-</a>
-<a class="button is-danger is-outlined">
-  <span class="icon">
-    <i class="fa fa-times"></i>
-  </span>
-  <span>Delete</span>
-</a>
 {% endhighlight %}
   </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+      </p>
+      <p>
+        If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
+      </p>
     </div>
+{% capture button_only_icon_example %}
+<p class="control">
+<a class="button is-small">
+<span class="icon is-small">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+</p>
+<p class="control">
+<a class="button">
+<span class="icon is-small">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button">
+<span class="icon">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+</p>
+<p class="control">
+<a class="button is-medium">
+<span class="icon is-small">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-medium">
+<span class="icon">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-medium">
+<span class="icon is-medium">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+</p>
+<p class="control">
+<a class="button is-large">
+<span class="icon is-small">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-large">
+<span class="icon">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-large">
+<span class="icon is-medium">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+<a class="button is-large">
+<span class="icon is-large">
+  <i class="fa fa-header"></i>
+</span>
+</a>
+</p>
+{% endcapture %}
+{{button_only_icon_example}}
+  </div>
+  <div class="column">
+{% highlight html %}
+{{button_only_icon_example}}
+{% endhighlight %}
+  </div>
+</div>
 
     <hr>
 
@@ -283,26 +426,7 @@ doc-subtab: button
     <div class="content">
       <p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
     </div>
-    <div class="example">
+{% capture button_group_example %}
-      <div class="control is-grouped">
-        <p class="control">
-          <a class="button is-primary">
-            Save changes
-          </a>
-        </p>
-        <p class="control">
-          <a class="button">
-            Cancel
-          </a>
-        </p>
-        <p class="control">
-          <a class="button is-danger">
-            Delete post
-          </a>
-        </p>
-      </div>
-    </div>
-{% highlight html %}
 <div class="control is-grouped">
   <p class="control">
     <a class="button is-primary">
@@ -320,6 +444,12 @@ doc-subtab: button
     </a>
   </p>
 </div>
+{% endcapture %}
+<div class="example">
+{{button_group_example}}
+</div>
+{% highlight html %}
+{{button_group_example}}
 {% endhighlight %}
 
     <hr>
@@ -328,29 +458,7 @@ doc-subtab: button
     <div class="content">
       <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
     </div>
-    <div class="example">
+{% capture button_addons_example %}
-      <p class="control has-addons">
-        <a class="button">
-          <span class="icon is-small">
-            <i class="fa fa-align-left"></i>
-          </span>
-          <span>Left</span>
-        </a>
-        <a class="button">
-          <span class="icon is-small">
-            <i class="fa fa-align-center"></i>
-          </span>
-          <span>Center</span>
-        </a>
-        <a class="button">
-          <span class="icon is-small">
-            <i class="fa fa-align-right"></i>
-          </span>
-          <span>Right</span>
-        </a>
-      </p>
-    </div>
-{% highlight html %}
 <p class="control has-addons">
   <a class="button">
     <span class="icon is-small">
@@ -371,6 +479,69 @@ doc-subtab: button
     <span>Right</span>
   </a>
 </p>
+{% endcapture %}
+    <div class="example">
+{{button_addons_example}}
+    </div>
+{% highlight html %}
+{{button_addons_example}}
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Button group with addons</h3>
+    <div class="content">
+      <p>You can group together addons as well:</p>
+    </div>
+{% capture button_group_addons_example %}
+<div class="control is-grouped">
+  <p class="control has-addons">
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-bold"></i>
+      </span>
+      <span>Bold</span>
+    </a>
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-italic"></i>
+      </span>
+      <span>Italic</span>
+    </a>
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-underline"></i>
+      </span>
+      <span>Underline</span>
+    </a>
+  </p>
+  <p class="control has-addons">
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-left"></i>
+      </span>
+      <span>Left</span>
+    </a>
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-center"></i>
+      </span>
+      <span>Center</span>
+    </a>
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-right"></i>
+      </span>
+      <span>Right</span>
+    </a>
+  </p>
+</div>
+{% endcapture %}
+<div class="example">
+{{button_group_addons_example}}
+</div>
+{% highlight html %}
+{{button_group_addons_example}}
 {% endhighlight %}
 
   </div>

docs/documentation/elements/content.html

@@ -19,55 +19,16 @@ doc-subtab: 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>
         <li><code>&lt;p&gt;</code> paragraphs</li>
-        <li><code>&lt;ul&gt; &lt;ol&gt; &lt;dl&gt;</code> lists</li>
+        <li><code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> <code>&lt;dl&gt;</code> lists</li>
         <li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> headings</li>
         <li><code>&lt;blockquotes&gt;</code> quotes</li>
         <li><code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code></li>
-        <li><code>&lt;table&gt; &lt;tr&gt; &lt;th&gt; &lt;td&gt;</code> tables</li>
+        <li><code>&lt;table&gt;</code> <code>&lt;tr&gt;</code> <code>&lt;th&gt;</code> <code>&lt;td&gt;</code> tables</li>
       </ul>
-      <p>This <code>content</code> class can be used in <em>any</em>, whenever you just want to write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
+      <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
     </div>
 
-    <div class="example">
+{% capture content_example %}
-      <div class="content">
-        <h1>Hello World</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
-        <h2>Second level</h2>
-        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
-        <ul>
-          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
-          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
-          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
-          <li>Ut non enim metus.</li>
-        </ul>
-        <h3>Third level</h3>
-        <p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
-        <ol>
-          <li>Donec blandit a lorem id convallis.</li>
-          <li>Cras gravida arcu at diam gravida gravida.</li>
-          <li>Integer in volutpat libero.</li>
-          <li>Donec a diam tellus.</li>
-          <li>Aenean nec tortor orci.</li>
-          <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
-          <li>Vivamus maximus ultricies pulvinar.</li>
-        </ol>
-        <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
-        <p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
-        <p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
-        <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
-        <h4>Fourth level</h4>
-        <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
-        <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
-        <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
-        <h5>Fifth level</h5>
-        <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
-        <h6>Sixth level</h6>
-        <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
-        </ul>
-      </div>
-    </div>
-
-{% highlight html %}
 <div class="content">
   <h1>Hello World</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -97,6 +58,36 @@ doc-subtab: content
   <h4>Fourth level</h4>
   <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
   <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
+  <table>
+    <thead>
+      <tr>
+        <th>One</th>
+        <th>Two</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Three</td>
+        <td>Four</td>
+      </tr>
+      <tr>
+        <td>Five</td>
+        <td>Six</td>
+      </tr>
+      <tr>
+        <td>Seven</td>
+        <td>Eight</td>
+      </tr>
+      <tr>
+        <td>Nine</td>
+        <td>Ten</td>
+      </tr>
+      <tr>
+        <td>Eleven</td>
+        <td>Twelve</td>
+      </tr>
+    </tbody>
+  </table>
   <p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
   <h5>Fifth level</h5>
   <p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
@@ -104,13 +95,35 @@ doc-subtab: content
   <p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
   </ul>
 </div>
+{% endcapture %}
+
+<div class="example">
+  {{content_example}}
+</div>
+
+{% highlight html %}
+{{content_example}}
 {% endhighlight %}
 
     <hr>
 
     <h3 class="title">Sizes</h3>
     <div class="content">
-      <p>You can use the <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
+      <p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
+    </div>
+    <div class="example">
+      <div class="content is-small">
+        <h1>Hello World</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
+        <h2>Second level</h2>
+        <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+        <ul>
+          <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+          <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+          <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+          <li>Ut non enim metus.</li>
+        </ul>
+      </div>
     </div>
     <div class="example">
       <div class="content is-medium">

docs/documentation/elements/delete.html

@@ -0,0 +1,105 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: delete
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Delete</h1>
+    <h2 class="subtitle">
+      A versatile <strong>delete</strong> cross
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
+      </p>
+    </div>
+
+{% capture cross_example %}
+<a class="delete"></a>
+{% endcapture %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      On its own, it's a simple circle with a cross:
+    </p>
+  </div>
+  {{cross_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_example}}
+{% endhighlight %}
+</div>
+</div>
+
+{% capture cross_sizes_example %}
+<a class="delete is-small"></a>
+<a class="delete"></a>
+<a class="delete is-medium"></a>
+<a class="delete is-large"></a>
+{% endcapture %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      It comes in <strong>4 sizes</strong>:
+    </p>
+  </div>
+  {{cross_sizes_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_sizes_example}}
+{% endhighlight %}
+</div>
+</div>
+
+{% capture cross_elements_example %}
+<div class="block">
+  <span class="tag is-success">
+    Hello World
+    <button class="delete is-small"></button>
+  </span>
+</div>
+
+<div class="notification is-danger">
+  <button class="delete"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+</div>
+
+<article class="message is-info">
+  <div class="message-header">
+    Info
+    <button class="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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 %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
+    </p>
+  </div>
+  {{cross_elements_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_elements_example}}
+{% endhighlight %}
+</div>
+</div>
+
+  </div>
+</section>

docs/documentation/elements/form.html

@@ -30,60 +30,7 @@ doc-subtab: form
       <p>When combining several controls in a <strong>form</strong>, use the <code>.control</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
     </div>
 
-    <div class="columns">
+{% capture form_example %}
-      <div class="column is-half">
-        <label class="label">Name</label>
-        <p class="control">
-          <input class="input" type="text" placeholder="Text input">
-        </p>
-        <label class="label">Username</label>
-        <p class="control has-icon has-icon-right">
-          <input class="input is-success" type="text" placeholder="Text input" value="bulma">
-          <i class="fa fa-check"></i>
-          <span class="help is-success">This username is available</span>
-        </p>
-        <label class="label">Email</label>
-        <p class="control has-icon has-icon-right">
-          <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
-          <i class="fa fa-warning"></i>
-          <span class="help is-danger">This email is invalid</span>
-        </p>
-        <label class="label">Subject</label>
-        <p class="control">
-          <span class="select">
-            <select>
-              <option>Select dropdown</option>
-              <option>With options</option>
-            </select>
-          </span>
-        </p>
-        <label class="label">Message</label>
-        <p class="control">
-          <textarea class="textarea" placeholder="Textarea"></textarea>
-        </p>
-        <p class="control">
-          <label class="checkbox">
-            <input type="checkbox">
-            Remember me
-          </label>
-        </p>
-        <p class="control">
-          <label class="radio">
-            <input type="radio" name="question">
-            Yes
-          </label>
-          <label class="radio">
-            <input type="radio" name="question">
-            No
-          </label>
-        </p>
-        <p class="control">
-          <button class="button is-primary">Submit</button>
-          <button class="button is-link">Cancel</button>
-        </p>
-      </div>
-      <div class="column is-half">
-{% highlight html %}
 <label class="label">Name</label>
 <p class="control">
   <input class="input" type="text" placeholder="Text input">
@@ -91,13 +38,17 @@ doc-subtab: form
 <label class="label">Username</label>
 <p class="control has-icon has-icon-right">
   <input class="input is-success" type="text" placeholder="Text input" value="bulma">
+  <span class="icon is-small">
     <i class="fa fa-check"></i>
+  </span>
   <span class="help is-success">This username is available</span>
 </p>
 <label class="label">Email</label>
 <p class="control has-icon has-icon-right">
   <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
+  <span class="icon is-small">
     <i class="fa fa-warning"></i>
+  </span>
   <span class="help is-danger">This email is invalid</span>
 </p>
 <label class="label">Subject</label>
@@ -129,10 +80,23 @@ doc-subtab: form
     No
   </label>
 </p>
-<p class="control">
+<div class="control is-grouped">
+  <p class="control">
     <button class="button is-primary">Submit</button>
+  </p>
+  <p class="control">
     <button class="button is-link">Cancel</button>
-</p>
+  </p>
+</div>
+{% endcapture %}
+
+    <div class="columns">
+      <div class="column is-half">
+        {{form_example}}
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+{{form_example}}
 {% endhighlight %}
       </div>
     </div>
@@ -140,109 +104,90 @@ doc-subtab: form
     <hr>
 
     <h3 class="title">Colors</h3>
+{% capture colors_example %}
+<p class="control">
+  <input class="input is-primary" type="text" placeholder="Primary input">
+</p>
+<p class="control">
+  <input class="input is-info" type="text" placeholder="Info input">
+</p>
+<p class="control">
+  <input class="input is-success" type="text" placeholder="Success input">
+</p>
+<p class="control">
+  <input class="input is-warning" type="text" placeholder="Warning input">
+</p>
+<p class="control">
+  <input class="input is-danger" type="text" placeholder="Danger input">
+</p>
+{% endcapture %}
     <div class="columns">
       <div class="column is-half">
-        <p class="control">
+        {{colors_example}}
-          <input class="input is-primary" type="text" placeholder="Primary input">
-        </p>
-        <p class="control">
-          <input class="input is-info" type="text" placeholder="Info input">
-        </p>
-        <p class="control">
-          <input class="input is-success" type="text" placeholder="Success input">
-        </p>
-        <p class="control">
-          <input class="input is-warning" type="text" placeholder="Warning input">
-        </p>
-        <p class="control">
-          <input class="input is-danger" type="text" placeholder="Danger input">
-        </p>
       </div>
       <div class="column is-half">
 {% highlight html %}
-<p class="control">
+{{colors_example}}
-  <input class="input is-primary" type="text" placeholder="Primary input">
-</p>
-<p class="control">
-  <input class="input is-info" type="text" placeholder="Info input">
-</p>
-<p class="control">
-  <input class="input is-success" type="text" placeholder="Success input">
-</p>
-<p class="control">
-  <input class="input is-warning" type="text" placeholder="Warning input">
-</p>
-<p class="control">
-  <input class="input is-danger" type="text" placeholder="Danger input">
-</p>
 {% endhighlight %}
       </div>
     </div>
 
     <hr>
 
-    <h3 class="title">Sizes</h3>
+{% capture sizes_example %}
-    <div class="columns">
+<p class="control">
-      <div class="column is-half">
-        <p class="control">
   <input class="input is-small" type="text" placeholder="Small input">
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <input class="input" type="text" placeholder="Normal input">
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <input class="input is-medium" type="text" placeholder="Medium input">
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <input class="input is-large" type="text" placeholder="Large input">
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <span class="select is-small">
     <select>
       <option>Select dropdown</option>
       <option>With options</option>
     </select>
   </span>
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <span class="select">
     <select>
       <option>Select dropdown</option>
       <option>With options</option>
     </select>
   </span>
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <span class="select is-medium">
     <select>
       <option>Select dropdown</option>
       <option>With options</option>
     </select>
   </span>
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <span class="select is-large">
     <select>
       <option>Select dropdown</option>
       <option>With options</option>
     </select>
   </span>
-        </p>
+</p>
+{% endcapture %}
+    <h3 class="title">Sizes</h3>
+    <div class="columns">
+      <div class="column is-half">
+        {{sizes_example}}
       </div>
       <div class="column is-half">
 {% highlight html %}
-<p class="control">
+{{sizes_example}}
-  <input class="input is-small" type="text" placeholder="Small input">
-</p>
-<p class="control">
-  <input class="input" type="text" placeholder="Normal input">
-</p>
-<p class="control">
-  <input class="input is-medium" type="text" placeholder="Medium input">
-</p>
-<p class="control">
-  <input class="input is-large" type="text" placeholder="Large input">
-</p>
 {% endhighlight %}
       </div>
     </div>
@@ -250,44 +195,101 @@ doc-subtab: form
     <hr>
 
     <h3 class="title">States</h3>
-    <h4 class="subtitle">Loading</h4>
+    <h4 class="subtitle">Normal</h4>
+{% capture normal_example %}
+<p class="control">
+  <input class="input" type="text" placeholder="Normal input">
+</p>
+<p class="control">
+  <textarea class="textarea" placeholder="Normal textarea"></textarea>
+</p>
+{% endcapture %}
     <div class="columns">
       <div class="column is-half">
-        <p class="control is-loading">
+{{normal_example}}
-          <input class="input" type="text" placeholder="Loading input">
-        </p>
-        <p class="control is-loading">
-          <textarea class="textarea" placeholder="Loading textarea"></textarea>
-        </p>
       </div>
       <div class="column is-half">
 {% highlight html %}
+{{normal_example}}
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Hover</h4>
+{% capture hover_example %}
+<p class="control">
+  <input class="input is-hovered" type="text" placeholder="Hovered input">
+</p>
+<p class="control">
+  <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
+</p>
+{% endcapture %}
+    <div class="columns">
+      <div class="column is-half">
+        {{hover_example}}
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+{{hover_example}}
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Focus</h4>
+{% capture focus_example %}
+<p class="control">
+  <input class="input is-focused" type="text" placeholder="Focused input">
+</p>
+<p class="control">
+  <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
+</p>
+{% endcapture %}
+    <div class="columns">
+      <div class="column is-half">
+{{focus_example}}
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+{{focus_example}}
+{% endhighlight %}
+      </div>
+    </div>
+
+    <h4 class="subtitle">Loading</h4>
+{% capture loading_example %}
 <p class="control is-loading">
   <input class="input" type="text" placeholder="Loading input">
 </p>
 <p class="control is-loading">
   <textarea class="textarea" placeholder="Loading textarea"></textarea>
 </p>
+{% endcapture %}
+    <div class="columns">
+      <div class="column is-half">
+{{loading_example}}
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+{{loading_example}}
 {% endhighlight %}
       </div>
     </div>
 
     <h4 class="subtitle">Disabled</h4>
-    <div class="columns">
+{% capture disabled_example %}
-      <div class="column is-half">
+<p class="control">
-        <p class="control">
   <input class="input" type="text" placeholder="Disabled input" disabled>
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <label class="checkbox is-disabled">
     <input type="checkbox" disabled>
     Remember me
   </label>
-        </p>
+</p>
-        <p class="control">
+<p class="control">
   <label class="radio is-disabled">
     <input type="radio" name="question" disabled>
     Yes
@@ -296,180 +298,206 @@ doc-subtab: form
     <input type="radio" name="question" disabled>
     No
   </label>
-        </p>
+</p>
+<div class="control is-grouped">
   <p class="control">
     <button class="button is-primary" disabled>Submit</button>
+  </p>
+  <p class="control">
     <button class="button" disabled>Cancel</button>
   </p>
+</div>
+{% endcapture %}
+    <div class="columns">
+      <div class="column is-half">
+{{disabled_example}}
       </div>
       <div class="column is-half">
 {% highlight html %}
-<p class="control">
+{{disabled_example}}
-  <input class="input" type="text" placeholder="Disabled input" disabled>
-</p>
-<p class="control">
-  <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
-</p>
-<p class="control">
-  <label class="checkbox is-disabled">
-    <input type="checkbox" disabled>
-    Remember me
-  </label>
-</p>
-<p class="control">
-  <label class="radio is-disabled">
-    <input type="radio" name="question" disabled>
-    Yes
-  </label>
-  <label class="radio is-disabled">
-    <input type="radio" name="question" disabled>
-    No
-  </label>
-</p>
-<p class="control">
-  <button class="button is-primary" disabled>Submit</button>
-  <button class="button" disabled>Cancel</button>
-</p>
 {% endhighlight %}
       </div>
     </div>
 
     <h4 class="subtitle">With Font Awesome icons</h4>
-    <div class="columns">
+{% capture icons_example %}
-      <div class="column is-half">
-        <p class="control has-icon">
-          <input class="input" type="email" placeholder="Email">
-          <i class="fa fa-envelope"></i>
-        </p>
-        <p class="control has-icon">
-          <input class="input" type="password" placeholder="Password">
-          <i class="fa fa-lock"></i>
-        </p>
-        <p class="control">
-          <button class="button is-success">
-            Login
-          </button>
-        </p>
-      </div>
-      <div class="column is-half">
-{% highlight html %}
 <p class="control has-icon">
   <input class="input" type="email" placeholder="Email">
+  <span class="icon is-small">
     <i class="fa fa-envelope"></i>
+  </span>
 </p>
 <p class="control has-icon">
   <input class="input" type="password" placeholder="Password">
+  <span class="icon is-small">
     <i class="fa fa-lock"></i>
+  </span>
 </p>
 <p class="control">
   <button class="button is-success">
     Login
   </button>
 </p>
-{% endhighlight %}
+{% endcapture %}
-      </div>
-    </div>
     <div class="columns">
       <div class="column is-half">
-        <p class="control has-icon">
+{{icons_example}}
-          <input class="input is-small" type="email" placeholder="Email">
-          <i class="fa fa-envelope"></i>
-        </p>
-        <p class="control has-icon">
-          <input class="input" type="email" placeholder="Email">
-          <i class="fa fa-envelope"></i>
-        </p>
-        <p class="control has-icon">
-          <input class="input is-medium" type="email" placeholder="Email">
-          <i class="fa fa-envelope"></i>
-        </p>
-        <p class="control has-icon">
-          <input class="input is-large" type="email" placeholder="Email">
-          <i class="fa fa-envelope"></i>
-        </p>
-        <p class="control has-icon has-icon-right">
-          <input class="input is-small" type="email" placeholder="Email">
-          <i class="fa fa-check"></i>
-        </p>
-        <p class="control has-icon has-icon-right">
-          <input class="input" type="email" placeholder="Email">
-          <i class="fa fa-check"></i>
-        </p>
-        <p class="control has-icon has-icon-right">
-          <input class="input is-medium" type="email" placeholder="Email">
-          <i class="fa fa-check"></i>
-        </p>
-        <p class="control has-icon has-icon-right">
-          <input class="input is-large" type="email" placeholder="Email">
-          <i class="fa fa-check"></i>
-        </p>
       </div>
       <div class="column is-half">
 {% highlight html %}
-<p class="control has-icon">
+{{icons_example}}
-  <input class="input is-small" type="email" placeholder="Email">
-  <i class="fa fa-envelope"></i>
-</p>
-<p class="control has-icon">
-  <input class="input" type="email" placeholder="Email">
-  <i class="fa fa-envelope"></i>
-</p>
-<p class="control has-icon">
-  <input class="input is-medium" type="email" placeholder="Email">
-  <i class="fa fa-envelope"></i>
-</p>
-<p class="control has-icon">
-  <input class="input is-large" type="email" placeholder="Email">
-  <i class="fa fa-envelope"></i>
-</p>
-<p class="control has-icon has-icon-right">
-  <input class="input is-small" type="email" placeholder="Email">
-  <i class="fa fa-check"></i>
-</p>
-<p class="control has-icon has-icon-right">
-  <input class="input" type="email" placeholder="Email">
-  <i class="fa fa-check"></i>
-</p>
-<p class="control has-icon has-icon-right">
-  <input class="input is-medium" type="email" placeholder="Email">
-  <i class="fa fa-check"></i>
-</p>
-<p class="control has-icon has-icon-right">
-  <input class="input is-large" type="email" placeholder="Email">
-  <i class="fa fa-check"></i>
-</p>
-
 {% endhighlight %}
       </div>
     </div>
 
+{% capture icons_sizes_example %}
+<p class="control has-icon">
+  <input class="input is-small" type="email" placeholder="Email">
+  <span class="icon is-small">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input" type="email" placeholder="Email">
+  <span class="icon is-small">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input" type="email" placeholder="Email">
+  <span class="icon">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input is-medium" type="email" placeholder="Email">
+  <span class="icon is-small">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input is-medium" type="email" placeholder="Email">
+  <span class="icon">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input is-medium" type="email" placeholder="Email">
+  <span class="icon is-medium">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input is-large" type="email" placeholder="Email">
+  <span class="icon is-small">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input is-large" type="email" placeholder="Email">
+  <span class="icon">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input is-large" type="email" placeholder="Email">
+  <span class="icon is-medium">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+<p class="control has-icon">
+  <input class="input is-large" type="email" placeholder="Email">
+  <span class="icon is-large">
+    <i class="fa fa-envelope"></i>
+  </span>
+</p>
+{% endcapture %}
+<div class="columns">
+  <div class="column is-half">
+    <div class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+      </p>
+      <p>
+        If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
+      </p>
+    </div>
+    {{icons_sizes_example}}
+  </div>
+  <div class="column is-half">
+{% highlight html %}
+{{icons_sizes_example}}
+{% endhighlight %}
+  </div>
+</div>
+
+{% capture icons_sizes_right_example %}
+<p class="control has-icon has-icon-right">
+  <input class="input is-small" type="email" placeholder="Email">
+  <span class="icon is-small">
+    <i class="fa fa-check"></i>
+  </span>
+</p>
+<p class="control has-icon has-icon-right">
+  <input class="input" type="email" placeholder="Email">
+  <span class="icon">
+    <i class="fa fa-check"></i>
+  </span>
+</p>
+<p class="control has-icon has-icon-right">
+  <input class="input is-medium" type="email" placeholder="Email">
+  <span class="icon is-medium">
+    <i class="fa fa-check"></i>
+  </span>
+</p>
+<p class="control has-icon has-icon-right">
+  <input class="input is-large" type="email" placeholder="Email">
+  <span class="icon is-large">
+    <i class="fa fa-check"></i>
+  </span>
+</p>
+{% endcapture %}
+<div class="columns">
+  <div class="column is-half">
+    <div class="content">
+      <p>
+        By appending the <code>has-icon-right</code>, the icon will be placed on the right side instead.
+      </p>
+    </div>
+    {{icons_sizes_right_example}}
+  </div>
+  <div class="column is-half">
+{% highlight html %}
+{{icons_sizes_right_example}}
+{% endhighlight %}
+  </div>
+</div>
+
     <hr>
 
     <h3 class="title">Form addons</h3>
     <div class="content">
       <p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
     </div>
-    <div class="example">
+{% capture addons_example %}
-      <p class="control has-addons">
-        <input class="input" type="text" placeholder="Find a repository">
-        <a class="button is-info">
-          Search
-        </a>
-      </p>
-    </div>
-{% highlight html %}
 <p class="control has-addons">
   <input class="input" type="text" placeholder="Find a repository">
   <a class="button is-info">
     Search
   </a>
 </p>
+{% endcapture %}
+    <div class="example">
+{{addons_example}}
+    </div>
+{% highlight html %}
+{{addons_example}}
 {% endhighlight %}
     <div class="content">
       <p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
       <p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaing space (in this case, the input):</p>
     </div>
-    <div class="example">
+{% capture addons_expanded_example %}
 <p class="control has-addons">
   <span class="select">
     <select>
@@ -483,26 +511,30 @@ doc-subtab: form
     Transfer
   </a>
 </p>
+<p class="control has-addons">
+  <span class="select">
+    <select>
+      <option>$</option>
+      <option>£</option>
+      <option>€</option>
+    </select>
+  </span>
+  <input class="input is-expanded" type="text" placeholder="Amount of money">
+  <a class="button">
+    Transfer
+  </a>
+</p>
+{% endcapture %}
+    <div class="example">
+{{addons_expanded_example}}
     </div>
 {% highlight html %}
-<p class="control has-addons">
+{{addons_expanded_example}}
-  <span class="select">
-    <select>
-      <option>$</option>
-      <option>£</option>
-      <option>€</option>
-    </select>
-  </span>
-  <input class="input is-expanded" type="text" placeholder="Amount of money">
-  <a class="button">
-    Transfer
-  </a>
-</p>
 {% endhighlight %}
     <div class="content">
       <p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
     </div>
-<div class="example">
+{% capture addons_center_example %}
 <p class="control has-addons has-addons-centered">
   <span class="select">
     <select>
@@ -516,23 +548,14 @@ doc-subtab: form
     Transfer
   </a>
 </p>
+{% endcapture %}
+<div class="example">
+{{addons_center_example}}
 </div>
 {% highlight html %}
-<p class="control has-addons has-addons-centered">
+{{addons_center_example}}
-  <span class="select">
-    <select>
-      <option>$</option>
-      <option>£</option>
-      <option>€</option>
-    </select>
-  </span>
-  <input class="input" type="text" placeholder="Amount of money">
-  <a class="button is-primary">
-    Transfer
-  </a>
-</p>
 {% endhighlight %}
-<div class="example">
+{% capture addons_right_example %}
 <p class="control has-addons has-addons-right">
   <span class="select">
     <select>
@@ -546,30 +569,25 @@ doc-subtab: form
     Transfer
   </a>
 </p>
+{% endcapture %}
+<div class="example">
+{{addons_right_example}}
 </div>
 {% highlight html %}
-<p class="control has-addons has-addons-right">
+{{addons_right_example}}
-  <span class="select">
-    <select>
-      <option>$</option>
-      <option>£</option>
-      <option>€</option>
-    </select>
-  </span>
-  <input class="input" type="text" placeholder="Amount of money">
-  <a class="button is-primary">
-    Transfer
-  </a>
-</p>
 {% endhighlight %}
 
     <hr>
 
     <h3 class="title">Form group</h3>
     <div class="content">
-      <p>If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
+      <p>
+        If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container.
+        <br>
+        Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.
+      </p>
     </div>
-    <div class="example">
+{% capture group_example %}
 <div class="control is-grouped">
   <p class="control is-expanded">
     <input class="input" type="text" placeholder="Find a repository">
@@ -580,22 +598,13 @@ doc-subtab: form
     </a>
   </p>
 </div>
+{% endcapture %}
+    <div class="example">
+{{group_example}}
     </div>
 {% highlight html %}
-<div class="control is-grouped">
+{{group_example}}
-  <p class="control is-expanded">
-    <input class="input" type="text" placeholder="Find a repository">
-  </p>
-  <p class="control">
-    <a class="button is-info">
-      Search
-    </a>
-  </p>
-</div>
 {% endhighlight %}
-    <div class="content">
-      <p>Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.</p>
-    </div>
 
     <hr>
 
@@ -612,7 +621,8 @@ doc-subtab: form
       </ul>
       <p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
     </div>
-    <div class="control is-horizontal">
+{% capture horizontal_form_example %}
+<div class="control is-horizontal">
   <div class="control-label">
     <label class="label">From</label>
   </div>
@@ -624,8 +634,8 @@ doc-subtab: form
       <input class="input" type="email" placeholder="Email">
     </p>
   </div>
-    </div>
+</div>
-    <div class="control is-horizontal">
+<div class="control is-horizontal">
   <div class="control-label">
     <label class="label">Subject</label>
   </div>
@@ -636,49 +646,19 @@ doc-subtab: form
       </select>
     </div>
   </div>
-    </div>
+</div>
-    <div class="control is-horizontal">
+<div class="control is-horizontal">
   <div class="control-label">
     <label class="label">Question</label>
   </div>
   <div class="control">
     <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
   </div>
-    </div>
+</div>
+{% endcapture %}
+{{horizontal_form_example}}
 {% highlight html %}
-<div class="control is-horizontal">
+{{horizontal_form_example}}
-  <div class="control-label">
-    <label class="label">From</label>
-  </div>
-  <div class="control is-grouped">
-    <p class="control is-expanded">
-      <input class="input" type="text" placeholder="Name">
-    </p>
-    <p class="control is-expanded">
-      <input class="input" type="email" placeholder="Email">
-    </p>
-  </div>
-</div>
-<div class="control is-horizontal">
-  <div class="control-label">
-    <label class="label">Subject</label>
-  </div>
-  <div class="control">
-    <div class="select is-fullwidth">
-      <select>
-        <option>General enquiry</option>
-      </select>
-    </div>
-  </div>
-</div>
-<div class="control is-horizontal">
-  <div class="control-label">
-    <label class="label">Question</label>
-  </div>
-  <div class="control">
-    <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
-  </div>
-</div>
 {% endhighlight %}
   </div>
 </section>

docs/documentation/elements/icon.html

@@ -16,23 +16,24 @@ doc-subtab: icon
     <hr>
 
     <div class="content">
-      <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class:</p>
+      <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
     </div>
 
-    <div class="example">
+{% capture icon_example %}
-      <span class="icon">
-        <i class="fa fa-home"></i>
-      </span>
-    </div>
-
-{% highlight html %}
 <span class="icon">
   <i class="fa fa-home"></i>
 </span>
+{% endcapture %}
+    <div class="example">
+      {{icon_example}}
+    </div>
+
+{% highlight html %}
+{{icon_example}}
 {% endhighlight %}
 
     <div class="content">
-      <p>The <code>icon</code> container will take up <em>exactly</em> <strong>24 x 24 pixels</strong>. The icon itself is sized at <strong>21px</strong>.</p>
+      <p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
     </div>
 
     <hr>
@@ -57,25 +58,25 @@ doc-subtab: icon
           <td><code>icon is-small</code></td>
           <td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
           <td>14px</td>
-          <td>16x16px</td>
+          <td>1rem x 1rem</td>
         </tr>
         <tr>
           <td><code>icon</code></td>
           <td><span class="icon"><i class="fa fa-home"></i></span></td>
           <td>21px</td>
-          <td>24x24px</td>
+          <td>1.5rem x 1.5rem</td>
         </tr>
         <tr>
           <td><code>icon is-medium</code></td>
           <td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
           <td>28px</td>
-          <td>32x32px</td>
+          <td>2rem x 2rem</td>
         </tr>
         <tr>
           <td><code>icon is-large</code></td>
           <td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
           <td>42px</td>
-          <td>48x48px</td>
+          <td>3rem x 3rem</td>
         </tr>
       </tbody>
     </table>

docs/documentation/elements/image.html

@@ -21,13 +21,13 @@ doc-subtab: image
 
     <div class="example">
       <figure class="image is-128x128">
-        <img src="http://placehold.it/128x128">
+        <img src="{{site.url}}/images/placeholders/128x128.png">
       </figure>
     </div>
 
 {% highlight html %}
 <figure class="image is-128x128">
-  <img src="http://placehold.it/128x128">
+  <img src="{{site.url}}/images/placeholders/128x128.png">
 </figure>
 {% endhighlight %}
 
@@ -42,37 +42,37 @@ doc-subtab: image
       <tbody>
         <tr>
           <td><code>image is-16x16</code></td>
-          <td><figure class="image is-16x16"><img src="http://placehold.it/16x16"></figure></td>
+          <td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
           <td>16x16px</td>
         </tr>
         <tr>
           <td><code>image is-24x24</code></td>
-          <td><figure class="image is-24x24"><img src="http://placehold.it/24x24"></figure></td>
+          <td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
           <td>24x24px</td>
         </tr>
         <tr>
           <td><code>image is-32x32</code></td>
-          <td><figure class="image is-32x32"><img src="http://placehold.it/32x32"></figure></td>
+          <td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
           <td>32x32px</td>
         </tr>
         <tr>
           <td><code>image is-48x48</code></td>
-          <td><figure class="image is-48x48"><img src="http://placehold.it/48x48"></figure></td>
+          <td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
           <td>48x48px</td>
         </tr>
         <tr>
           <td><code>image is-64x64</code></td>
-          <td><figure class="image is-64x64"><img src="http://placehold.it/64x64"></figure></td>
+          <td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
           <td>64x64px</td>
         </tr>
         <tr>
           <td><code>image is-96x96</code></td>
-          <td><figure class="image is-96x96"><img src="http://placehold.it/96x96"></figure></td>
+          <td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
           <td>96x96px</td>
         </tr>
         <tr>
           <td><code>image is-128x128</code></td>
-          <td><figure class="image is-128x128"><img src="http://placehold.it/128x128"></figure></td>
+          <td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
           <td>128x128px</td>
         </tr>
       </tbody>
@@ -86,13 +86,13 @@ doc-subtab: image
 
     <div class="example">
       <figure class="image is-128x128">
-        <img src="http://placehold.it/256x256">
+        <img src="{{site.url}}/images/placeholders/256x256.png">
       </figure>
     </div>
 
 {% highlight html %}
 <figure class="image is-128x128">
-  <img src="http://placehold.it/256x256">
+  <img src="{{site.url}}/images/placeholders/256x256.png">
 </figure>
 {% endhighlight %}
 
@@ -108,32 +108,32 @@ doc-subtab: image
       <tbody>
         <tr>
           <td><code>image is-square</code></td>
-          <td><figure class="image is-square"><img src="http://placehold.it/480x480"></figure></td>
+          <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
           <td>Square (or 1by1)</td>
         </tr>
         <tr>
           <td><code>image is-1by1</code></td>
-          <td><figure class="image is-1by1"><img src="http://placehold.it/480x480"></figure></td>
+          <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
           <td>1 by 1</td>
         </tr>
         <tr>
           <td><code>image is-4by3</code></td>
-          <td><figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure></td>
+          <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
           <td>4 by 3</td>
         </tr>
         <tr>
           <td><code>image is-3by2</code></td>
-          <td><figure class="image is-3by2"><img src="http://placehold.it/480x320"></figure></td>
+          <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
           <td>3 by 2</td>
         </tr>
         <tr>
           <td><code>image is-16by9</code></td>
-          <td><figure class="image is-16by9"><img src="http://placehold.it/640x360"></figure></td>
+          <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
           <td>16 by 9</td>
         </tr>
         <tr>
           <td><code>image is-2by1</code></td>
-          <td><figure class="image is-2by1"><img src="http://placehold.it/640x320"></figure></td>
+          <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
           <td>2 by 1</td>
         </tr>
       </tbody>

docs/documentation/elements/table.html

@@ -13,210 +13,312 @@ doc-subtab: table
 
     <hr>
 
-    <div class="example">
+{% capture table_example %}
-      <table class="table">
-        <thead>
-          <tr>
-            <th></th>
-            <th>Open source projects</th>
-            <th>Year started</th>
-            <th colspan="3">Links</th>
-          </tr>
-        </thead>
-        <tfoot>
-          <tr>
-            <th></th>
-            <th>Open source projects</th>
-            <th>Year started</th>
-            <th colspan="3">Links</th>
-          </tr>
-        </tfoot>
-        <tbody>
-          <tr>
-            <td class="is-icon">
-              <i class="fa fa-android"></i>
-            </td>
-            <td>
-              <a href="#">Android</a>
-            </td>
-            <td>
-              2003
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-github"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-twitter"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-globe"></i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td class="is-icon">
-              <i class="fa fa-firefox"></i>
-            </td>
-            <td>
-              <a href="#">Firefox</a>
-            </td>
-            <td>
-              2003
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-github"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-twitter"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-globe"></i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td class="is-icon">
-              <i class="fa fa-linux"></i>
-            </td>
-            <td>
-              <a href="#">Linux</a>
-            </td>
-            <td>
-              2003
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-github"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-twitter"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-globe"></i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td class="is-icon">
-              <i class="fa fa-wordpress"></i>
-            </td>
-            <td>
-              <a href="#">WordPress</a>
-            </td>
-            <td>
-              2003
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-github"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-twitter"></i>
-              </a>
-            </td>
-            <td class="is-icon">
-              <a href="#">
-                <i class="fa fa-globe"></i>
-              </a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-{% highlight html %}
 <table class="table">
   <thead>
     <tr>
-      <th>Name</th>
+      <th><abbr title="Position">Pos</abbr></th>
-      <th>Instrument</th>
+      <th>Team</th>
-      <th></th>
+      <th><abbr title="Played">Pld</abbr></th>
-      <th></th>
+      <th><abbr title="Won">W</abbr></th>
+      <th><abbr title="Drawn">D</abbr></th>
+      <th><abbr title="Lost">L</abbr></th>
+      <th><abbr title="Goals for">GF</abbr></th>
+      <th><abbr title="Goals against">GA</abbr></th>
+      <th><abbr title="Goal difference">GD</abbr></th>
+      <th><abbr title="Points">Pts</abbr></th>
+      <th>Qualification or relegation</th>
     </tr>
   </thead>
   <tfoot>
     <tr>
-      <th>Name</th>
+      <th><abbr title="Position">Pos</abbr></th>
-      <th>Instrument</th>
+      <th>Team</th>
-      <th></th>
+      <th><abbr title="Played">Pld</abbr></th>
-      <th></th>
+      <th><abbr title="Won">W</abbr></th>
+      <th><abbr title="Drawn">D</abbr></th>
+      <th><abbr title="Lost">L</abbr></th>
+      <th><abbr title="Goals for">GF</abbr></th>
+      <th><abbr title="Goals against">GA</abbr></th>
+      <th><abbr title="Goal difference">GD</abbr></th>
+      <th><abbr title="Points">Pts</abbr></th>
+      <th>Qualification or relegation</th>
     </tr>
   </tfoot>
   <tbody>
     <tr>
-      <td>Misty Abbott</td>
+      <th>1</th>
-      <td>Bass Guitar</td>
+      <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-twitter"></i>
-        </a>
-      </td>
-      <td class="is-icon">
-        <a href="#">
-          <i class="fa fa-instagram"></i>
-        </a>
       </td>
+      <td>38</td>
+      <td>23</td>
+      <td>12</td>
+      <td>3</td>
+      <td>68</td>
+      <td>36</td>
+      <td>+32</td>
+      <td>81</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
     </tr>
     <tr>
-      <td>John Smith</td>
+      <th>2</th>
-      <td>Rhythm Guitar</td>
+      <td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></td>
-      <td class="is-icon">
+      <td>38</td>
-        <a href="#">
+      <td>20</td>
-          <i class="fa fa-twitter"></i>
+      <td>11</td>
-        </a>
+      <td>7</td>
-      </td>
+      <td>65</td>
-      <td class="is-icon">
+      <td>36</td>
-        <a href="#">
+      <td>+29</td>
-          <i class="fa fa-instagram"></i>
+      <td>71</td>
-        </a>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
-      </td>
     </tr>
     <tr>
-      <td>Robert Mikels</td>
+      <th>3</th>
-      <td>Lead Guitar</td>
+      <td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></td>
-      <td class="is-icon">
+      <td>38</td>
-        <a href="#">
+      <td>19</td>
-          <i class="fa fa-twitter"></i>
+      <td>13</td>
-        </a>
+      <td>6</td>
-      </td>
+      <td>69</td>
-      <td class="is-icon">
+      <td>35</td>
-        <a href="#">
+      <td>+34</td>
-          <i class="fa fa-instagram"></i>
+      <td>70</td>
-        </a>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
-      </td>
     </tr>
     <tr>
-      <td>Karyn Holmberg</td>
+      <th>4</th>
-      <td>Drums</td>
+      <td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
-      <td class="is-icon">
+      <td>38</td>
-        <a href="#">
+      <td>19</td>
-          <i class="fa fa-twitter"></i>
+      <td>9</td>
-        </a>
+      <td>10</td>
+      <td>71</td>
+      <td>41</td>
+      <td>+30</td>
+      <td>66</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="2016–17 UEFA Champions League">Champions League play-off round</a></td>
+    </tr>
+    <tr>
+      <th>5</th>
+      <td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
+      <td>38</td>
+      <td>19</td>
+      <td>9</td>
+      <td>10</td>
+      <td>49</td>
+      <td>35</td>
+      <td>+14</td>
+      <td>66</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
+    </tr>
+    <tr>
+      <th>6</th>
+      <td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
+      <td>38</td>
+      <td>18</td>
+      <td>9</td>
+      <td>11</td>
+      <td>59</td>
+      <td>41</td>
+      <td>+18</td>
+      <td>63</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
+    </tr>
+    <tr>
+      <th>7</th>
+      <td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
+      <td>38</td>
+      <td>16</td>
+      <td>14</td>
+      <td>8</td>
+      <td>65</td>
+      <td>51</td>
+      <td>+14</td>
+      <td>62</td>
+      <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
+    </tr>
+    <tr>
+      <th>8</th>
+      <td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
+      <td>38</td>
+      <td>16</td>
+      <td>12</td>
+      <td>10</td>
+      <td>63</td>
+      <td>50</td>
+      <td>+13</td>
+      <td>60</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>9</th>
+      <td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
+      <td>38</td>
+      <td>14</td>
+      <td>9</td>
+      <td>15</td>
+      <td>41</td>
+      <td>55</td>
+      <td>−14</td>
+      <td>51</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>10</th>
+      <td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
+      <td>38</td>
+      <td>12</td>
+      <td>14</td>
+      <td>12</td>
+      <td>59</td>
+      <td>53</td>
+      <td>+6</td>
+      <td>50</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>11</th>
+      <td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
+      <td>38</td>
+      <td>11</td>
+      <td>14</td>
+      <td>13</td>
+      <td>59</td>
+      <td>55</td>
+      <td>+4</td>
+      <td>47</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>12</th>
+      <td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
+      <td>38</td>
+      <td>12</td>
+      <td>11</td>
+      <td>15</td>
+      <td>42</td>
+      <td>52</td>
+      <td>−10</td>
+      <td>47</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>13</th>
+      <td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
+      <td>38</td>
+      <td>12</td>
+      <td>9</td>
+      <td>17</td>
+      <td>40</td>
+      <td>50</td>
+      <td>−10</td>
+      <td>45</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>14</th>
+      <td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
+      <td>38</td>
+      <td>10</td>
+      <td>13</td>
+      <td>15</td>
+      <td>34</td>
+      <td>48</td>
+      <td>−14</td>
+      <td>43</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>15</th>
+      <td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
+      <td>38</td>
+      <td>11</td>
+      <td>9</td>
+      <td>18</td>
+      <td>39</td>
+      <td>51</td>
+      <td>−12</td>
+      <td>42</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>16</th>
+      <td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
+      <td>38</td>
+      <td>11</td>
+      <td>9</td>
+      <td>18</td>
+      <td>45</td>
+      <td>67</td>
+      <td>−22</td>
+      <td>42</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>17</th>
+      <td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
+      <td>38</td>
+      <td>9</td>
+      <td>12</td>
+      <td>17</td>
+      <td>48</td>
+      <td>62</td>
+      <td>−14</td>
+      <td>39</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>18</th>
+      <td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
       </td>
-      <td class="is-icon">
+      <td>38</td>
-        <a href="#">
+      <td>9</td>
-          <i class="fa fa-instagram"></i>
+      <td>10</td>
-        </a>
+      <td>19</td>
+      <td>44</td>
+      <td>65</td>
+      <td>−21</td>
+      <td>37</td>
+      <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
+    </tr>
+    <tr>
+      <th>19</th>
+      <td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
       </td>
+      <td>38</td>
+      <td>9</td>
+      <td>7</td>
+      <td>22</td>
+      <td>39</td>
+      <td>67</td>
+      <td>−28</td>
+      <td>34</td>
+      <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>    </tr>
+    <tr>
+      <th>20</th>
+      <td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
+      </td>
+      <td>38</td>
+      <td>3</td>
+      <td>8</td>
+      <td>27</td>
+      <td>27</td>
+      <td>76</td>
+      <td>−49</td>
+      <td>17</td>
+      <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
     </tr>
   </tbody>
 </table>
+{% endcapture %}
+
+<div class="example">
+  {{table_example}}
+</div>
+
+{% highlight html %}
+{{table_example}}
 {% endhighlight %}
 
     <hr>
@@ -276,6 +378,14 @@ doc-subtab: table
               <td>Seven</td>
               <td>Eight</td>
             </tr>
+            <tr>
+              <td>Nine</td>
+              <td>Ten</td>
+            </tr>
+            <tr>
+              <td>Eleven</td>
+              <td>Twelve</td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -309,6 +419,14 @@ doc-subtab: table
               <td>Seven</td>
               <td>Eight</td>
             </tr>
+            <tr>
+              <td>Nine</td>
+              <td>Ten</td>
+            </tr>
+            <tr>
+              <td>Eleven</td>
+              <td>Twelve</td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -342,6 +460,14 @@ doc-subtab: table
               <td>Seven</td>
               <td>Eight</td>
             </tr>
+            <tr>
+              <td>Nine</td>
+              <td>Ten</td>
+            </tr>
+            <tr>
+              <td>Eleven</td>
+              <td>Twelve</td>
+            </tr>
           </tbody>
         </table>
       </div>

docs/documentation/elements/tag.html

@@ -17,7 +17,7 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        By default, a <strong>tag</strong> is a 24px high label.
+        By default, a <strong>tag</strong> is a 1.5rem high label.
       </div>
       <div class="column is-2">
         <span class="tag">
@@ -35,14 +35,29 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        There are <strong>6 different colors</strong> available.
+        Like with buttons, there are <strong>9 different colors</strong> available.
       </div>
       <div class="column is-2">
+        <p class="control">
+          <span class="tag is-black">
+            Black
+          </span>
+        </p>
         <p class="control">
           <span class="tag is-dark">
             Dark
           </span>
         </p>
+        <p class="control">
+          <span class="tag is-light">
+            Light
+          </span>
+        </p>
+        <p class="control">
+          <span class="tag is-white">
+            White
+          </span>
+        </p>
         <p class="control">
           <span class="tag is-primary">
             Primary
@@ -69,7 +84,10 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
+<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-info">Info</span>
 <span class="tag is-success">Success</span>
@@ -81,14 +99,9 @@ doc-subtab: tag
 
     <div class="columns">
       <div class="column is-4">
-        And <strong>3 additional</strong> sizes.
+        And <strong>2 additional</strong> sizes.
       </div>
       <div class="column is-2">
-        <p class="control">
-          <span class="tag is-dark is-small">
-            Small
-          </span>
-        </p>
         <p class="control">
           <span class="tag is-primary is-medium">
             Medium
@@ -102,7 +115,6 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
-<span class="tag is-dark is-small">Small</span>
 <span class="tag is-primary is-medium">Medium</span>
 <span class="tag is-info is-large">Large</span>
 {% endhighlight %}
@@ -114,12 +126,6 @@ doc-subtab: tag
         You can also append a <strong>delete button</strong>.
       </div>
       <div class="column is-2">
-        <p class="control">
-          <span class="tag is-info is-small">
-            Foo
-            <button class="delete is-small"></button>
-          </span>
-        </p>
         <p class="control">
           <span class="tag is-success">
             Bar
@@ -141,10 +147,6 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
-<span class="tag is-info is-small">
-  Foo
-  <button class="delete is-small"></button>
-</span>
 <span class="tag is-success">
   Bar
   <button class="delete is-small"></button>

docs/documentation/grid/columns.html

@@ -17,6 +17,7 @@ doc-subtab: columns
         <li>Add a <code>columns</code> container</li>
         <li>Add as many <code>column</code> elements as you want</li>
       </ol>
+      <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
     </div>
 
     <div class="columns">

docs/documentation/grid/tiles.html

@@ -44,7 +44,7 @@ doc-subtab: tiles
               <p class="title">Middle tile</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -93,7 +93,7 @@ doc-subtab: tiles
           <p class="title">Middle tile</p>
           <p class="subtitle">With an image</p>
           <figure class="image is-4by3">
-            <img src="http://placehold.it/640x480">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
           </figure>
         </article>
       </div>
@@ -383,7 +383,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -490,7 +490,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -583,7 +583,7 @@ tile is-ancestor
           <p class="title">Middle box</p>
           <p class="subtitle">With an image</p>
           <figure class="image is-4by3">
-            <img src="http://placehold.it/640x480">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
           </figure>
         </article>
       </div>

docs/documentation/layout/container.html

@@ -24,7 +24,9 @@ doc-subtab: container
         <li><code>.footer</code></li>
       </ul>
       <p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
-      <p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
+      <p>On <strong>desktop</strong> (>= 1000px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
+      <p>On <strong>widescreen</strong> (>= 1192px), the container will have a maximum width of <strong>1152px</strong>.</p>
+      <p>The values <strong>960</strong> and <strong>1152</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
     </div>
   </div>
 
@@ -51,6 +53,7 @@ doc-subtab: container
       <p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
     </div>
   </div>
+</section>
 
   <div class="example is-fullwidth">
     <div class="container is-fluid">
@@ -67,4 +70,3 @@ doc-subtab: container
   </div>
 </div>
 {% endhighlight %}
-</section>

docs/documentation/modifiers/responsive-helpers.html

@@ -200,15 +200,15 @@ doc-subtab: responsive-helpers
           </th>
           <th>
             Tablet<br>
-            Between <code>769px</code> and <code>979px</code>
+            Between <code>769px</code> and <code>999px</code>
           </th>
           <th>
             Desktop<br>
-            Between <code>980px</code> and <code>1179px</code>
+            Between <code>1000px</code> and <code>1239px</code>
           </th>
           <th>
             Widescreen<br>
-            Above <code>1180px</code>
+            Above <code>1240px</code>
           </th>
         </tr>
       </thead>

docs/documentation/modifiers/syntax.html

@@ -17,16 +17,19 @@ doc-subtab: syntax
       <div class="column">
         <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
       </div>
+{% capture button_example %}
+<a class="button">
+  Button
+</a>
+{% endcapture %}
       <div class="column">
         <p>
-          <a class="button">Button</a>
+          {{button_example}}
         </p>
       </div>
       <div class="column is-half">
 {% highlight html %}
-<a class="button">
+{{button_example}}
-  Button
-</a>
 {% endhighlight %}
       </div>
     </div>
@@ -34,16 +37,19 @@ doc-subtab: syntax
       <div class="column">
         <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
       </div>
+{% capture button_primary_example %}
+<a class="button is-primary">
+  Button
+</a>
+{% endcapture %}
       <div class="column">
         <p>
-          <a class="button is-primary">Button</a>
+{{button_primary_example}}
         </p>
       </div>
       <div class="column is-half">
 {% highlight html %}
-<a class="button is-primary">
+{{button_primary_example}}
-  Button
-</a>
 {% endhighlight %}
       </div>
     </div>
@@ -124,18 +130,18 @@ doc-subtab: syntax
       </div>
       <div class="column is-half">
 {% highlight html %}
-<p class="control">
+<a class="button is-small">
-  <a class="button is-small">Button</a>
+  Button
-</p>
+</a>
-<p class="control">
+<a class="button">
-  <a class="button">Button</a>
+  Button
-</p>
+</a>
-<p class="control">
+<a class="button is-medium">
-  <a class="button is-medium">Button</a>
+  Button
-</p>
+</a>
-<p class="control">
+<a class="button is-large">
-  <a class="button is-large">Button</a>
+  Button
-</p>
+</a>
 {% endhighlight %}
       </div>
     </div>

docs/documentation/overview/functions.html

@@ -0,0 +1,27 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: functions
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Functions</h1>
+    <h2 class="subtitle">Utility functions to calculate colors and other values</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>Bulma uses 5 custom functions to help define the values and colors dynamically:</p>
+      <ul>
+        <li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
+        <li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
+        <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
+        <li><code>removeUnit($number)</code>: removes the unit of a Sass number. So "10px" becomes "10" and "3.5rem" returns "3.5". Used for string concatenation.</li>
+        <li><code>roundToEvenNumber($number)</code>: rounds a number to the closest but lower even one. So 23 becomes 22, and 7.5 returns 6.</li>
+      </ul>
+    </div>
+  </div>
+</section>

docs/documentation/overview/mixins.html

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

docs/documentation/overview/modular.html

@@ -47,6 +47,7 @@ doc-subtab: modular
         What if you only want the <strong>button</strong> styles instead?
       </p>
 {% highlight sass %}
+@import "bulma/sass/utilities/_all
 @import "bulma/sass/elements/button.sass"
 {% endhighlight %}
       <p>

docs/documentation/overview/responsiveness.html

@@ -19,8 +19,8 @@ doc-subtab: responsiveness
       <ul>
         <li><code>mobile</code>: up to <code>768px</code></li>
         <li><code>tablet</code>: from <code>769px</code></li>
-        <li><code>desktop</code>: from <code>980px</code></li>
+        <li><code>desktop</code>: from <code>1000px</code></li>
-        <li><code>widescreen</code>: from <code>1180px</code></li>
+        <li><code>widescreen</code>: from <code>1192px</code></li>
       </ul>
       <p>Bulma uses 7 responsive mixins:</p>
       <ul>
@@ -34,23 +34,23 @@ doc-subtab: responsiveness
         </li>
         <li>
           <code>=tablet-only</code><br>
-          from <code>769px</code> and until <code>979px</code>
+          from <code>769px</code> and until <code>999px</code>
         </li>
         <li>
           <code>=touch</code><br>
-          until <code>979px</code>
+          until <code>999px</code>
         </li>
         <li>
           <code>=desktop</code><br>
-          from <code>980px</code>
+          from <code>1000px</code>
         </li>
         <li>
           <code>=desktop-only</code><br>
-          from <code>980px</code> and until <code>1179px</code>
+          from <code>1000px</code> and until <code>1191px</code>
         </li>
         <li>
           <code>=widescreen</code><br>
-          from <code>1180px</code>
+          from <code>1192px</code>
         </li>
       </ul>
       <p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
@@ -65,15 +65,15 @@ doc-subtab: responsiveness
           </th>
           <th>
             Tablet<br>
-            Between <code>769px</code> and <code>979px</code>
+            Between <code>769px</code> and <code>999px</code>
           </th>
           <th>
             Desktop<br>
-            Between <code>980px</code> and <code>1179px</code>
+            Between <code>1000px</code> and <code>1191px</code>
           </th>
           <th>
             Widescreen<br>
-            <code>1180px</code> and above
+            <code>1192px</code> and above
           </th>
         </tr>
       </thead>

docs/documentation/overview/start.html

@@ -14,7 +14,9 @@ doc-subtab: start
     <hr>
 
     <article class="media is-large">
-      <div class="media-number">1</div>
+      <div class="media-left">
+        <p class="title is-5">1</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Use <strong>NPM</strong> <em>(recommended)</em>:
@@ -26,7 +28,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">2</div>
+      <div class="media-left">
+        <p class="title is-5">2</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
@@ -37,7 +41,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">3</div>
+      <div class="media-left">
+        <p class="title is-5">3</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Download from the <strong>repository</strong>
@@ -70,7 +76,9 @@ npm install bulma
     </div>
 
     <article class="media is-large">
-      <div class="media-number">1</div>
+      <div class="media-left">
+        <p class="title is-5">1</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Download</strong> the source files:
@@ -83,7 +91,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">2</div>
+      <div class="media-left">
+        <p class="title is-5">2</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Set</strong> your variables:<br>
@@ -107,7 +117,9 @@ $family-primary: $family-serif // Use the new serif family
     </article>
 
     <article class="media is-large">
-      <div class="media-number">3</div>
+      <div class="media-left">
+        <p class="title is-5">3</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Import</strong> Bulma <em>after</em> having set your variables:<br>

docs/documentation/overview/variables.html

@@ -20,9 +20,9 @@ doc-subtab: variables
           <strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
           <ul>
             <li><strong>colors</strong>: <code>$blue: #42afe3</code></li>
-            <li><strong>font families</strong>: <code>$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif</code></li>
+            <li><strong>font families</strong>: <code>$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace</code></li>
-            <li><strong>font sizes</strong>: <code>$size-1: 48px</code></li>
+            <li><strong>font sizes</strong>: <code>$size-1: 3.5rem</code></li>
-            <li><strong>other values</strong>: <code>$nav-height: 50px</code> or <code>$easing: ease-out</code></li>
+            <li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
           </ul>
         </li>
         <li>
@@ -40,7 +40,7 @@ doc-subtab: variables
         <li>
           <strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
           <ul>
-            <li><code>$body-background: $grey-lighter</code>: the page's main background is the lighter grey</li>
+            <li><code>$background: $white-ter</code>: the main background color</li>
             <li><code>$link: $primary</code>: the links use the primary color</li>
             <li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
           </ul>
@@ -174,23 +174,23 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-1</code></td>
-        <td>48px</td>
+        <td>3.5rem</td>
       </tr>
       <tr>
         <td><code>$size-2</code></td>
-        <td>40px</td>
+        <td>2.75rem</td>
       </tr>
       <tr>
         <td><code>$size-3</code></td>
-        <td>28px</td>
+        <td>2rem</td>
       </tr>
       <tr>
         <td><code>$size-4</code></td>
-        <td>24px</td>
+        <td>1.5rem</td>
       </tr>
       <tr>
         <td><code>$size-5</code></td>
-        <td>18px</td>
+        <td>1.25rem</td>
       </tr>
       <tr>
         <td><code>$size-6</code></td>
@@ -198,24 +198,24 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-7</code></td>
-        <td>11px</td>
+        <td>0.75rem</td>
+      </tr>
+      <tr>
+        <td><code>$weight-light</code></td>
+        <td>300</td>
       </tr>
       <tr>
         <td><code>$weight-normal</code></td>
         <td>400</td>
       </tr>
+      <tr>
+        <td><code>$weight-semibold</code></td>
+        <td>500</td>
+      </tr>
       <tr>
         <td><code>$weight-bold</code></td>
         <td>700</td>
       </tr>
-      <tr>
-        <td><code>$weight-title-normal</code></td>
-        <td>300</td>
-      </tr>
-      <tr>
-        <td><code>$weight-title-bold</code></td>
-        <td>500</td>
-      </tr>
 
       <tr><th colspan="2">Breakpoints</th></tr>
       <tr>
@@ -224,11 +224,11 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$desktop</code></td>
-        <td>980px</td>
+        <td>1000px (960px + 40px container)</td>
       </tr>
       <tr>
         <td><code>$widescreen</code></td>
-        <td>1180px</td>
+        <td>1192px (1152px+ 40px container)</td>
       </tr>
 
       <tr><th colspan="2">Miscellaneous</th></tr>
@@ -268,15 +268,11 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$light</code></td>
-        <td>$grey-lighter</td>
+        <td>$white-ter</td>
       </tr>
       <tr>
         <td><code>$dark</code></td>
-        <td>$grey-dark</td>
+        <td>$grey-darker</td>
-      </tr>
-      <tr>
-        <td><code>$text</code></td>
-        <td>$grey-dark</td>
       </tr>
 
       <tr><th colspan="2">3. Generated variables</th></tr>
@@ -330,6 +326,10 @@ doc-subtab: variables
       </tr>
 
       <tr><th colspan="2">Text colors</th></tr>
+      <tr>
+        <td><code>$text</code></td>
+        <td>$grey-dark</td>
+      </tr>
       <tr>
         <td><code>$text-invert</code></td>
         <td>findColorInvert($text)</td>
@@ -378,59 +378,25 @@ doc-subtab: variables
         <td><code>$link-hover</code></td>
         <td>$grey-darker</td>
       </tr>
-      <tr>
-        <td><code>$link-hover-background</code></td>
-        <td>$grey-lighter</td>
-      </tr>
       <tr>
         <td><code>$link-hover-border</code></td>
         <td>$grey-darker</td>
       </tr>
+      <tr>
+        <td><code>$link-focus</code></td>
+        <td>$grey-darker</td>
+      </tr>
+      <tr>
+        <td><code>$link-focus-border</code></td>
+        <td>$primary</td>
+      </tr>
       <tr>
         <td><code>$link-active</code></td>
         <td>$grey-darker</td>
       </tr>
       <tr>
         <td><code>$link-active-border</code></td>
-        <td>$grey-darker</td>
+        <td>$grey-dark</td>
-      </tr>
-
-      <tr><th colspan="2">Control colors</th></tr>
-      <tr>
-        <td><code>$control</code></td>
-        <td>$text-strong</td>
-      </tr>
-      <tr>
-        <td><code>$control-background</code></td>
-        <td>$text-invert</td>
-      </tr>
-      <tr>
-        <td><code>$control-border</code></td>
-        <td>$border</td>
-      </tr>
-      <tr>
-        <td><code>$control-hover</code></td>
-        <td>$link-hover</td>
-      </tr>
-      <tr>
-        <td><code>$control-hover-border</code></td>
-        <td>$border-hover</td>
-      </tr>
-      <tr>
-        <td><code>$control-active</code></td>
-        <td>$link</td>
-      </tr>
-      <tr>
-        <td><code>$control-active-background</code></td>
-        <td>$link</td>
-      </tr>
-      <tr>
-        <td><code>$control-active-background-invert</code></td>
-        <td>$link-invert</td>
-      </tr>
-      <tr>
-        <td><code>$control-active-border</code></td>
-        <td>$link</td>
       </tr>
 
       <tr><th colspan="2">Typography</th></tr>
@@ -448,7 +414,7 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-normal</code></td>
-        <td>$size-6</td>
+        <td>1rem</td>
       </tr>
       <tr>
         <td><code>$size-medium</code></td>
@@ -456,11 +422,7 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-large</code></td>
-        <td>$size-3</td>
+        <td>$size-4</td>
-      </tr>
-      <tr>
-        <td><code>$size-huge</code></td>
-        <td>$size-1</td>
       </tr>
 
       <tr><th colspan="2">4. Lists and maps</th></tr>

docs/index.html

@@ -91,7 +91,7 @@ route: index
   <div class="container">
     <h3 class="title is-2">
       <a href="{{ site.url }}/documentation/grid/columns">
-        <span class="icon is-large">
+        <span class="icon is-medium">
           <i class="fa fa-pause"></i>
         </span>
         Simple <strong>columns</strong>
@@ -189,7 +189,7 @@ route: index
   <div class="container">
     <h3 class="title is-2">
       <a href="{{ site.url }}/documentation/grid/tiles">
-        <span class="icon is-large">
+        <span class="icon is-medium">
           <i class="fa fa-th-large"></i>
         </span>
         Magic <strong>tiles</strong>
@@ -214,7 +214,7 @@ route: index
               <p class="title">Middle tile</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -281,7 +281,7 @@ route: index
   <div class="container">
     <h3 class="title is-2">
       <a href="{{ site.url }}/documentation/components/level/">
-        <span class="icon is-large">
+        <span class="icon is-medium">
           <i class="fa fa-arrows-h"></i>
         </span>
         Flexible <strong>horizontal level</strong>
@@ -345,7 +345,7 @@ route: index
       <div class="column">
         <h3 class="title is-2">
           <a href="{{ site.url }}/documentation/components/media-object/">
-            <span class="icon is-large">
+            <span class="icon is-medium">
               <i class="fa fa-magic"></i>
             </span>
             Versatile <strong>media object</strong>
@@ -359,7 +359,7 @@ route: index
           <article class="media">
             <div class="media-left">
               <figure class="image is-64x64">
-                <img src="http://placehold.it/128x128" alt="Image">
+                <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
               </figure>
             </div>
             <div class="media-content">
@@ -406,7 +406,7 @@ route: index
     <div class="container has-text-centered">
       <h3 class="title is-2">
         <a href="{{ site.url }}/documentation/layout/hero/">
-          <span class="icon is-large">
+          <span class="icon is-medium">
             <i class="fa fa-arrows-v"></i>
           </span>
           Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
@@ -433,7 +433,7 @@ route: index
       <div class="column">
         <h3 class="title is-2">
           <a href="{{ site.url }}/documentation/modifiers/syntax/">
-            <span class="icon is-large">
+            <span class="icon is-medium">
               <i class="fa fa-cogs"></i>
             </span>
             Compose your element with <strong>modifier</strong> classes
@@ -477,7 +477,7 @@ route: index
   <div class="container">
     <h3 class="title is-2">
       <a href="{{ site.url }}/documentation/elements/box/">
-        <span class="icon is-large">
+        <span class="icon is-medium">
           <i class="fa fa-asterisk"></i>
         </span>
         And all the usual <strong>elements</strong>
@@ -490,18 +490,18 @@ route: index
         <div class="card">
           <div class="card-image">
             <figure class="image is-4by3">
-              <img src="http://placehold.it/300x225" alt="">
+              <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-32x32">
+                <figure class="image" style="height: 40px; width: 40px;">
-                  <img src="http://placehold.it/64x64" alt="Image">
+                  <img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
                 </figure>
               </div>
               <div class="media-content">
-                <p class="title is-5">Card</p>
+                <p class="title is-4">Card</p>
                 <p class="subtitle is-6">Subtitle</p>
               </div>
             </div>

docs/templates.html

@@ -29,21 +29,21 @@ route: templates
         <a class="box" href="{{ site.url }}/templates/everything.html">
           <h3 class="title is-4">Everything</h3>
           <h4 class="subtitle is-5">All Bulma elements on one page</h4>
-          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+          <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
         </a>
       </div>
       <div class="column is-one-third">
         <a class="box" href="{{ site.url }}/templates/business.html">
           <h3 class="title is-4">Business</h3>
           <h4 class="subtitle is-5">Classic business homepage</h4>
-          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+          <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
         </a>
       </div>
       <div class="column is-one-third">
         <a class="box" href="{{ site.url }}/templates/welcome.html">
           <h3 class="title is-4">Welcome</h3>
           <h4 class="subtitle is-5">Simple one-page introduction</h4>
-          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+          <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
         </a>
       </div>
     </div>

docs/tiles.html

@@ -275,7 +275,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -382,7 +382,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -475,7 +475,7 @@ tile is-ancestor
           <p class="title">Middle box</p>
           <p class="subtitle">With an image</p>
           <figure class="image is-4by3">
-            <img src="http://placehold.it/640x480">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
           </figure>
         </article>
       </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "homepage": "http://bulma.io",
   "author": "Jeremy Thomas <bbxdesign@gmail.com> (http://jgthms.com)",
   "description": "Modern CSS framework based on Flexbox",

sass/base/generic.sass

@@ -1,8 +1,9 @@
-$body-background: $white-ter !default
+$body-background: $white !default
+$body-size: $size-6 !default
 
 html
   background-color: $body-background
-  font-size: $size-normal
+  font-size: $body-size
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
   min-width: 300px
@@ -31,13 +32,12 @@ pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
   font-family: $family-code
-  line-height: 1.25
 
 body
   color: $text
   font-size: 1rem
   font-weight: $weight-normal
-  line-height: 1.428571428571429
+  line-height: 1.5
 
 // Inline
 
@@ -52,16 +52,16 @@ a
 code
   background-color: $code-background
   color: $code
-  font-size: 12px
+  font-size: 0.8em
   font-weight: normal
-  padding: 1px 2px 2px
+  padding: 0.25em 0.5em 0.25em
 
 hr
   background-color: $border
   border: none
   display: block
   height: 1px
-  margin: 20px 0
+  margin: 1.5rem 0
 
 img
   max-width: 100%
@@ -71,7 +71,7 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: $size-small
+  font-size: 0.8em
 
 span
   font-style: inherit
@@ -86,14 +86,16 @@ strong
 pre
   background-color: $pre-background
   color: $pre
+  font-size: 0.8em
   white-space: pre
   word-wrap: normal
   code
-    background-color: $pre-background
+    background: none
-    color: $pre
+    color: inherit
     display: block
+    font-size: 1em
     overflow-x: auto
-    padding: 16px 20px
+    padding: 1.25rem 1.5rem
 
 table
   width: 100%

sass/components/_all.sass

@@ -1,7 +1,6 @@
 @charset "utf-8"
 
 @import "card.sass"
-@import "highlight.sass"
 @import "level.sass"
 @import "media.sass"
 @import "menu.sass"

sass/components/card.sass

@@ -2,31 +2,30 @@
   align-items: stretch
   box-shadow: 0 1px 2px rgba($black, 0.1)
   display: flex
-  min-height: 40px
 
 .card-header-title
-  align-items: flex-start
+  align-items: center
   color: $text-strong
   display: flex
   flex-grow: 1
-  font-weight: bold
+  font-weight: $weight-bold
-  padding: 10px
+  padding: 0.75rem
 
 .card-header-icon
   align-items: center
   cursor: pointer
   display: flex
   justify-content: center
-  width: 40px
+  padding: 0.75rem
 
 .card-image
   display: block
   position: relative
 
 .card-content
-  padding: 20px
+  padding: 1.5rem
   .title + .subtitle
-    margin-top: -20px
+    margin-top: -1.5rem
 
 .card-footer
   border-top: 1px solid $border
@@ -36,9 +35,11 @@
 .card-footer-item
   align-items: center
   display: flex
+  flex-basis: 0
   flex-grow: 1
+  flex-shrink: 0
   justify-content: center
-  padding: 10px
+  padding: 0.75rem
   &:not(:last-child)
     border-right: 1px solid $border
 
@@ -48,11 +49,5 @@
   color: $text
   max-width: 100%
   position: relative
-  width: 300px
   .media:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
-  // Modifiers
-  &.is-fullwidth
-    width: 100%
-  &.is-rounded
-    border-radius: $radius-large

sass/components/level.sass

@@ -1,36 +1,46 @@
 .level-item
+  align-items: center
+  display: flex
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+  justify-content: center
   .title,
   .subtitle
     margin-bottom: 0
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: 10px
+      margin-bottom: 0.75rem
 
 .level-left,
 .level-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
   .level-item
     &:not(:last-child)
-      margin-right: 10px
+      margin-right: 0.75rem
     // Modifiers
     &.is-flexible
       flex-grow: 1
 
 .level-left
+  align-items: center
+  justify-content: flex-start
   // Responsiveness
   +mobile
     & + .level-right
-      margin-top: 20px
+      margin-top: 1.5rem
   +tablet
-    align-items: center
     display: flex
 
 .level-right
+  align-items: center
+  justify-content: flex-end
   // Responsiveness
   +tablet
-    align-items: center
     display: flex
-    justify-content: flex-end
 
 .level
   +block

sass/components/media.sass

@@ -1,29 +1,17 @@
-.media-number,
 .media-left,
 .media-right
+  flex-basis: auto
   flex-grow: 0
   flex-shrink: 0
 
-.media-number
-  background-color: $background
-  border-radius: 290486px
-  display: inline-block
-  font-size: $size-medium
-  height: 32px
-  line-height: 24px
-  margin-right: 10px
-  min-width: 32px
-  padding: 4px 8px
-  text-align: center
-  vertical-align: top
-
 .media-left
-  margin-right: 10px
+  margin-right: 1rem
 
 .media-right
-  margin-left: 10px
+  margin-left: 1rem
 
 .media-content
+  flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
   text-align: left
@@ -33,29 +21,24 @@
   display: flex
   text-align: left
   .content:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   .media
     border-top: 1px solid rgba($border, 0.5)
     display: flex
-    padding-top: 10px
+    padding-top: 0.75rem
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 5px
+      margin-bottom: 0.5rem
     .media
-      padding-top: 5px
+      padding-top: 0.5rem
       & + .media
-        margin-top: 5px
+        margin-top: 0.5rem
   & + .media
     border-top: 1px solid rgba($border, 0.5)
-    margin-top: 10px
+    margin-top: 1rem
-    padding-top: 10px
+    padding-top: 1rem
   // Sizes
   &.is-large
     & + .media
-      margin-top: 20px
+      margin-top: 1.5rem
-      padding-top: 20px
+      padding-top: 1.5rem
-  // Responsiveness
-  +tablet
-    &.is-large
-      .media-number
-        margin-right: 20px

sass/components/menu.sass

@@ -1,14 +1,13 @@
-.menu-nav
+.menu
-  a
+  font-size: $size-normal
-    display: block
-    padding: 5px 10px
 
 .menu-list
+  line-height: 1.25
   a
     border-radius: $radius-small
     color: $text
     display: block
-    padding: 5px 10px
+    padding: 0.5em 0.75em
     &:hover
       background-color: $background
       color: $link
@@ -19,14 +18,15 @@
   li
     ul
       border-left: 1px solid $border
-      margin: 10px
+      margin: 0.75em
-      padding-left: 10px
+      padding-left: 0.75em
 
 .menu-label
   color: $text-light
-  font-size: $size-small
+  font-size: 0.8em
-  letter-spacing: 1px
+  letter-spacing: 0.1em
-  margin-bottom: 5px
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: 20px
+    margin-top: 1em
+  &:not(:last-child)
+    margin-bottom: 1em

sass/components/message.sass

@@ -1,39 +1,61 @@
-.message-body
-  border: 1px solid $border
-  border-radius: $radius
-  padding: 12px 15px
-  strong
-    color: inherit
-
-.message-header
-  background-color: $text
-  border-radius: $radius $radius 0 0
-  color: $text-invert
-  padding: 7px 10px
-  strong
-    color: inherit
-  & + .message-body
-    border-radius: 0 0 $radius $radius
-    border-top: none
-
 .message
   +block
   background-color: $background
   border-radius: $radius
+  font-size: $size-normal
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
-    $lightning: max((100% - lightness($color)) - 4%, 0%)
+    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
-    $darkness: max(lightness($color) - 10%, lightness($color))
+    $color-luminance: colorLuminance($color)
+    $darken-percentage: $color-luminance * 70%
+    $desaturate-percentage: $color-luminance * 30%
     &.is-#{$name}
-      background-color: lighten($color, $lightning)
+      background-color: lighten($color, $color-lightning)
       .message-header
         background-color: $color
         color: $color-invert
       .message-body
         border-color: $color
-        @if (colorLuminance($color) > 0.8)
+        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
-          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
+
-        @else
+.message-header
-          color: desaturate(lighten(darken($color, 100%), 50%), 30%)
+  align-items: center
+  background-color: $text
+  border-radius: $radius $radius 0 0
+  color: $text-invert
+  display: flex
+  justify-content: space-between
+  line-height: 1.25
+  padding: 0.5em 0.75em
+  position: relative
+  a,
+  strong
+    color: inherit
+  a
+    text-decoration: underline
+  .delete
+    flex-grow: 0
+    flex-shrink: 0
+    margin-left: 0.75em
+  & + .message-body
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+    border-top: none
+
+.message-body
+  border: 1px solid $border
+  border-radius: $radius
+  color: $text
+  padding: 1em 1.25em
+  a,
+  strong
+    color: inherit
+  a
+    text-decoration: underline
+  code,
+  pre
+    background: $white
+  pre code
+    background: transparent

sass/components/modal.sass

@@ -61,6 +61,7 @@
       margin-right: 10px
 
 .modal-card-body
+  +overflow-touch
   background-color: $white
   flex-grow: 1
   flex-shrink: 1

sass/components/nav.sass

@@ -1,4 +1,4 @@
-$nav-height: 50px !default
+$nav-height: 3.5rem !default
 
 // Components
 
@@ -13,20 +13,21 @@ $nav-height: 50px !default
   display: flex
   flex-grow: 0
   flex-shrink: 0
+  font-size: $size-normal
   justify-content: center
-  padding: 10px
+  padding: 0.5rem 0.75rem
   a
     flex-grow: 1
     flex-shrink: 0
   img
-    max-height: 24px
+    max-height: 1.75rem
   .button + .button
-    margin-left: 10px
+    margin-left: 0.75rem
   .tag
-    &:first-child
+    &:first-child:not(:last-child)
-      margin-right: 5px
+      margin-right: 0.5rem
-    &:last-child
+    &:last-child:not(:first-child)
-      margin-left: 5px
+      margin-left: 0.5rem
   // Responsiveness
   +mobile
     justify-content: flex-start
@@ -42,15 +43,21 @@ a.nav-item
   &.is-tab
     border-bottom: 1px solid transparent
     border-top: 1px solid transparent
-    padding-left: 12px
+    padding-bottom: calc(0.5rem - 1px)
-    padding-right: 12px
+    padding-left: 1rem
+    padding-right: 1rem
+    padding-top: calc(0.5rem - 1px)
     &:hover
-      border-bottom: 1px solid $link
+      border-bottom-color: $primary
-      border-top: 1px solid transparent
+      border-top-color: transparent
     &.is-active
-      border-bottom: 3px solid $link
+      border-bottom: 3px solid $primary
-      border-top: 3px solid transparent
+      color: $primary
-      color: $link
+      padding-bottom: calc(0.5rem - 3px)
+  // Responsiveness
+  +desktop
+    &.is-brand
+      padding-left: 0
 
 // Containers
 
@@ -66,18 +73,22 @@ a.nav-item
     position: absolute
     .nav-item
       border-top: 1px solid rgba($border, 0.5)
-      padding: 10px
+      padding: 0.75rem
     &.is-active
       display: block
   +tablet-only
-    padding-right: 20px
+    padding-right: 1.5rem
 
-.nav-left
+
+.nav-left,
+.nav-right
   align-items: stretch
-  display: flex
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 0
+
+.nav-left
+  display: flex
   justify-content: flex-start
   overflow: hidden
   overflow-x: auto
@@ -86,19 +97,17 @@ a.nav-item
 .nav-center
   align-items: stretch
   display: flex
+  flex-grow: 0
+  flex-shrink: 0
   justify-content: center
   margin-left: auto
   margin-right: auto
 
 .nav-right
+  justify-content: flex-end
   // Responsiveness
   +tablet
-    align-items: stretch
     display: flex
-    flex-basis: 0
-    flex-grow: 1
-    flex-shrink: 0
-    justify-content: flex-end
 
 // Main container
 
@@ -115,26 +124,6 @@ a.nav-item
     display: flex
     min-height: $nav-height
     width: 100%
-    & > .nav-left
-      & > .nav-item:first-child:not(.is-tab)
-        padding-left: 0
-    & > .nav-right
-      & > .nav-item:last-child:not(.is-tab)
-        padding-right: 0
-  .container > &
-    & > .nav-left
-      & > .nav-item:first-child:not(.is-tab)
-        padding-left: 0
-    & > .nav-right
-      & > .nav-item:last-child:not(.is-tab)
-        padding-right: 0
   // Modifiers
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
-  // Responsiveness
-  +touch
-    & > .container,
-    .container > &
-      & > .nav-left
-        & > .nav-item.is-brand:first-child
-          padding-left: 20px

sass/components/pagination.sass

@@ -1,37 +1,133 @@
-.pagination
+$pagination: $grey-darker !default
+$pagination-background: $white !default
+$pagination-border: $grey-lighter !default
+
+$pagination-hover: $link-hover !default
+$pagination-hover-border: $link-hover-border !default
+
+$pagination-focus: $link-focus !default
+$pagination-focus-border: $link-focus-border !default
+
+$pagination-active: $link-active !default
+$pagination-active-border: $link-active-border !default
+
+$pagination-disabled: $grey !default
+$pagination-disabled-background: $grey-lighter !default
+$pagination-disabled-border: $grey-lighter !default
+
+$pagination-current: $link-invert !default
+$pagination-current-background: $link !default
+$pagination-current-border: $link !default
+
+$pagination-ellipsis: $grey-light !default
+
+$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+
+.pagination,
+.pagination-list
   align-items: center
   display: flex
   justify-content: center
   text-align: center
-  a
+
-    display: block
+.pagination-previous,
-    min-width: 32px
+.pagination-next,
-    padding: 3px 8px
+.pagination-link,
-  span
+.pagination-ellipsis
-    color: $text-light
+  +control
-    display: block
+  +unselectable
-    margin: 0 4px
+  font-size: 0.875rem
-  li
+  padding-left: 0.5em
-    margin: 0 2px
+  padding-right: 0.5em
-  ul
-    align-items: center
-    display: flex
-    flex-grow: 1
-    flex-shrink: 0
   justify-content: center
-  // Responsiveness
+  text-align: center
-  +mobile
+
-    flex-wrap: wrap
+.pagination-previous,
-    & > a
+.pagination-next,
-      width: calc(50% - 5px)
+.pagination-link
+  border: 1px solid $pagination-border
+  min-width: 2.5em
+  &:hover
+    border-color: $pagination-hover-border
+    color: $pagination-hover
+  &:focus
+    border-color: $pagination-focus-border
+  &:active
+    box-shadow: $pagination-shadow-inset
+  &[disabled],
+  &.is-disabled
+    background: $pagination-disabled-background
+    color: $pagination-disabled
+    opacity: 0.5
+    pointer-events: none
+
+.pagination-previous,
+.pagination-next
+  padding-left: 0.75em
+  padding-right: 0.75em
+
+.pagination-link
+  &.is-current
+    background-color: $pagination-current-background
+    border-color: $pagination-current-border
+    color: $pagination-current
+
+.pagination-ellipsis
+  color: $pagination-ellipsis
+  pointer-events: none
+
+.pagination-list
+  li
     &:not(:first-child)
-        margin-left: 10px
+      margin-left: 0.375rem
+
++mobile
+  .pagination
+    flex-wrap: wrap
+  .pagination-previous,
+  .pagination-next
+    flex-grow: 1
+    flex-shrink: 1
+    width: calc(50% - 0.375rem)
+  .pagination-next
+    margin-left: 0.75rem
+  .pagination-list
+    margin-top: 0.75rem
     li
       flex-grow: 1
-      flex-shrink: 0
+      flex-shrink: 1
-    ul
+
-      margin-top: 10px
++tablet
-  +tablet
+  .pagination-list
-    & > a
+    flex-grow: 1
-      &:not(:first-child)
+    flex-shrink: 1
+    justify-content: flex-start
     order: 1
+  .pagination-previous,
+  .pagination-next
+    margin-left: 0.75rem
+  .pagination-previous
+    order: 2
+  .pagination-next
+    order: 3
+  .pagination
+    justify-content: space-between
+    &.is-centered
+      .pagination-previous
+        margin-left: 0
+        order: 1
+      .pagination-list
+        justify-content: center
+        order: 2
+      .pagination-next
+        order: 3
+    &.is-right
+      .pagination-previous
+        margin-left: 0
+        order: 1
+      .pagination-next
+        order: 2
+        margin-right: 0.75rem
+      .pagination-list
+        justify-content: flex-end
+        order: 3

sass/components/panel.sass

@@ -1,20 +1,39 @@
-.panel-icon
+.panel
-  +fa(14px, 16px)
+  font-size: $size-normal
-  color: $text-light
+  &:not(:last-child)
-  float: left
+    margin-bottom: 1.5rem
-  margin: 0 4px 0 -2px
+
-  .fa
+.panel-heading,
-    font-size: inherit
+.panel-tabs,
-    line-height: inherit
+.panel-block
+  border-bottom: 1px solid $border
+  border-left: 1px solid $border
+  border-right: 1px solid $border
+  &:first-child
+    border-top: 1px solid $border
 
 .panel-heading
   background-color: $background
-  border-bottom: 1px solid $border
+  border-radius: $radius $radius 0 0
-  border-radius: 4px 4px 0 0
   color: $text-strong
-  font-size: $size-medium
+  font-size: 1.25em
-  font-weight: 300
+  font-weight: $weight-light
-  padding: 10px
+  line-height: 1.25
+  padding: 0.5em 0.75em
+
+.panel-tabs
+  align-items: flex-end
+  display: flex
+  font-size: 0.875em
+  justify-content: center
+  a
+    border-bottom: 1px solid $border
+    margin-bottom: -1px
+    padding: 0.5em
+    // Modifiers
+    &.is-active
+      border-bottom-color: $link-active-border
+      color: $link-active
 
 .panel-list
   a
@@ -22,36 +41,34 @@
     &:hover
       color: $link
 
-.panel-tabs
-  display: flex
-  font-size: $size-small
-  padding: 5px 10px 0
-  justify-content: center
-  a
-    border-bottom: 1px solid $border
-    margin-bottom: -1px
-    padding: 5px
-    // Modifiers
-    &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-
 .panel-block
+  align-items: center
   color: $text-strong
-  display: block
+  display: flex
-  line-height: 16px
+  justify-content: flex-start
-  padding: 10px
+  padding: 0.5em 0.75em
-  &:not(:last-child)
+  input[type="checkbox"]
-    border-bottom: 1px solid $border
+    margin-right: 0.75em
+  & > .control
+    flex-grow: 1
+    flex-shrink: 1
+    width: 100%
+  &.is-active
+    border-left-color: $link
+    color: $link-active
+    .panel-icon
+      color: $link
 
-a.panel-block
+a.panel-block,
+label.panel-block
+  cursor: pointer
   &:hover
     background-color: $background
 
-.panel
+.panel-icon
-  border: 1px solid $border
+  +fa(14px, 1em)
-  border-radius: $radius-large
+  color: $text-light
-  &:not(:last-child)
+  margin-right: 0.75em
-    margin-bottom: 20px
+  .fa
+    font-size: inherit
+    line-height: inherit

sass/components/tabs.sass

@@ -3,8 +3,8 @@
   +unselectable
   align-items: stretch
   display: flex
+  font-size: $size-normal
   justify-content: space-between
-  line-height: 24px
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
@@ -15,7 +15,7 @@
     display: flex
     justify-content: center
     margin-bottom: -1px
-    padding: 6px 12px
+    padding: 0.5em 1em
     vertical-align: top
     &:hover
       border-bottom-color: $text-strong
@@ -24,8 +24,8 @@
     display: block
     &.is-active
       a
-        border-bottom-color: $link
+        border-bottom-color: $primary
-        color: $link
+        color: $primary
   ul
     align-items: center
     border-bottom: 1px solid $border
@@ -34,20 +34,20 @@
     flex-shrink: 0
     justify-content: flex-start
     &.is-left
-      padding-right: 10px
+      padding-right: 0.75em
     &.is-center
       flex: none
       justify-content: center
-      padding-left: 10px
+      padding-left: 0.75em
-      padding-right: 10px
+      padding-right: 0.75em
     &.is-right
       justify-content: flex-end
-      padding-left: 10px
+      padding-left: 0.75em
   .icon
     &:first-child
-      margin-right: 8px
+      margin-right: 0.5em
     &:last-child
-      margin-left: 8px
+      margin-left: 0.5em
   // Alignment
   &.is-centered
     ul
@@ -60,8 +60,6 @@
     a
       border: 1px solid transparent
       border-radius: $radius $radius 0 0
-      padding-bottom: 5px
-      padding-top: 5px
       &:hover
         background-color: $background
         border-bottom-color: $border
@@ -79,8 +77,6 @@
     a
       border: 1px solid $border
       margin-bottom: 0
-      padding-bottom: 5px
-      padding-top: 5px
       position: relative
       &:hover
         background-color: $background
@@ -104,28 +100,7 @@
   // Sizes
   &.is-small
     font-size: $size-small
-    a
-      padding: 2px 8px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 1px
-        padding-top: 1px
   &.is-medium
     font-size: $size-medium
-    a
-      padding: 10px 16px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 9px
-        padding-top: 9px
   &.is-large
     font-size: $size-large
-    a
-      padding: 14px 20px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 13px
-        padding-top: 13px

sass/elements/_all.sass

@@ -4,10 +4,12 @@
 @import "button.sass"
 @import "content.sass"
 @import "form.sass"
+@import "icon.sass"
 @import "image.sass"
 @import "notification.sass"
 @import "progress.sass"
 @import "table.sass"
+@import "tag.sass"
 @import "title.sass"
 
 @import "other.sass"

sass/elements/box.sass

@@ -4,7 +4,7 @@
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   display: block
-  padding: 20px
+  padding: 1.25rem
 
 a.box
   &:hover,

sass/elements/button.sass

@@ -1,64 +1,149 @@
+$button: $grey-darker !default
+$button-background: $white !default
+$button-border: $grey-lighter !default
+
+$button-hover: $link-hover !default
+$button-hover-border: $link-hover-border !default
+
+$button-focus: $link-focus !default
+$button-focus-border: $link-focus-border !default
+
+$button-active: $link-active !default
+$button-active-border: $link-active-border !default
+
+$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+
+@function buttonIconSpacing($button-font-size, $icon-width)
+  // The rem height of the button
+  // based on a height of 2.5em
+  $button-height: 2.5 * $button-font-size // rem
+  // The rem total horizontal padding of the button
+  $button-horizontal-padding: 2 * 0.75 * $button-font-size // rem
+  // For the icon center to align with the button center
+  // the horizontal padding + the icon width must equal the button height
+  // $button-height = $button-horizontal-padding + $icon-width + $difference
+  $difference: $button-height - $button-horizontal-padding - $icon-width
+  @return $difference / 2
+
+=button-icon($button-font-size)
+  $small-offset: buttonIconSpacing($button-font-size, 1rem)
+  $normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
+  $medium-offset: buttonIconSpacing($button-font-size, 2rem)
+  $large-offset: buttonIconSpacing($button-font-size, 3rem)
+  .icon
+    &:first-child:not(:last-child)
+      margin-left: $normal-offset
+      margin-right: $button-font-size / 2
+    &:last-child:not(:first-child)
+      margin-left: $button-font-size / 2
+      margin-right: $normal-offset
+    &:first-child:last-child
+      // The -1px is to account for the button 1px border
+      margin-left: calc(-1px + #{$normal-offset})
+      margin-right: calc(-1px + #{$normal-offset})
+    &.is-small
+      &:first-child:not(:last-child)
+        margin-left: $small-offset
+      &:last-child:not(:first-child)
+        margin-right: $small-offset
+      &:first-child:last-child
+        margin-left: calc(-1px + #{$small-offset})
+        margin-right: calc(-1px + #{$small-offset})
+    &.is-medium
+      &:first-child:not(:last-child)
+        margin-left: $medium-offset
+      &:last-child:not(:first-child)
+        margin-right: $medium-offset
+      &:first-child:last-child
+        margin-left: calc(-1px + #{$medium-offset})
+        margin-right: calc(-1px + #{$medium-offset})
+    &.is-large
+      &:first-child:not(:last-child)
+        margin-left: $large-offset
+      &:last-child:not(:first-child)
+        margin-right: $large-offset
+      &:first-child:last-child
+        margin-left: calc(-1px + #{$large-offset})
+        margin-right: calc(-1px + #{$large-offset})
+
+// The button sizes use mixins so they can be used at different breakpoints
 =button-small
   border-radius: $radius-small
-  font-size: 11px
+  font-size: $size-small
-  height: 24px
+  +button-icon($size-small)
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
 =button-medium
-  font-size: 18px
+  font-size: $size-medium
-  height: 40px
+  +button-icon($size-medium)
-  padding-left: 14px
-  padding-right: 14px
 =button-large
-  font-size: 22px
+  font-size: $size-large
-  height: 48px
+  +button-icon($size-large)
-  padding-left: 20px
-  padding-right: 20px
 
 .button
   +control
   +unselectable
+  background-color: $button-background
+  border: 1px solid $button-border
+  color: $button
   cursor: pointer
   justify-content: center
-  padding-left: 10px
+  padding-left: 0.75em
-  padding-right: 10px
+  padding-right: 0.75em
   text-align: center
   white-space: nowrap
   strong
     color: inherit
-  small
+  +button-icon($size-normal)
-    display: block
+  // States
-    font-size: $size-small
-    line-height: 1
-    margin-top: 5px
-  .icon,
-  .tag
-    &:first-child
-      margin-left: -2px
-      margin-right: 4px
-    &:last-child
-      margin-left: 4px
-      margin-right: -2px
   &:hover,
+  &.is-hovered
+    border-color: $button-hover-border
+    color: $button-hover
   &:focus,
+  &.is-focused
+    border-color: $button-focus-border
+    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
+    color: $button-focus
+  &:active,
   &.is-active
-    color: $control-hover
+    border-color: $button-active-border
-  &:active
+    box-shadow: $button-shadow-inset
-    box-shadow: inset 0 1px 2px rgba($black, 0.2)
+    color: $button-active
   // Colors
+  &.is-link
+    background-color: transparent
+    border-color: transparent
+    color: $text
+    text-decoration: underline
+    &:hover,
+    &.is-hovered,
+    &:focus,
+    &.is-focused,
+    &:active,
+    &.is-active
+      background-color: $background
+      color: $text-strong
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      border-width: 0
+      border-color: transparent
       color: $color-invert
       &:hover,
+      &.is-hovered
+        background-color: darken($color, 2.5%)
+        border-color: transparent
+        color: $color-invert
       &:focus,
+      &.is-focused
+        border-color: transparent
+        box-shadow: 0 0 0.5em rgba($color, 0.25)
+        color: $color-invert
+      &:active,
       &.is-active
         background-color: darken($color, 5%)
         border-color: transparent
+        box-shadow: $button-shadow-inset
         color: $color-invert
       &.is-inverted
         background-color: $color-invert
@@ -71,22 +156,20 @@
       &.is-outlined
         background-color: transparent
         border-color: $color
-        border-width: 1px
         color: $color
         &:hover,
         &:focus
           background-color: $color
           border-color: $color
           color: $color-invert
-  &.is-link
+      &.is-inverted.is-outlined
         background-color: transparent
-    border-width: 0
+        border-color: $color-invert
-    color: $text
+        color: $color-invert
-    text-decoration: underline
         &:hover,
         &:focus
-      background-color: $background
+          background-color: $color-invert
-      color: $text-strong
+          color: $color
   // Sizes
   &.is-small
     +button-small

sass/elements/content.sass

@@ -2,19 +2,14 @@
   +block
   color: $text
   // Inline
-  a:not(.button)
-    border-bottom: 1px solid $border
-    &:visited
-      color: $link-visited
-    &:hover
-      border-bottom-color: $link
   li + li
     margin-top: 0.25em
   // Block
-  blockquote,
   p,
   ol,
-  ul
+  ul,
+  blockquote,
+  table
     &:not(:last-child)
       margin-bottom: 1em
   h1,
@@ -24,30 +19,36 @@
   h5,
   h6
     color: $text-strong
-    font-weight: 300
+    font-weight: $weight-normal
     line-height: 1.125
-    margin-bottom: 20px
+  h1
-  h1,
+    font-size: 2em
-  h2,
+    margin-bottom: 0.5em
-  h3
     &:not(:first-child)
-      margin-top: 40px
+      margin-top: 1em
+  h2
+    font-size: 1.75em
+    margin-bottom: 0.5714em
+    &:not(:first-child)
+      margin-top: 1.1428em
+  h3
+    font-size: 1.5em
+    margin-bottom: 0.6666em
+    &:not(:first-child)
+      margin-top: 1.3333em
+  h4
+    font-size: 1.25em
+    margin-bottom: 0.8em
+  h5
+    font-size: 1.125em
+    margin-bottom: 0.8888em
+  h6
+    font-size: 1em
+    margin-bottom: 1em
   blockquote
     background-color: $background
     border-left: 5px solid $border
-    padding: 1.5em
+    padding: 1.25em 1.5em
-  h1
-    font-size: 2em
-  h2
-    font-size: 1.75em
-  h3
-    font-size: 1.5em
-  h4
-    font-size: 1.25em
-  h5
-    font-size: 1.125em
-  h6
-    font-size: 1em
   ol
     list-style: decimal outside
     margin-left: 2em
@@ -63,12 +64,40 @@
       margin-top: 0.5em
       ul
         list-style-type: square
+  table
+    width: 100%
+    td,
+    th
+      border: 1px solid $border
+      border-width: 0 0 1px
+      padding: 0.5em 0.75em
+      vertical-align: top
+    th
+      color: $text-strong
+      text-align: left
+    tr
+      &:hover
+        background-color: $background
+    thead
+      td,
+      th
+        border-width: 0 0 2px
+        color: $text-strong
+    tfoot
+      td,
+      th
+        border-width: 2px 0 0
+        color: $text-strong
+    tbody
+      tr
+        &:last-child
+          td,
+          th
+            border-bottom-width: 0
   // Sizes
+  &.is-small
+    font-size: $size-small
   &.is-medium
-    font-size: $size-5
+    font-size: $size-medium
-    code
-      font-size: $size-6
   &.is-large
-    font-size: $size-4
+    font-size: $size-large
-    code
-      font-size: $size-5

sass/elements/form.sass

@@ -1,18 +1,59 @@
-=form-control
+$input:                     $grey-darker !default
+$input-background:          $white !default
+$input-border:              $grey-lighter !default
+
+$input-hover:               $grey-darker !default
+$input-hover-border:        $grey-light !default
+
+$input-focus:               $grey-darker !default
+$input-focus-border:        $link !default
+
+$input-disabled:            $text-light !default
+$input-disabled-background: $background !default
+$input-disabled-border:     $background !default
+
+$input-arrow:               $link !default
+
+$input-icon:                $grey-lighter !default
+$input-icon-active:         $grey !default
+
+$input-radius:              $radius !default
+
+=input
   +control
-  @each $name, $pair in $colors
+  background-color: $input-background
-    $color: nth($pair, 1)
+  border: 1px solid $input-border
-    &.is-#{$name}
+  color: $input
-      border-color: $color
+  &:hover,
+  &.is-hovered
+    border-color: $input-hover-border
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    border-color: $input-focus-border
+  &[disabled],
+  &.is-disabled
+    background-color: $input-disabled-background
+    border-color: $input-disabled-border
+    box-shadow: none
+    color: $input-disabled
+    +placeholder
+      color: rgba($input, 0.3)
 
 .input,
 .textarea
-  +form-control
+  +input
   box-shadow: inset 0 1px 2px rgba($black, 0.1)
   max-width: 100%
   width: 100%
   &[type="search"]
     border-radius: 290486px
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      border-color: $color
   // Sizes
   &.is-small
     +control-small
@@ -30,7 +71,7 @@
 
 .textarea
   display: block
-  line-height: 1.2
+  line-height: 1.25
   max-height: 600px
   max-width: 100%
   min-height: 120px
@@ -40,78 +81,77 @@
 
 .checkbox,
 .radio
+  align-items: center
   cursor: pointer
-  display: inline-block
+  display: inline-flex
-  line-height: 16px
+  flex-wrap: wrap
+  justify-content: flex-start
   position: relative
   vertical-align: top
   input
     cursor: pointer
+    margin-right: 0.5em
   &:hover
-    color: $control-hover
+    color: $input-hover
   &.is-disabled
-    color: $control-disabled
+    color: $input-disabled
     pointer-events: none
     input
       pointer-events: none
 
 .radio
   & + .radio
-    margin-left: 10px
+    margin-left: 0.5em
 
 .select
   display: inline-block
-  height: 32px
+  height: 2.5em
   position: relative
   vertical-align: top
+  &:after
+    +arrow($input-arrow)
+    margin-top: -0.375em
+    right: 1.125em
+    top: 50%
+    z-index: 4
   select
-    +form-control
+    +input
     cursor: pointer
     display: block
+    font-size: 1em
     outline: none
-    padding-right: 36px
+    padding-right: 2.5em
     &:hover
-      border-color: $control-hover-border
+      border-color: $input-hover-border
-    &::-ms-expand
+    &::ms-expand
       display: none
+  // States
+  &:hover
+    &:after
+      border-color: $input-hover
+  // Sizes
+  &.is-small
+    +control-small
+  &.is-medium
+    +control-medium
+  &.is-large
+    +control-large
+  // Modifiers
   &.is-fullwidth
     width: 100%
     select
       width: 100%
-  &:after
-    +arrow($control-active)
-    margin-top: -6px
-    right: 16px
-    top: 50%
-  &:hover
-    &:after
-      border-color: $control-hover
-  &.is-small
-    height: 24px
-    select
-      +control-small
-      padding-right: 28px
-  &.is-medium
-    height: 40px
-    select
-      +control-medium
-      padding-right: 44px
-  &.is-large
-    height: 48px
-    select
-      +control-large
-      padding-right: 52px
 
 .label
-  color: $control
+  color: $input
   display: block
   font-weight: bold
   &:not(:last-child)
-    margin-bottom: 5px
+    margin-bottom: 0.5em
 
 .help
   display: block
-  font-size: $control-size-small
+  font-size: $size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -122,20 +162,20 @@
 
 .control-label
   +mobile
-    margin-bottom: 5px
+    margin-bottom: 0.5em
   +tablet
     flex-basis: 0
     flex-grow: 1
     flex-shrink: 0
-    margin-right: 20px
+    margin-right: 1.5em
-    padding-top: 7px
+    padding-top: 0.5em
     text-align: right
 
 .control
   position: relative
   text-align: left
   &:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   // Modifiers
   &.has-addons
     display: flex
@@ -148,20 +188,26 @@
       width: auto
       &:hover
         z-index: 2
-      &:active,
+      &:focus,
-      &:focus
+      &:active
         z-index: 3
       &:first-child
-        border-radius: $control-radius 0 0 $control-radius
+        border-radius: $input-radius 0 0 $input-radius
         select
-          border-radius: $control-radius 0 0 $control-radius
+          border-radius: $input-radius 0 0 $input-radius
       &:last-child
-        border-radius: 0 $control-radius $control-radius 0
+        border-radius: 0 $input-radius $input-radius 0
         select
-          border-radius: 0 $control-radius $control-radius 0
+          border-radius: 0 $input-radius $input-radius 0
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0
+    .select select
+      &:hover
+        z-index: 2
+      &:focus,
+      &:active
+        z-index: 3
     &.has-addons-centered
       justify-content: center
     &.has-addons-right
@@ -173,66 +219,64 @@
         flex-grow: 1
         flex-shrink: 0
   &.has-icon
-    & > .fa
+    .icon
-      +fa(14px, 24px)
+      color: $input-icon
-      color: $control-icon
       pointer-events: none
       position: absolute
-      top: 4px
+      top: ($size-normal * 2.5) / 2
       z-index: 4
     .input
-      &:focus + .fa
+      &:focus
-        color: $control-icon-active
+        & + .icon
-      &.is-small + .fa
+          color: $input-icon-active
-        font-size: 10.5px
+      &.is-small
-        top: 0
+        & + .icon
-      &.is-medium + .fa
+          top: ($size-small * 2.5) / 2
-        font-size: 21px
+      &.is-medium
-        top: 8px
+        & + .icon
-      &.is-large + .fa
+          top: ($size-medium * 2.5) / 2
-        font-size: 21px
+      &.is-large
-        top: 12px
+        & + .icon
+          top: ($size-large * 2.5) / 2
     &:not(.has-icon-right)
-      & > .fa
+      .icon
-        left: 4px
+        left: ($size-normal * 2.5) / 2
+        transform: translateX(-50%) translateY(-50%)
       .input
-        padding-left: 32px
+        padding-left: 2.5em
         &.is-small
-          padding-left: 24px
+          & + .icon
-          & + .fa
+            left: ($size-small * 2.5) / 2
-            left: 0
         &.is-medium
-          padding-left: 40px
+          & + .icon
-          & + .fa
+            left: ($size-medium * 2.5) / 2
-            left: 8px
         &.is-large
-          padding-left: 48px
+          & + .icon
-          & + .fa
+            left: ($size-large * 2.5) / 2
-            left: 12px
     &.has-icon-right
-      & > .fa
+      .icon
-        right: 4px
+        right: ($size-normal * 2.5) / 2
+        transform: translateX(50%) translateY(-50%)
       .input
-        padding-right: 32px
+        padding-right: 2.5em
         &.is-small
-          padding-right: 24px
+          & + .icon
-          & + .fa
+            right: ($size-small * 2.5) / 2
-            right: 0
         &.is-medium
-          padding-right: 40px
+          & + .icon
-          & + .fa
+            right: ($size-medium * 2.5) / 2
-            right: 8px
         &.is-large
-          padding-right: 48px
+          & + .icon
-          & + .fa
+            right: ($size-large * 2.5) / 2
-            right: 12px
   &.is-grouped
     display: flex
     justify-content: flex-start
     & > .control
+      flex-basis: 0
+      flex-shrink: 0
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 10px
+        margin-right: 0.75rem
       &.is-expanded
         flex-grow: 1
         flex-shrink: 1
@@ -252,5 +296,5 @@
     &:after
       +loader
       position: absolute !important
-      right: 8px
+      right: 0.75em
-      top: 8px
+      top: 0.75em

sass/elements/icon.sass

@@ -0,0 +1,12 @@
+.icon
+  +fa(21px, 1.5rem)
+  .fa
+    font-size: inherit
+    line-height: inherit
+  // Sizes
+  &.is-small
+    +fa(14px, 1rem)
+  &.is-medium
+    +fa(28px, 2rem)
+  &.is-large
+    +fa(42px, 3rem)

sass/elements/notification.sass

@@ -1,14 +1,18 @@
 .notification
   +block
-  +clearfix
   background-color: $background
   border-radius: $radius
-  padding: 16px 20px
+  padding: 1.25rem 2.5rem 1.25rem 1.5rem
   position: relative
+  code,
+  pre
+    background: $white
+  pre code
+    background: transparent
   .delete
-    border-radius: 0 $radius
+    position: absolute
-    float: right
+    right: 0.5em
-    margin: -16px -20px 0 20px
+    top: 0.5em
   .title,
   .subtitle,
   .content

sass/elements/other.sass

@@ -5,13 +5,13 @@
   position: relative
   +desktop
     margin: 0 auto
-    max-width: 960px
+    max-width: $desktop - 40px // 960px
     // Modifiers
     &.is-fluid
       margin: 0 20px
       max-width: none
   +widescreen
-    max-width: 1200px
+    max-width: $widescreen - 40px // 1152px
 
 .delete
   +delete
@@ -21,19 +21,6 @@
   text-align: center
   vertical-align: top
 
-.icon
-  +fa(21px, 24px)
-  .fa
-    font-size: inherit
-    line-height: inherit
-  // Sizes
-  &.is-small
-    +fa(14px, 16px)
-  &.is-medium
-    +fa(28px, 32px)
-  &.is-large
-    +fa(42px, 48px)
-
 .heading
   display: block
   font-size: 11px
@@ -43,8 +30,7 @@
 
 .highlight
   +block
-  font-size: 12px
+  font-weight: $weight-normal
-  font-weight: normal
   max-width: 100%
   overflow: hidden
   padding: 0
@@ -56,53 +42,15 @@
   +loader
 
 .number
-  background-color: $background
-  border-radius: 290486px
-  display: inline-block
-  font-size: $size-medium
-  vertical-align: top
-
-.tag
   align-items: center
   background-color: $background
   border-radius: 290486px
-  color: $text
   display: inline-flex
-  font-size: 12px
+  font-size: $size-medium
-  height: 24px
+  height: 2em
   justify-content: center
-  line-height: 16px
+  margin-right: 1.5rem
-  padding-left: 10px
+  min-width: 2.5em
-  padding-right: 10px
+  padding: 0.25rem 0.5rem
+  text-align: center
   vertical-align: top
-  white-space: nowrap
-  .delete
-    margin-left: 4px
-    margin-right: -6px
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-    height: 20px
-    padding-left: 8px
-    padding-right: 8px
-  &.is-medium
-    font-size: $size-normal
-    height: 32px
-    padding-left: 14px
-    padding-right: 14px
-  &.is-large
-    font-size: $size-5
-    height: 40px
-    line-height: 24px
-    padding-left: 18px
-    padding-right: 18px
-    .delete
-      margin-left: 4px
-      margin-right: -8px

sass/elements/progress.sass

@@ -5,7 +5,7 @@
   border: none
   border-radius: 290486px
   display: block
-  height: 12px
+  height: $size-normal
   overflow: hidden
   padding: 0
   width: 100%
@@ -25,8 +25,8 @@
         background-color: $color
   // Sizes
   &.is-small
-    height: 8px
+    height: $size-small
   &.is-medium
-    height: 16px
+    height: $size-medium
   &.is-large
-    height: 20px
+    height: $size-large

sass/elements/table.sass

@@ -1,43 +1,25 @@
-$table: $text-strong !default
+$table:                           $grey-darker !default
 $table-background:                $white !default
-$table-border: $border !default
+$table-border:                    $grey-lighter !default
 
-$table-head: $text-light !default
+$table-head:                      $grey !default
 
-$table-row-hover-background: $white-ter !default
+$table-row-hover-background:      $white-bis !default
 $table-row-even-background:       $white-bis !default
+$table-row-even-hover-background: $white-ter !default
 
 .table
   background-color: $table-background
   color: $table
-  margin-bottom: 20px
+  margin-bottom: 1.5rem
   width: 100%
   td,
   th
     border: 1px solid $table-border
     border-width: 0 0 1px
-    padding: 8px 10px
+    padding: 0.5em 0.75em
     vertical-align: top
     // Modifiers
-    &.is-icon
-      padding: 5px
-      text-align: center
-      white-space: nowrap
-      width: 1%
-      .fa
-        +fa(21px, 24px)
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px
-    &.is-link
-      padding: 0
-      & > a
-        display: block
-        padding: 8px 10px
-        &:hover
-          background-color: $link
-          color: $link-invert
     &.is-narrow
       white-space: nowrap
       width: 1%
@@ -52,17 +34,17 @@ $table-row-even-background: $white-bis !default
     th
       border-width: 0 0 2px
       color: $table-head
+  tfoot
+    td,
+    th
+      border-width: 2px 0 0
+      color: $table-head
   tbody
     tr
       &:last-child
         td,
         th
           border-bottom-width: 0
-  tfoot
-    td,
-    th
-      border-width: 2px 0 0
-      color: $table-head
   // Modifiers
   &.is-bordered
     td,
@@ -76,22 +58,11 @@ $table-row-even-background: $white-bis !default
   &.is-narrow
     td,
     th
-      padding: 5px 10px
+      padding: 0.25em 0.5em
-      // Modifiers
-      &.is-icon
-        padding: 2px
-        &.is-link
-          padding: 0
-          & > a
-            padding: 2px
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px 10px
   &.is-striped
     tbody
       tr
         &:nth-child(even)
           background-color: $table-row-even-background
           &:hover
-            background-color: $table-row-hover-background
+            background-color: $table-row-even-hover-background

sass/elements/tag.sass

@@ -0,0 +1,29 @@
+.tag
+  align-items: center
+  background-color: $background
+  border-radius: 290486px
+  color: $text
+  display: inline-flex
+  font-size: $size-small
+  height: 2em
+  justify-content: center
+  line-height: 1.5
+  padding-left: 0.875em
+  padding-right: 0.875em
+  vertical-align: top
+  white-space: nowrap
+  .delete
+    margin-left: 0.25em
+    margin-right: -0.5em
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+  // Sizes
+  &.is-medium
+    font-size: $size-normal
+  &.is-large
+    font-size: $size-medium

sass/elements/title.sass

@@ -1,72 +1,53 @@
+$title:             $grey-darker !default
+$title-size:        $size-3 !default
+$title-weight:      $weight-light !default
+$title-weight-bold: $weight-semibold !default
+
+$subtitle:          $grey-dark !default
+$subtitle-size:     $size-5 !default
+$subtitle-strong:   $grey-darker !default
+$subtitle-weight:   $weight-light !default
+
 .title,
 .subtitle
   +block
-  font-weight: $weight-title-normal
   word-break: break-word
   em,
   span
-    font-weight: $weight-title-normal
+    font-weight: $title-weight
-  a
-    &:hover
-      border-bottom: 1px solid
   strong
-    font-weight: $weight-title-bold
+    font-weight: $title-weight-bold
   .tag
-    vertical-align: bottom
+    vertical-align: middle
 
 .title
-  color: $text-strong
+  color: $title
-  font-size: $size-large
+  font-size: $title-size
-  line-height: 1
+  font-weight: $title-weight
-  code
+  line-height: 1.125
-    display: inline-block
-    font-size: $size-large
   strong
     color: inherit
   & + .highlight
-    margin-top: -10px
+    margin-top: -0.75rem
   & + .subtitle
-    margin-top: -10px
+    margin-top: -1.25rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
-  // Modifiers
-  &.is-normal
-    font-weight: 400
-    strong
-      font-weight: 700
-  // Responsiveness
-  +tablet
-    & + .subtitle
-      margin-top: -15px
 
 .subtitle
-  color: $text
+  color: $subtitle
-  font-size: $size-medium
+  font-size: $subtitle-size
-  line-height: 1.125
+  font-weight: $subtitle-weight
-  code
+  line-height: 1.25
-    border-radius: $radius
-    display: inline-block
-    font-size: $size-normal
-    padding: 2px 3px
-    vertical-align: top
   strong
-    color: $text-strong
+    color: $subtitle-strong
   & + .title
-    margin-top: -20px
+    margin-top: -1.5rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
-  // Modifiers
-  &.is-normal
-    font-weight: 400
-    strong
-      font-weight: 700

sass/grid/columns.sass

@@ -3,7 +3,7 @@
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
-  padding: 10px
+  padding: 0.75rem
   .columns.is-mobile > &.is-narrow
     flex: none
   .columns.is-mobile > &.is-full
@@ -204,13 +204,13 @@
         margin-left: ($i / 12) * 100%
 
 .columns
-  margin-left: -10px
+  margin-left: -0.75rem
-  margin-right: -10px
+  margin-right: -0.75rem
-  margin-top: -10px
+  margin-top: -0.75rem
   &:last-child
-    margin-bottom: -10px
+    margin-bottom: -0.75rem
   &:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   // Modifiers
   &.is-centered
     justify-content: center
@@ -221,7 +221,7 @@
     &:last-child
       margin-bottom: 0
     &:not(:last-child)
-      margin-bottom: 20px
+      margin-bottom: 1.5rem
     & > .column
       margin: 0
       padding: 0
@@ -231,7 +231,7 @@
       flex-wrap: wrap
       & > .column
         max-width: 33.3333%
-        padding: 10px
+        padding: 0.75rem
         width: 33.3333%
         & + .column
           margin-left: 0

sass/grid/tiles.sass

@@ -1,27 +1,27 @@
 .tile
   align-items: stretch
   display: block
-  flex-basis: auto
+  flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
   min-height: min-content
   // Modifiers
   &.is-ancestor
-    margin-left: -10px
+    margin-left: -0.75rem
-    margin-right: -10px
+    margin-right: -0.75rem
-    margin-top: -10px
+    margin-top: -0.75rem
     &:last-child
-      margin-bottom: -10px
+      margin-bottom: -0.75rem
     &:not(:last-child)
-      margin-bottom: 10px
+      margin-bottom: 0.75rem
   &.is-child
     margin: 0 !important
   &.is-parent
-    padding: 10px
+    padding: 0.75rem
   &.is-vertical
     flex-direction: column
     & > .tile.is-child:not(:last-child)
-      margin-bottom: 20px !important
+      margin-bottom: 1.5rem !important
   // Responsiveness
   +tablet
     &:not(.is-child)

sass/layout/footer.sass

@@ -1,13 +1,3 @@
 .footer
   background-color: $background
-  padding: 40px 20px 80px
+  padding: 3rem 1.5rem 6rem
-  a
-    &,
-    &:visited
-      color: $text
-      &:hover
-        color: $text-strong
-      &:not(.icon)
-        border-bottom: 1px solid $border
-        &:hover
-          border-bottom-color: $link

sass/layout/hero.sass

@@ -18,31 +18,32 @@
     display: none
 
 .hero-buttons
-  margin-top: 20px
+  margin-top: 1.5rem
   // Responsiveness
   +mobile
     .button
       display: flex
       &:not(:last-child)
-        margin-bottom: 10px
+        margin-bottom: 0.75rem
   +tablet
     display: flex
     justify-content: center
     .button:not(:last-child)
-      margin-right: 20px
+      margin-right: 1.5rem
 
 // Containers
 
 .hero-head,
 .hero-foot
+  flex-grow: 0
   flex-shrink: 0
 
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: 40px 20px
+  padding: 3rem 1.5rem
   // Responsiveness
-  +from(1240px)
+  +from($widescreen)
     padding-left: 0
     padding-right: 0
 
@@ -66,12 +67,12 @@
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
-      color: $color-invert
-      .title
       color: $color-invert
       a,
       strong
         color: inherit
+      .title
+        color: $color-invert
       .subtitle
         color: rgba($color-invert, 0.9)
         a,
@@ -131,13 +132,13 @@
   &.is-medium
     +tablet
       .hero-body
-        padding-bottom: 120px
+        padding-bottom: 9rem
-        padding-top: 120px
+        padding-top: 9rem
   &.is-large
     +tablet
       .hero-body
-        padding-bottom: 240px
+        padding-bottom: 18rem
-        padding-top: 240px
+        padding-top: 18rem
   &.is-fullheight
     min-height: 100vh
     .hero-body

sass/layout/section.sass

@@ -1,10 +1,10 @@
 .section
   background-color: $white
-  padding: 40px 20px
+  padding: 3rem 1.5rem
   // Responsiveness
   +desktop
     // Sizes
     &.is-medium
-      padding: 120px 20px
+      padding: 9rem 1.5rem
     &.is-large
-      padding: 240px 20px
+      padding: 18rem 1.5rem

sass/utilities/controls.sass

@@ -1,75 +1,37 @@
-$control: $text-strong !default
-$control-background: $text-invert !default
-$control-border: $border !default
-
-$control-hover: $link-hover !default
-$control-hover-border: $border-hover !default
-
-$control-active: $link !default
-$control-active-background: $link !default
-$control-active-background-invert: $link-invert !default
-$control-active-border: $link !default
-
-$control-disabled: $border !default
-$control-disabled-background: $background !default
-
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
-$control-size: $size-normal !default
-$control-size-small: $size-small !default
-
-$control-icon: $grey-lighter !default
-$control-icon-active: $grey-light !default
 
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  background-color: $control-background
+  border: none
-  border: 1px solid $control-border
   border-radius: $control-radius
-  color: $control
+  box-shadow: none
   display: inline-flex
-  font-size: $control-size
+  font-size: $size-normal
-  height: 32px
+  height: 2.5em
   justify-content: flex-start
-  line-height: 24px
+  line-height: 1.5
-  padding-left: 8px
+  padding-left: 0.75em
-  padding-right: 8px
+  padding-right: 0.75em
   position: relative
   vertical-align: top
-  &:hover
+  // States
-    border-color: $control-hover-border
-  &:active,
   &:focus,
+  &.is-focused,
+  &:active,
   &.is-active
-    border-color: $control-active-border
     outline: none
   &[disabled],
   &.is-disabled
-    background-color: $control-disabled-background
-    border-color: $control-disabled
-    cursor: not-allowed
     pointer-events: none
-    +placeholder
-      color: rgba($control, 0.3)
 
+// The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small
-  font-size: 11px
+  font-size: $size-small
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
 =control-medium
-  font-size: 18px
+  font-size: $size-medium
-  height: 40px
-  line-height: 32px
-  padding-left: 10px
-  padding-right: 10px
 =control-large
-  font-size: 24px
+  font-size: $size-large
-  height: 48px
-  line-height: 40px
-  padding-left: 12px
-  padding-right: 12px