# Variables
documentation: "/documentation/overview/start/"
-download: https://github.com/jgthms/bulma/releases/download/0.6.0/bulma-0.6.0.zip
+download: https://github.com/jgthms/bulma/releases/download/0.6.1/bulma-0.6.1.zip
github: https://github.com/jgthms/bulma
twitter: https://twitter.com/jgthms
-version: 0.6.0
-vernum: 60
+version: 0.6.1
<a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
Elements
</a>
- {% if site.vernum >= 43 %}
- <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
- Components
- </a>
- {% else %}
- <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/card/">
- Components
- </a>
- {% endif %}
+ <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
+ Components
+ </a>
<hr class="navbar-divider">
<div class="navbar-item">
<div>
<a href="{{ site.url }}/documentation/elements/box/">Elements</a>
</li>
<li {% if page.doc-tab == 'components' %}class="is-active"{% endif %}>
- {% if site.vernum >= 43 %}
- <a href="{{ site.url }}/documentation/components/breadcrumb/">Components</a>
- {% else %}
- <a href="{{ site.url }}/documentation/components/card/">Components</a>
- {% endif %}
+ <a href="{{ site.url }}/documentation/components/breadcrumb/">Components</a>
</li>
</ul>
</div>
<section class="section">
<div class="container">
- {% if site.vernum >= 43 %}
- <div class="message is-danger">
- <div class="message-body">
- <p>This component has been <strong>deprecated</strong> and will be deleted soon.</p>
- </div>
+ <div class="message is-danger">
+ <div class="message-body">
+ <p>This component has been <strong>deprecated</strong>.</p>
</div>
+ </div>
- <div class="message is-info">
- <div class="message-body">
- <p>While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility, the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using <a href="{{ site.url }}/documentation/components/navbar/">the new navbar</a> instead.</p>
- </div>
+ <div class="message is-info">
+ <div class="message-body">
+ <p>While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility, the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using <a href="{{ site.url }}/documentation/components/navbar/">the new navbar</a> instead.</p>
</div>
- {% endif %}
+ </div>
<h1 class="title">Nav</h1>
<h2 class="subtitle">
</div>
</div>
- {% if site.vernum >= 43 %}
- <div class="columns">
- <div class="column is-half">
- <div class="content">
- <p>
- You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.
- </p>
- </div>
- {{loading_sizes_example}}
- </div>
- <div class="column is-half">
- {% highlight html %}{{loading_sizes_example}}{% endhighlight %}
+ <div class="columns">
+ <div class="column is-half">
+ <div class="content">
+ <p>
+ You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.
+ </p>
</div>
+ {{loading_sizes_example}}
+ </div>
+ <div class="column is-half">
+ {% highlight html %}{{loading_sizes_example}}{% endhighlight %}
</div>
- {% endif %}
+ </div>
<h4 class="subtitle">Disabled</h4>
<div class="columns">
</div>
</div>
- {% if site.vernum >= 44 %}
- <hr>
-
- <h3 class="title">Multiple select</h3>
-
- <div class="columns">
- <div class="column is-half">
- <div class="content">
- <p>
- You can style a <strong>multiple select</strong> dropdown, by using the <code>is-multiple</code> modifier, and by using the <code>multiple</code> HTML attribute.
- </p>
- </div>
- {{select_multiple_example}}
- </div>
- <div class="column is-half highlight-full">
- {% highlight html %}{{select_multiple_example}}{% endhighlight %}
+ <hr>
+
+ <h3 class="title">Multiple select</h3>
+
+ <div class="columns">
+ <div class="column is-half">
+ <div class="content">
+ <p>
+ You can style a <strong>multiple select</strong> dropdown, by using the <code>is-multiple</code> modifier, and by using the <code>multiple</code> HTML attribute.
+ </p>
</div>
+ {{select_multiple_example}}
</div>
- {% endif %}
+ <div class="column is-half highlight-full">
+ {% highlight html %}{{select_multiple_example}}{% endhighlight %}
+ </div>
+ </div>
{% include anchor.html name="Colors" %}
{% include snippet.html content=loading_example %}
- {% if site.vernum >= 43 %}
- <div class="columns">
- <div class="column is-half">
- <div class="content">
- <p>
- You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.
- </p>
- </div>
- {{loading_sizes_example}}
- </div>
- <div class="column is-half highlight-full">
- {% highlight html %}{{loading_sizes_example}}{% endhighlight %}
+ <div class="columns">
+ <div class="column is-half">
+ <div class="content">
+ <p>
+ You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.
+ </p>
</div>
+ {{loading_sizes_example}}
+ </div>
+ <div class="column is-half highlight-full">
+ {% highlight html %}{{loading_sizes_example}}{% endhighlight %}
</div>
- {% endif %}
+ </div>
<h4 class="subtitle">Disabled</h4>