Add features

docs/_includes/features.html

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

docs/_sass/route.sass

@@ -4,16 +4,18 @@ html.route-index
 
   .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
+    left: -80px
+    opacity: 0.1
     position: absolute
     top: 10px
+    .fa
+      font-size: 56px
 
   .hero .title.is-2 a
     color: white

docs/_sass/specific.sass

@@ -25,3 +25,11 @@
   color: $text-light
   &:hover
     text-decoration: underline
+
+.feature-title
+  color: $text-light
+  a
+    border-bottom: 1px solid transparent
+    color: $text-strong
+    &:hover
+      border-bottom-color: $primary

docs/css/bulma-docs.css

@@ -4163,7 +4163,7 @@ a.dropdown-item.is-active {
 
 .menu-list a:hover {
   background-color: whitesmoke;
-  color: #00d1b2;
+  color: #363636;
 }
 
 .menu-list a.is-active {
@@ -8348,6 +8348,19 @@ html.route-index #carbon {
   text-decoration: underline;
 }
 
+.feature-title {
+  color: #7a7a7a;
+}
+
+.feature-title a {
+  border-bottom: 1px solid transparent;
+  color: #363636;
+}
+
+.feature-title a:hover {
+  border-bottom-color: #00d1b2;
+}
+
 .example,
 .structure {
   border: 1px solid #ffdd57;
@@ -8702,7 +8715,6 @@ html.route-index .title.is-2 {
 
 html.route-index .title.is-2 a {
   color: #242424;
-  padding-left: 48px;
   position: relative;
 }
 
@@ -8711,11 +8723,16 @@ html.route-index .title.is-2 a:hover {
 }
 
 html.route-index .title.is-2 .icon.is-medium {
-  left: 8px;
+  left: -80px;
+  opacity: 0.1;
   position: absolute;
   top: 10px;
 }
 
+html.route-index .title.is-2 .icon.is-medium .fa {
+  font-size: 56px;
+}
+
 html.route-index .hero .title.is-2 a {
   color: white;
 }

docs/index.html

@@ -88,10 +88,10 @@ route: index
 <section class="section is-medium">
   <div class="container">
     <h3 class="title is-2">
+      <span class="icon is-medium">
+        <i class="fa fa-pause"></i>
+      </span>
       <a href="{{ site.url }}/documentation/grid/columns">
-        <span class="icon is-medium">
-          <i class="fa fa-pause"></i>
-        </span>
         Simple <strong>columns</strong>
       </a>
     </h3>
@@ -190,10 +190,10 @@ route: index
 <section class="section is-medium">
   <div class="container">
     <h3 class="title is-2">
+      <span class="icon is-medium">
+        <i class="fa fa-th-large"></i>
+      </span>
       <a href="{{ site.url }}/documentation/grid/tiles">
-        <span class="icon is-medium">
-          <i class="fa fa-th-large"></i>
-        </span>
         Magic <strong>tiles</strong>
       </a>
     </h3>
@@ -243,6 +243,7 @@ route: index
         </article>
       </div>
     </div>
+    <div class="highlight-full">
 {% highlight html %}
 <div class="tile is-ancestor">
   <div class="tile is-vertical is-8">
@@ -275,6 +276,7 @@ route: index
 </div>
 {% endhighlight %}
   </div>
+    </div>
 </section>
 
 <hr class="is-marginless">
@@ -282,10 +284,10 @@ route: index
 <section class="section is-medium">
   <div class="container">
     <h3 class="title is-2">
+      <span class="icon is-medium">
+        <i class="fa fa-arrows-h"></i>
+      </span>
       <a href="{{ site.url }}/documentation/components/level/">
-        <span class="icon is-medium">
-          <i class="fa fa-arrows-h"></i>
-        </span>
         Flexible <strong>horizontal level</strong>
       </a>
     </h3>
@@ -350,10 +352,10 @@ route: index
     <div class="columns is-vcentered">
       <div class="column">
         <h3 class="title is-2">
+          <span class="icon is-medium">
+            <i class="fa fa-magic"></i>
+          </span>
           <a href="{{ site.url }}/documentation/components/media-object/">
-            <span class="icon is-medium">
-              <i class="fa fa-magic"></i>
-            </span>
             Versatile <strong>media object</strong>
           </a>
         </h3>
@@ -411,10 +413,10 @@ route: index
   <div class="hero-body">
     <div class="container has-text-centered">
       <h3 class="title is-2">
+        <span class="icon is-medium">
+          <i class="fa fa-arrows-v"></i>
+        </span>
         <a href="{{ site.url }}/documentation/layout/hero/">
-          <span class="icon is-medium">
-            <i class="fa fa-arrows-v"></i>
-          </span>
           Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
         </a>
       </h3>
@@ -438,10 +440,10 @@ route: index
     <div class="columns is-vcentered">
       <div class="column">
         <h3 class="title is-2">
+          <span class="icon is-medium">
+            <i class="fa fa-cogs"></i>
+          </span>
           <a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
-            <span class="icon is-medium">
-              <i class="fa fa-cogs"></i>
-            </span>
             Compose your element with <strong>modifier</strong> classes
           </a>
         </h3>
@@ -490,446 +492,17 @@ route: index
 <section class="section is-medium">
   <div class="container">
     <h3 class="title is-2">
+      <span class="icon is-medium">
+        <i class="fa fa-asterisk"></i>
+      </span>
       <a href="{{ site.url }}/documentation/elements/box/">
-        <span class="icon is-medium">
-          <i class="fa fa-asterisk"></i>
-        </span>
         And all the usual <strong>elements</strong> and <strong>components</strong>
       </a>
     </h3>
   </div>
 </section>
 
-<section class="section is-medium" style="padding-top: 0;">
-  <div class="container">
-
-    <div class="columns">
-      <div class="column is-2">
-        <h4 class="title is-4"><strong>Elements</strong></h4>
-      </div>
-      <div class="column is-10">
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Form</h4>
-          </div>
-          <div class="column is-9">
-            <div class="field">
-              <label class="label">Form label</label>
-              <div class="control">
-                <input class="input" type="text" placeholder="Input">
-              </div>
-            </div>
-            <div class="field">
-              <p class="control">
-                <span class="select">
-                  <select>
-                    <option>Select dropdown</option>
-                  </select>
-                </span>
-              </p>
-            </div>
-            <div class="field">
-              <p class="control">
-                <textarea class="textarea" placeholder="Textarea"></textarea>
-              </p>
-            </div>
-            <div class="field">
-              <p class="control">
-                <label class="checkbox">
-                  <input type="checkbox">
-                  Checkbox
-                </label>
-              </p>
-            </div>
-            <div class="field">
-              <p class="control">
-                <label class="radio">
-                  <input type="radio" name="question">
-                  Radio
-                </label>
-                <label class="radio">
-                  <input type="radio" name="question">
-                  Buttons
-                </label>
-              </p>
-            </div>
-            <div class="field">
-              <p class="control">
-                <a class="button is-primary">Button</a>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Box</h4>
-          </div>
-          <div class="column is-9">
-            <div class="box">
-              <article class="media">
-                <div class="media-left">
-                  <figure class="image is-64x64">
-                    <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
-                  </figure>
-                </div>
-                <div class="media-content">
-                  <div class="content">
-                    <p>
-                      <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
-                      <br>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
-                    </p>
-                  </div>
-                  <nav class="level is-mobile">
-                    <div class="level-left">
-                      <a class="level-item">
-                        <span class="icon is-small"><i class="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>
-              </article>
-            </div>
-          </div>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Button</h4>
-          </div>
-          <div class="column is-9">
-            <div class="field is-grouped is-grouped-multiline">
-              <div class="control"><a class="button">Button</a></div>
-              <div class="control"><a class="button is-white">White</a></div>
-              <div class="control"><a class="button is-light">Light</a></div>
-              <div class="control"><a class="button is-dark">Dark</a></div>
-              <div class="control"><a class="button is-black">Black</a></div>
-              <div class="control"><a class="button is-link">Link</a></div>
-            </div>
-
-            <div class="field is-grouped is-grouped-multiline">
-              <div class="control"><a class="button is-primary">Primary</a></div>
-              <div class="control"><a class="button is-info">Info</a></div>
-              <div class="control"><a class="button is-success">Success</a></div>
-              <div class="control"><a class="button is-warning">Warning</a></div>
-              <div class="control"><a class="button is-danger">Danger</a></div>
-            </div>
-          </div>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Notification</h4>
-          </div>
-          <div class="column is-9">
-            <div class="notification">
-              <button class="delete"></button>
-              Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
-              consectetur adipiscing elit
-            </div>
-          </div>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Tags</h4>
-          </div>
-          <div class="column is-9">
-            <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>
-            <span class="tag is-warning">Warning</span>
-            <span class="tag is-danger">Danger</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="columns">
-      <div class="column is-2">
-        <h4 class="title is-4"><strong>Components</strong></h4>
-      </div>
-      <div class="column is-10">
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Card</h4>
-          </div>
-          <div class="column is-9">
-            <div class="columns">
-              <div class="column is-half">
-                <div class="card">
-                  <div class="card-image">
-                    <figure class="image is-4by3">
-                      <img src="http://localhost:4000/images/placeholders/1280x960.png" alt="Image">
-                    </figure>
-                  </div>
-                  <div class="card-content">
-                    <div class="media">
-                      <div class="media-left">
-                        <figure class="image is-48x48">
-                          <img src="http://localhost:4000/images/placeholders/96x96.png" alt="Image">
-                        </figure>
-                      </div>
-                      <div class="media-content">
-                        <p class="title is-4">John Smith</p>
-                        <p class="subtitle is-6">@johnsmith</p>
-                      </div>
-                    </div>
-
-                    <div class="content">
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
-                      <a>#css</a> <a>#responsive</a>
-                      <br>
-                      <small>11:09 PM - 1 Jan 2016</small>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="column is-half">
-                <div class="card">
-                  <div class="card-content">
-                    <p class="title">
-                      “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
-                    </p>
-                    <p class="subtitle">
-                      Jeff Atwood
-                    </p>
-                  </div>
-                  <footer class="card-footer">
-                    <p class="card-footer-item">
-                      <span>
-                        View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
-                      </span>
-                    </p>
-                    <p class="card-footer-item">
-                      <span>
-                        Share on <a href="#">Facebook</a>
-                      </span>
-                    </p>
-                  </footer>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Dropdown</h4>
-          </div>
-          <div class="column is-9" style="height: 16rem;">
-            <div class="dropdown is-active">
-              <div class="dropdown-trigger">
-                <a class="button">
-                  <span>Dropdown button</span>
-                  <span class="icon is-small">
-                    <i class="fa fa-angle-down"></i>
-                  </span>
-                </a>
-              </div>
-              <div class="dropdown-menu">
-                <div class="dropdown-content">
-                  <a class="dropdown-item">
-                    Dropdown item
-                  </a>
-                  <a class="dropdown-item">
-                    Other dropdown item
-                  </a>
-                  <a class="dropdown-item is-active">
-                    Active dropdown item
-                  </a>
-                  <a class="dropdown-item">
-                    Other item
-                  </a>
-                  <hr class="dropdown-divider">
-                  <a class="dropdown-item">
-                    With a divider
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Message</h4>
-          </div>
-          <div class="column is-9">
-            <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>
-          </div>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Pagination</h4>
-          </div>
-          <div class="column is-9">
-            <nav class="pagination">
-              <a class="pagination-previous">Previous</a>
-              <a class="pagination-next">Next page</a>
-              <ul class="pagination-list">
-                <li>
-                  <a class="pagination-link">1</a>
-                </li>
-                <li>
-                  <span class="pagination-ellipsis">&hellip;</span>
-                </li>
-                <li>
-                  <a class="pagination-link">45</a>
-                </li>
-                <li>
-                  <a class="pagination-link is-current">46</a>
-                </li>
-                <li>
-                  <a class="pagination-link">47</a>
-                </li>
-                <li>
-                  <span class="pagination-ellipsis">&hellip;</span>
-                </li>
-                <li>
-                  <a class="pagination-link">86</a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Panel</h4>
-          </div>
-          <div class="column is-6">
-            <nav class="panel" style="max-width: 320px;">
-              <p class="panel-heading">
-                Repositories
-              </p>
-              <div class="panel-block">
-                <p class="control has-icons-left">
-                  <input class="input is-small" type="text" placeholder="Search">
-                  <span class="icon is-small is-left">
-                    <i class="fa fa-search"></i>
-                  </span>
-                </p>
-              </div>
-              <p class="panel-tabs">
-                <a class="is-active">All</a>
-                <a>Public</a>
-                <a>Private</a>
-                <a>Sources</a>
-                <a>Forks</a>
-              </p>
-              <a class="panel-block is-active">
-                <span class="panel-icon">
-                  <i class="fa fa-book"></i>
-                </span>
-                bulma
-              </a>
-              <a class="panel-block">
-                <span class="panel-icon">
-                  <i class="fa fa-book"></i>
-                </span>
-                marksheet
-              </a>
-              <a class="panel-block">
-                <span class="panel-icon">
-                  <i class="fa fa-book"></i>
-                </span>
-                minireset.css
-              </a>
-              <a class="panel-block">
-                <span class="panel-icon">
-                  <i class="fa fa-book"></i>
-                </span>
-                jgthms.github.io
-              </a>
-              <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>
-              <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>
-        </div>
-
-        <div class="columns">
-          <div class="column is-3">
-            <h4 class="subtitle is-4">Tabs</h4>
-          </div>
-          <div class="column is-9">
-            <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>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</section>
+{% include features.html %}
 
 <hr class="is-marginless">
 

sass/components/menu.sass

@@ -1,28 +1,41 @@
+$menu-size: $size-normal !default
+
+$menu-item: $text !default
+$menu-item-radius: $radius-small !default
+$menu-item-hover: $text-strong !default
+$menu-item-hover-background: $background !default
+$menu-item-active: $link-invert !default
+$menu-item-active-background: $link !default
+
+$menu-list-border: $border !default
+
+$menu-label: $text-light !default
+
 .menu
-  font-size: $size-normal
+  font-size: $menu-size
 
 .menu-list
   line-height: 1.25
   a
-    border-radius: $radius-small
-    color: $text
+    border-radius: $menu-item-radius
+    color: $menu-item
     display: block
     padding: 0.5em 0.75em
     &:hover
-      background-color: $background
-      color: $link
+      background-color: $menu-item-hover-background
+      color: $menu-item-hover
     // Modifiers
     &.is-active
-      background-color: $link
-      color: $link-invert
+      background-color: $menu-item-active-background
+      color: $menu-item-active
   li
     ul
-      border-left: 1px solid $border
+      border-left: 1px solid $menu-list-border
       margin: 0.75em
       padding-left: 0.75em
 
 .menu-label
-  color: $text-light
+  color: $menu-label
   font-size: 0.8em
   letter-spacing: 0.1em
   text-transform: uppercase