Add index customized

docs/_includes/global/head.html

@@ -18,6 +18,9 @@
   {% if page.mdi %}
     <link rel="stylesheet" href="{{ site.data.icons.mdi }}">
   {% endif %}
+  {% if page.route == 'index' %}
+    <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
+  {% endif %}
   <link rel="stylesheet" href="{{ site.url }}/css/{{ site.docs_file }}.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

docs/_includes/index/customize.html

@@ -2,52 +2,83 @@
 
 <section class="bd-easy section is-medium">
   <div class="container">
-    <div class="columns is-vcentered">
-      <div class="column">
-        <header class="bd-index-header bd-is-left">
-          <h3 class="title is-3">
-            <a href="{{ site.url }}{{ customize_link.path }}">
-              So <strong>quick</strong> to customize
-            </a>
-          </h3>
-          <h4 class="subtitle is-4">
-            Simply set your own Sass variables before importing Bulma
-          </h4>
-        </header>
-      </div>
+    <header class="bd-index-header">
+      <h3 class="title is-3">
+        <a href="{{ site.url }}{{ customize_link.path }}">
+          So <strong>quick</strong> to customize
+        </a>
+      </h3>
+      <h4 class="subtitle is-4">
+        Simply set your own Sass variables before importing Bulma
+      </h4>
+    </header>
 
-      <div class="column">
-        <div class="block">
-          <div class="field">
-            <p class="control">
-              <code>button</code>
-            </p>
-          </div>
-          <a class="button">Button</a>
+    <div class="columns">
+      <div class="column is-6">
+        <div class="highlight-full">
+          {% highlight scss %}{% include snippets/customized.html %}{% endhighlight %}
         </div>
-        <div class="block">
-          <div class="field">
-            <p class="control">
-              <code>button is-primary</code>
-            </p>
-          </div>
-          <a class="button is-primary">Button</a>
-        </div>
-        <div class="block">
-          <div class="field">
-            <p class="control">
-              <code>button is-primary is-large</code>
+      </div>
+
+      <div class="column is-6">
+        <div class="bd-index-custom bd-is-before">
+          <p class="bd-index-custom-title">Before</p>
+          <div class="bd-index-custom-example">
+            <h1 class="title">
+              Bulma
+            </h1>
+            <p class="subtitle">
+              Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
             </p>
+            <div class="field">
+              <div class="control">
+                <input class="input" type="text" placeholder="Input">
+              </div>
+            </div>
+            <div class="field">
+              <p class="control">
+                <span class="select">
+                  <select>
+                    <option>Select dropdown</option>
+                  </select>
+                </span>
+              </p>
+            </div>
+            <div class="buttons">
+              <a class="button is-primary">Primary</a>
+              <a class="button is-link">Link</a>
+            </div>
           </div>
-          <a class="button is-primary is-large">Button</a>
         </div>
-        <div class="block">
-          <div class="field">
-            <p class="control">
-              <code>button is-primary is-large is-loading</code>
+
+        <div class="bd-index-custom bd-is-after">
+          <p class="bd-index-custom-title">After</p>
+          <div class="bd-index-custom-example">
+            <h1 class="title">
+              Bulma
+            </h1>
+            <p class="subtitle">
+              Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
             </p>
+            <div class="field">
+              <div class="control">
+                <input class="input" type="text" placeholder="Input">
+              </div>
+            </div>
+            <div class="field">
+              <p class="control">
+                <span class="select">
+                  <select>
+                    <option>Select dropdown</option>
+                  </select>
+                </span>
+              </p>
+            </div>
+            <div class="buttons">
+              <a class="button is-primary">Primary</a>
+              <a class="button is-link">Link</a>
+            </div>
           </div>
-          <a class="button is-primary is-large is-loading">Button</a>
         </div>
       </div>
     </div>

docs/_includes/index/fullheight.html

@@ -1,4 +1,6 @@
-<section class="hero is-fullheight is-primary">
+{% assign hero_link = site.data.links.by_id['layout-hero'] %}
+
+<section class="bd-index-fullscreen hero is-fullheight is-light">
   <div class="hero-head">
     <div class="container">
       <div class="tabs is-centered">
@@ -10,16 +12,17 @@
   </div>
 
   <div class="hero-body">
-    <div class="container has-text-centered">
-      <h3 class="title is-2">
-        <span class="icon is-medium">
-          <i class="fas fa-arrows-alt-v"></i>
-        </span>
-        <a href="{{ site.url }}/documentation/layout/hero/">
-          Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
-        </a>
-      </h3>
-      <h4 class="subtitle is-4">Include any content you want, it's always centered</h4>
+    <div class="container">
+      <header class="bd-index-header">
+        <h3 class="title is-3">
+          <a href="{{ site.url }}{{ hero_link.path }}">
+            <strong>Fullscreen</strong> vertical centering
+          </a>
+        </h3>
+        <h4 class="subtitle is-4">
+          Include any content you want, it's always centered
+        </h4>
+      </header>
     </div>
   </div>
 

docs/_includes/snippets/customized.html

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

docs/_includes/test/features.html

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

docs/_includes/test/from-to.html

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

docs/_sass/index.sass

@@ -15,12 +15,71 @@
     strong
       color: $primary
   .subtitle
-    color: $grey-light
+    color: $grey-light !important
     strong
       color: currentColor
   &.bd-is-left
     text-align: left
 
+// Customize
+
+.bd-index-custom-title
+  color: $grey-light
+
+.bd-index-custom-example
+  padding: 1rem
+  .subtitle
+    margin-bottom: 0.5rem
+
+.bd-index-custom.bd-is-after
+  color: $brown
+  font-family: "Nunito", serif
+  margin-top: 0.5rem
+  a
+    color: $pink
+    &:hover
+      color: #363636
+  .subtitle
+    color: $brown
+  .input,
+  .select select
+    background-color: $beige-lighter
+    border-color: transparent
+    border-width: 2px
+    box-shadow: none
+    font-family: "Nunito", serif
+    &:hover
+      border-color: $beige-light
+    &:focus
+      border-color: $pink
+      box-shadow: 0 0 0 0.125em rgba($pink, 0.25)
+  .select
+    &:not(.is-multiple):not(:hover)
+      &::after
+        border-color: $pink
+  .button
+    &.is-primary
+      background-color: $mauve
+      color: $white
+      &:hover
+        background-color: darken($mauve, 2.5%)
+      &:active
+        background-color: darken($mauve, 5%)
+    &.is-link
+      background-color: $pink
+      color: $white
+      &:hover
+        background-color: darken($pink, 2.5%)
+      &:active
+        background-color: darken($pink, 5%)
+
+// Fullscreen
+
+.bd-index-fullscreen
+  .tabs
+    a
+      color: $grey-light !important
+
 // Columns
 
 #grid

docs/bulma-docs.sass

@@ -12,6 +12,12 @@ $bleeding-red: #CA1F26
 $star: #FFD257
 $rss: #f26522
 
+$mauve: #8A4D76;
+$pink: #FA7C91;
+$brown: #757763;
+$beige-light: #D0D1CD;
+$beige-lighter: #EFF0EB;
+
 $carbon-width: 300px
 $carbon-height: 100px
 $main-spacing: 3rem

docs/css/bulma-docs.css

@@ -10121,7 +10121,7 @@ svg {
 }
 
 .bd-index-header .subtitle {
-  color: #b5b5b5;
+  color: #b5b5b5 !important;
 }
 
 .bd-index-header .subtitle strong {
@@ -10132,6 +10132,90 @@ svg {
   text-align: left;
 }
 
+.bd-index-custom-title {
+  color: #b5b5b5;
+}
+
+.bd-index-custom-example {
+  padding: 1rem;
+}
+
+.bd-index-custom-example .subtitle {
+  margin-bottom: 0.5rem;
+}
+
+.bd-index-custom.bd-is-after {
+  color: #757763;
+  font-family: "Nunito", serif;
+  margin-top: 0.5rem;
+}
+
+.bd-index-custom.bd-is-after a {
+  color: #FA7C91;
+}
+
+.bd-index-custom.bd-is-after a:hover {
+  color: #363636;
+}
+
+.bd-index-custom.bd-is-after .subtitle {
+  color: #757763;
+}
+
+.bd-index-custom.bd-is-after .input,
+.bd-index-custom.bd-is-after .select select {
+  background-color: #EFF0EB;
+  border-color: transparent;
+  border-width: 2px;
+  box-shadow: none;
+  font-family: "Nunito", serif;
+}
+
+.bd-index-custom.bd-is-after .input:hover,
+.bd-index-custom.bd-is-after .select select:hover {
+  border-color: #D0D1CD;
+}
+
+.bd-index-custom.bd-is-after .input:focus,
+.bd-index-custom.bd-is-after .select select:focus {
+  border-color: #FA7C91;
+  box-shadow: 0 0 0 0.125em rgba(250, 124, 145, 0.25);
+}
+
+.bd-index-custom.bd-is-after .select:not(.is-multiple):not(:hover)::after {
+  border-color: #FA7C91;
+}
+
+.bd-index-custom.bd-is-after .button.is-primary {
+  background-color: #8A4D76;
+  color: white;
+}
+
+.bd-index-custom.bd-is-after .button.is-primary:hover {
+  background-color: #82486f;
+}
+
+.bd-index-custom.bd-is-after .button.is-primary:active {
+  background-color: #7a4468;
+}
+
+.bd-index-custom.bd-is-after .button.is-link {
+  background-color: #FA7C91;
+  color: white;
+}
+
+.bd-index-custom.bd-is-after .button.is-link:hover {
+  background-color: #fa7087;
+}
+
+.bd-index-custom.bd-is-after .button.is-link:active {
+  background-color: #f9637c;
+}
+
+.bd-index-fullscreen .tabs a {
+  color: #b5b5b5 !important;
+}
+
 #grid .notification {
   padding-left: 0;
   padding-right: 0;

docs/test.html

@@ -0,0 +1,22 @@
+---
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bulma test page</title>
+    <link rel="stylesheet" href="{{ site.url }}/css/bulma-test.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
+    <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
+  </head>
+  <body>
+    {% include global/navbar.html %}
+    {% include test/from-to.html %}
+    {% include test/features.html %}
+    <script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
+    <script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
+    <script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
+  </body>
+</html>

package.json

@@ -41,8 +41,7 @@
     "docs-sass": "node-sass --output-style expanded docs/bulma-docs.sass docs/css/bulma-docs.css",
     "start": "npm run build-sass -- --watch",
     "start-docs": "npm run docs-sass -- --watch",
-    "start-test": "npm run test-sass -- --watch",
-    "test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css",
+    "start-test": "npm run test-scss -- --watch",
     "test-scss": "node-sass --output-style expanded docs/bulma-test.scss docs/css/bulma-test.css"
   },
   "files": [