Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 02:44:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/documentation/elements/block.html
View File

@@ -1,19 +1,19 @@
---
title: Block
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: block
breadcrumb:
- home
- documentation
- elements
- elements-block
- home
- documentation
- elements
- elements-block
meta:
colors: false
sizes: false
variables: true
---
{% capture block_example %}
<div class="block">
This text is within a <strong>block</strong>.
@@ -134,31 +134,33 @@ meta:
<div class="content">
<p>
The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML elements to have a consistent margin between them:
The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML
elements to have a consistent margin between them:
</p>
</div>
{% include elements/snippet.html content=block_example %}
{% include docs/elements/snippet.html content=block_example %}
<div class="content">
<p>
As you can see, the first two blocks have a <code>margin-bottom</code> applied, but <strong>not the third one.</strong>. That is because Bulma applies a space on all blocks, <strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only appear <strong>between them</strong>.
</p>
<p>
Without using <code>block</code>, the HTML elements would have no space between them:
As you can see, the first two blocks have a <code>margin-bottom</code> applied, but
<strong>not the third .</strong>. That is because Bulma applies a space on all blocks,
<strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only
appear <strong>between them</strong>.
</p>
<p>Without using <code>block</code>, the HTML elements would have no space between them:</p>
</div>
{% include elements/snippet.html content=no_block_example %}
{% include docs/elements/snippet.html content=no_block_example %}
<!-- -->
{% include elements/anchor.html name="You're already using it" %}
{% include docs/elements/anchor.html name="You're already using it" %}
<div class="content">
<p>
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. Its CSS properties are <strong>shared</strong> across several Bulma elements and components:
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. Its CSS
properties are <strong>shared</strong> across several Bulma elements and components:
</p>
<ul>
@@ -176,13 +178,9 @@ meta:
<li><code>title</code></li>
</ul>
<p>
This is thanks to the <code>@extend %block</code> Sass placeholder feature.
</p>
<p>This is thanks to the <code>@extend %block</code> Sass placeholder feature.</p>
<p>
Here's how it would look like in comparison:
</p>
<p>Here's how it would look like in comparison:</p>
</div>
<div class="columns is-size-6">
@@ -196,26 +194,28 @@ meta:
<div class="content">
<p>
No matter which Bulma elements and components you are using, and no matter their order, they will have a <strong>consistent space</strong> between them.
No matter which Bulma elements and components you are using, and no matter their order, they will have a
<strong>consistent space</strong> between them.
</p>
</div>
<!-- -->
{% include elements/anchor.html name="One line of CSS" %}
{% include docs/elements/anchor.html name="One line of CSS" %}
<div class="content">
<p>
As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all siblings, <strong>except the last one</strong>.
As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all
siblings, <strong>except the last one</strong>.
</p>
</div>
{% highlight css %}{{ block_css }}{% endhighlight %}
{% highlight css %}
{{ block_css }}
{% endhighlight %}
<div class="content">
<p>
This prevents the last sibling from adding unnecessary space at the bottom.
</p>
<p>This prevents the last sibling from adding unnecessary space at the bottom.</p>
</div>
{% include components/variables.html type='element' %}

52
docs/documentation/elements/box.html
View File

@@ -1,59 +1,58 @@
---
title: Box
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: box
breadcrumb:
- home
- documentation
- elements
- elements-box
- home
- documentation
- elements
- elements-box
meta:
colors: false
sizes: false
variables: true
---
{% capture box_example %}
<div class="box">
I'm in a box.
</div>
<div class="box">I'm in a box.</div>
{% endcapture %}
{% capture box_form_example %}
<form class="box">
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="e.g. alex@example.com">
<input class="input" type="email" placeholder="e.g. alex@example.com" />
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="password" placeholder="********">
<input class="input" type="password" placeholder="********" />
</div>
</div>
<button class="button is-primary">Sign in</button>
</form>
{% endcapture %}
{% capture box_card_example %}
<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">
<img src="{{site.url}}/assets/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.
<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">
@@ -81,27 +80,20 @@ meta:
{% endcapture %}
<div class="content">
<p>
The <code>box</code> element is a simple container with a white background, some padding, and a box shadow.
</p>
<p>The <code>box</code> element is a simple container with a white background, some padding, and a box shadow.</p>
</div>
{% include elements/snippet.html content=box_example %}
{% include docs/elements/snippet.html content=box_example %}
<div class="content">
<p>
Because it acts as a container, you can easily include other components, like <strong>form elements</strong>:
</p>
<p>Because it acts as a container, you can easily include other components, like <strong>form elements</strong>:</p>
</div>
{% include elements/snippet.html content=box_form_example more=true %}
{% include docs/elements/snippet.html content=box_form_example more=true %}
<div class="content">
<p>
Or a <code>media</code> object:
</p>
<p>Or a <code>media</code> object:</p>
</div>
{% include elements/snippet.html content=box_card_example more=true %}
{% include docs/elements/snippet.html content=box_card_example more=true %}
{% include components/variables.html type='element' %}

499
docs/documentation/elements/button.html
View File

@@ -1,30 +1,28 @@
---
title: Button
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: button
breadcrumb:
- home
- documentation
- elements
- elements-button
- home
- documentation
- elements
- elements-button
meta:
colors: true
sizes: true
variables: true
---
{% capture button_example %}
<button class="button">Button</button>
{% endcapture %}
{% capture button_tags_example %}
<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">
<input class="button" type="submit" value="Submit input" />
<input class="button" type="reset" value="Reset input" />
{% endcapture %}
{% capture button_colors_a_example %}
<button class="button is-white">White</button>
<button class="button is-light">Light</button>
@@ -33,7 +31,6 @@ meta:
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>
{% endcapture %}
{% capture button_colors_b_example %}
<div class="buttons">
<button class="button is-primary">Primary</button>
@@ -47,7 +44,6 @@ meta:
<button class="button is-danger">Danger</button>
</div>
{% endcapture %}
{% capture button_light_colors_b_example %}
<div class="buttons">
<button class="button is-primary is-light">Primary</button>
@@ -61,7 +57,19 @@ meta:
<button class="button is-danger is-light">Danger</button>
</div>
{% endcapture %}
{% capture button_dark_colors_b_example %}
<div class="buttons">
<button class="button is-primary is-dark">Primary</button>
<button class="button is-link is-dark">Link</button>
</div>
<div class="buttons">
<button class="button is-info is-dark">Info</button>
<button class="button is-success is-dark">Success</button>
<button class="button is-warning is-dark">Warning</button>
<button class="button is-danger is-dark">Danger</button>
</div>
{% endcapture %}
{% capture button_sizes_example %}
<button class="button is-small">Small</button>
<button class="button">Default</button>
@@ -69,7 +77,6 @@ meta:
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>
{% endcapture %}
{% capture buttons_medium_sizes_example %}
<div class="buttons are-medium">
<button class="button">All</button>
@@ -77,7 +84,6 @@ meta:
<button class="button">Size</button>
</div>
{% endcapture %}
{% capture buttons_small_normal_sizes_example %}
<div class="buttons are-small">
<button class="button">Small</button>
@@ -87,112 +93,103 @@ meta:
<button class="button">Small</button>
</div>
{% endcapture %}
{% capture button_displays_example %}
<button class="button is-small is-fullwidth">Small</button>
<button class="button is-fullwidth">Normal</button>
<button class="button is-medium is-fullwidth">Medium</button>
<button class="button is-large is-fullwidth">Large</button>
{% endcapture %}
{% capture button_outlined_example %}
<button class="button is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-link is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-info is-outlined">Outlined</button>
<button class="button is-success is-outlined">Outlined</button>
<button class="button is-danger is-outlined">Outlined</button>
{% endcapture %}
{% capture button_inverted_example %}
<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-link is-inverted">Inverted</button>
<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-info is-inverted">Inverted</button>
<button class="button is-success is-inverted">Inverted</button>
<button class="button is-danger is-inverted">Inverted</button>
{% endcapture %}
{% capture button_inverted_outlined_example %}
<button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
<button class="button is-link is-inverted is-outlined">Invert Outlined</button>
<button class="button is-info is-inverted is-outlined">Invert Outlined</button>
<button class="button is-success is-inverted is-outlined">Invert Outlined</button>
<button class="button is-danger is-inverted is-outlined">Invert Outlined</button>
{% endcapture %}
{% capture button_rounded_example %}
<button class="button is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-link is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-info is-rounded">Rounded</button>
<button class="button is-success is-rounded">Rounded</button>
<button class="button is-danger is-rounded">Rounded</button>
{% endcapture %}
{% capture button_normal_example %}
<button class="button">Normal</button>
<button class="button is-primary">Normal</button>
<button class="button is-link">Normal</button>
<button class="button is-primary">Normal</button>
<button class="button is-info">Normal</button>
<button class="button is-success">Normal</button>
<button class="button is-warning">Normal</button>
<button class="button is-danger">Normal</button>
{% endcapture %}
{% capture button_hover_example %}
<button class="button is-hovered">Hover</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-link is-hovered">Hover</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-info is-hovered">Hover</button>
<button class="button is-success is-hovered">Hover</button>
<button class="button is-warning is-hovered">Hover</button>
<button class="button is-danger is-hovered">Hover</button>
{% endcapture %}
{% capture button_focus_example %}
<button class="button is-focused">Focus</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-link is-focused">Focus</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-info is-focused">Focus</button>
<button class="button is-success is-focused">Focus</button>
<button class="button is-warning is-focused">Focus</button>
<button class="button is-danger is-focused">Focus</button>
{% endcapture %}
{% capture button_active_example %}
<button class="button is-active">Active</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-link is-active">Active</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-info is-active">Active</button>
<button class="button is-success is-active">Active</button>
<button class="button is-warning is-active">Active</button>
<button class="button is-danger is-active">Active</button>
{% endcapture %}
{% capture button_loading_example %}
<button class="button is-loading">Loading</button>
<button class="button is-primary is-loading">Loading</button>
<button class="button is-link is-loading">Loading</button>
<button class="button is-primary is-loading">Loading</button>
<button class="button is-info is-loading">Loading</button>
<button class="button is-success is-loading">Loading</button>
<button class="button is-warning is-loading">Loading</button>
<button class="button is-danger is-loading">Loading</button>
{% endcapture %}
{% capture button_static_example %}
<span class="button is-static">Static</span>
{% endcapture %}
{% capture button_disabled_example %}
<button class="button" title="Disabled button" disabled>Disabled</button>
<button class="button is-primary" title="Disabled button" disabled>Disabled</button>
<button class="button is-link" title="Disabled button" disabled>Disabled</button>
<button class="button is-info" title="Disabled button" disabled>Disabled</button>
<button class="button is-success" title="Disabled button" disabled>Disabled</button>
<button class="button is-warning" title="Disabled button" disabled>Disabled</button>
<button class="button is-danger" title="Disabled button" disabled>Disabled</button>
<button class="button is-link" title="Disabled button" disabled>
Disabled
</button>
<button class="button is-primary" title="Disabled button" disabled>
Disabled
</button>
<button class="button is-info" title="Disabled button" disabled>
Disabled
</button>
<button class="button is-success" title="Disabled button" disabled>
Disabled
</button>
<button class="button is-warning" title="Disabled button" disabled>
Disabled
</button>
<button class="button is-danger" title="Disabled button" disabled>
Disabled
</button>
{% endcapture %}
{% capture button_fa_example %}
<p class="buttons">
<button class="button">
@@ -264,7 +261,6 @@ meta:
</button>
</p>
{% endcapture %}
{% capture button_only_icon_example %}
<p class="buttons">
<button class="button is-small">
@@ -320,27 +316,19 @@ meta:
</button>
</p>
{% endcapture %}
{% capture button_group_example %}
<div class="field is-grouped">
<p class="control">
<button class="button is-link">
Save changes
</button>
<button class="button is-link">Save changes</button>
</p>
<p class="control">
<button class="button">
Cancel
</button>
<button class="button">Cancel</button>
</p>
<p class="control">
<button class="button is-danger">
Delete post
</button>
<button class="button is-danger">Delete post</button>
</p>
</div>
{% endcapture %}
{% capture button_addons_example %}
<div class="field has-addons">
<p class="control">
@@ -369,7 +357,6 @@ meta:
</p>
</div>
{% endcapture %}
{% capture button_group_addons_example %}
<div class="field has-addons">
<p class="control">
@@ -425,7 +412,6 @@ meta:
</p>
</div>
{% endcapture %}
{% capture buttons_list %}
<div class="buttons">
<button class="button is-success">Save changes</button>
@@ -433,7 +419,6 @@ meta:
<button class="button is-danger">Cancel</button>
</div>
{% endcapture %}
{% capture buttons_multiple %}
<div class="buttons">
<button class="button">One</button>
@@ -458,7 +443,6 @@ meta:
<button class="button">Twenty</button>
</div>
{% endcapture %}
{% capture buttons_addons %}
<div class="buttons has-addons">
<button class="button">Yes</button>
@@ -466,7 +450,6 @@ meta:
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_centered %}
<div class="buttons has-addons is-centered">
<button class="button">Yes</button>
@@ -474,7 +457,6 @@ meta:
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_right %}
<div class="buttons has-addons is-right">
<button class="button">Yes</button>
@@ -482,7 +464,6 @@ meta:
<button class="button">No</button>
</div>
{% endcapture %}
{% capture buttons_addons_selected %}
<div class="buttons has-addons">
<button class="button is-success is-selected">Yes</button>
@@ -505,84 +486,88 @@ meta:
<div class="content">
<p>
The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page.
The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an
<strong>interactive</strong> element of your page.
</p>
</div>
{% include elements/snippet.html wrapper="buttons" content=button_example %}
{% include docs/elements/snippet.html wrapper="buttons" content=button_example %}
<div class="content">
<p>
The <code>button</code> class can be used on:
</p>
<p>The <code>button</code> class can be used on:</p>
<ul>
<li>
<code>&lt;a&gt;</code> anchor links
</li>
<li>
<code>&lt;button&gt;</code> form buttons
</li>
<li>
<code>&lt;input type="submit"&gt;</code> submit inputs
</li>
<li>
<code>&lt;input type="reset"&gt;</code> reset inputs
</li>
<li><code>&lt;a&gt;</code> anchor links</li>
<li><code>&lt;button&gt;</code> form buttons</li>
<li><code>&lt;input type="submit"&gt;</code> submit inputs</li>
<li><code>&lt;input type="reset"&gt;</code> reset inputs</li>
</ul>
</div>
{% include elements/snippet.html wrapper="buttons" content=button_tags_example %}
{% include elements/anchor.html name="Colors" %}
{%
include docs/elements/snippet.html wrapper="buttons"
content=button_tags_example
%}
{%
include docs/elements/anchor.html
name="Colors"
%}
<div class="content">
<p>
The button is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
The button is available in all the <strong>different colors</strong> defined by the
<a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% include elements/snippet.html wrapper="buttons" content=button_colors_a_example %}
{% include elements/snippet.html content=button_colors_b_example %}
{%
include docs/elements/snippet.html wrapper="buttons"
content=button_colors_a_example
%}
{%
include docs/elements/snippet.html
content=button_colors_b_example
%}
<div class="content">
<p>
Each color now comes in its <strong>light version</strong>. Simply append the modifier <code>is-light</code> to the color modifier to apply the light version of the button.
Each color also comes in its <strong>light version</strong>. Simply append the modifier <code>is-light</code> to the
color modifier to apply the light version of the button.
</p>
</div>
{% include elements/snippet.html content=button_light_colors_b_example %}
{% include elements/anchor.html name="Sizes" %}
{% include docs/elements/snippet.html content=button_light_colors_b_example %}
<div class="content">
<p>
The button comes in <strong>4 different sizes:</strong>
</p>
<p>A <strong>dark version</strong> also exists. Simply append the modifier <code>is-dark</code>.</p>
</div>
{% include docs/elements/snippet.html content=button_dark_colors_b_example %}
{% include docs/elements/anchor.html name="Sizes" %}
<div class="content">
<p>The button comes in <strong>4 different sizes:</strong></p>
<ul>
<li>
small
</li>
<li>
normal
</li>
<li>
medium
</li>
<li>
large
</li>
<li>small</li>
<li>normal</li>
<li>medium</li>
<li>large</li>
</ul>
<p>
While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you need to reset the button to its normal size.
While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you
need to reset the button to its normal size.
</p>
</div>
{% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}
{%
include docs/elements/snippet.html wrapper="buttons"
content=button_sizes_example
%}
<div class="content">
<p>
You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>buttons</code> parent, and applying one of 3 modifiers:
You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a
<code>buttons</code> parent, and applying one of 3 modifiers:
</p>
<ul>
<li>
@@ -597,32 +582,35 @@ meta:
</ul>
</div>
{% include elements/snippet.html content=buttons_medium_sizes_example %}
{% include docs/elements/snippet.html content=buttons_medium_sizes_example %}
<div class="content">
<p>
You can change the size of only a <strong>subset of buttons</strong> by simply applying a modifier class to them.
<br>
For example, if you want all buttons to be <strong>small</strong> but still have one in its <strong>normal</strong> size, simply do the following:
For example, if you want all buttons to be <strong>small</strong> but still have one in its
<strong>normal</strong> size, simply do the following:
</p>
</div>
{% include elements/snippet.html content=buttons_small_normal_sizes_example %}
{% include elements/anchor.html name="Responsive sizes" %}
{% include elements/new-tag.html version="0.9.4" %}
{% include docs/elements/snippet.html content=buttons_small_normal_sizes_example %}
{% include docs/elements/anchor.html name="Responsive sizes" %}
<div class="content">
<p>
If you want different button sizes for each breakpoint, you can use Bulma's <strong>responsive</strong> buttons. Simply append the <code>is-responsive</code> modifier:
If you want different button sizes for each breakpoint, you can use Bulma's
<strong>responsive</strong> buttons. Simply append the <code>is-responsive</code> modifier:
</p>
</div>
{% include snippets/responsive-buttons.html %}
{% include docs/snippets/responsive-buttons.html %}
<div class="block">
<a target="_blank" class="button is-small is-link is-outlined" href="{{ site.url }}/playground/responsive-buttons/">
<a
target="_blank"
class="button is-small is-link is-outlined"
href="{{ site.url }}/playground/responsive-buttons/"
>
<span>Open table in new window</span>
<span class="icon">
<i class="fa fa-external-link-alt"></i>
@@ -632,47 +620,34 @@ meta:
<div class="content">
<p>
You can customise the sizes by overwriting the <code>$button-responsive-sizes</code> Sass variable.
You can customise the sizes by overwriting the
<code>$button-responsive-sizes</code> Sass variable.
</p>
</div>
{% include elements/anchor.html name="Displays" %}
{% include elements/snippet.html wrapper="buttons" content=button_displays_example %}
{% include elements/anchor.html name="Styles" %}
{% include docs/elements/anchor.html name="Displays" %}
{% include docs/elements/snippet.html wrapper="buttons" content=button_displays_example %}
{% include docs/elements/anchor.html name="Styles" %}
<h4 class="subtitle">Outlined</h4>
{% include elements/snippet.html wrapper="buttons" content=button_outlined_example %}
{%
include docs/elements/snippet.html wrapper="buttons"
content=button_outlined_example
%}
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
<div class="columns">
<div class="column">
<div class="bd-callout is-primary">
<div class="buttons">
{{ button_inverted_example }}
</div>
<div class="buttons">{{ button_inverted_example }}</div>
</div>
</div>
<div class="column">
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
</div>
</div>
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
<div class="columns">
<div class="column">
<div class="bd-callout is-primary">
<div class="buttons">
{{ button_inverted_outlined_example }}
</div>
</div>
</div>
<div class="column">
{% highlight html %}{{ button_inverted_outlined_example }}{% endhighlight %}
{% highlight html -%}
{{- button_inverted_example -}}
{%- endhighlight %}
</div>
</div>
@@ -680,94 +655,106 @@ meta:
<div class="columns">
<div class="column">
<div class="buttons">
{{ button_rounded_example }}
</div>
<div class="buttons">{{ button_rounded_example }}</div>
</div>
<div class="column">
{% highlight html %}{{ button_rounded_example }}{% endhighlight %}
{% highlight html -%}
{{- button_rounded_example -}}
{%- endhighlight %}
</div>
</div>
{% include elements/anchor.html name="States" %}
{% include docs/elements/anchor.html name="States" %}
<div class="content">
<p>
Bulma styles the different <strong>states</strong> of its buttons. Each state is available as a pseudo-class and a CSS class:
Bulma styles the different <strong>states</strong> of its buttons. Each state is available as a pseudo-class and a
CSS class:
</p>
<ul>
<li>
<code>:hover</code> and <code>is-hovered</code>
</li>
<li>
<code>:focus</code> and <code>is-focused</code>
</li>
<li>
<code>:active</code> and <code>is-active</code>
</li>
<li><code>:hover</code> and <code>is-hovered</code></li>
<li><code>:focus</code> and <code>is-focused</code></li>
<li><code>:active</code> and <code>is-active</code></li>
</ul>
<p>
This allows you to obtain the style of a certain state without having to trigger it.
</p>
<p>This allows you to obtain the style of a certain state without having to trigger it.</p>
</div>
<h4 class="subtitle">Normal</h4>
{% include elements/snippet.html wrapper="buttons" content=button_normal_example %}
{%
include docs/elements/snippet.html wrapper="buttons"
content=button_normal_example
%}
<h4 class="subtitle">Hover</h4>
{% include elements/snippet.html wrapper="buttons" content=button_hover_example %}
{%
include docs/elements/snippet.html wrapper="buttons"
content=button_hover_example
%}
<h4 class="subtitle">Focus</h4>
{% include elements/snippet.html wrapper="buttons" content=button_focus_example %}
{%
include docs/elements/snippet.html wrapper="buttons"
content=button_focus_example
%}
<h4 class="subtitle">Active</h4>
{% include elements/snippet.html wrapper="buttons" content=button_active_example %}
{%
include docs/elements/snippet.html wrapper="buttons"
content=button_active_example
%}
<h4 class="subtitle">Loading</h4>
<div class="content">
<p>
You can very easily turn a button into its <strong>loading</strong> version by appending the <code>is-loading</code> modifier. You don't even need to remove the inner text, which allows the button to maintain its <strong>original size</strong> between its default and loading states.
You can very easily turn a button into its <strong>loading</strong> version by appending the
<code>is-loading</code> modifier. You don't even need to remove the inner text, which allows the button to maintain
its <strong>original size</strong> between its default and loading states.
</p>
</div>
<div class="columns">
<div class="column">
<div class="buttons">
{{ button_loading_example }}
</div>
<div class="buttons">{{ button_loading_example }}</div>
<div class="message is-info">
<div class="message-body">
<p>
Since the loading spinner is implemented using the <code>::after</code> pseudo-element, it is not supported by the <code>&lt;input&nbsp;type="submit"&gt;</code> element. Consider using <code>&lt;button&nbsp;type="submit"&gt;</code> instead.
Since the loading spinner is implemented using the
<code>::after</code> pseudo-element, it is not supported by the
<code>&lt;input&nbsp;type="submit"&gt;</code> element. Consider using
<code>&lt;button&nbsp;type="submit"&gt;</code> instead.
</p>
</div>
</div>
</div>
<div class="column">
{% highlight html %}{{button_loading_example}}{% endhighlight %}
{% highlight html -%}
{{- button_loading_example -}}
{%- endhighlight %}
</div>
</div>
<h4 id="static-button" class="subtitle">
Static
</h4>
<h4 id="static-button" class="subtitle">Static</h4>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is
useful to align a text label with an input, for example when using
<a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
</p>
</div>
{{ button_static_example }}
</div>
<div class="column">
{% highlight html %}{{ button_static_example }}{% endhighlight %}
{% highlight html -%}
{{- button_static_example -}}
{%- endhighlight %}
</div>
</div>
@@ -775,23 +762,32 @@ meta:
<div class="content">
<p>
Bulma supports the use of the <code>disabled</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button" target="_blank">Boolean HTML attribute</a>, which prevents the user from interacting with the button.
Bulma supports the use of the <code>disabled</code>
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"
target="_blank"
>Boolean HTML attribute</a
>, which prevents the user from interacting with the button.
</p>
</div>
<div class="columns">
<div class="column">
<div class="buttons">
{{ button_disabled_example }}
</div>
<div class="buttons">{{ button_disabled_example }}</div>
<div class="message is-danger">
<div class="message-body">
<p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
<p>
The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML
attribute.
<a href="https://github.com/jgthms/bulma/issues/276">Learn more</a>
</p>
</div>
</div>
</div>
<div class="column">
{% highlight html %}{{button_disabled_example}}{% endhighlight %}
{% highlight html -%}
{{- button_disabled_example -}}
{%- endhighlight %}
</div>
</div>
@@ -799,65 +795,71 @@ meta:
<div class="content">
<p>
Bulma buttons can easily be enhanced by adding a <strong>Font Awesome icon</strong>. For the best results, wrap the inner text in a separate <code>&lt;span&gt;</code> element.
Bulma buttons can easily be enhanced by adding a
<strong>Font Awesome icon</strong>. For the best results, wrap the inner text in a separate
<code>&lt;span&gt;</code> element.
</p>
</div>
{% include elements/snippet.html content=button_fa_example clipped=true %}
{% include docs/elements/snippet.html content=button_fa_example clipped=true %}
<div class="columns">
<div class="column">
<div class="content">
<p>
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter
the size of the button <em>or</em> of the icon.
</p>
</div>
{{ button_only_icon_example }}
</div>
<div class="column">
{% highlight html %}{{ button_only_icon_example }}{% endhighlight %}
{% highlight html -%}
{{- button_only_icon_example -}}
{%- endhighlight %}
</div>
</div>
{% include elements/anchor.html name="Button group" %}
{% include docs/elements/anchor.html name="Button group" %}
<div class="content">
<p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
<p>
If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the
<code>is-grouped</code> modifier on the <code>field</code> container:
</p>
</div>
{% include elements/snippet.html content=button_group_example %}
{% include elements/anchor.html name="Button addons" %}
{% include docs/elements/snippet.html content=button_group_example %}
{% include docs/elements/anchor.html name="Button addons" %}
<div class="content">
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
<p>
If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the
<code>field</code> container:
</p>
</div>
{% include elements/snippet.html content=button_addons_example %}
{% include elements/anchor.html name="Button group with addons" %}
{% include docs/elements/snippet.html content=button_addons_example %}
{% include docs/elements/anchor.html name="Button group with addons" %}
<div class="content">
<p>You can group together addons as well:</p>
</div>
{% include elements/snippet.html content=button_group_addons_example %}
{% include elements/anchor.html name="List of buttons" %}
{% include docs/elements/snippet.html content=button_group_addons_example %}
{% include docs/elements/anchor.html name="List of buttons" %}
<div class="columns">
<div class="column">
<div class="content">
<p>
You can create a <strong>list of buttons</strong> by using the <code>buttons</code> container.
</p>
</div>
<div class="bd-example">
{{ buttons_list }}
<p>You can create a <strong>list of buttons</strong> by using the <code>buttons</code> container.</p>
</div>
<div class="bd-example">{{ buttons_list }}</div>
</div>
<div class="column">
{% highlight html %}{{ buttons_list }}{% endhighlight %}
{% highlight html -%}
{{- buttons_list -}}
{%- endhighlight %}
</div>
</div>
@@ -865,31 +867,30 @@ meta:
<div class="column">
<div class="content">
<p>
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while
keeping all buttons <strong>evenly spaced</strong>.
</p>
</div>
<div class="bd-example">
{{ buttons_multiple }}
</div>
<div class="bd-example">{{ buttons_multiple }}</div>
</div>
<div class="column bd-highlight-full">
{% highlight html %}{{ buttons_multiple }}{% endhighlight %}
{% highlight html -%}
{{- buttons_multiple -}}
{%- endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can <strong>attach buttons together</strong> with the <code>has-addons</code> modifier.
</p>
</div>
<div class="bd-example">
{{ buttons_addons }}
<p>You can <strong>attach buttons together</strong> with the <code>has-addons</code> modifier.</p>
</div>
<div class="bd-example">{{ buttons_addons }}</div>
</div>
<div class="column bd-highlight-full">
{% highlight html %}{{ buttons_addons }}{% endhighlight %}
{% highlight html -%}
{{- buttons_addons -}}
{%- endhighlight %}
</div>
</div>
@@ -906,7 +907,10 @@ meta:
</div>
</div>
<div class="column bd-highlight-full">
{% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
{% highlight html -%}
{{- buttons_addons_centered -}}
{{- buttons_addons_right -}}
{%- endhighlight %}
</div>
</div>
@@ -914,49 +918,50 @@ meta:
<div class="column">
<div class="content">
<p>
You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the
<code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
</p>
</div>
<div class="bd-example">
{{ buttons_addons_selected }}
</div>
<div class="bd-example">{{ buttons_addons_selected }}</div>
</div>
<div class="column bd-highlight-full">
{% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
{% highlight html -%}
{{- buttons_addons_selected -}}
{%- endhighlight %}
</div>
</div>
<div class="message is-info">
<div class="message-header">
<p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
<p>
Difference between
<a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a>
and <strong>list of buttons</strong>
</p>
</div>
<div class="message-body">
<div class="content">
<p>
While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
While this list of buttons style can be achieved with either
<code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
</p>
<ul>
<li><code>buttons</code> has a <strong>simpler markup</strong></li>
<li><code>buttons</code> can only contain <code>button</code> elements</li>
<li><code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs</li>
<li>
<code>buttons</code> has a <strong>simpler markup</strong>
</li>
<li>
<code>buttons</code> can only contain <code>button</code> elements
</li>
<li>
<code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
</li>
<li>
<code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
</li>
<li>
with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
<code>field is-grouped</code> can be forced to fit all controls on a
<strong>single line</strong>
</li>
<li>with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls</li>
</ul>
<p>
Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need
more control on the styling and the elements, use a
<a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
</p>
</div>
</div>
</div>
{% include components/variables.html type='element' %}

309
docs/documentation/elements/content.html
View File

@@ -1,37 +1,40 @@
---
title: Content
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: content
breadcrumb:
- home
- documentation
- elements
- elements-content
- home
- documentation
- elements
- elements-content
meta:
colors: false
sizes: true
variables: true
---
{% capture content_pre %}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello World&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
{% endcapture %}
{% capture content_pre %} &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;
&lt;title&gt;Hello World&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae
mollis.&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; {% endcapture %}
{% capture content_example %}
<div class="content">
<h1>Hello World</h1>
<p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
<p>
Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing
elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius
lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat
odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub>
works as well!
</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<p>
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
@@ -39,7 +42,11 @@ meta:
<li>Ut non enim metus.</li>
</ul>
<h3>Third level</h3>
<p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
<p>
Quisque ante lacus, malesuada ac auctor vitae, congue
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec,
fringilla condimentum orci. Fusce eu rutrum tellus.
</p>
<ol>
<li>Donec blandit a lorem id convallis.</li>
<li>Cras gravida arcu at diam gravida gravida.</li>
@@ -49,9 +56,19 @@ meta:
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
<li>Vivamus maximus ultricies pulvinar.</li>
</ol>
<blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
<p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
<p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
<blockquote>
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
ipsum, ut blandit est tellus sit amet turpis.
</blockquote>
<p>
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque
consectetur, et lobortis nisi molestie.
</p>
<p>
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis
vulputate risus in luctus. Maecenas vestibulum interdum commodo.
</p>
<dl>
<dt>Web</dt>
<dd>The part of the Internet that contains websites and web pages</dd>
@@ -60,11 +77,22 @@ meta:
<dt>CSS</dt>
<dd>A technology to make HTML look better</dd>
</dl>
<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>
<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>
<p>
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris
euismod metus a tellus laoreet, at elementum ex efficitur.
</p>
<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>
<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>
<tr>
@@ -95,21 +123,39 @@ meta:
</tr>
</tbody>
</table>
<p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
<p>
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit
sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum
rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam
tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo
est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae
ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar.
Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor
cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
</p>
<h5>Fifth level</h5>
<p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
<p>
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt
ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit
volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
</p>
<figure>
<img src="{{site.url}}/images/placeholders/256x256.png">
<img src="{{site.url}}/images/placeholders/256x256.png">
<figcaption>
Figure 1: Some beautiful placeholders
</figcaption>
<img src="{{site.url}}/assets/images/placeholders/256x256.png" />
<img src="{{site.url}}/assets/images/placeholders/256x256.png" />
<figcaption>Figure 1: Some beautiful placeholders</figcaption>
</figure>
<h6>Sixth level</h6>
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
<p>
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus
sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut
sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada
ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse
euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius
sapien odio vitae est. Etiam at cursus metus.
</p>
</div>
{% endcapture %}
{% capture content_ol_html_example %}
<div class="content">
<ol type="1">
@@ -139,7 +185,6 @@ meta:
</ol>
</div>
{% endcapture %}
{% capture content_ol_css_example %}
<div class="content">
<ol class="is-lower-alpha">
@@ -166,7 +211,10 @@ meta:
{% endcapture %}
<div class="content">
<p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
<p>
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use
<code>content</code> as container. It can handle almost any HTML tag:
</p>
<ul>
<li><code>&lt;p&gt;</code> paragraphs</li>
<li><code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> <code>&lt;dl&gt;</code> lists</li>
@@ -175,126 +223,165 @@ meta:
<li><code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code></li>
<li><code>&lt;table&gt;</code> <code>&lt;tr&gt;</code> <code>&lt;th&gt;</code> <code>&lt;td&gt;</code> tables</li>
</ul>
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
<p>
This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some
<strong>text</strong>. For example, it's used for the paragraph you're currently reading.
</p>
</div>
{% include elements/anchor.html name="Full example" %}
{% include docs/elements/anchor.html name="Full example" %}
<div class="content">
Here is an example of the <code>content</code> Bulma element with all the supported HTML tags:
</div>
{% include elements/snippet.html content=content_example %}
{% include elements/anchor.html name="Ordered lists alternatives" %}
{% include docs/elements/snippet.html content=content_example %}
{% include docs/elements/anchor.html name="Ordered lists alternatives" %}
<div class="content">
<p>
<strong>Ordered lists</strong> <code>&lt;ol&gt;</code> support different <strong>types</strong> of items markers. To modify them, use either:
<strong>Ordered lists</strong> <code>&lt;ol&gt;</code> support different <strong>types</strong> of items markers. To
modify them, use either:
</p>
<ul>
<li>the corresponding HTML attribute value</li>
<li>
the corresponding HTML attribute value
</li>
<li>
one of the following CSS modifier classes: <code>is-lower-alpha</code>, <code>is-lower-roman</code>, <code>is-upper-alpha</code> or <code>is-upper-roman</code>
one of the following CSS modifier classes: <code>is-lower-alpha</code>, <code>is-lower-roman</code>,
<code>is-upper-alpha</code> or
<code>is-upper-roman</code>
</li>
</ul>
</div>
{% include elements/snippet.html content=content_ol_html_example %}
{% include elements/snippet.html content=content_ol_css_example %}
{% include elements/anchor.html name="Sizes" %}
{% include docs/elements/snippet.html content=content_ol_html_example %}
{% include docs/elements/snippet.html content=content_ol_css_example %}
{% include docs/elements/anchor.html name="Sizes" %}
<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>
<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>
{% capture small_example %}
<div class="content is-small">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
<div class="content is-small">
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan,
metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo
nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
erat vel, interdum mattis neque.
</p>
<h2>Second level</h2>
<p>
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
{% endcapture %}
{% capture normal_example %}
<div class="content is-normal">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
<div class="content is-normal">
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan,
metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo
nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
erat vel, interdum mattis neque.
</p>
<h2>Second level</h2>
<p>
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
{% endcapture %}
{% capture medium_example %}
<div class="content is-medium">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
<div class="content is-medium">
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan,
metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo
nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
erat vel, interdum mattis neque.
</p>
<h2>Second level</h2>
<p>
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
{% endcapture %}
{% capture large_example %}
<div class="content is-large">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
<div class="content is-large">
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan,
metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo
nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
erat vel, interdum mattis neque.
</p>
<h2>Second level</h2>
<p>
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
{% endcapture %}
<div class="content">
<h4>Small size <code>content</code></h4>
</div>
{% include elements/snippet.html content=small_example %}
{% include docs/elements/snippet.html content=small_example %}
<div class="content">
<h4>Normal size <code>content</code> <em>(default)</em></h4>
</div>
{% include elements/snippet.html content=normal_example %}
{% include docs/elements/snippet.html content=normal_example %}
<div class="content">
<h4>Medium size <code>content</code></h4>
</div>
{% include elements/snippet.html content=medium_example %}
{% include docs/elements/snippet.html content=medium_example %}
<div class="content">
<h4>Large size <code>content</code></h4>
</div>
{% include elements/snippet.html content=large_example %}
{% include docs/elements/snippet.html content=large_example %}
{% include components/variables.html type='element' %}

59
docs/documentation/elements/delete.html
View File

@@ -1,30 +1,28 @@
---
title: Delete
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: delete
breadcrumb:
- home
- documentation
- elements
- elements-delete
- home
- documentation
- elements
- elements-delete
meta:
colors: false
sizes: true
variables: false
---
{% capture cross_example %}
<button class="delete"></button>
{% endcapture %}
{% capture cross_sizes_example %}
<button class="delete is-small"></button>
<button class="delete"></button>
<button class="delete is-medium"></button>
<button class="delete is-large"></button>
{% endcapture %}
{% capture cross_elements_example %}
<div class="block">
<span class="tag is-success">
@@ -35,7 +33,8 @@ meta:
<div class="notification is-danger">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit
amet, consectetur adipiscing elit
</div>
<article class="message is-info">
@@ -44,38 +43,38 @@ meta:
<button class="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus
mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit
amet fringilla. Nullam gravida purus diam, et dictum felis venenatis
efficitur. Aenean ac eleifend lacus, 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 %}
<div class="content">
<p>
The <code>delete</code> element is a stand-alone element that can be used in different contexts.
</p>
<p>
On its own, it's a simple circle with a cross:
</p>
<p>The <code>delete</code> element is a stand-alone element that can be used in different contexts.</p>
<p>On its own, it's a simple circle with a cross:</p>
</div>
{% include elements/snippet.html content=cross_example %}
{% include docs/elements/snippet.html content=cross_example %}
{% include docs/elements/anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>It comes in <strong>4 sizes</strong>:</p>
</div>
{% include docs/elements/snippet.html content=cross_sizes_example %}
{% include docs/elements/anchor.html name="Combinations" %}
<div class="content">
<p>
It comes in <strong>4 sizes</strong>:
Bulma uses it for the
<a href="{{ site.url }}/documentation/elements/tag/">tags</a>, the
<a href="{{ site.url }}/documentation/elements/notification/">notifications</a>, and the
<a href="{{ site.url }}/documentation/components/message/">messages</a>:
</p>
</div>
{% include elements/snippet.html content=cross_sizes_example %}
{% include elements/anchor.html name="Combinations" %}
<div class="content">
<p>
Bulma uses it for the <a href="{{ site.url }}/documentation/elements/tag/">tags</a>, the <a href="{{ site.url }}/documentation/elements/notification/">notifications</a>, and the <a href="{{ site.url }}/documentation/components/message/">messages</a>:
</p>
</div>
{% include elements/snippet.html content=cross_elements_example %}
{% include docs/elements/snippet.html content=cross_elements_example %}

9
docs/documentation/elements/form.html
View File

@@ -1,8 +1,11 @@
---
title: Form
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: form
---
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/form/general/">
<meta
http-equiv="refresh"
content="0; url={{ site.url }}/documentation/form/general/"
>

210
docs/documentation/elements/icon.html
View File

@@ -1,29 +1,28 @@
---
title: Icon
subtitle: "Bulma is compatible with <strong>all icon font libraries</strong>: <a href=\"https://fontawesome.com/\">Font Awesome 5</a>, <a href=\"http://fontawesome.io/\">Font Awesome 4</a>, <a href=\"https://materialdesignicons.com\">Material Design Icons</a>, <a href=\"http://ionicons.com/\">Ionicons</a>, etc."
subtitle: 'Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="http://ionicons.com/">Ionicons</a>, etc.'
fontawesome4: true
ionicons: true
mdi: true
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: icon
breadcrumb:
- home
- documentation
- elements
- elements-icon
- home
- documentation
- elements
- elements-icon
meta:
colors: true
sizes: true
variables: true
---
{% capture icon_example %}
<span class="icon">
<i class="fas fa-home"></i>
</span>
{% endcapture %}
{% capture icon_text_example %}
<span class="icon-text">
<span class="icon">
@@ -32,7 +31,6 @@ meta:
<span>Home</span>
</span>
{% endcapture %}
{% capture icon_text_train_example %}
<span class="icon-text">
<span class="icon">
@@ -56,7 +54,6 @@ meta:
</span>
</span>
{% endcapture %}
{% capture icon_text_in_content_example %}
<div class="content">
<p>
@@ -67,7 +64,9 @@ meta:
</span>
<span>dinner</span>
</span>
was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in
was soon afterwards dispatched; and already had Mrs. Bennet planned the
courses that were to do credit to her housekeeping, when an answer arrived
which deferred it all. Mr. Bingley was obliged to be in
<span class="icon-text">
<span class="icon">
<i class="fas fa-city"></i>
@@ -79,13 +78,13 @@ meta:
<span class="icon">
<i class="fas fa-envelope-open-text"></i>
</span>
<span>invitation</span>
</span>,
etc.
<span>invitation</span> </span
>, etc.
</p>
<p>
Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his
Mrs. Bennet was quite disconcerted. She could not imagine what business he
could have in town so soon after his
<span class="icon-text">
<span class="icon">
<i class="fas fa-flag-checkered"></i>
@@ -99,11 +98,11 @@ meta:
</span>
<span>flying</span>
</span>
about from one place to another, and never settled at Netherfield as he ought to be.
about from one place to another, and never settled at Netherfield as he
ought to be.
</p>
</div>
{% endcapture %}
{% capture icon_text_div_example %}
<div class="icon-text">
<span class="icon has-text-info">
@@ -123,9 +122,7 @@ meta:
<span>Success</span>
</div>
<p class="block">
Your image has been successfully uploaded.
</p>
<p class="block">Your image has been successfully uploaded.</p>
<div class="icon-text">
<span class="icon has-text-warning">
@@ -150,7 +147,6 @@ meta:
</p>
{% endcapture %}
{% capture icon_color_example %}
<span class="icon has-text-info">
<i class="fas fa-info-circle"></i>
@@ -165,7 +161,6 @@ meta:
<i class="fas fa-ban"></i>
</span>
{% endcapture %}
{% capture icon_text_color_example %}
<span class="icon-text has-text-info">
<span class="icon">
@@ -195,7 +190,6 @@ meta:
<span>Danger</span>
</span>
{% endcapture %}
{% capture icon_sizes_example %}
<span class="icon">
<i class="fas fa-camera-retro fa-lg"></i>
@@ -213,7 +207,6 @@ meta:
<i class="fas fa-camera-retro fa-5x"></i>
</span>
{% endcapture %}
{% capture stacked_medium %}
<span class="icon is-medium">
<span class="fa-stack fa-sm">
@@ -222,7 +215,6 @@ meta:
</span>
</span>
{% endcapture %}
{% capture stacked_large %}
<span class="icon is-large">
<span class="fa-stack fa-lg">
@@ -234,87 +226,100 @@ meta:
<div class="content">
<p>
The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to "jump" on page load.</p>
The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because
the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons
will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to
"jump" on page load.
</p>
</div>
<div class="block bd-icon-size">
{% include elements/snippet.html content=icon_example %}
{% include docs/elements/snippet.html content=icon_example %}
</div>
<div class="message is-info">
<div class="message-body">
The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's
area.
</div>
</div>
<div class="content">
<p>
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon
itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will
<strong>inherit</strong> the font size.
</p>
</div>
<!-- -->
{% include elements/anchor.html name="Icon text" %}
{% include elements/new-tag.html version="0.9.2" %}
{% include docs/elements/anchor.html name="Icon text" %}
<div class="content">
<p>
You can combine an <code>icon</code> with <strong>text</strong>, using the <code>icon-text</code> wrapper, as long as all text <em>inside</em> is wrapped in its own <code>span</code> element:
You can combine an <code>icon</code> with <strong>text</strong>, using the <code>icon-text</code> wrapper, as long
as all text <em>inside</em> is wrapped in its own <code>span</code> element:
</p>
</div>
{% include elements/snippet.html content=icon_text_example %}
{% include docs/elements/snippet.html content=icon_text_example %}
<div class="content">
<p>You can combine <strong>as many</strong> <code>icon</code> elements and text elements as you want:</p>
</div>
{% include docs/elements/snippet.html content=icon_text_train_example %}
<div class="content">
<p>
You can combine <strong>as many</strong> <code>icon</code> elements and text elements as you want:
Since <code>icon-text</code> is an <code>inline-flex</code> element, it can easily be inserted within any paragraph
of <strong>text</strong>.
</p>
</div>
{% include elements/snippet.html content=icon_text_train_example %}
{% include docs/elements/snippet.html content=icon_text_in_content_example %}
<div class="content">
<p>
Since <code>icon-text</code> is an <code>inline-flex</code> element, it can easily be inserted within any paragraph of <strong>text</strong>.
You can also turn the <code>icon-text</code> into a <code>flex</code> element simply by using a
<code>&lt;div&gt;</code> tag instead:
</p>
</div>
{% include elements/snippet.html content=icon_text_in_content_example %}
<div class="content">
<p>
You can also turn the <code>icon-text</code> into a <code>flex</code> element simply by using a <code>&lt;div&gt;</code> tag instead:
</p>
</div>
{% include elements/snippet.html content=icon_text_div_example %}
{% include docs/elements/snippet.html content=icon_text_div_example %}
<!-- -->
{% include elements/anchor.html name="Colors" %}
{% include docs/elements/anchor.html name="Colors" %}
<div class="content">
<p>
Since icon fonts are simply <strong>text</strong>, you can use the <a href="{{ site.url }}/documentation/helpers/color-helpers/">color helpers</a> to change the icon's color.
Since icon fonts are simply <strong>text</strong>, you can use the
<a href="{{ site.url }}/documentation/helpers/color-helpers/">color helpers</a>
to change the icon's color.
</p>
</div>
{% include elements/snippet.html content=icon_color_example %}
{% include docs/elements/snippet.html content=icon_color_example %}
<div class="content">
<p>
The same applies to the <code>icon-text</code>:
</p>
<p>The same applies to the <code>icon-text</code>:</p>
</div>
{% include elements/snippet.html content=icon_text_color_example %}
{% include docs/elements/snippet.html content=icon_text_color_example %}
<!-- -->
{% include elements/anchor.html name="Sizes" %}
{% include docs/elements/anchor.html name="Sizes" %}
<div class="content">
<p>
The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons" target="_blank">additional sizes</a>.
The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be
<em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of
<code>1em</code> by default (since it inherits the font size), but provides
<a
href="https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons"
target="_blank"
>additional sizes</a
>.
</p>
</div>
@@ -474,25 +479,15 @@ meta:
</table>
<!-- -->
{% include elements/anchor.html name="Font Awesome variations" %}
{% include docs/elements/anchor.html name="Font Awesome variations" %}
<div class="content">
<p>
Font Awesome also provides modifier classes for:
</p>
<p>Font Awesome also provides modifier classes for:</p>
<ul>
<li>
fixed width icons
</li>
<li>
bordered icons
</li>
<li>
animated icons
</li>
<li>
stacked icons
</li>
<li>fixed width icons</li>
<li>bordered icons</li>
<li>animated icons</li>
<li>stacked icons</li>
</ul>
</div>
@@ -506,9 +501,7 @@ meta:
</thead>
<tbody>
<tr>
<td>
Fixed width
</td>
<td>Fixed width</td>
<td>
<code>fas fa-fw</code>
</td>
@@ -519,9 +512,7 @@ meta:
</td>
</tr>
<tr>
<td>
Bordered
</td>
<td>Bordered</td>
<td>
<code>fas fa-border</code>
</td>
@@ -532,9 +523,7 @@ meta:
</td>
</tr>
<tr>
<td>
Animated
</td>
<td>Animated</td>
<td>
<code>fas fa-spinner fa-pulse</code>
</td>
@@ -545,11 +534,11 @@ meta:
</td>
</tr>
<tr>
<td rowspan="2">
Stacked
</td>
<td rowspan="2">Stacked</td>
<td>
{% highlight html %}{{ stacked_medium }}{% endhighlight %}
{% highlight html -%}
{{- stacked_medium -}}
{%- endhighlight %}
</td>
<td class="bd-icon-size">
<span class="icon is-medium">
@@ -562,7 +551,9 @@ meta:
</tr>
<tr>
<td>
{% highlight html %}{{ stacked_large }}{% endhighlight %}
{% highlight html -%}
{{- stacked_large -}}
{%- endhighlight %}
</td>
<td class="bd-icon-size">
<span class="icon is-large">
@@ -577,11 +568,12 @@ meta:
</table>
<!-- -->
{% include elements/anchor.html name="Material Design Icons" %}
{% include docs/elements/anchor.html name="Material Design Icons" %}
<div class="content">
<p>
Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
Here is how the <code>icon</code> container can be used with
<a href="https://materialdesignicons.com">Material Design Icons</a>.
</p>
</div>
@@ -780,16 +772,10 @@ meta:
</table>
<div class="content">
<p>
MDI also provides modifier classes for:
</p>
<p>MDI also provides modifier classes for:</p>
<ul>
<li>
light and dark icons
</li>
<li>
rotated &amp; flipped icons
</li>
<li>light and dark icons</li>
<li>rotated &amp; flipped icons</li>
</ul>
</div>
@@ -803,9 +789,7 @@ meta:
</thead>
<tbody>
<tr>
<td>
Light color
</td>
<td>Light color</td>
<td>
<code>mdi mdi-light</code>
</td>
@@ -816,9 +800,7 @@ meta:
</td>
</tr>
<tr>
<td>
Dark color
</td>
<td>Dark color</td>
<td>
<code>mdi mdi-dark</code>
</td>
@@ -829,9 +811,7 @@ meta:
</td>
</tr>
<tr>
<td>
Light inactive color
</td>
<td>Light inactive color</td>
<td>
<code>mdi mdi-light mdi-inactive</code>
</td>
@@ -842,9 +822,7 @@ meta:
</td>
</tr>
<tr>
<td>
Dark inactive color
</td>
<td>Dark inactive color</td>
<td>
<code>mdi mdi-dark mdi-inactive</code>
</td>
@@ -855,9 +833,7 @@ meta:
</td>
</tr>
<tr>
<td>
Flipped
</td>
<td>Flipped</td>
<td>
<code>mdi mdi-flip-h</code>
<br>
@@ -874,9 +850,7 @@ meta:
</td>
</tr>
<tr>
<td>
Rotated
</td>
<td>Rotated</td>
<td>
<code>mdi mdi-rotate-45</code>
<br>
@@ -902,12 +876,10 @@ meta:
</table>
<!-- -->
{% include elements/anchor.html name="Ionicons" %}
{% include docs/elements/anchor.html name="Ionicons" %}
<div class="content">
<p>
Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
</p>
<p>Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.</p>
</div>
<table class="table is-bordered">
@@ -1000,4 +972,4 @@ meta:
</tbody>
</table>
{% include components/variables.html type='element' %}

234
docs/documentation/elements/image.html
View File

@@ -1,58 +1,65 @@
---
title: Image
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: image
dimensions:
- 16
- 24
- 32
- 48
- 64
- 96
- 128
- 16
- 24
- 32
- 48
- 64
- 96
- 128
breadcrumb:
- home
- documentation
- elements
- elements-image
- home
- documentation
- elements
- elements-image
meta:
colors: false
sizes: false
variables: true
---
{% capture image %}
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/128x128.png">
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
</figure>
{% endcapture %}
{% capture rounded_image %}
<figure class="image is-128x128">
<img class="is-rounded" src="{{site.url}}/images/placeholders/128x128.png">
<img class="is-rounded" src="{{site.url}}/assets/images/placeholders/128x128.png" />
</figure>
{% endcapture %}
{% capture retina_image %}
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/256x256.png">
<img src="{{site.url}}/assets/images/placeholders/256x256.png" />
</figure>
{% endcapture %}
{% capture iframe_ratio %}
<figure class="image is-16by9">
<iframe class="has-ratio" width="640" height="360" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
<iframe
class="has-ratio"
width="640"
height="360"
src="https://www.youtube.com/embed/YE7VzlLtp-4"
frameborder="0"
allowfullscreen
></iframe>
</figure>
{% endcapture %}
<div class="content">
<p>Because images can take a few seconds to load (or not at all), use the <code>image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
<p>
Because images can take a few seconds to load (or not at all), use the
<code>image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't
broken because of image loading or image errors.
</p>
</div>
{% include elements/snippet.html content=image %}
{% include elements/anchor.html name="Fixed square images" %}
{% include docs/elements/snippet.html content=image %}
{% include docs/elements/anchor.html name="Fixed square images" %}
<div class="content">
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
@@ -62,9 +69,15 @@ meta:
<tbody>
{% 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>
<code>image is-{{ dimension }}x{{ dimension }}</code>
</td>
<td>
<figure class="image is-{{ dimension }}x{{ dimension }}">
<img
src="{{site.url}}/assets/images/placeholders/{{ dimension }}x{{ dimension }}.png"
>
</figure>
</td>
<td>{{ dimension }}x{{ dimension }}px</td>
</tr>
@@ -72,111 +85,184 @@ meta:
</tbody>
</table>
{% include elements/anchor.html name="Rounded images" %}
{% include docs/elements/anchor.html name="Rounded images" %}
<div class="content">
<p>You can also make rounded images, using <code>is-rounded</code> class:</p>
</div>
{% include elements/snippet.html content=rounded_image %}
{% include elements/anchor.html name="Retina images" %}
{% include docs/elements/snippet.html content=rounded_image %}
{% include docs/elements/anchor.html name="Retina images" %}
<div class="content">
<p>Because the image is fixed in size, you can use an image that is <strong>four times as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
<p>
Because the image is fixed in size, you can use an image that is
<strong>four times as big</strong>. So for example, in a <code>128x128</code> container, you can use a
<code>256x256</code> image, but resized to <strong>128x128</strong> pixels.
</p>
</div>
{% include elements/snippet.html content=retina_image %}
{% include elements/anchor.html name="Responsive images with ratios" %}
{% include docs/elements/snippet.html content=retina_image %}
{% include docs/elements/anchor.html name="Responsive images with ratios" %}
<div class="content">
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include <a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29#Still_photography">common aspect ratios in still photography</a>:</p>
<p>
If you don't know the exact dimensions but know the
<strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include
<a
href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29#Still_photography"
>common aspect ratios in still photography</a
>:
</p>
</div>
<table id="images" class="table is-bordered">
<tbody>
<tr>
<td><code>image is-square</code></td>
<td style="width: 10rem;"><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-square">
<img src="{{site.url}}/assets/images/placeholders/480x480.png">
</figure>
</td>
<td>Square (or 1 by 1)</td>
</tr>
<tr>
<td><code>image is-1by1</code></td>
<td style="width: 10rem;"><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-1by1">
<img src="{{site.url}}/assets/images/placeholders/480x480.png">
</figure>
</td>
<td>1 by 1</td>
</tr>
<tr>
<td><code>image is-5by4</code></td>
<td style="width: 10rem;"><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-5by4">
<img src="{{site.url}}/assets/images/placeholders/600x480.png">
</figure>
</td>
<td>5 by 4</td>
</tr>
<tr>
<td><code>image is-4by3</code></td>
<td style="width: 10rem;"><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-4by3">
<img src="{{site.url}}/assets/images/placeholders/640x480.png">
</figure>
</td>
<td>4 by 3</td>
</tr>
<tr>
<td><code>image is-3by2</code></td>
<td style="width: 10rem;"><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-3by2">
<img src="{{site.url}}/assets/images/placeholders/480x320.png">
</figure>
</td>
<td>3 by 2</td>
</tr>
<tr>
<td><code>image is-5by3</code></td>
<td style="width: 10rem;"><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-5by3">
<img src="{{site.url}}/assets/images/placeholders/800x480.png">
</figure>
</td>
<td>5 by 3</td>
</tr>
<tr>
<td><code>image is-16by9</code></td>
<td style="width: 10rem;"><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-16by9">
<img src="{{site.url}}/assets/images/placeholders/640x360.png">
</figure>
</td>
<td>16 by 9</td>
</tr>
<tr>
<td><code>image is-2by1</code></td>
<td style="width: 10rem;"><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-2by1">
<img src="{{site.url}}/assets/images/placeholders/640x320.png">
</figure>
</td>
<td>2 by 1</td>
</tr>
<tr>
<td><code>image is-3by1</code></td>
<td style="width: 10rem;"><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-3by1">
<img src="{{site.url}}/assets/images/placeholders/720x240.png">
</figure>
</td>
<td>3 by 1</td>
</tr>
</tr>
<tr>
<td><code>image is-4by5</code></td>
<td style="width: 10rem;"><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-4by5">
<img src="{{site.url}}/assets/images/placeholders/480x600.png">
</figure>
</td>
<td>4 by 5</td>
</tr>
</tr>
<tr>
<td><code>image is-3by4</code></td>
<td style="width: 10rem;"><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-3by4">
<img src="{{site.url}}/assets/images/placeholders/480x640.png">
</figure>
</td>
<td>3 by 4</td>
</tr>
<tr>
</tr>
<tr>
<td><code>image is-2by3</code></td>
<td style="width: 10rem;"><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-2by3">
<img src="{{site.url}}/assets/images/placeholders/320x480.png">
</figure>
</td>
<td>2 by 3</td>
</tr>
</tr>
<tr>
<td><code>image is-3by5</code></td>
<td style="width: 10rem;"><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-3by5">
<img src="{{site.url}}/assets/images/placeholders/480x800.png">
</figure>
</td>
<td>3 by 5</td>
</tr>
<tr>
<tr>
<td><code>image is-9by16</code></td>
<td style="width: 10rem;"><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-9by16">
<img src="{{site.url}}/assets/images/placeholders/360x640.png">
</figure>
</td>
<td>9 by 16</td>
</tr>
<tr>
</tr>
<tr>
<td><code>image is-1by2</code></td>
<td style="width: 10rem;"><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
<td style="width: 10rem">
<figure class="image is-1by2">
<img src="{{site.url}}/assets/images/placeholders/320x640.png">
</figure>
</td>
<td>1 by 2</td>
</tr>
<tr>
<td><code>image is-1by3</code></td>
<td style="width: 10rem;"><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
<td>1 by 3</td>
</tr>
</tbody>
</tr>
<tr>
<td><code>image is-1by3</code></td>
<td style="width: 10rem">
<figure class="image is-1by3">
<img src="{{site.url}}/assets/images/placeholders/240x720.png">
</figure>
</td>
<td>1 by 3</td>
</tr>
</tbody>
</table>
<div class="content">
@@ -186,21 +272,25 @@ meta:
</div>
<div class="content">
<p>The <code>image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
<br>If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.</p>
<p>
The <code>image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect
ratio. <br>
If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.
</p>
</div>
{% include elements/anchor.html name="Arbitrary ratios with any element" %}
{% include docs/elements/anchor.html name="Arbitrary ratios with any element" %}
<div class="content">
<p>
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>has-ratio</code> modifier to a resizable element.
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>,
simply by applying the <code>has-ratio</code> modifier to a resizable element.
</p>
<p>
For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see how the ratio is maintained.
For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see
how the ratio is maintained.
</p>
</div>
{% include elements/snippet.html content=iframe_ratio horizontal=true %}
{% include docs/elements/snippet.html content=iframe_ratio horizontal=true %}
{% include components/variables.html type='element' %}

77
docs/documentation/elements/notification.html
View File

@@ -1,34 +1,34 @@
---
title: Notification
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: notification
breadcrumb:
- home
- documentation
- elements
- elements-notification
- home
- documentation
- elements
- elements-notification
meta:
colors: true
sizes: false
variables: true
---
{% 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.
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.
</div>
{% endcapture %}
{% capture notification_js_html %}
<div class="notification">
<button class="delete"></button>
Lorem ipsum
</div>
{% endcapture %}
{% capture notification_js_code %}
document.addEventListener('DOMContentLoaded', () => {
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
@@ -43,58 +43,69 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="content">
<p>
The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the <code>delete</code> element.
The notification is a simple colored block meant to draw the attention to the user about something. As such, it can
be used as a pinned notification in the corner of the viewport. That's why it supports the use of the
<code>delete</code> element.
</p>
</div>
{% include elements/snippet.html content=notification %}
{% include elements/anchor.html name="Colors" %}
{% include docs/elements/snippet.html content=notification %}
{% include docs/elements/anchor.html name="Colors" %}
<div class="content">
<p>
The notification element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
The notification element is available in all the
<strong>different colors</strong> defined by the
<a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% for color in site.data.colors.justColors %}
{% capture foobar %}
{% capture foobar %}
<div class="notification is-{{ color }}">
<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.
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.
</div>
{% endcapture %}
{% include elements/snippet.html content=foobar %}
{% include docs/elements/snippet.html content=foobar %}
{% endfor %}
{% include elements/anchor.html name="Light colors" %}
{% include docs/elements/anchor.html name="Light colors" %}
<div class="content">
Each color also comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to obtain the light version of the notification.
Each color also comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to
obtain the light version of the notification.
</div>
{% for color in site.data.colors.justColors %}
{% capture foobar %}
{% capture foobar %}
<div class="notification is-{{ color }} is-light">
<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.
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.
</div>
{% endcapture %}
{% include elements/snippet.html content=foobar %}
{% include docs/elements/snippet.html content=foobar %}
{% endfor %}
{% include elements/anchor.html name="JavaScript example" %}
{% include docs/elements/anchor.html name="JavaScript example" %}
<div class="content">
<p>
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handler for Bulma <code>delete</code> elements, anywhere on the page, in vanilla JavaScript.
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example,
which sets the <code>click</code> handler for Bulma <code>delete</code> elements, anywhere on the page, in vanilla
JavaScript.
</p>
{% highlight html %}{{ notification_js_html }}{% endhighlight %}
{% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
{% highlight html -%}
{{- notification_js_html -}}
{%- endhighlight %}
{% highlight javascript -%}
{{- notification_js_code -}}
{%- endhighlight %}
</div>
{% include components/variables.html type='element' %}

62
docs/documentation/elements/progress.html
View File

@@ -1,23 +1,22 @@
---
title: Progress Bar
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: progress
breadcrumb:
- home
- documentation
- elements
- elements-progress
- home
- documentation
- elements
- elements-progress
meta:
colors: true
sizes: true
variables: true
---
{% capture progress %}
<progress class="progress" value="15" max="100">15%</progress>
{% endcapture %}
{% capture progress_indeterminate %}
<progress class="progress is-small is-primary" max="100">15%</progress>
<progress class="progress is-danger" max="100">30%</progress>
@@ -27,46 +26,53 @@ meta:
<div class="content">
<p>
The Bulma progress bar is a simple CSS class that styles the native <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress" target="_blank"><code>&lt;progress&gt;</code> HTML element</a>.
The Bulma progress bar is a simple CSS class that styles the native
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress"
target="_blank"
><code>&lt;progress&gt;</code> HTML element</a
>.
</p>
</div>
{% include elements/snippet.html content=progress %}
{% include elements/anchor.html name="Colors" %}
{% include docs/elements/snippet.html content=progress %}
{% include docs/elements/anchor.html name="Colors" %}
<div class="content">
<p>
The progress bar element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
The progress bar element is available in all the
<strong>different colors</strong> defined by the
<a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
</p>
</div>
{% for color in site.data.colors.justColors %}
{% capture foobar %}
{% assign n = forloop.index | times: 15 %}
<progress class="progress is-{{ color }}" value="{{ n }}" max="100">{{ n }}%</progress>
{% capture foobar %} {% assign n
= forloop.index | times: 15 %}
<progress class="progress is-{{ color }}" value="{{ n }}" max="100">
{{ n }}%
</progress>
{% endcapture %}
{% include elements/snippet.html content=foobar %}
{% include docs/elements/snippet.html content=foobar %}
{% endfor %}
{% include elements/anchor.html name="Sizes" %}
{% include docs/elements/anchor.html name="Sizes" %}
{% for size in site.data.sizes %}
{% capture foobar %}
{% assign n = forloop.index | times: 20 %}
<progress class="progress is-{{ size }}" value="{{ n }}" max="100">{{ n }}%</progress>
{% capture foobar %} {% assign n = forloop.index | times: 20
%}
<progress class="progress is-{{ size }}" value="{{ n }}" max="100">
{{ n }}%
</progress>
{% endcapture %}
{% include elements/snippet.html content=foobar %}
{% include docs/elements/snippet.html content=foobar %}
{% endfor %}
{% include elements/anchor.html name="Indeterminate" %}
{% include docs/elements/anchor.html name="Indeterminate" %}
<div class="content">
<p>
If you don't set the HTML <code>value</code> attribute, you can display an <strong>indeterminate</strong> progress bar. It's used to show that some progress is going on, but the total duration is not yet determined.
If you don't set the HTML <code>value</code> attribute, you can display an <strong>indeterminate</strong> progress
bar. It's used to show that some progress is going on, but the total duration is not yet determined.
</p>
</div>
{% include elements/snippet.html content=progress_indeterminate %}
{% include docs/elements/snippet.html content=progress_indeterminate %}
{% include components/variables.html type='element' %}

376
docs/documentation/elements/table.html
View File

@@ -1,19 +1,19 @@
---
title: Table
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: table
breadcrumb:
- home
- documentation
- elements
- elements-table
- home
- documentation
- elements
- elements-table
meta:
colors: false
sizes: false
variables: true
---
{% capture table_example %}
<table class="table">
<thead>
@@ -49,7 +49,13 @@ meta:
<tbody>
<tr>
<th>1</th>
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
<td>
<a
href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
title="Leicester City F.C."
>Leicester City</a
>
<strong>(C)</strong>
</td>
<td>38</td>
<td>23</td>
@@ -59,11 +65,24 @@ meta:
<td>36</td>
<td>+32</td>
<td>81</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="2016–17 UEFA Champions League"
>Champions League group stage</a
>
</td>
</tr>
<tr>
<th>2</th>
<td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Arsenal_F.C."
title="Arsenal F.C."
>Arsenal</a
>
</td>
<td>38</td>
<td>20</td>
<td>11</td>
@@ -72,11 +91,24 @@ meta:
<td>36</td>
<td>+29</td>
<td>71</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="2016–17 UEFA Champions League"
>Champions League group stage</a
>
</td>
</tr>
<tr>
<th>3</th>
<td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C."
title="Tottenham Hotspur F.C."
>Tottenham Hotspur</a
>
</td>
<td>38</td>
<td>19</td>
<td>13</td>
@@ -85,11 +117,24 @@ meta:
<td>35</td>
<td>+34</td>
<td>70</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
title="2016–17 UEFA Champions League"
>Champions League group stage</a
>
</td>
</tr>
<tr class="is-selected">
<th>4</th>
<td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Manchester_City_F.C."
title="Manchester City F.C."
>Manchester City</a
>
</td>
<td>38</td>
<td>19</td>
<td>9</td>
@@ -98,11 +143,24 @@ meta:
<td>41</td>
<td>+30</td>
<td>66</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="2016–17 UEFA Champions League">Champions League play-off round</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round"
title="2016–17 UEFA Champions League"
>Champions League play-off round</a
>
</td>
</tr>
<tr>
<th>5</th>
<td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Manchester_United_F.C."
title="Manchester United F.C."
>Manchester United</a
>
</td>
<td>38</td>
<td>19</td>
<td>9</td>
@@ -111,11 +169,24 @@ meta:
<td>35</td>
<td>+14</td>
<td>66</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
title="2016–17 UEFA Europa League"
>Europa League group stage</a
>
</td>
</tr>
<tr>
<th>6</th>
<td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Southampton_F.C."
title="Southampton F.C."
>Southampton</a
>
</td>
<td>38</td>
<td>18</td>
<td>9</td>
@@ -124,11 +195,24 @@ meta:
<td>41</td>
<td>+18</td>
<td>63</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
title="2016–17 UEFA Europa League"
>Europa League group stage</a
>
</td>
</tr>
<tr>
<th>7</th>
<td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/West_Ham_United_F.C."
title="West Ham United F.C."
>West Ham United</a
>
</td>
<td>38</td>
<td>16</td>
<td>14</td>
@@ -137,11 +221,24 @@ meta:
<td>51</td>
<td>+14</td>
<td>62</td>
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
<td>
Qualification for the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round"
title="2016–17 UEFA Europa League"
>Europa League third qualifying round</a
>
</td>
</tr>
<tr>
<th>8</th>
<td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Liverpool_F.C."
title="Liverpool F.C."
>Liverpool</a
>
</td>
<td>38</td>
<td>16</td>
<td>12</td>
@@ -154,7 +251,13 @@ meta:
</tr>
<tr>
<th>9</th>
<td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Stoke_City_F.C."
title="Stoke City F.C."
>Stoke City</a
>
</td>
<td>38</td>
<td>14</td>
<td>9</td>
@@ -167,7 +270,13 @@ meta:
</tr>
<tr>
<th>10</th>
<td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Chelsea_F.C."
title="Chelsea F.C."
>Chelsea</a
>
</td>
<td>38</td>
<td>12</td>
<td>14</td>
@@ -180,7 +289,13 @@ meta:
</tr>
<tr>
<th>11</th>
<td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Everton_F.C."
title="Everton F.C."
>Everton</a
>
</td>
<td>38</td>
<td>11</td>
<td>14</td>
@@ -193,7 +308,13 @@ meta:
</tr>
<tr>
<th>12</th>
<td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C."
title="Swansea City A.F.C."
>Swansea City</a
>
</td>
<td>38</td>
<td>12</td>
<td>11</td>
@@ -206,7 +327,13 @@ meta:
</tr>
<tr>
<th>13</th>
<td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Watford_F.C."
title="Watford F.C."
>Watford</a
>
</td>
<td>38</td>
<td>12</td>
<td>9</td>
@@ -219,7 +346,13 @@ meta:
</tr>
<tr>
<th>14</th>
<td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C."
title="West Bromwich Albion F.C."
>West Bromwich Albion</a
>
</td>
<td>38</td>
<td>10</td>
<td>13</td>
@@ -232,7 +365,13 @@ meta:
</tr>
<tr>
<th>15</th>
<td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C."
title="Crystal Palace F.C."
>Crystal Palace</a
>
</td>
<td>38</td>
<td>11</td>
<td>9</td>
@@ -245,7 +384,13 @@ meta:
</tr>
<tr>
<th>16</th>
<td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth"
title="A.F.C. Bournemouth"
>AFC Bournemouth</a
>
</td>
<td>38</td>
<td>11</td>
<td>9</td>
@@ -258,7 +403,13 @@ meta:
</tr>
<tr>
<th>17</th>
<td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
<td>
<a
href="https://en.wikipedia.org/wiki/Sunderland_A.F.C."
title="Sunderland A.F.C."
>Sunderland</a
>
</td>
<td>38</td>
<td>9</td>
<td>12</td>
@@ -271,7 +422,13 @@ meta:
</tr>
<tr>
<th>18</th>
<td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
<td>
<a
href="https://en.wikipedia.org/wiki/Newcastle_United_F.C."
title="Newcastle United F.C."
>Newcastle United</a
>
<strong>(R)</strong>
</td>
<td>38</td>
<td>9</td>
@@ -281,11 +438,24 @@ meta:
<td>65</td>
<td>−21</td>
<td>37</td>
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="2016–17 Football League Championship"
>Football League Championship</a
>
</td>
</tr>
<tr>
<th>19</th>
<td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
<td>
<a
href="https://en.wikipedia.org/wiki/Norwich_City_F.C."
title="Norwich City F.C."
>Norwich City</a
>
<strong>(R)</strong>
</td>
<td>38</td>
<td>9</td>
@@ -295,10 +465,24 @@ meta:
<td>67</td>
<td>−28</td>
<td>34</td>
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td> </tr>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="2016–17 Football League Championship"
>Football League Championship</a
>
</td>
</tr>
<tr>
<th>20</th>
<td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
<td>
<a
href="https://en.wikipedia.org/wiki/Aston_Villa_F.C."
title="Aston Villa F.C."
>Aston Villa</a
>
<strong>(R)</strong>
</td>
<td>38</td>
<td>3</td>
@@ -308,39 +492,63 @@ meta:
<td>76</td>
<td>−49</td>
<td>17</td>
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
<td>
Relegation to the
<a
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
title="2016–17 Football League Championship"
>Football League Championship</a
>
</td>
</tr>
</tbody>
</table>
{% endcapture %}
{% capture table_colors %}
<table class="table is-bordered">
<tbody>
{% for color in site.data.colors.justColors %}
<tr>
<th class="is-{{ color }}">{{ color | capitalize }} th cell</th>
<td>Two</td>
<td class="is-{{ color }}">{{ color | capitalize }} td cell</td>
<td>Four</td>
<td>Five</td>
</tr>
<tr class="is-{{ color }}">
<th>{{ color | capitalize }} row</th>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endcapture %}
<div class="content">
<p>
You can create a <strong>Bulma table</strong> simply by attaching a single <code>table</code> CSS class on a <code>&lt;table&gt;</code> HTML element with the following structure:
You can create a <strong>Bulma table</strong> simply by attaching a single <code>table</code> CSS class on a
<code>&lt;table&gt;</code> HTML element with the following structure:
</p>
<ul>
<li>
<code>&lt;table class="table"&gt;</code> as the main <strong>container</strong>
<code>&lt;table class="table"&gt;</code> as the main
<strong>container</strong>
<ul>
<li>
<code>thead</code> the optional <strong>top</strong> part of the table
</li>
<li>
<code>tfoot</code> the optional <strong>bottom</strong> part of the table
</li>
<li><code>thead</code> the optional <strong>top</strong> part of the table</li>
<li><code>tfoot</code> the optional <strong>bottom</strong> part of the table</li>
<li>
<code>tbody</code> the main <strong>content</strong> of the table
<ul>
<li>
<code>tr</code> each table <strong>row</strong>
<ul>
<li>
<code>th</code> a table cell <strong>heading</strong>
</li>
<li>
<code>td</code> a table <strong>cell</strong>
</li>
<li><code>th</code> a table cell <strong>heading</strong></li>
<li><code>td</code> a table <strong>cell</strong></li>
</ul>
</li>
</ul>
@@ -349,13 +557,43 @@ meta:
</li>
</ul>
<p>
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a
<code>&lt;tr&gt;</code>
</p>
</div>
{% include elements/snippet.html content=table_example horizontal=true more=true %}
{%
include docs/elements/snippet.html content=table_example horizontal=true
more=true
%}
{% include elements/anchor.html name="Modifiers" %}
{% include docs/elements/anchor.html name="Colors" %}
<div class="content">
<p>
You can change the color of a single <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> cell, or a whole
<code>&lt;tr&gt;</code> row, by adding one of the color modifiers:
</p>
<ul>
<li><code>is-primary</code></li>
<li><code>is-link</code></li>
<li><code>is-info</code></li>
<li><code>is-success</code></li>
<li><code>is-warning</code></li>
<li><code>is-danger</code></li>
<li><code>is-black</code></li>
<li><code>is-dark</code></li>
<li><code>is-light</code></li>
<li><code>is-white</code></li>
</ul>
</div>
{%
include docs/elements/snippet.html content=table_colors horizontal=true
more=true
%}
{% include docs/elements/anchor.html name="Modifiers" %}
{% capture scrollable_table %}
<div class="table-container">
@@ -367,14 +605,14 @@ meta:
{% capture simple_scrollable_table_example %}
<div class="table-container">
<table class="table is-bordered is-striped ">
<table class="table is-bordered is-striped">
<tbody>
{% for i in (1..5) %}
<tr>
{% for j in (1..100) %}
<td>{{ j | times: i }}</td>
{% endfor %}
</tr>
<tr>
{% for j in (1..100) %}
<td>{{ j | times: i }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
@@ -578,7 +816,9 @@ meta:
<code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
</div>
<div class="column is-half">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<table
class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"
>
<thead>
<tr>
<th>One</th>
@@ -611,14 +851,18 @@ meta:
</div>
</div>
{% include elements/anchor.html name="Table container" %}
{% include docs/elements/anchor.html name="Table container" %}
<p class="content">
You can create a <strong>scrollable table</strong> by wrapping a <code>table</code> in a <code>table-container</code> element:
You can create a <strong>scrollable table</strong> by wrapping a <code>table</code> in a
<code>table-container</code> element:
</p>
{% highlight html %}{{ scrollable_table }}{% endhighlight %}
{% highlight html -%}
{{- scrollable_table -}}
{%- endhighlight %}
{{ simple_scrollable_table_example }}
{% include components/variables.html type='element' %}
{%
include docs/components/variables.html
type='element'
%}

308
docs/documentation/elements/tag.html
View File

@@ -1,25 +1,22 @@
---
title: Tags
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: tag
breadcrumb:
- home
- documentation
- elements
- elements-tag
- home
- documentation
- elements
- elements-tag
meta:
colors: true
sizes: true
variables: true
---
{% capture tag %}
<span class="tag">
Tag label
</span>
<span class="tag"> Tag label </span>
{% endcapture %}
{% capture tags_colors %}
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
@@ -32,7 +29,6 @@ meta:
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
{% endcapture %}
{% capture tags_light_colors %}
<span class="tag is-primary is-light">Primary</span>
<span class="tag is-link is-light">Link</span>
@@ -41,13 +37,11 @@ meta:
<span class="tag is-warning is-light">Warning</span>
<span class="tag is-danger is-light">Danger</span>
{% endcapture %}
{% capture sizes %}
<span class="tag is-link is-normal">Normal</span>
<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>
{% endcapture %}
{% capture are_medium %}
<div class="tags are-medium">
<span class="tag">All</span>
@@ -55,7 +49,6 @@ meta:
<span class="tag">Size</span>
</div>
{% endcapture %}
{% capture are_large %}
<div class="tags are-large">
<span class="tag">All</span>
@@ -63,7 +56,6 @@ meta:
<span class="tag">Size</span>
</div>
{% endcapture %}
{% capture are_medium_one_large %}
<div class="tags are-medium">
<span class="tag">Medium</span>
@@ -73,11 +65,22 @@ meta:
<span class="tag">Medium</span>
</div>
{% endcapture %}
{% capture hoverable_tags %}
<a class="tag">Hover me</a>
<button class="tag">Hover me</button>
<div class="tag is-hoverable">Hover me</div>
{% endcapture %}
{% capture hoverable_colored_tags %}
<a class="tag is-link">Hover me</a>
<button class="tag is-primary">Hover me</button>
<div class="tag is-hoverable is-success">Hover me</div>
<a class="tag is-info">Hover me</a>
<button class="tag is-warning">Hover me</button>
<div class="tag is-hoverable is-danger">Hover me</div>
{% endcapture %}
{% capture rounded %}
<span class="tag is-rounded">Rounded</span>
{% endcapture %}
{% capture delete %}
<span class="tag is-success">
Bar
@@ -92,11 +95,9 @@ meta:
<button class="delete"></button>
</span>
{% endcapture %}
{% capture is_delete %}
<a class="tag is-delete"></a>
{% endcapture %}
{% capture tags %}
<div class="tags">
<span class="tag">One</span>
@@ -104,7 +105,6 @@ meta:
<span class="tag">Three</span>
</div>
{% endcapture %}
{% capture tags_multiple %}
<div class="tags">
<span class="tag">One</span>
@@ -129,14 +129,12 @@ meta:
<span class="tag">Twenty</span>
</div>
{% endcapture %}
{% capture tags_addons %}
<div class="tags has-addons">
<span class="tag">Package</span>
<span class="tag is-primary">Bulma</span>
</div>
{% endcapture %}
{% capture tags_field_addons %}
<div class="field is-grouped is-grouped-multiline">
<div class="control">
@@ -161,14 +159,12 @@ meta:
</div>
</div>
{% endcapture %}
{% capture tags_delete_addons %}
<div class="tags has-addons">
<span class="tag is-danger">Alex Smith</span>
<a class="tag is-delete"></a>
</div>
{% endcapture %}
{% capture tags_blog_addons %}
<div class="field is-grouped is-grouped-multiline">
<div class="control">
@@ -224,190 +220,164 @@ meta:
<div class="content">
<p>
The Bulma <strong>tag</strong> is a small but versatile element. It's very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.
The Bulma <strong>tag</strong> is a small but versatile element. It's very useful as a way to attach information to
a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists
of items.
</p>
</div>
<div class="columns">
<div class="column is-4">
By default, a <strong>tag</strong> is a 1.5rem high label.
</div>
<div class="column is-4">By default, a <strong>tag</strong> is a 1.5rem high label.</div>
<div class="column is-2">
<span class="tag">
Tag label
</span>
<span class="tag"> Tag label </span>
</div>
<div class="column is-6">
{% highlight html %}{{ tag }}{% endhighlight %}
{% highlight html -%}
{{- tag -}}
{%- endhighlight %}
</div>
</div>
{% include elements/anchor.html name="Colors" %}
{% include docs/elements/anchor.html name="Colors" %}
<div class="columns">
<div class="column is-4">
Like with buttons, there are <strong>10 different colors</strong> available.
</div>
<div class="column is-4">Like with buttons, there are <strong>10 different colors</strong> available.</div>
<div class="column is-2">
<p class="field">
<span class="tag is-black">
Black
</span>
<span class="tag is-black"> Black </span>
</p>
<p class="field">
<span class="tag is-dark">
Dark
</span>
<span class="tag is-dark"> Dark </span>
</p>
<p class="field">
<span class="tag is-light">
Light
</span>
<span class="tag is-light"> Light </span>
</p>
<p class="field">
<span class="tag is-white">
White
</span>
<span class="tag is-white"> White </span>
</p>
<p class="field">
<span class="tag is-primary">
Primary
</span>
<span class="tag is-primary"> Primary </span>
</p>
<p class="field">
<span class="tag is-link">
Link
</span>
<span class="tag is-link"> Link </span>
</p>
<p class="field">
<span class="tag is-info">
Info
</span>
<span class="tag is-info"> Info </span>
</p>
<p class="field">
<span class="tag is-success">
Success
</span>
<span class="tag is-success"> Success </span>
</p>
<p class="field">
<span class="tag is-warning">
Warning
</span>
<span class="tag is-warning"> Warning </span>
</p>
<span class="tag is-danger">
Danger
</span>
<span class="tag is-danger"> Danger </span>
</div>
<div class="column is-6">
{% highlight html %}{{ tags_colors }}{% endhighlight %}
{% highlight html -%}
{{- tags_colors -}}
{%- endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-4">
<p>
You can now choose the <strong>light version</strong> of a color.
</p>
<p>You can now choose the <strong>light version</strong> of a color.</p>
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-primary is-light">
Primary
</span>
<span class="tag is-primary is-light"> Primary </span>
</p>
<p class="field">
<span class="tag is-link is-light">
Link
</span>
<span class="tag is-link is-light"> Link </span>
</p>
<p class="field">
<span class="tag is-info is-light">
Info
</span>
<span class="tag is-info is-light"> Info </span>
</p>
<p class="field">
<span class="tag is-success is-light">
Success
</span>
<span class="tag is-success is-light"> Success </span>
</p>
<p class="field">
<span class="tag is-warning is-light">
Warning
</span>
<span class="tag is-warning is-light"> Warning </span>
</p>
<span class="tag is-danger is-light">
Danger
</span>
<span class="tag is-danger is-light"> Danger </span>
</div>
<div class="column is-6">
{% highlight html %}{{ tags_light_colors }}{% endhighlight %}
{% highlight html -%}
{{- tags_light_colors -}}
{%- endhighlight %}
</div>
</div>
{% include elements/anchor.html name="Sizes" %}
{% include docs/elements/anchor.html name="Sizes" %}
<div class="columns">
<div class="column is-4">
<div class="content">
<p>The tag comes in <strong>3 different</strong> sizes.</p>
<p>
The tag comes in <strong>3 different</strong> sizes.
</p>
<p>
While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you need to reset the tag to its normal size.
While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case
you need to reset the tag to its normal size.
</p>
</div>
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-link is-normal">
Normal
</span>
<span class="tag is-link is-normal"> Normal </span>
</p>
<p class="field">
<span class="tag is-primary is-medium">
Medium
</span>
<span class="tag is-primary is-medium"> Medium </span>
</p>
<p class="field">
<span class="tag is-info is-large">
Large
</span>
<span class="tag is-info is-large"> Large </span>
</p>
</div>
<div class="column is-6">
{% highlight html %}{{ sizes }}{% endhighlight %}
{% highlight html -%}
{{- sizes -}}
{%- endhighlight %}
</div>
</div>
<div class="content">
<p>
You can change the size of <strong>all</strong> tags at once:
</p>
<p>You can change the size of <strong>all</strong> tags at once:</p>
</div>
{% include elements/snippet.html content=are_medium %}
{% include elements/snippet.html content=are_large %}
{% include docs/elements/snippet.html content=are_medium %}
{% include docs/elements/snippet.html content=are_large %}
<div class="content">
<p>
You can however keep the original size of a <strong>subset</strong> of tags, simply by applying one of its modifier class:
You can however keep the original size of a <strong>subset</strong> of tags, simply by applying one of its modifier
class:
</p>
</div>
{% include elements/snippet.html content=are_medium_one_large %}
{% include docs/elements/snippet.html content=are_medium_one_large %}
{% include elements/anchor.html name="Modifiers" %}
{% include docs/elements/anchor.html name="Hover/Active state" %}
<div class="content">
<p>A tag element will react to the <code>:hover</code> and <code>:active</code> states if:</p>
<ul>
<li>it's an anchor element <code>&lt;a class="tag"&gt;</code></li>
<li>it's a button element <code>&lt;button class="tag"&gt;</code></li>
<li>it has the <code>is-hoverable</code> modifier class <code>&lt;div class="tag is-hoverable"&gt;</code></li>
</ul>
</div>
{% include docs/elements/snippet.html content=hoverable_tags %}
{% include docs/elements/anchor.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-2">{{ rounded }}</div>
<div class="column is-6">
{% highlight html %}{{ rounded }}{% endhighlight %}
{% highlight html -%}
{{- rounded -}}
{%- endhighlight %}
</div>
</div>
@@ -415,20 +385,30 @@ meta:
<div class="column is-4">
You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
</div>
<div class="column is-2">
{{ is_delete }}
</div>
<div class="column is-2">{{ is_delete }}</div>
<div class="column is-6">
{% highlight html %}{{ is_delete }}{% endhighlight %}
{% highlight html -%}
{{- is_delete -}}
{%- endhighlight %}
</div>
</div>
{% include elements/anchor.html name="Combinations" %}
{% include docs/elements/anchor.html name="Combinations" %}
<div class="columns">
<div class="column is-4">
You can append a <strong>delete button</strong>.
<div class="column is-4">You can create <strong>hoverable colored</strong> tags.</div>
<div class="column is-2">
{{ hoverable_colored_tags }}
</div>
<div class="column is-6">
{% highlight html -%}
{{- hoverable_colored_tags -}}
{%- endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-4">You can append a <strong>delete button</strong>.</div>
<div class="column is-2">
<p class="field">
<span class="tag is-success">
@@ -450,25 +430,25 @@ meta:
</p>
</div>
<div class="column is-6">
{% highlight html %}{{ delete }}{% endhighlight %}
{% highlight html -%}
{{- delete -}}
{%- endhighlight %}
</div>
</div>
{% include elements/anchor.html name="List of tags" %}
{% include docs/elements/anchor.html name="List of tags" %}
<div class="columns">
<div class="column">
<div class="content">
<p>
You can now create a <strong>list of tags</strong> with the <code>tags</code> container.
</p>
</div>
<div class="bd-example">
{{ tags }}
<p>You can now create a <strong>list of tags</strong> with the <code>tags</code> container.</p>
</div>
<div class="bd-example">{{ tags }}</div>
</div>
<div class="column">
{% highlight html %}{{ tags }}{% endhighlight %}
{% highlight html -%}
{{- tags -}}
{%- endhighlight %}
</div>
</div>
@@ -476,49 +456,46 @@ meta:
<div class="column">
<div class="content">
<p>
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while
keeping all tags <strong>evenly spaced</strong>.
</p>
</div>
<div class="bd-example">
{{ tags_multiple }}
</div>
<div class="bd-example">{{ tags_multiple }}</div>
</div>
<div class="column bd-highlight-full">
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
{% highlight html -%}
{{- tags_multiple -}}
{%- endhighlight %}
</div>
</div>
{% include elements/anchor.html name="Tag addons" %}
{% include docs/elements/anchor.html name="Tag addons" %}
<div class="columns">
<div class="column">
<div class="content">
<p>
You can <strong>attach tags together</strong> with the <code>has-addons</code> modifier.
</p>
</div>
<div class="bd-example">
{{ tags_addons }}
<p>You can <strong>attach tags together</strong> with the <code>has-addons</code> modifier.</p>
</div>
<div class="bd-example">{{ tags_addons }}</div>
</div>
<div class="column bd-highlight-full">
{% highlight html %}{{ tags_addons }}{% endhighlight %}
{% highlight html -%}
{{- tags_addons -}}
{%- endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
</p>
</div>
<div class="bd-example">
{{ tags_delete_addons }}
<p>You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.</p>
</div>
<div class="bd-example">{{ tags_delete_addons }}</div>
</div>
<div class="column bd-highlight-full">
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
{% highlight html -%}
{{- tags_delete_addons -}}
{%- endhighlight %}
</div>
</div>
@@ -526,32 +503,31 @@ meta:
<div class="column">
<div class="content">
<p>
If you want to attach <code>tags</code> containers <strong>together</strong>, simply use the <code>field</code> element with the <code>is-grouped</code> and <code>is-grouped-multiline</code> modifiers.
If you want to attach <code>tags</code> containers <strong>together</strong>, simply use the
<code>field</code> element with the <code>is-grouped</code> and <code>is-grouped-multiline</code> modifiers.
</p>
</div>
<div class="bd-example">
{{ tags_field_addons }}
</div>
<div class="bd-example">{{ tags_field_addons }}</div>
</div>
<div class="column bd-highlight-full">
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
{% highlight html -%}
{{- tags_field_addons -}}
{%- endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
This can be useful for a long list of <strong>blog tags</strong>.
</p>
</div>
<div class="bd-example">
{{ tags_blog_addons }}
<p>This can be useful for a long list of <strong>blog tags</strong>.</p>
</div>
<div class="bd-example">{{ tags_blog_addons }}</div>
</div>
<div class="column">
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
{% highlight html -%}
{{- tags_blog_addons -}}
{%- endhighlight %}
</div>
</div>
{% include components/variables.html type='element' %}

49
docs/documentation/elements/title.html
View File

@@ -1,24 +1,23 @@
---
title: Title and Subtitle
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: title
breadcrumb:
- home
- documentation
- elements
- elements-title
- home
- documentation
- elements
- elements-title
meta:
colors: false
sizes: true
variables: true
---
{% capture default %}
<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>
{% endcapture %}
{% capture title_sizes %}
<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
@@ -27,7 +26,6 @@ meta:
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>
{% endcapture %}
{% capture subtitle_sizes %}
<h1 class="subtitle is-1">Subtitle 1</h1>
<h2 class="subtitle is-2">Subtitle 2</h2>
@@ -36,7 +34,6 @@ meta:
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>
{% endcapture %}
{% capture combine %}
<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
@@ -47,7 +44,6 @@ meta:
<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
{% endcapture %}
{% capture spaced %}
<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
@@ -78,11 +74,13 @@ meta:
<p class="subtitle">Subtitle</p>
</div>
<div class="column is-5">
{% highlight html %}{{ default }}{% endhighlight %}
{% highlight html -%}
{{- default -}}
{%- endhighlight %}
</div>
</div>
{% include elements/anchor.html name="Sizes" %}
{% include docs/elements/anchor.html name="Sizes" %}
<div class="columns">
<div class="column is-3">
@@ -97,7 +95,9 @@ meta:
<p class="title is-6">Title 6</p>
</div>
<div class="column is-5">
{% highlight html %}{{ title_sizes }}{% endhighlight %}
{% highlight html -%}
{{- title_sizes -}}
{%- endhighlight %}
</div>
</div>
@@ -112,7 +112,9 @@ meta:
<p class="subtitle is-6">Subtitle 6</p>
</div>
<div class="column is-5">
{% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
{% highlight html -%}
{{- subtitle_sizes -}}
{%- endhighlight %}
</div>
</div>
@@ -122,7 +124,10 @@ meta:
<div class="column is-3">
<div class="content">
<p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
<p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
<p>
As a rule of thumb, it is recommended to use a size difference of
<strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.
</p>
</div>
</div>
<div class="column is-4">
@@ -140,7 +145,9 @@ meta:
</div>
</div>
<div class="column is-5">
{% highlight html %}{{ combine }}{% endhighlight %}
{% highlight html -%}
{{- combine -}}
{%- endhighlight %}
</div>
</div>
@@ -150,9 +157,9 @@ meta:
<div class="column is-3">
<div class="content">
<p>
<span class="tag is-success">New!</span>
You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier
on the first element.
</p>
<p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
</div>
</div>
<div class="column is-4">
@@ -170,8 +177,10 @@ meta:
</div>
</div>
<div class="column is-5">
{% highlight html %}{{ spaced }}{% endhighlight %}
{% highlight html -%}
{{- spaced -}}
{%- endhighlight %}
</div>
</div>
{% include components/variables.html type='element' %}