<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
- <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+ <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
<link rel="stylesheet" href="{{ site.fontawesome }}">
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
--- /dev/null
+<hr style="margin-bottom: 0;">
+
+<h3 id="{{ include.name | downcase }}" class="title" style="padding-top: 1.5rem;">
+ {{ include.name }}
+</h3>
-<div class="field is-grouped">
+<div id="meta" class="field is-grouped">
{% if include.new %}
<div class="control">
// Dropdowns
+ const $metalinks = getAll('#meta a');
+
+ if ($metalinks.length > 0) {
+ $metalinks.forEach($el => {
+ $el.addEventListener('click', event => {
+ event.preventDefault();
+ const target = $el.getAttribute('href');
+ const $target = document.getElementById(target.substring(1));
+ $target.scrollIntoView(true);
+ window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
+ return false;
+ });
+ });
+ }
+
+ // Dropdowns
+
const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
if ($dropdowns.length > 0) {
{% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
- <hr style="margin-bottom: 0;">
-
- <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
- Sizes
- </h3>
+ {% include heading.html name="Sizes" %}
<div class="content">
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
</div>
- <hr style="margin-bottom: 0;">
-
- <h3 id="colors" class="title" style="padding-top: 1.5rem;">
- Colors
- </h3>
+ {% include heading.html name="Colors" %}
<div class="columns">
<div class="column is-half">
</div>
</div>
- <hr style="margin-bottom: 0;">
-
- <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
- Sizes
- </h3>
+ {% include heading.html name="Sizes" %}
<div class="columns">
<div class="column is-half">
</div>
{% highlight html %}{{tabs_icons_example}}{% endhighlight %}
- <hr style="margin-bottom: 0;">
-
- <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
- Sizes
- </h3>
+ {% include heading.html name="Sizes" %}
<div class="content">
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
---
+title: Box
layout: documentation
doc-tab: elements
doc-subtab: box
---
+title: Button
layout: documentation
doc-tab: elements
doc-subtab: button
</div>
</div>
- <hr style="margin-bottom: 0;">
-
- <h3 id="colors" class="title" style="padding-top: 1.5rem;">
- Colors
- </h3>
+ {% include heading.html name="Colors" %}
<div class="columns">
<div class="column">
</div>
</div>
- <hr style="margin-bottom: 0;">
-
- <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
- Sizes
- </h3>
+ {% include heading.html name="Sizes" %}
<div class="columns">
<div class="column">
---
+title: Content
layout: documentation
doc-tab: elements
doc-subtab: content
value: $text-strong
---
+{% capture content_pre %}
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello World</title>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
+ </body>
+</html>
+{% endcapture %}
+
{% capture content_example %}
<div class="content">
<h1>Hello World</h1>
<p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
<h4>Fourth level</h4>
<p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
- <pre><!DOCTYPE html>
-<html>
- <head>
- <title>Hello World</title>
- </head>
- <body>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
- </body>
-</html></pre>
+ <pre>{{ content_pre }}</pre>
<p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
<table>
<thead>
<h2 class="subtitle">
A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=true
+ variables=true
+ %}
<hr>
{% highlight html %}{{content_example}}{% endhighlight %}
- <hr>
+ {% include heading.html name="Sizes" %}
- <h3 class="title">Sizes</h3>
<div class="content">
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
</div>
</div>
</div>
- {% include variables.html %}
+ {% include variables.html element=true %}
</div>
</section>
---
+title: Delete
layout: documentation
doc-tab: elements
doc-subtab: delete
---
-{% include subnav-elements.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Delete</h1>
- <h2 class="subtitle">
- A versatile <strong>delete</strong> cross
- </h2>
-
- <hr>
-
- <div class="content">
- <p>
- The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
- </p>
- </div>
-
{% capture cross_example %}
<a class="delete"></a>
{% endcapture %}
-<div class="columns">
-<div class="column">
- <div class="content">
- <p>
- On its own, it's a simple circle with a cross:
- </p>
- </div>
- {{cross_example}}
-</div>
-<div class="column">
-{% highlight html %}
-{{cross_example}}
-{% endhighlight %}
-</div>
-</div>
{% capture cross_sizes_example %}
<a class="delete is-small"></a>
<a class="delete is-medium"></a>
<a class="delete is-large"></a>
{% endcapture %}
-<div class="columns">
-<div class="column">
- <div class="content">
- <p>
- It comes in <strong>4 sizes</strong>:
- </p>
- </div>
- {{cross_sizes_example}}
-</div>
-<div class="column">
-{% highlight html %}
-{{cross_sizes_example}}
-{% endhighlight %}
-</div>
-</div>
{% capture cross_elements_example %}
<div class="block">
</div>
</article>
{% endcapture %}
-<div class="columns">
-<div class="column">
- <div class="content">
- <p>
- Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
- </p>
- </div>
- {{cross_elements_example}}
-</div>
-<div class="column">
-{% highlight html %}
-{{cross_elements_example}}
-{% endhighlight %}
-</div>
-</div>
+
+{% include subnav-elements.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Delete</h1>
+ <h2 class="subtitle">
+ A versatile <strong>delete</strong> cross
+ </h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=true
+ variables=false
+ %}
+
+ <hr>
+
+ <div class="content">
+ <p>
+ The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
+ </p>
+ </div>
+
+ <div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ On its own, it's a simple circle with a cross:
+ </p>
+ </div>
+ {{cross_example}}
+ </div>
+ <div class="column">
+ {% highlight html %}{{cross_example}}{% endhighlight %}
+ </div>
+ </div>
+
+ {% include heading.html name="Sizes" %}
+
+ <div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ It comes in <strong>4 sizes</strong>:
+ </p>
+ </div>
+ {{cross_sizes_example}}
+ </div>
+ <div class="column">
+ {% highlight html %}{{cross_sizes_example}}{% endhighlight %}
+ </div>
+ </div>
+
+ <hr style="margin-bottom: 0;">
+
+ <h3 id="combinations" class="title" style="padding-top: 1.5rem;">
+ Combinations
+ </h3>
+
+ <div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>
+ Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
+ </p>
+ </div>
+ {{cross_elements_example}}
+ </div>
+ <div class="column">
+ {% highlight html %}{{cross_elements_example}}{% endhighlight %}
+ </div>
+ </div>
</div>
</section>
---
+title: Form
layout: documentation
doc-tab: elements
doc-subtab: form
---
+title: Icon
layout: documentation
doc-tab: elements
doc-subtab: icon
<h2 class="subtitle">
Bulma is compatible with <strong><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></strong> icons.
</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=true
+ variables=true
+ %}
<hr>
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
</div>
- <hr>
-
- <h3 class="title">Sizes</h3>
+ {% include heading.html name="Sizes" %}
<div class="content">
<p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>
---
+title: Image
layout: documentation
doc-tab: elements
doc-subtab: image
+dimensions:
+- 16
+- 24
+- 32
+- 48
+- 64
+- 96
+- 128
variables:
- name: $dimensions
value: 16 24 32 48 64 96 128
---
+{% capture image %}
+<figure class="image is-128x128">
+ <img src="{{site.url}}/images/placeholders/128x128.png">
+</figure>
+{% endcapture %}
+
+{% capture retina_image %}
+<figure class="image is-128x128">
+ <img src="{{site.url}}/images/placeholders/256x256.png">
+</figure>
+{% endcapture %}
+
{% include subnav-elements.html %}
<section class="section">
<h2 class="subtitle">
A container for <strong>responsive images</strong>
</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=false
+ variables=true
+ %}
<hr>
</figure>
</div>
-{% highlight html %}
-<figure class="image is-128x128">
- <img src="{{site.url}}/images/placeholders/128x128.png">
-</figure>
-{% endhighlight %}
+ {% highlight html %}{{ image }}{% endhighlight %}
<hr>
<table class="table is-bordered">
<tbody>
- <tr>
- <td><code>image is-16x16</code></td>
- <td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
- <td>16x16px</td>
- </tr>
- <tr>
- <td><code>image is-24x24</code></td>
- <td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
- <td>24x24px</td>
- </tr>
- <tr>
- <td><code>image is-32x32</code></td>
- <td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
- <td>32x32px</td>
- </tr>
- <tr>
- <td><code>image is-48x48</code></td>
- <td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
- <td>48x48px</td>
- </tr>
- <tr>
- <td><code>image is-64x64</code></td>
- <td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
- <td>64x64px</td>
- </tr>
- <tr>
- <td><code>image is-96x96</code></td>
- <td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
- <td>96x96px</td>
- </tr>
- <tr>
- <td><code>image is-128x128</code></td>
- <td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
- <td>128x128px</td>
- </tr>
+ {% for dimension in page.dimensions %}
+ <tr>
+ <td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
+ <td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
+ <td>{{ dimension }}x{{ dimension }}px</td>
+ </tr>
+ {% endfor %}
</tbody>
</table>
</figure>
</div>
-{% highlight html %}
-<figure class="image is-128x128">
- <img src="{{site.url}}/images/placeholders/256x256.png">
-</figure>
-{% endhighlight %}
+ {% highlight html %}{{ retina_image }}{% endhighlight %}
<hr>
---
+title: Notification
layout: documentation
doc-tab: elements
doc-subtab: notification
value: 1.25rem 2.5rem 1.25rem 1.5rem
---
-{% include subnav-elements.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Notifications</h1>
- <h2 class="subtitle">
- Bold <strong>notification</strong> blocks, to alert your users of something
- </h2>
-
- <hr>
-
- <div class="columns">
- <div class="column">
- <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 class="notification is-primary">
- <button class="delete"></button>
- Info 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 class="notification is-info">
- <button class="delete"></button>
- Info 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 class="notification is-success">
- <button class="delete"></button>
- Success 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 class="notification is-warning">
- <button class="delete"></button>
- Warning 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 class="notification is-danger">
- <button class="delete"></button>
- Danger 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 class="column">
-{% highlight html %}
+{% capture notification %}
<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>
+{% endcapture %}
+{% capture notification_colors %}
<div class="notification is-primary">
<button class="delete"></button>
Primar 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>
-{% endhighlight %}
+{% endcapture %}
+
+{% include subnav-elements.html %}
+
+<section class="section">
+ <div class="container">
+ <h1 class="title">Notifications</h1>
+ <h2 class="subtitle">
+ Bold <strong>notification</strong> blocks, to alert your users of something
+ </h2>
+ {%
+ include meta.html
+ colors=true
+ sizes=false
+ variables=true
+ %}
+
+ <hr>
+
+ <div class="columns">
+ <div class="column">
+ {{ notification }}
+ </div>
+ <div class="column">
+ {% highlight html %}{{ notification }}{% endhighlight %}
+ </div>
+ </div>
+
+ {% include heading.html name="Colors" %}
+
+ <div class="columns">
+ <div class="column">
+ {{ notification_colors }}
+ </div>
+ <div class="column">
+ {% highlight html %}{{ notification_colors }}{% endhighlight %}
</div>
</div>
---
+title: Progess Bar
layout: documentation
doc-tab: elements
doc-subtab: progress
value: $text
---
+{% capture progress %}
+<progress class="progress" value="15" max="100">15%</progress>
+{% endcapture %}
+
+{% capture progress_colors %}
+<progress class="progress is-primary" value="30" max="100">30%</progress>
+<progress class="progress is-info" value="45" max="100">45%</progress>
+<progress class="progress is-success" value="60" max="100">60%</progress>
+<progress class="progress is-warning" value="75" max="100">75%</progress>
+<progress class="progress is-danger" value="90" max="100">90%</progress>
+{% endcapture %}
+
+{% capture progress_sizes %}
+<progress class="progress is-small" value="15" max="100">15%</progress>
+<progress class="progress" value="30" max="100">30%</progress>
+<progress class="progress is-medium" value="45" max="100">45%</progress>
+<progress class="progress is-large" value="60" max="100">60%</progress>
+{% endcapture %}
+
{% include subnav-elements.html %}
<section class="section">
<h2 class="subtitle">
Native HTML <strong>progress</strong> bars
</h2>
+ {%
+ include meta.html
+ colors=true
+ sizes=true
+ variables=true
+ %}
<hr>
<div class="example">
- <progress class="progress" value="15" max="100">15%</progress>
- <progress class="progress is-primary" value="30" max="100">30%</progress>
- <progress class="progress is-info" value="45" max="100">45%</progress>
- <progress class="progress is-success" value="60" max="100">60%</progress>
- <progress class="progress is-warning" value="75" max="100">75%</progress>
- <progress class="progress is-danger" value="90" max="100">90%</progress>
+ {{ progress }}
</div>
-{% highlight html %}
-<progress class="progress" value="15" max="100">15%</progress>
-<progress class="progress is-primary" value="30" max="100">30%</progress>
-<progress class="progress is-info" value="45" max="100">45%</progress>
-<progress class="progress is-success" value="60" max="100">60%</progress>
-<progress class="progress is-warning" value="75" max="100">75%</progress>
-<progress class="progress is-danger" value="90" max="100">90%</progress>
-{% endhighlight %}
+ {% highlight html %}{{ progress }}{% endhighlight %}
- <hr>
+ {% include heading.html name="Colors" %}
- <h3 class="title">Sizes</h3>
<div class="example">
- <progress class="progress is-small" value="15" max="100">15%</progress>
- <progress class="progress" value="30" max="100">30%</progress>
- <progress class="progress is-medium" value="45" max="100">45%</progress>
- <progress class="progress is-large" value="60" max="100">60%</progress>
+ {{ progress_colors }}
</div>
-{% highlight html %}
-<progress class="progress is-small" value="15" max="100">15%</progress>
-<progress class="progress" value="30" max="100">30%</progress>
-<progress class="progress is-medium" value="45" max="100">45%</progress>
-<progress class="progress is-large" value="60" max="100">60%</progress>
-{% endhighlight %}
+ {% highlight html %}{{ progress_colors }}{% endhighlight %}
+
+ {% include heading.html name="Sizes" %}
+
+ <div class="example">
+ {{ progress_sizes }}
+ </div>
+ {% highlight html %}{{ progress_sizes }}{% endhighlight %}
{% include variables.html element=true %}
---
+title: Table
layout: documentation
doc-tab: elements
doc-subtab: table
<div class="container">
<h1 class="title">Tables</h1>
<h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=false
+ variables=true
+ %}
<hr>
---
+title: Tags
layout: documentation
doc-tab: elements
doc-subtab: tag
<span class="tag is-info is-large">Large</span>
{% endcapture %}
+{% capture rounded %}
+<span class="tag is-rounded">Rounded</span>
+{% endcapture %}
+
{% capture delete %}
<span class="tag is-success">
Bar
<h2 class="subtitle">
Small <strong>tag labels</strong> to insert anywhere
</h2>
+ {%
+ include meta.html
+ colors=true
+ sizes=true
+ variables=true
+ %}
<hr>
</div>
</div>
+ {% include heading.html name="Colors" %}
+
<div class="columns">
<div class="column is-4">
Like with buttons, there are <strong>9 different colors</strong> available.
</div>
</div>
+ {% include heading.html name="Sizes" %}
+
<div class="columns">
<div class="column is-4">
And <strong>2 additional</strong> sizes.
</div>
</div>
+ {% include heading.html name="Modifiers" %}
+
+ <div class="columns">
+ <div class="column is-4">
+ You can add the <code>is-rounded</code> modifier to make a <strong>rounded</strong> tag.
+ </div>
+ <div class="column is-2">
+ {{ rounded }}
+ </div>
+ <div class="column is-6">
+ {% highlight html %}{{ rounded }}{% endhighlight %}
+ </div>
+ </div>
+
+ {% include heading.html name="Combinations" %}
+
<div class="columns">
<div class="column is-4">
You can also append a <strong>delete button</strong>.
---
+title: Title and Subtitle
layout: documentation
doc-tab: elements
doc-subtab: title
<h2 class="subtitle">
Simple <strong>headings</strong> to add depth to your page
</h2>
+ {%
+ include meta.html
+ colors=false
+ sizes=true
+ variables=true
+ %}
<hr>
<div class="columns">
<div class="column">
- <p>There are <strong>2 types</strong> of heading:</p>
+ <div class="content">
+ <p>There are <strong>2 types</strong> of heading:</p>
+ <ul>
+ <li>
+ <code>.title</code>
+ </li>
+ <li>
+ <code>.subtitle</code>
+ </li>
+ </ul>
+ </div>
</div>
<div class="column">
<p class="title">Title</p>
</div>
</div>
- <hr>
+ {% include heading.html name="Sizes" %}
<div class="columns">
<div class="column">
---
+title: Checkbox
layout: documentation
doc-tab: form
doc-subtab: checkbox
---
+title: Form controls
layout: documentation
doc-tab: form
doc-subtab: general
---
+title: Input
layout: documentation
doc-tab: form
doc-subtab: input
---
+title: Radio button
layout: documentation
doc-tab: form
doc-subtab: radio
---
+title: Select
layout: documentation
doc-tab: form
doc-subtab: select
---
+title: Textarea
layout: documentation
doc-tab: form
doc-subtab: textarea
---
+title: Columns powered by Flexbox
layout: documentation
doc-tab: grid
doc-subtab: columns
---
+title: Tiles powered by Flexbox
layout: documentation
doc-tab: grid
doc-subtab: tiles
---
+title: Container
layout: documentation
doc-tab: layout
doc-subtab: container
---
+title: Footer
layout: documentation
doc-tab: layout
doc-subtab: footer
---
+title: Hero
layout: documentation
doc-tab: layout
doc-subtab: hero
---
+title: Section
layout: documentation
doc-tab: layout
doc-subtab: section
---
+title: Helpers
layout: documentation
doc-tab: modifiers
doc-subtab: helpers
---
+title: Responsive helpers
layout: documentation
doc-tab: modifiers
doc-subtab: responsive-helpers
---
+title: Modifiers syntax
layout: documentation
doc-tab: modifiers
doc-subtab: syntax
---
+title: Typography helpers
layout: documentation
doc-tab: modifiers
doc-subtab: typography-helpers
---
+title: CSS classes
layout: documentation
doc-tab: overview
doc-subtab: classes
---
+title: Customize Bulma
layout: documentation
doc-tab: overview
doc-subtab: customize
---
+title: Functions
layout: documentation
doc-tab: overview
doc-subtab: functions
---
+title: Mixins
layout: documentation
doc-tab: overview
doc-subtab: mixins
---
+title: Modularity
layout: documentation
doc-tab: overview
doc-subtab: modular
---
+title: Responsiveness
layout: documentation
doc-tab: overview
doc-subtab: responsiveness
---
+title: Get started with Bulma
layout: documentation
doc-tab: overview
doc-subtab: start
---
+title: Variables
layout: documentation
doc-tab: overview
doc-subtab: variables
---
+title: Extensions
layout: default
route: extensions
extensions:
// Dropdowns
+ var $metalinks = getAll('#meta a');
+
+ if ($metalinks.length > 0) {
+ $metalinks.forEach(function ($el) {
+ $el.addEventListener('click', function (event) {
+ event.preventDefault();
+ var target = $el.getAttribute('href');
+ var $target = document.getElementById(target.substring(1));
+ $target.scrollIntoView(true);
+ window.history.replaceState(null, document.title, '' + window.location.origin + window.location.pathname + target);
+ return false;
+ });
+ });
+ }
+
+ // Dropdowns
+
var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
if ($dropdowns.length > 0) {
---
+title: Thank you
layout: default
route: index
---
---
+title: Versions
layout: default
route: versions
---
projects / thirdparty / bulma.git / commitdiff
