Add babel

docs/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015-ie"]
+}

docs/_config.yml

@@ -9,6 +9,7 @@ markdown:      kramdown
 permalink:     pretty
 url:           http://bulma.io
 fontawesome:   https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
+exclude:       ['fontawesome', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']
 
 # Variables
 

docs/_includes/blog-hero.html

@@ -19,7 +19,7 @@
           </a>
         </div>
         <div class="column is-narrow">
-          <!-- {% include carbon.html %} -->
+          {% include carbon.html %}
         </div>
       </div>
     </div>

docs/_includes/footer.html

@@ -117,17 +117,17 @@
 }(document, 'script', 'facebook-jssdk'));</script>
 
 <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
-<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
+<!-- <script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script> -->
 
-<script src="{{ site.url }}/javascript/jquery-2.2.0.min.js"></script>
+<!-- <script src="{{ site.url }}/javascript/jquery-2.2.0.min.js"></script> -->
-<script src="{{ site.url }}/javascript/clipboard.min.js"></script>
+<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
-<script src="{{ site.url }}/javascript/bulma.js"></script>
+<script src="{{ site.url }}/lib/main.js"></script>
 
 {% if page.route == 'index' %}
-  <script type="text/javascript" src="{{ site.url }}/javascript/index.js"></script>
+  <script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
 {% endif %}
 
-<script type="text/javascript">
+<!-- <script type="text/javascript">
   (function($) {
     window.fnames = new Array();
     window.ftypes = new Array();
@@ -135,7 +135,7 @@
     ftypes[0]='email';
   }(jQuery));
   var $mcj = jQuery.noConflict(true);
-</script>
+</script> -->
 
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

docs/_includes/navbar.html

@@ -1,5 +1,5 @@
 <div class="container">
-<nav class="navbar">
+  <nav class="navbar {% if include.transparent %}is-transparent{% endif %}">
     <div class="navbar-brand">
       <a class="navbar-item" href="{{ site.url }}">
         <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
@@ -26,30 +26,30 @@
 
     <div id="navMenu" class="navbar-menu">
       <div class="navbar-start">
-      <a class="navbar-item">
+        <a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
           Home
         </a>
         <div class="navbar-item has-dropdown is-hoverable">
-        <a class="navbar-link">
+          <a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
             Docs
           </a>
-        <div class="navbar-dropdown">
+          <div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
-          <a class="navbar-item">
+            <a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.documentation }}">
               Overview
             </a>
-          <a class="navbar-item">
+            <a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
               Modifiers
             </a>
-          <a class="navbar-item">
+            <a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
               Grid
             </a>
-          <a class="navbar-item">
+            <a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
               Elements
             </a>
-          <a class="navbar-item">
+            <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
               Components
             </a>
-          <a class="navbar-item">
+            <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
               Layout
             </a>
             <hr class="navbar-divider">
@@ -59,11 +59,11 @@
           </div>
         </div>
         <div class="navbar-item has-dropdown is-hoverable">
-        <a class="navbar-link">
+          <a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
             Blog
           </a>
-        <div class="navbar-dropdown" data-style="width: 18rem;">
+          <div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
-          {% for post in site.posts %}
+            {% for post in site.posts limit:3 %}
               <a class="navbar-item" href="{{ post.url }}">
                 <div class="navbar-content">
                   <p>
@@ -73,6 +73,9 @@
                 </div>
               </a>
             {% endfor %}
+            <a class="navbar-item" href="{{ site.url }}/blog/">
+              More posts
+            </a>
             <hr class="navbar-divider">
             <div class="navbar-item">
               <div class="navbar-content">
@@ -84,7 +87,7 @@
                   </div>
                   <div class="level-right">
                     <div class="level-item">
-                    <a class="button is-warning is-small" href="{{ site.download }}">
+                      <a class="button is-rss is-small" href="{{ site.url }}/atom.xml">
                         <span class="icon is-small">
                           <i class="fa fa-rss"></i>
                         </span>
@@ -97,16 +100,13 @@
             </div>
           </div>
         </div>
-      <a class="navbar-item">
-        More
-      </a>
       </div>
 
       <div class="navbar-end">
-      <a class="navbar-item">
+        <a class="navbar-item" href="{{ site.github }}" target="_blank">
           Github
         </a>
-      <a class="navbar-item">
+        <a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
           Twitter
         </a>
         <div class="navbar-item">
@@ -137,5 +137,5 @@
         </div>
       </div>
     </div>
-</nav>
+  </nav>
 </div>

docs/_includes/subnav-components.html

@@ -22,8 +22,9 @@
       <a class="nav-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
         Modal
       </a>
-      <a class="nav-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/nav/">
+      <a class="nav-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
-        Nav
+        Navbar
+        <span class="tag is-success" style="margin-left: 0.5rem;">New!</span>
       </a>
       <a class="nav-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
         Pagination

docs/_javascript/index.js

@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const $grid = document.getElementById('grid');
+  const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
+  console.log('$columns', $columns);
+  const $markup = document.querySelector('#markup code');
+  const $message = document.getElementById('message');
+  const $add = document.getElementById('add');
+  const $remove = document.getElementById('remove');
+  let showing = 5;
+
+  function showColumns() {
+    if (showing === 13) {
+      $message.style.display = 'block';
+    } else {
+      $message.style.display = 'none';
+    }
+
+    showing = Math.min(Math.max(parseInt(showing), 2), 12);
+
+    $columns.forEach($el => {
+      $el.style.display = 'none';
+    });
+    $columns.slice(0, showing).forEach($el => {
+      $el.style.display = 'block';
+    });
+
+    $markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
+    $markup.insertAdjacentHTML('beforeend', '\n');
+
+    for(let i = 0; i < showing; i++) {
+      $markup.insertAdjacentHTML('beforeend', '  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
+      $markup.insertAdjacentHTML('beforeend', i + 1);
+      $markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
+      $markup.insertAdjacentHTML('beforeend', '\n');
+    }
+
+    $markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
+  }
+
+  $add.addEventListener('click', () => {
+    showing++;
+    showColumns();
+  });
+
+  $remove.addEventListener('click', () => {
+    showing--;
+    showColumns();
+  });
+
+});

docs/_javascript/main.js

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Navbar burger menu
+
+  const $navBurger = document.getElementById('navBurger');
+  const $navMenu = document.getElementById('navMenu');
+
+  if ($navBurger) {
+    $navBurger.addEventListener('click', () => {
+      $navBurger.classList.toggle('is-active');
+      $navMenu.classList.toggle('is-active');
+    });
+  }
+
+  // Modals
+
+  const $html = document.documentElement;
+  const $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0);
+  const $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0);
+  const $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0);
+
+  if ($modalButtons.length > 0) {
+    $modalButtons.forEach($el => {
+      $el.addEventListener('click', () => {
+        const target = $el.dataset.target;
+        console.log('target', target);
+        const $target = document.getElementById(target);
+        $html.classList.add('is-clipped');
+        $target.classList.add('is-active');
+      });
+    });
+  }
+
+  if ($modalCloses.length > 0) {
+    $modalCloses.forEach($el => {
+      $el.addEventListener('click', () => {
+        $html.classList.remove('is-clipped');
+        closeModals();
+      });
+    });
+  }
+
+  document.addEventListener('keydown', e => {
+    if (e.keyCode === 27) {
+      $html.classList.remove('is-clipped');
+      closeModals();
+    }
+  });
+
+  function closeModals() {
+    $modals.forEach($el => {
+      $el.classList.remove('is-active');
+    });
+  }
+
+});

docs/_layouts/default.html

@@ -3,6 +3,6 @@
   {% include head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
     {{ content }}
-    <script type="text/javascript" src="{{ site.url }}/javascript/main.js"></script>
+    {% include footer.html %}
   </body>
 </html>

docs/_layouts/documentation.html

@@ -3,9 +3,7 @@ layout: default
 route: documentation
 ---
 
-<div class="container">
+{% include navbar.html %}
-  {% include header.html %}
-</div>
 
 <section class="hero is-primary">
   <div class="hero-body">

docs/bulma-docs.sass

@@ -1,17 +1,17 @@
 @charset "utf-8"
 
 @import "../bulma"
-@import "./sass/highlight"
+@import "./_sass/highlight"
-@import "./sass/override"
+@import "./_sass/override"
-@import "./sass/global"
+@import "./_sass/global"
-@import "./sass/index"
+@import "./_sass/index"
-@import "./sass/header"
+@import "./_sass/header"
-@import "./sass/footer"
+@import "./_sass/footer"
-@import "./sass/specific"
+@import "./_sass/specific"
-@import "./sass/example"
+@import "./_sass/example"
-@import "./sass/callout"
+@import "./_sass/callout"
-@import "./sass/bsa"
+@import "./_sass/bsa"
-@import "./sass/route"
+@import "./_sass/route"
 
 html
   \::-moz-selection

docs/css/bulma-docs.css

@@ -4395,7 +4395,12 @@ a.nav-item.is-tab.is-active {
 a.navbar-item:hover,
 .navbar-link:hover {
   background-color: whitesmoke;
-  color: #363636;
+  color: #0a0a0a;
+}
+
+a.navbar-item.is-active,
+.navbar-link.is-active {
+  color: #0a0a0a;
 }
 
 .navbar-item {
@@ -4435,6 +4440,10 @@ a.navbar-item:hover,
   background-color: whitesmoke;
 }
 
+.navbar-dropdown a.navbar-item.is-active {
+  color: #00d1b2;
+}
+
 .navbar-divider {
   background-color: #dbdbdb;
   border: none;
@@ -4467,6 +4476,14 @@ a.navbar-item:hover,
   .navbar {
     height: 3.25rem;
   }
+  .navbar.is-transparent .navbar-brand .navbar-link:hover,
+  .navbar.is-transparent .navbar-brand > a.navbar-item:hover,
+  .navbar.is-transparent .navbar-start .navbar-link:hover,
+  .navbar.is-transparent .navbar-start > a.navbar-item:hover,
+  .navbar.is-transparent .navbar-end .navbar-link:hover,
+  .navbar.is-transparent .navbar-end > a.navbar-item:hover {
+    background-color: transparent;
+  }
   .navbar-burger {
     display: none;
   }
@@ -4496,9 +4513,10 @@ a.navbar-item:hover,
   .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
     display: block;
   }
-  a.navbar-item:hover,
+  .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
-  .navbar-link:hover {
+    opacity: 1;
-    background-color: transparent;
+    pointer-events: auto;
+    transform: translateY(0);
   }
   .navbar-menu {
     flex-grow: 1;
@@ -4514,20 +4532,34 @@ a.navbar-item:hover,
   }
   .navbar-dropdown {
     background-color: white;
-    border-radius: 5px;
+    border-bottom-left-radius: 5px;
-    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+    border-bottom-right-radius: 5px;
+    border-top: 1px solid #dbdbdb;
+    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
     display: none;
     font-size: 0.875rem;
     left: 0;
     min-width: 100%;
     position: absolute;
-    top: calc(100% + (-4px));
+    top: 100%;
     z-index: 20;
   }
   .navbar-dropdown .navbar-item {
     padding: 0.375rem 1rem;
     white-space: nowrap;
   }
+  .navbar-dropdown.is-boxed {
+    border-radius: 5px;
+    border-top: none;
+    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    top: calc(100% + (-4px));
+    transform: translateY(-5px);
+    transition-duration: 86ms;
+    transition-property: opacity, transform;
+  }
   .navbar-divider {
     display: block;
   }
@@ -7752,6 +7784,20 @@ html.route-index #carbon {
   width: 24px;
 }
 
+.button.is-rss {
+  background-color: #f26522;
+  border-color: transparent;
+  color: #fff;
+}
+
+.button.is-rss:hover {
+  background-color: #ed560e;
+}
+
+.button.is-rss:active {
+  background-color: #d54d0d;
+}
+
 .example,
 .structure {
   border: 1px solid #ffdd57;

docs/documentation/components/modal.html

@@ -32,7 +32,7 @@ doc-subtab: modal
         </li>
       </ul>
       <p>
-        <a class="button is-primary is-large modal-button" data-target="#modal">Launch example modal</a>
+        <a class="button is-primary is-large modal-button" data-target="modal">Launch example modal</a>
       </p>
     </div>
 
@@ -42,7 +42,7 @@ doc-subtab: modal
   <div class="modal-content">
     <!-- Any other Bulma elements you want -->
   </div>
-  <button class="modal-close"></button>
+  <button class="modal-close is-large"></button>
 </div>
 {% endhighlight %}
 
@@ -66,7 +66,7 @@ doc-subtab: modal
     <div class="content">
       <p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
       <p>
-        <a class="button is-primary is-large modal-button" data-target="#modal-bis">Launch image modal</a>
+        <a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
       </p>
     </div>
 
@@ -78,7 +78,7 @@ doc-subtab: modal
       <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
-  <button class="modal-close"></button>
+  <button class="modal-close is-large"></button>
 </div>
 {% endhighlight %}
 
@@ -89,7 +89,7 @@ doc-subtab: modal
     <div class="content">
       <p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
       <p>
-        <a class="button is-primary is-large modal-button" data-target="#modal-ter">Launch modal card</a>
+        <a class="button is-primary is-large modal-button" data-target="modal-ter">Launch modal card</a>
       </p>
     </div>
 
@@ -150,7 +150,7 @@ doc-subtab: modal
       </article>
     </div>
   </div>
-  <button class="modal-close"></button>
+  <button class="modal-close is-large"></button>
 </div>
 
 <div id="modal-bis" class="modal">
@@ -160,7 +160,7 @@ doc-subtab: modal
       <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
-  <button class="modal-close"></button>
+  <button class="modal-close is-large"></button>
 </div>
 
 <div id="modal-ter" class="modal">

docs/documentation/components/navbar.html

@@ -0,0 +1,18 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: navbar
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Navbar</h1>
+    <h2 class="subtitle">
+      A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
+    </h2>
+
+    <hr>
+  </div>
+</section>

docs/documentation/elements/button.html

@@ -236,12 +236,7 @@ doc-subtab: button
   </div>
 </div>
 
-    <p id="static-button" style="margin-bottom: 0.5rem;">
+    <h4 id="static-button" class="subtitle">
-      <span class="tag is-success">New!</span>
-      <span class="tag is-info">0.4.2</span>
-    </p>
-
-    <h4 class="subtitle">
       Static
     </h4>
 
@@ -252,6 +247,10 @@ doc-subtab: button
   <div class="column">
 
     <div class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+        <span class="tag is-info">0.4.2</span>
+      </p>
       <p>
         You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/elements/form#form-addons">form addons</a>.
       </p>

docs/documentation/elements/form.html

@@ -803,12 +803,11 @@ doc-subtab: form
       <p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
     </div>
 
-    <p style="margin-bottom: 0.5rem;">
+    <div class="content">
+      <p>
         <span class="tag is-success">New!</span>
         <span class="tag is-info">0.4.2</span>
       </p>
-
-    <div class="content">
       <p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
     </div>
 
@@ -1144,7 +1143,8 @@ doc-subtab: form
 <div class="content">
   <p>
     <span class="tag is-success">New!</span>
-    <br>
+  </p>
+  <p>
     To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>.field-label</code> comes with <strong>4 size modifiers</strong>:
   </p>
   <ul>

docs/documentation/elements/table.html

@@ -47,7 +47,8 @@ doc-subtab: table
       <p>
         <span class="tag is-success">New!</span>
         <span class="tag is-info">0.4.2</span>
-        <br>
+      </p>
+      <p>
         You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
       </p>
     </div>

docs/index.html

@@ -3,7 +3,7 @@ layout: default
 route: index
 ---
 
-{% include navbar.html %}
+{% include navbar.html transparent=true boxed=true %}
 
 <section class="hero is-medium has-text-centered">
   <div class="hero-body">

docs/javascript/index.js

@@ -1,46 +0,0 @@
-jQuery(document).ready(function ($) {
-
-  var $grid = $('#grid');
-  var $columns = $grid.children('.column');
-  var showing = 5;
-  var $markup = $('#markup code');
-  var $message = $('#message');
-  var $add = $('#add');
-  var $remove = $('#remove');
-
-  function showColumns() {
-    if (showing === 13) {
-      $message.show();
-    } else {
-      $message.hide();
-    }
-
-    showing = Math.min(Math.max(parseInt(showing), 2), 12);
-
-    $columns.hide();
-    $columns.slice(0, showing).show();
-
-    $markup.html('<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>');
-    $markup.append('\n');
-
-    for(i = 0; i < showing; i++) {
-      $markup.append('  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
-      $markup.append(i + 1);
-      $markup.append('<span class="nt">&lt;/div&gt;</span>');
-      $markup.append('\n');
-    }
-
-    $markup.append('<span class="nt">&lt;/div&gt;</span>');
-  }
-
-  $add.click(function() {
-    showing++;
-    showColumns();
-  });
-
-  $remove.click(function() {
-    showing--;
-    showColumns();
-  });
-
-});

docs/javascript/main.js

@@ -1,13 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-
-  const $navBurger = document.getElementById('navBurger');
-  const $navMenu = document.getElementById('navMenu');
-
-  if ($navBurger) {
-    $navBurger.addEventListener('click', () => {
-      $navBurger.classList.toggle('is-active');
-      $navMenu.classList.toggle('is-active');
-    });
-  }
-
-});

docs/lib/bulma.js

@@ -0,0 +1,66 @@
+'use strict';
+
+jQuery(document).ready(function ($) {
+
+  var $toggle = $('#nav-toggle');
+  var $menu = $('#nav-menu');
+
+  $toggle.click(function () {
+    $(this).toggleClass('is-active');
+    $menu.toggleClass('is-active');
+  });
+
+  $('.modal-button').click(function () {
+    var target = $(this).data('target');
+    $('html').addClass('is-clipped');
+    $(target).addClass('is-active');
+  });
+
+  $('.modal-background, .modal-close').click(function () {
+    $('html').removeClass('is-clipped');
+    $(this).parent().removeClass('is-active');
+  });
+
+  $('.modal-card-head .delete, .modal-card-foot .button').click(function () {
+    $('html').removeClass('is-clipped');
+    $('#modal-ter').removeClass('is-active');
+  });
+
+  $(document).on('keyup', function (e) {
+    if (e.keyCode == 27) {
+      $('html').removeClass('is-clipped');
+      $('.modal').removeClass('is-active');
+    }
+  });
+
+  var $highlights = $('.highlight');
+
+  $highlights.each(function () {
+    var $el = $(this);
+    var copy = '<button class="copy">Copy</button>';
+    var expand = '<button class="expand">Expand</button>';
+    $el.append(copy);
+
+    if ($el.find('pre code').innerHeight() > 600) {
+      $el.append(expand);
+    }
+  });
+
+  var $highlightButtons = $('.highlight .copy, .highlight .expand');
+
+  $highlightButtons.hover(function () {
+    $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
+  }, function () {
+    $(this).parent().css('box-shadow', 'none');
+  });
+
+  $('.highlight .expand').click(function () {
+    $(this).parent().children('pre').css('max-height', 'none');
+  });
+
+  new Clipboard('.copy', {
+    target: function target(trigger) {
+      return trigger.previousSibling;
+    }
+  });
+});

docs/lib/clipboard.min.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+/*!
+ * clipboard.js v1.5.9
+ * https://zenorocha.github.io/clipboard.js
+ *
+ * Licensed MIT © Zeno Rocha
+ */
+!function (t) {
+  if ("object" == (typeof exports === "undefined" ? "undefined" : _typeof(exports)) && "undefined" != typeof module) module.exports = t();else if ("function" == typeof define && define.amd) define([], t);else {
+    var e;e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : this, e.Clipboard = t();
+  }
+}(function () {
+  var t, e, n;return function t(e, n, o) {
+    function r(c, s) {
+      if (!n[c]) {
+        if (!e[c]) {
+          var a = "function" == typeof require && require;if (!s && a) return a(c, !0);if (i) return i(c, !0);var l = new Error("Cannot find module '" + c + "'");throw l.code = "MODULE_NOT_FOUND", l;
+        }var u = n[c] = { exports: {} };e[c][0].call(u.exports, function (t) {
+          var n = e[c][1][t];return r(n ? n : t);
+        }, u, u.exports, t, e, n, o);
+      }return n[c].exports;
+    }for (var i = "function" == typeof require && require, c = 0; c < o.length; c++) {
+      r(o[c]);
+    }return r;
+  }({ 1: [function (t, e, n) {
+      var o = t("matches-selector");e.exports = function (t, e, n) {
+        for (var r = n ? t : t.parentNode; r && r !== document;) {
+          if (o(r, e)) return r;r = r.parentNode;
+        }
+      };
+    }, { "matches-selector": 5 }], 2: [function (t, e, n) {
+      function o(t, e, n, o, i) {
+        var c = r.apply(this, arguments);return t.addEventListener(n, c, i), { destroy: function destroy() {
+            t.removeEventListener(n, c, i);
+          } };
+      }function r(t, e, n, o) {
+        return function (n) {
+          n.delegateTarget = i(n.target, e, !0), n.delegateTarget && o.call(t, n);
+        };
+      }var i = t("closest");e.exports = o;
+    }, { closest: 1 }], 3: [function (t, e, n) {
+      n.node = function (t) {
+        return void 0 !== t && t instanceof HTMLElement && 1 === t.nodeType;
+      }, n.nodeList = function (t) {
+        var e = Object.prototype.toString.call(t);return void 0 !== t && ("[object NodeList]" === e || "[object HTMLCollection]" === e) && "length" in t && (0 === t.length || n.node(t[0]));
+      }, n.string = function (t) {
+        return "string" == typeof t || t instanceof String;
+      }, n.fn = function (t) {
+        var e = Object.prototype.toString.call(t);return "[object Function]" === e;
+      };
+    }, {}], 4: [function (t, e, n) {
+      function o(t, e, n) {
+        if (!t && !e && !n) throw new Error("Missing required arguments");if (!s.string(e)) throw new TypeError("Second argument must be a String");if (!s.fn(n)) throw new TypeError("Third argument must be a Function");if (s.node(t)) return r(t, e, n);if (s.nodeList(t)) return i(t, e, n);if (s.string(t)) return c(t, e, n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");
+      }function r(t, e, n) {
+        return t.addEventListener(e, n), { destroy: function destroy() {
+            t.removeEventListener(e, n);
+          } };
+      }function i(t, e, n) {
+        return Array.prototype.forEach.call(t, function (t) {
+          t.addEventListener(e, n);
+        }), { destroy: function destroy() {
+            Array.prototype.forEach.call(t, function (t) {
+              t.removeEventListener(e, n);
+            });
+          } };
+      }function c(t, e, n) {
+        return a(document.body, t, e, n);
+      }var s = t("./is"),
+          a = t("delegate");e.exports = o;
+    }, { "./is": 3, delegate: 2 }], 5: [function (t, e, n) {
+      function o(t, e) {
+        if (i) return i.call(t, e);for (var n = t.parentNode.querySelectorAll(e), o = 0; o < n.length; ++o) {
+          if (n[o] == t) return !0;
+        }return !1;
+      }var r = Element.prototype,
+          i = r.matchesSelector || r.webkitMatchesSelector || r.mozMatchesSelector || r.msMatchesSelector || r.oMatchesSelector;e.exports = o;
+    }, {}], 6: [function (t, e, n) {
+      function o(t) {
+        var e;if ("INPUT" === t.nodeName || "TEXTAREA" === t.nodeName) t.focus(), t.setSelectionRange(0, t.value.length), e = t.value;else {
+          t.hasAttribute("contenteditable") && t.focus();var n = window.getSelection(),
+              o = document.createRange();o.selectNodeContents(t), n.removeAllRanges(), n.addRange(o), e = n.toString();
+        }return e;
+      }e.exports = o;
+    }, {}], 7: [function (t, e, n) {
+      function o() {}o.prototype = { on: function on(t, e, n) {
+          var o = this.e || (this.e = {});return (o[t] || (o[t] = [])).push({ fn: e, ctx: n }), this;
+        }, once: function once(t, e, n) {
+          function o() {
+            r.off(t, o), e.apply(n, arguments);
+          }var r = this;return o._ = e, this.on(t, o, n);
+        }, emit: function emit(t) {
+          var e = [].slice.call(arguments, 1),
+              n = ((this.e || (this.e = {}))[t] || []).slice(),
+              o = 0,
+              r = n.length;for (o; r > o; o++) {
+            n[o].fn.apply(n[o].ctx, e);
+          }return this;
+        }, off: function off(t, e) {
+          var n = this.e || (this.e = {}),
+              o = n[t],
+              r = [];if (o && e) for (var i = 0, c = o.length; c > i; i++) {
+            o[i].fn !== e && o[i].fn._ !== e && r.push(o[i]);
+          }return r.length ? n[t] = r : delete n[t], this;
+        } }, e.exports = o;
+    }, {}], 8: [function (e, n, o) {
+      !function (r, i) {
+        if ("function" == typeof t && t.amd) t(["module", "select"], i);else if ("undefined" != typeof o) i(n, e("select"));else {
+          var c = { exports: {} };i(c, r.select), r.clipboardAction = c.exports;
+        }
+      }(this, function (t, e) {
+        "use strict";
+        function n(t) {
+          return t && t.__esModule ? t : { "default": t };
+        }function o(t, e) {
+          if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
+        }var r = n(e),
+            i = "function" == typeof Symbol && "symbol" == _typeof(Symbol.iterator) ? function (t) {
+          return typeof t === "undefined" ? "undefined" : _typeof(t);
+        } : function (t) {
+          return t && "function" == typeof Symbol && t.constructor === Symbol ? "symbol" : typeof t === "undefined" ? "undefined" : _typeof(t);
+        },
+            c = function () {
+          function t(t, e) {
+            for (var n = 0; n < e.length; n++) {
+              var o = e[n];o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o);
+            }
+          }return function (e, n, o) {
+            return n && t(e.prototype, n), o && t(e, o), e;
+          };
+        }(),
+            s = function () {
+          function t(e) {
+            o(this, t), this.resolveOptions(e), this.initSelection();
+          }return t.prototype.resolveOptions = function t() {
+            var e = arguments.length <= 0 || void 0 === arguments[0] ? {} : arguments[0];this.action = e.action, this.emitter = e.emitter, this.target = e.target, this.text = e.text, this.trigger = e.trigger, this.selectedText = "";
+          }, t.prototype.initSelection = function t() {
+            if (this.text && this.target) throw new Error('Multiple attributes declared, use either "target" or "text"');if (this.text) this.selectFake();else {
+              if (!this.target) throw new Error('Missing required attributes, use either "target" or "text"');this.selectTarget();
+            }
+          }, t.prototype.selectFake = function t() {
+            var e = this,
+                n = "rtl" == document.documentElement.getAttribute("dir");this.removeFake(), this.fakeHandler = document.body.addEventListener("click", function () {
+              return e.removeFake();
+            }), this.fakeElem = document.createElement("textarea"), this.fakeElem.style.fontSize = "12pt", this.fakeElem.style.border = "0", this.fakeElem.style.padding = "0", this.fakeElem.style.margin = "0", this.fakeElem.style.position = "fixed", this.fakeElem.style[n ? "right" : "left"] = "-9999px", this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + "px", this.fakeElem.setAttribute("readonly", ""), this.fakeElem.value = this.text, document.body.appendChild(this.fakeElem), this.selectedText = (0, r.default)(this.fakeElem), this.copyText();
+          }, t.prototype.removeFake = function t() {
+            this.fakeHandler && (document.body.removeEventListener("click"), this.fakeHandler = null), this.fakeElem && (document.body.removeChild(this.fakeElem), this.fakeElem = null);
+          }, t.prototype.selectTarget = function t() {
+            this.selectedText = (0, r.default)(this.target), this.copyText();
+          }, t.prototype.copyText = function t() {
+            var e = void 0;try {
+              e = document.execCommand(this.action);
+            } catch (n) {
+              e = !1;
+            }this.handleResult(e);
+          }, t.prototype.handleResult = function t(e) {
+            e ? this.emitter.emit("success", { action: this.action, text: this.selectedText, trigger: this.trigger, clearSelection: this.clearSelection.bind(this) }) : this.emitter.emit("error", { action: this.action, trigger: this.trigger, clearSelection: this.clearSelection.bind(this) });
+          }, t.prototype.clearSelection = function t() {
+            this.target && this.target.blur(), window.getSelection().removeAllRanges();
+          }, t.prototype.destroy = function t() {
+            this.removeFake();
+          }, c(t, [{ key: "action", set: function t() {
+              var e = arguments.length <= 0 || void 0 === arguments[0] ? "copy" : arguments[0];if (this._action = e, "copy" !== this._action && "cut" !== this._action) throw new Error('Invalid "action" value, use either "copy" or "cut"');
+            }, get: function t() {
+              return this._action;
+            } }, { key: "target", set: function t(e) {
+              if (void 0 !== e) {
+                if (!e || "object" !== ("undefined" == typeof e ? "undefined" : i(e)) || 1 !== e.nodeType) throw new Error('Invalid "target" value, use a valid Element');this._target = e;
+              }
+            }, get: function t() {
+              return this._target;
+            } }]), t;
+        }();t.exports = s;
+      });
+    }, { select: 6 }], 9: [function (e, n, o) {
+      !function (r, i) {
+        if ("function" == typeof t && t.amd) t(["module", "./clipboard-action", "tiny-emitter", "good-listener"], i);else if ("undefined" != typeof o) i(n, e("./clipboard-action"), e("tiny-emitter"), e("good-listener"));else {
+          var c = { exports: {} };i(c, r.clipboardAction, r.tinyEmitter, r.goodListener), r.clipboard = c.exports;
+        }
+      }(this, function (t, e, n, o) {
+        "use strict";
+        function r(t) {
+          return t && t.__esModule ? t : { "default": t };
+        }function i(t, e) {
+          if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
+        }function c(t, e) {
+          if (!t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return !e || "object" != (typeof e === "undefined" ? "undefined" : _typeof(e)) && "function" != typeof e ? t : e;
+        }function s(t, e) {
+          if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function, not " + (typeof e === "undefined" ? "undefined" : _typeof(e)));t.prototype = Object.create(e && e.prototype, { constructor: { value: t, enumerable: !1, writable: !0, configurable: !0 } }), e && (Object.setPrototypeOf ? Object.setPrototypeOf(t, e) : _defaults(t, e));
+        }function a(t, e) {
+          var n = "data-clipboard-" + t;if (e.hasAttribute(n)) return e.getAttribute(n);
+        }var l = r(e),
+            u = r(n),
+            f = r(o),
+            d = function (t) {
+          function e(n, o) {
+            i(this, e);var r = c(this, t.call(this));return r.resolveOptions(o), r.listenClick(n), r;
+          }return s(e, t), e.prototype.resolveOptions = function t() {
+            var e = arguments.length <= 0 || void 0 === arguments[0] ? {} : arguments[0];this.action = "function" == typeof e.action ? e.action : this.defaultAction, this.target = "function" == typeof e.target ? e.target : this.defaultTarget, this.text = "function" == typeof e.text ? e.text : this.defaultText;
+          }, e.prototype.listenClick = function t(e) {
+            var n = this;this.listener = (0, f.default)(e, "click", function (t) {
+              return n.onClick(t);
+            });
+          }, e.prototype.onClick = function t(e) {
+            var n = e.delegateTarget || e.currentTarget;this.clipboardAction && (this.clipboardAction = null), this.clipboardAction = new l.default({ action: this.action(n), target: this.target(n), text: this.text(n), trigger: n, emitter: this });
+          }, e.prototype.defaultAction = function t(e) {
+            return a("action", e);
+          }, e.prototype.defaultTarget = function t(e) {
+            var n = a("target", e);return n ? document.querySelector(n) : void 0;
+          }, e.prototype.defaultText = function t(e) {
+            return a("text", e);
+          }, e.prototype.destroy = function t() {
+            this.listener.destroy(), this.clipboardAction && (this.clipboardAction.destroy(), this.clipboardAction = null);
+          }, e;
+        }(u.default);t.exports = d;
+      });
+    }, { "./clipboard-action": 8, "good-listener": 4, "tiny-emitter": 7 }] }, {}, [9])(9);
+});

docs/lib/index.js

@@ -0,0 +1,52 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+  var $grid = document.getElementById('grid');
+  var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
+  console.log('$columns', $columns);
+  var $markup = document.querySelector('#markup code');
+  var $message = document.getElementById('message');
+  var $add = document.getElementById('add');
+  var $remove = document.getElementById('remove');
+  var showing = 5;
+
+  function showColumns() {
+    if (showing === 13) {
+      $message.style.display = 'block';
+    } else {
+      $message.style.display = 'none';
+    }
+
+    showing = Math.min(Math.max(parseInt(showing), 2), 12);
+
+    $columns.forEach(function ($el) {
+      $el.style.display = 'none';
+    });
+    $columns.slice(0, showing).forEach(function ($el) {
+      $el.style.display = 'block';
+    });
+
+    $markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
+    $markup.insertAdjacentHTML('beforeend', '\n');
+
+    for (var i = 0; i < showing; i++) {
+      $markup.insertAdjacentHTML('beforeend', '  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
+      $markup.insertAdjacentHTML('beforeend', i + 1);
+      $markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
+      $markup.insertAdjacentHTML('beforeend', '\n');
+    }
+
+    $markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
+  }
+
+  $add.addEventListener('click', function () {
+    showing++;
+    showColumns();
+  });
+
+  $remove.addEventListener('click', function () {
+    showing--;
+    showColumns();
+  });
+});

docs/lib/javascript/main.js

@@ -0,0 +1,57 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+  // Navbar burger menu
+
+  var $navBurger = document.getElementById('navBurger');
+  var $navMenu = document.getElementById('navMenu');
+
+  if ($navBurger) {
+    $navBurger.addEventListener('click', function () {
+      $navBurger.classList.toggle('is-active');
+      $navMenu.classList.toggle('is-active');
+    });
+  }
+
+  // Modals
+
+  var $html = document.documentElement;
+  var $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0);
+  var $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0);
+  var $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0);
+
+  if ($modalButtons.length > 0) {
+    $modalButtons.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        var target = $el.dataset.target;
+        console.log('target', target);
+        var $target = document.getElementById(target);
+        $html.classList.add('is-clipped');
+        $target.classList.add('is-active');
+      });
+    });
+  }
+
+  if ($modalCloses.length > 0) {
+    $modalCloses.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        $html.classList.remove('is-clipped');
+        closeModals();
+      });
+    });
+  }
+
+  document.addEventListener('keydown', function (e) {
+    if (e.keyCode === 27) {
+      $html.classList.remove('is-clipped');
+      closeModals();
+    }
+  });
+
+  function closeModals() {
+    $modals.forEach(function ($el) {
+      $el.classList.remove('is-active');
+    });
+  }
+});

docs/lib/main.js

@@ -0,0 +1,57 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+  // Navbar burger menu
+
+  var $navBurger = document.getElementById('navBurger');
+  var $navMenu = document.getElementById('navMenu');
+
+  if ($navBurger) {
+    $navBurger.addEventListener('click', function () {
+      $navBurger.classList.toggle('is-active');
+      $navMenu.classList.toggle('is-active');
+    });
+  }
+
+  // Modals
+
+  var $html = document.documentElement;
+  var $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0);
+  var $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0);
+  var $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0);
+
+  if ($modalButtons.length > 0) {
+    $modalButtons.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        var target = $el.dataset.target;
+        console.log('target', target);
+        var $target = document.getElementById(target);
+        $html.classList.add('is-clipped');
+        $target.classList.add('is-active');
+      });
+    });
+  }
+
+  if ($modalCloses.length > 0) {
+    $modalCloses.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        $html.classList.remove('is-clipped');
+        closeModals();
+      });
+    });
+  }
+
+  document.addEventListener('keydown', function (e) {
+    if (e.keyCode === 27) {
+      $html.classList.remove('is-clipped');
+      closeModals();
+    }
+  });
+
+  function closeModals() {
+    $modals.forEach(function ($el) {
+      $el.classList.remove('is-active');
+    });
+  }
+});

docs/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "bulma-docs",
+  "version": "1.0.0",
+  "main": "index.html",
+  "author": "Jeremy Thomas <bbxdesign@gmail.com> (http://jgthms.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-preset-env": "^1.5.2",
+    "babel-preset-es2015-ie": "^6.7.0",
+    "i": "^0.3.5",
+    "npm": "^5.0.4"
+  },
+  "scripts": {
+    "build": "babel _javascript --out-dir lib",
+    "watch": "npm run build -- --watch"
+  }
+}

docs/sass/bsa.sass

@@ -1,73 +0,0 @@
-.bsa
-  padding: 2rem
-
-.bsa-cpc
-  min-height: 1px
-
-#_default_
-  .default-ad
-    background-color: rgba(black, 0.3)
-    border-radius: 2px
-    color: $white
-    display: inline-block
-    font-size: 10px
-    font-weight: bold
-    padding: 0 4px
-    text-transform: uppercase
-    vertical-align: top
-  & > a
-    background-color: $white
-    border-radius: $radius-large
-    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-    color: $text
-    display: block
-    line-height: 1.375
-    margin-top: 15px
-    min-height: 70px
-    padding: 15px
-    padding-left: 70px
-    position: relative
-    &:hover,
-    &:focus
-      box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
-    &:active
-      box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
-    span
-      display: block
-    .default-image
-      display: block
-      left: 15px
-      height: 40px
-      position: absolute
-      top: 15px
-      width: 40px
-      img
-        display: block
-        height: 40px
-        width: 40px
-    .default-title
-      color: $text-strong
-      display: inline
-      font-weight: $weight-bold
-      &:after
-        content: " — "
-    .default-description
-      display: inline
-
-+tablet
-  .bsa
-    .columns
-      min-height: 120px
-  #_default_
-    display: flex
-    justify-content: center
-    position: relative
-    .default-ad
-      left: 100%
-      margin-left: 2rem
-      position: absolute
-      top: 0
-    & > a
-      margin: 0
-      &:not(:nth-child(2))
-        margin-left: 2rem

docs/sass/callout.sass

@@ -1,13 +0,0 @@
-.callout
-  +block
-  background-color: $background
-  border-radius: $radius
-  padding: 1.25rem 2.5rem 1.25rem 1.5rem
-  position: relative
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert

docs/sass/example.sass

@@ -1,126 +0,0 @@
-.example,
-.structure
-  border: 1px solid $warning
-  border-top-right-radius: $radius
-  color: $warning-invert
-  padding: 1.5rem
-  position: relative
-  &:not(:first-child)
-    margin-top: 2rem
-  &:not(:last-child)
-    margin-bottom: 1.5rem
-  &:before
-    background: $warning
-    border-radius: $radius $radius 0 0
-    bottom: 100%
-    content: "Example"
-    display: inline-block
-    font-size: 7px
-    font-weight: bold
-    left: -1px
-    letter-spacing: 1px
-    padding: 3px 5px
-    position: absolute
-    text-transform: uppercase
-    vertical-align: top
-  +tablet
-    &.is-fullwidth
-      border-left: none
-      border-right: none
-      padding: 0
-
-.example
-  & + .highlight
-    border: 1px solid $warning
-    border-radius: 0 0 $radius $radius
-    border-top: none
-    margin-top: -1.5rem
-    &:not(:last-child)
-      margin-bottom: 1.5rem
-
-.highlight pre
-  max-height: 600px
-  margin-bottom: 0 !important
-
-$structure: $danger
-$structure-invert: $danger-invert
-
-.structure
-  border-color: $structure
-  border-radius: $radius
-  padding: 1.5rem
-  &:before
-    background: $structure
-    color: $structure-invert
-    content: "Structure"
-
-.structure-item
-  position: relative
-  &:before
-    +overlay
-    background: rgba($black, 0.7)
-    background: $background
-    border: 1px solid $border
-    content: ""
-    display: block
-    z-index: 1
-  &:after
-    +overlay
-    align-items: center
-    content: attr(title)
-    display: flex
-    font-family: $family-monospace
-    font-size: 11px
-    justify-content: center
-    padding: 3px 5px
-    z-index: 2
-  &.is-structure-container
-    padding: 1.5rem 0.75rem 0.75rem
-    &:after
-      align-items: flex-start
-      justify-content: flex-start
-      padding: 0.5rem 0.75rem
-
-.highlight
-  position: relative
-  .copy,
-  .expand
-    +unselectable
-    background: $white
-    border: solid $border
-    border-width: 0 0 1px 1px
-    color: $text-light
-    cursor: pointer
-    outline: none
-    position: absolute
-    right: 0
-    top: 0
-    &:hover
-      border-color: $code
-      color: $code
-  .expand
-    border-right-width: 1px
-    right: 50px
-  +tablet
-    pre
-      white-space: pre-wrap
-
-+tablet
-  .section:not(.is-fullwidth) > .example:not(.is-fullwidth)
-    margin-left: 1.5rem
-    margin-right: 1.5rem
-    & + .highlight
-      margin-left: 1.5rem
-      margin-right: 1.5rem
-
-.section.is-fullwidth
-  padding: 0 !important
-  .example
-    border-left: none
-    border-radius: 0
-    border-right: none
-    padding: 0
-    & + .highlight
-      border-left: none
-      border-radius: 0
-      border-right: none

docs/sass/footer.sass

@@ -1,66 +0,0 @@
-#about
-  .twitter-container
-    display: block
-    height: 30px
-    line-height: 30px
-    margin-top: 5px
-  small
-    display: block
-    margin-top: 5px
-
-#mc_embed_signup
-  .field
-    margin-bottom: 0
-  .notification
-    margin-top: 0.75rem
-
-#share
-  form
-    height: 30px
-    margin-top: 10px
-
-#social
-  align-items: center
-  display: flex
-  flex-wrap: wrap
-  justify-content: flex-start
-  > iframe,
-  > a,
-  > form,
-  > div
-    display: inline-block
-    font-size: 11px
-    height: 30px
-    line-height: 30px
-    margin-top: 5px
-  .github-btn
-    width: 160px
-  .twitter-share-button
-    margin-right: 10px
-    min-width: 76px
-  .paypal-form
-    min-width: 148px
-  .fb-like
-    align-items: center
-    display: flex
-    width: 130px
-
-#newsletter
-  .input
-    border-color: $white
-    box-shadow: none
-
-#sister
-  ul
-    display: flex
-    flex-wrap: wrap
-  li
-    display: flex
-    height: 30px
-    margin: 5px 1rem 0 0
-  img
-    height: 30px
-
-#tsp
-  small
-    display: block

docs/sass/global.sass

@@ -1,50 +0,0 @@
-svg
-  max-height: 100%
-  max-width: 100%
-
-$carbon-space: 15px
-
-#carbon
-  margin-left: auto
-  margin-right: auto
-  max-width: 340px
-  min-height: 120px + ($carbon-space * 2)
-  padding: 0
-  position: relative
-  &:hover
-    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
-  +tablet
-    width: 340px
-
-#carbonads
-  font-size: 14px
-  text-align: left
-  a,
-  span
-    display: block
-  .carbon-wrap
-    position: relative
-  .carbon-img
-    background: $background
-    float: left
-    height: 100px
-    margin: 15px 0 15px 15px
-    width: 130px
-    img
-      display: block
-      height: 100px
-      width: 130px
-  .carbon-text
-    display: block
-    color: $text-strong
-    line-height: 20px
-    padding: 15px 15px 35px 160px
-  .carbon-poweredby
-    bottom: 0
-    color: $text-light
-    font-size: $size-small
-    left: 160px
-    line-height: 20px
-    padding: 0 15px 10px 0
-    position: absolute
-    right: 0

docs/sass/header.sass

@@ -1,18 +0,0 @@
-$github: #333333
-$twitter: #55acee
-
-#github
-  color: $github
-  border-color: $github
-  &:hover
-    background: $github
-    border-color: $github
-    color: $white
-
-#twitter
-  color: $twitter
-  border-color: $twitter
-  &:hover
-    background: $twitter
-    border-color: $twitter
-    color: $white

docs/sass/highlight.sass

@@ -1,126 +0,0 @@
-.highlight
-  background-color: #f5f5f5
-  color: #586e75
-  .c
-    color: #93a1a1
-  .err,
-  .g
-    color: #586e75
-  .k
-    color: #859900
-  .l,
-  .n
-    color: #586e75
-  .o
-    color: #859900
-  .x
-    color: #cb4b16
-  .p
-    color: #586e75
-  .cm
-    color: #93a1a1
-  .cp
-    color: #859900
-  .c1
-    color: #93a1a1
-  .cs
-    color: #859900
-  .gd
-    color: #2aa198
-  .ge
-    color: #586e75
-    font-style: italic
-  .gr
-    color: #dc322f
-  .gh
-    color: #cb4b16
-  .gi
-    color: #859900
-  .go,
-  .gp
-    color: #586e75
-  .gs
-    color: #586e75
-    font-weight: bold
-  .gu
-    color: #cb4b16
-  .gt
-    color: #586e75
-  .kc
-    color: #cb4b16
-  .kd
-    color: #268bd2
-  .kn,
-  .kp
-    color: #859900
-  .kr
-    color: #268bd2
-  .kt
-    color: #dc322f
-  .ld
-    color: #586e75
-  .m,
-  .s
-    color: #2aa198
-  .na
-    color: #B58900
-  .nb
-    color: #586e75
-  .nc
-    color: #268bd2
-  .no
-    color: #cb4b16
-  .nd
-    color: #268bd2
-  .ni,
-  .ne
-    color: #cb4b16
-  .nf
-    color: #268bd2
-  .nl,
-  .nn,
-  .nx,
-  .py
-    color: #586e75
-  .nt,
-  .nv
-    color: #268bd2
-  .ow
-    color: #859900
-  .w
-    color: #586e75
-  .mf,
-  .mh,
-  .mi,
-  .mo
-    color: #2aa198
-  .sb
-    color: #93a1a1
-  .sc
-    color: #2aa198
-  .sd
-    color: #586e75
-  .s2
-    color: #2aa198
-  .se
-    color: #cb4b16
-  .sh
-    color: #586e75
-  .si,
-  .sx
-    color: #2aa198
-  .sr
-    color: #dc322f
-  .s1,
-  .ss
-    color: #2aa198
-  .bp,
-  .vc,
-  .vg,
-  .vi
-    color: #268bd2
-  .il
-    color: #2aa198
-
-.content .highlight
-  text-align: left

docs/sass/index.sass

@@ -1,148 +0,0 @@
-@keyframes floatUp
-  0%
-    box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
-    transform: scale(0.86)
-  67%
-    box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
-    transform: scale(1)
-  100%
-    box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
-    transform: scale(1)
-
-@keyframes strokePath
-  from
-    stroke-dashoffset: 880
-  to
-    stroke-dashoffset: 0
-
-@keyframes fadeIn
-  from
-    opacity: 0
-    transform: scale(0.86)
-  to
-    opacity: 1
-    transform: scale(1)
-
-@keyframes fadeOut
-  0%
-    opacity: 1
-    transform: scale(0.86)
-  67%
-    opacity: 1
-    transform: scale(0.86)
-  100%
-    opacity: 0
-    transform: scale(1)
-
-@keyframes slideDown
-  0%
-    opacity: 0
-    transform: translateY(-10px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes slideUp
-  0%
-    opacity: 0
-    transform: translateY(10px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-$curve: cubic-bezier(0, 0.71, 0.29, 1)
-
-#b
-  // animation-delay: 1s
-  animation-duration: 1.5s
-  animation-fill-mode: both
-  animation-name: floatUp
-  animation-timing-function: $curve
-  border-radius: 24px
-  display: inline-block
-  height: 240px
-  margin-bottom: 40px
-  position: relative
-  vertical-align: top
-  width: 240px
-  svg
-    +overlay
-    display: block
-    height: 240px
-    width: 240px
-    &:first-child
-      animation-duration: 1.5s
-      animation-fill-mode: both
-      animation-name: fadeOut
-      animation-timing-function: $curve
-      g
-        animation-duration: 1s
-        animation-fill-mode: both
-        animation-name: strokePath
-        animation-timing-function: $curve
-        fill: none
-        stroke: $turquoise
-        stroke-dasharray: 880
-        stroke-width: 2px
-    &:last-child
-      animation-delay: 1s
-      animation-duration: 1s
-      animation-fill-mode: both
-      animation-name: fadeIn
-      animation-timing-function: $curve
-      g
-        fill: $turquoise
-  +mobile
-    border-radius: 16px
-    height: 160px
-    width: 160px
-
-#bulma
-  animation: slideDown 500ms both
-  // animation-delay: 1s
-
-#modern-framework
-  animation: slideUp 500ms both
-  animation-delay: 0.2s
-
-#npm
-  align-items: center
-  animation: fadeIn 500ms both
-  animation-delay: 0.4s
-  background: none
-  display: flex
-  justify-content: center
-  margin: -10px 0 20px
-  code
-    background: $background
-    border-radius: $radius
-    color: $primary
-    display: inline-block
-    font-size: 16px
-    padding: 16px 32px
-
-#ghbtns
-  animation: slideDown 500ms both
-  animation-delay: 0.6s
-
-html.route-index #carbon
-  animation: slideUp 500ms both
-  animation-delay: 0.8s
-
-#download
-  animation: fadeIn 500ms both
-  animation-delay: 1s
-
-#grid
-  .notification
-    padding-left: 0
-    padding-right: 0
-
-#message
-  display: none
-
-#tweet
-  background: $white
-  border-radius: $radius-large
-  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  padding: 1.5rem

docs/sass/override.sass

@@ -1,18 +0,0 @@
-.button
-  +tablet
-    small
-      color: $text
-      left: 0
-      margin-top: 10px
-      position: absolute
-      top: 100%
-      width: 100%
-
-body.page-grid .column > .notification
-  padding-left: 0
-  padding-right: 0
-  text-align: center
-
-+tablet
-  .header-item .button + .button
-    margin-left: 0.75rem

docs/sass/route.sass

@@ -1,36 +0,0 @@
-html.route-index
-  .title.is-2
-    position: relative
-
-  .title.is-2 a
-    color: #242424
-    padding-left: 48px
-    position: relative
-
-  .title.is-2 a:hover
-    color: #00d1b2
-
-  .title.is-2 .icon.is-medium
-    left: 8px
-    position: absolute
-    top: 10px
-
-  .hero .title.is-2 a
-    color: white
-
-  .hero .title.is-2 a:hover
-    color: white
-
-  .hero.is-primary a.column,
-  .hero.is-primary a.column:hover
-    color: white
-
-  .hero.is-primary a.column:hover .title strong
-    border-bottom: 1px solid
-
-  @media screen and (max-width: 979px)
-    .title.is-2 a
-      padding-left: 0
-
-    .title.is-2 .icon.is-medium
-      display: none

docs/sass/specific.sass

@@ -1,14 +0,0 @@
-#images
-  tr
-    td:nth-child(2)
-      width: 320px
-
-.color
-  border-radius: 2px
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
-  display: inline-block
-  float: left
-  height: 24px
-  margin-right: 8px
-  width: 24px
-

sass/components/navbar.sass

@@ -2,16 +2,18 @@ $navbar-background: $white !default
 $navbar-height: 3.25rem !default
 
 $navbar-item: $grey-dark !default
-$navbar-item-hover: $grey-darker !default
+$navbar-item-hover: $black !default
 $navbar-item-hover-background: $background !default
-$navbar-item-desktop-hover-background: transparent !default
+$navbar-item-active: $black !default
 
 $navbar-dropdown-background: $white !default
+$navbar-dropdown-border: $border !default
 $navbar-dropdown-offset: -4px !default
 $navbar-dropdown-arrow: $link !default
 $navbar-dropdown-radius: $radius-large !default
 
 $navbar-dropdown-item-hover-background: $background !default
+$navbar-dropdown-item-active: $primary !default
 
 $navbar-divider-background: $border !default
 
@@ -45,6 +47,8 @@ a.navbar-item,
   &:hover
     background-color: $navbar-item-hover-background
     color: $navbar-item-hover
+  &.is-active
+    color: $navbar-item-active
 
 .navbar-item
   flex-grow: 0
@@ -68,8 +72,11 @@ a.navbar-item,
   .navbar-item
     padding-left: 1.5rem
     padding-right: 1.5rem
-  a.navbar-item:hover
+  a.navbar-item
+    &:hover
       background-color: $navbar-dropdown-item-hover-background
+    &.is-active
+      color: $navbar-dropdown-item-active
 
 .navbar-divider
   background-color: $navbar-divider-background
@@ -97,6 +104,14 @@ a.navbar-item,
     display: flex
   .navbar
     height: $navbar-height
+    &.is-transparent
+      .navbar-brand,
+      .navbar-start,
+      .navbar-end
+        .navbar-link,
+        & > a.navbar-item
+          &:hover
+            background-color: transparent
   .navbar-burger
     display: none
   .navbar-item,
@@ -115,10 +130,10 @@ a.navbar-item,
     &.is-hoverable:hover
         .navbar-dropdown
           display: block
-  a.navbar-item,
+          &.is-boxed
-  .navbar-link
+            opacity: 1
-    &:hover
+            pointer-events: auto
-     background-color: $navbar-item-desktop-hover-background
+            transform: translateY(0)
   .navbar-menu
     flex-grow: 1
     flex-shrink: 0
@@ -130,18 +145,31 @@ a.navbar-item,
     margin-left: auto
   .navbar-dropdown
     background-color: $navbar-dropdown-background
-    border-radius: $navbar-dropdown-radius
+    border-bottom-left-radius: $navbar-dropdown-radius
-    box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+    border-bottom-right-radius: $navbar-dropdown-radius
+    border-top: 1px solid $navbar-dropdown-border
+    box-shadow: 0 8px 8px rgba($black, 0.1)
     display: none
     font-size: 0.875rem
     left: 0
     min-width: 100%
     position: absolute
-    top: calc(100% + (#{$navbar-dropdown-offset}))
+    top: 100%
     z-index: 20
     .navbar-item
       padding: 0.375rem 1rem
       white-space: nowrap
+    &.is-boxed
+      border-radius: $navbar-dropdown-radius
+      border-top: none
+      box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+      display: block
+      opacity: 0
+      pointer-events: none
+      top: calc(100% + (#{$navbar-dropdown-offset}))
+      transform: translateY(-5px)
+      transition-duration: $speed
+      transition-property: opacity, transform
   .navbar-divider
     display: block
   .container > .navbar