mirror of
https://github.com/jgthms/bulma
synced 2026-03-17 19:04:30 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
Jeremy Thomas
@@ -3,6 +3,7 @@ title: Columns
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -51,6 +51,6 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -142,7 +142,7 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_gapless }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -180,7 +180,7 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -242,11 +242,11 @@ breadcrumb:
|
||||
<p>
|
||||
You can define a column gap for each viewport size:
|
||||
</p>
|
||||
|
||||
<p>For example, here's how it looks with the following modifiers: <code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code></p>
|
||||
</div>
|
||||
|
||||
For example, here's how it looks with the following modifiers: <code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_variable_responsive_gaps }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -77,6 +77,6 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_nested_example }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -278,7 +278,7 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -609,7 +609,7 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -634,7 +634,7 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Components
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -217,4 +217,4 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -51,11 +51,11 @@ meta:
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<a href="#" class="card-header-icon" aria-label="more options">
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
</button>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
@@ -140,37 +140,83 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include elements/snippet.html content=card_example size="1-2" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_example}}{% endhighlight %}
|
||||
</div>
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Card parts" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-header</code> can have a <strong>title</strong> and a Bulma <code>icon</code>:</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% capture card_image %}
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Card header
|
||||
</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_header_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_header_example}}{% endhighlight %}
|
||||
</div>
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-image</code> is a container for a Bulma <code>image</code> element:</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
{{card_title_example}}
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{card_title_example}}{% endhighlight %}
|
||||
{% capture card_image %}
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-content</code> is the main part, ideal for <strong>text content</strong>, thanks to its padding:</p>
|
||||
</div>
|
||||
|
||||
{% capture card_image %}
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-footer</code> acts as a list of for several <code>card-footer-item</code> elements:</p>
|
||||
</div>
|
||||
|
||||
{% capture card_footer %}
|
||||
<div class="card">
|
||||
<footer class="card-footer">
|
||||
<a href="#" class="card-footer-item">Save</a>
|
||||
<a href="#" class="card-footer-item">Edit</a>
|
||||
<a href="#" class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=card_footer size="1-2" %}
|
||||
|
||||
{% include elements/anchor.html name="Examples" %}
|
||||
|
||||
{% include elements/snippet.html content=card_header_example size="1-2" %}
|
||||
{% include elements/snippet.html content=card_title_example size="1-2" %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -229,14 +229,7 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{dropdown_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include elements/snippet.html content=dropdown_example %}
|
||||
|
||||
{% include elements/anchor.html name="Dropdown content" %}
|
||||
|
||||
@@ -246,14 +239,7 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_content_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_content_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include elements/snippet.html content=dropdown_content_example %}
|
||||
|
||||
{% include elements/anchor.html name="Hoverable or Toggable" %}
|
||||
|
||||
@@ -277,14 +263,9 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{dropdown_click_example}}{{dropdown_info_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include elements/snippet.html content=dropdown_click_example more=true %}
|
||||
|
||||
{% include elements/snippet.html content=dropdown_info_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Right aligned" %}
|
||||
|
||||
@@ -294,25 +275,9 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
{{dropdown_left_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{{dropdown_right_example}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_right_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include elements/snippet.html content=dropdown_left_example more=true %}
|
||||
|
||||
{% include elements/snippet.html content=dropdown_right_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Dropup" %}
|
||||
|
||||
@@ -322,13 +287,6 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ dropdown_up_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{dropdown_up_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include elements/snippet.html content=dropdown_up_example more=true %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -70,4 +70,4 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=menu_example size="one-third" %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -26,7 +26,7 @@ meta:
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_colors_example %}
|
||||
{% capture message_dark_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-header">
|
||||
<p>Dark</p>
|
||||
@@ -36,17 +36,6 @@ meta:
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>{{ color | capitalize }}</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_small %}
|
||||
@@ -103,18 +92,14 @@ meta:
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_body_dark_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
@@ -144,7 +129,22 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_colors_example %}
|
||||
{% include elements/snippet.html content=message_dark_example more=true %}
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>{{ color | capitalize }}</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar more=true %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Message body only" %}
|
||||
|
||||
@@ -156,6 +156,19 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=message_body_example %}
|
||||
|
||||
{% include elements/snippet.html content=message_body_dark_example %}
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
@@ -172,4 +185,4 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=message_large %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -55,6 +55,8 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
<div class="content">
|
||||
<p>The modal structure is very simple:</p>
|
||||
<ul>
|
||||
@@ -87,7 +89,7 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="message is-danger">
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
No JavaScript
|
||||
</div>
|
||||
@@ -96,9 +98,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Image modal</h3>
|
||||
{% include elements/anchor.html name="Image modal" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
|
||||
@@ -109,9 +109,7 @@ meta:
|
||||
|
||||
{% highlight html %}{{ image_modal }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Modal card</h3>
|
||||
{% include elements/anchor.html name="Modal card" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
|
||||
@@ -120,11 +118,11 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
@@ -849,7 +849,7 @@ $(document).ready(function() {
|
||||
</li>
|
||||
<li>
|
||||
a container for almost <strong>anything</strong> you want, like a <code>field</code>
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
|
||||
</div>
|
||||
</li>
|
||||
@@ -1296,4 +1296,4 @@ $(document).ready(function() {
|
||||
</table>
|
||||
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -224,4 +224,4 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=pagination_large_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -82,8 +82,47 @@ meta:
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture panel_colors_example %}
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>panel</code> is a container for several types:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>panel-heading</code> as the first child
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-tabs</code> for navigation
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-block</code> which can contain other elements, like:
|
||||
<ul>
|
||||
<li><code>control</code></li>
|
||||
<li><code>input</code></li>
|
||||
<li><code>button</code></li>
|
||||
<li><code>panel-icon</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=panel_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The panel component 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>. Simply append one of the color modifiers.
|
||||
</p>
|
||||
<p>
|
||||
For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<article class="panel is-{{ color }}">
|
||||
<p class="panel-heading">
|
||||
{{ color | capitalize }}
|
||||
@@ -128,50 +167,8 @@ meta:
|
||||
jgthms.github.io
|
||||
</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar more=true %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>panel</code> is a container for several types:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>panel-heading</code> as the first child
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-tabs</code> for navigation
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-block</code> which can contain other elements, like:
|
||||
<ul>
|
||||
<li><code>control</code></li>
|
||||
<li><code>input</code></li>
|
||||
<li><code>button</code></li>
|
||||
<li><code>panel-icon</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=panel_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.8.0" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The panel component 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>. Simply append one of the color modifiers.
|
||||
</p>
|
||||
<p>
|
||||
For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=panel_colors_example more=true %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -449,4 +449,4 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/variables.html type='component' %}
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Customize
|
||||
layout: documentation
|
||||
doc-tab: customize
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -88,7 +88,7 @@ breadcrumb:
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include elements/variables.html
|
||||
include components/variables.html
|
||||
anchor_name = 'Derived variables'
|
||||
data = derived_variables
|
||||
custom_message = custom_message
|
||||
@@ -100,7 +100,7 @@ breadcrumb:
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include elements/variables.html
|
||||
include components/variables.html
|
||||
anchor_name = 'Generic variables'
|
||||
tab = 'base'
|
||||
subtab = 'generic'
|
||||
|
||||
@@ -130,7 +130,7 @@ module.exports = {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight js %}{{ config }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -148,7 +148,7 @@ module.exports = {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight js %}{{ configv4 }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Elements
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -44,6 +44,94 @@ meta:
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture no_block %}
|
||||
<p class="title mb-0">Without block</p>
|
||||
<div class="block mb-0">
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-primary">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="pagination mb-0" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous" title="This is the first page" disabled>Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 2">2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 3">3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<progress class="progress is-success mb-0" value="30" max="100">30%</progress>
|
||||
<div class="notification is-warning mb-0">
|
||||
<button class="delete"></button>
|
||||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||||
</div>
|
||||
<article class="message is-danger mb-0">
|
||||
<div class="message-header">
|
||||
<p>Error</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture with_block %}
|
||||
<p class="title">With block</p>
|
||||
<div class="block">
|
||||
<div class="field is-grouped">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-primary">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous" title="This is the first page" disabled>Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 2">2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 3">3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<progress class="progress is-success" value="30" max="100">30%</progress>
|
||||
<div class="notification is-warning">
|
||||
<button class="delete"></button>
|
||||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||||
</div>
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
<p>Error</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
<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:
|
||||
@@ -63,26 +151,14 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=no_block_example %}
|
||||
|
||||
{% include elements/anchor.html name="One line of CSS" %}
|
||||
<!-- -->
|
||||
|
||||
{% include elements/anchor.html name="You're already using it" %}
|
||||
|
||||
|
||||
<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>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight css %}{{ block_css }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
This prevents the last sibling to add unnecessary space at the bottom.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Already used everywhere in Bulma" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. The <code>block</code> 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>
|
||||
@@ -105,8 +181,41 @@ meta:
|
||||
</p>
|
||||
|
||||
<p>
|
||||
As a result, 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.
|
||||
Here's how it would look like in comparison:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
<div class="columns is-size-6">
|
||||
<div class="column">
|
||||
{{ no_block }}
|
||||
</div>
|
||||
<div class="column">
|
||||
{{ with_block }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include 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>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight css %}{{ block_css }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
This prevents the last sibling to add unnecessary space at the bottom.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -15,6 +15,32 @@ meta:
|
||||
---
|
||||
|
||||
{% capture box_example %}
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Password</label>
|
||||
<div class="control">
|
||||
<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">
|
||||
@@ -56,12 +82,26 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>box</code> element is simply a container with a shadow, a border, a radius, and some padding.
|
||||
<br>
|
||||
For example, you can include a media object:
|
||||
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 more=true %}
|
||||
{% include elements/snippet.html content=box_example %}
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
<div class="content">
|
||||
<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 %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Or a <code>media</code> object:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=box_card_example more=true %}
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -545,8 +545,6 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=button_colors_b_example %}
|
||||
|
||||
{% include elements/new-tag.html version="0.8.0" %}
|
||||
|
||||
<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.
|
||||
@@ -847,7 +845,7 @@ meta:
|
||||
{{ buttons_multiple }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ buttons_multiple }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -863,7 +861,7 @@ meta:
|
||||
{{ buttons_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ buttons_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -880,7 +878,7 @@ meta:
|
||||
{{ buttons_addons_right }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -896,7 +894,7 @@ meta:
|
||||
{{ buttons_addons_selected }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -934,4 +932,4 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -178,6 +178,16 @@ meta:
|
||||
<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" %}
|
||||
|
||||
<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" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Ordered lists</strong> <code><ol></code> support different <strong>types</strong> of items markers. To modify them, use either:
|
||||
@@ -201,7 +211,9 @@ meta:
|
||||
<div class="content">
|
||||
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
|
||||
|
||||
{% 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>
|
||||
@@ -214,8 +226,24 @@ meta:
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{% 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>
|
||||
{% 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>
|
||||
@@ -228,8 +256,9 @@ meta:
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{% 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>
|
||||
@@ -242,6 +271,30 @@ meta:
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<h4>Small size <code>content</code></h4>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
{% include 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 %}
|
||||
|
||||
<div class="content">
|
||||
<h4>Medium size <code>content</code></h4>
|
||||
</div>
|
||||
|
||||
{% include 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 components/variables.html type='element' %}
|
||||
|
||||
@@ -15,14 +15,14 @@ meta:
|
||||
---
|
||||
|
||||
{% capture cross_example %}
|
||||
<a class="delete"></a>
|
||||
<button class="delete"></button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture cross_sizes_example %}
|
||||
<a class="delete is-small"></a>
|
||||
<a class="delete"></a>
|
||||
<a class="delete is-medium"></a>
|
||||
<a class="delete is-large"></a>
|
||||
<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 %}
|
||||
|
||||
@@ -216,7 +216,7 @@ meta:
|
||||
|
||||
{% capture stacked_medium %}
|
||||
<span class="icon is-medium">
|
||||
<span class="fa-stack">
|
||||
<span class="fa-stack fa-sm">
|
||||
<i class="fas fa-circle fa-stack-2x"></i>
|
||||
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
@@ -426,7 +426,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
<td rowspan="3">
|
||||
<code>icon is-large</code>
|
||||
</td>
|
||||
<td rowspan="4">
|
||||
@@ -470,19 +470,6 @@ meta:
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fas fa-3x</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>3em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-3x fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -503,9 +490,6 @@ meta:
|
||||
<li>
|
||||
animated icons
|
||||
</li>
|
||||
<li>
|
||||
rotated & flipped icons
|
||||
</li>
|
||||
<li>
|
||||
stacked icons
|
||||
</li>
|
||||
@@ -560,44 +544,6 @@ meta:
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Rotated & flipped
|
||||
</td>
|
||||
<td>
|
||||
<code>fas fa-shield-alt</code><br>
|
||||
<code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-90"</code><br>
|
||||
<code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-180"</code><br>
|
||||
<code>fas fa-shield-alt</code> <code>data-fa-transform="rotate-270"</code><br>
|
||||
<code>fas fa-shield-alt</code> <code>data-fa-transform="flip-h"</code><br>
|
||||
<code>fas fa-shield-alt</code> <code>data-fa-transform="flip-v"</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fas fa-shield-alt" data-fa-transform="rotate-90"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fas fa-shield-alt" data-fa-transform="rotate-180"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fas fa-shield-alt" data-fa-transform="rotate-270"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fas fa-shield-alt" data-fa-transform="flip-h"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fas fa-shield-alt" data-fa-transform="flip-v"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
Stacked
|
||||
@@ -607,7 +553,7 @@ meta:
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<span class="fa-stack">
|
||||
<span class="fa-stack fa-sm">
|
||||
<i class="fas fa-circle fa-stack-2x"></i>
|
||||
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
@@ -1054,4 +1000,4 @@ meta:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -63,7 +63,9 @@ meta:
|
||||
{% for dimension in page.dimensions %}
|
||||
<tr>
|
||||
<td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
|
||||
<td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
|
||||
<td>
|
||||
<figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure>
|
||||
</td>
|
||||
<td>{{ dimension }}x{{ dimension }}px</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
@@ -96,87 +98,93 @@ meta:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>image is-square</code></td>
|
||||
<td><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}}/images/placeholders/480x480.png"></figure></td>
|
||||
<td>Square (or 1 by 1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by1</code></td>
|
||||
<td><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}}/images/placeholders/480x480.png"></figure></td>
|
||||
<td>1 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-5by4</code></td>
|
||||
<td><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}}/images/placeholders/600x480.png"></figure></td>
|
||||
<td>5 by 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by3</code></td>
|
||||
<td><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}}/images/placeholders/640x480.png"></figure></td>
|
||||
<td>4 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by2</code></td>
|
||||
<td><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}}/images/placeholders/480x320.png"></figure></td>
|
||||
<td>3 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-5by3</code></td>
|
||||
<td><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}}/images/placeholders/800x480.png"></figure></td>
|
||||
<td>5 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-16by9</code></td>
|
||||
<td><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}}/images/placeholders/640x360.png"></figure></td>
|
||||
<td>16 by 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by1</code></td>
|
||||
<td><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}}/images/placeholders/640x320.png"></figure></td>
|
||||
<td>2 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by1</code></td>
|
||||
<td><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}}/images/placeholders/720x240.png"></figure></td>
|
||||
<td>3 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by5</code></td>
|
||||
<td><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}}/images/placeholders/480x600.png"></figure></td>
|
||||
<td>4 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by4</code></td>
|
||||
<td><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}}/images/placeholders/480x640.png"></figure></td>
|
||||
<td>3 by 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by3</code></td>
|
||||
<td><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}}/images/placeholders/320x480.png"></figure></td>
|
||||
<td>2 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by5</code></td>
|
||||
<td><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}}/images/placeholders/480x800.png"></figure></td>
|
||||
<td>3 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-9by16</code></td>
|
||||
<td><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}}/images/placeholders/360x640.png"></figure></td>
|
||||
<td>9 by 16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by2</code></td>
|
||||
<td><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}}/images/placeholders/320x640.png"></figure></td>
|
||||
<td>1 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by3</code></td>
|
||||
<td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></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>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The only <strong>requirement</strong> is for the parent element to already have a specific <strong>width</strong>.
|
||||
</p>
|
||||
</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>
|
||||
@@ -195,4 +203,4 @@ meta:
|
||||
|
||||
{% include elements/snippet.html content=iframe_ratio horizontal=true %}
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -18,33 +18,10 @@ meta:
|
||||
<div class="notification">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
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_colors %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<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. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture notification_light_colors %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<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. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture notification_js_html %}
|
||||
<div class="notification">
|
||||
<button class="delete"></button>
|
||||
@@ -55,7 +32,7 @@ meta:
|
||||
{% capture notification_js_code %}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
|
||||
var $notification = $delete.parentNode;
|
||||
const $notification = $delete.parentNode;
|
||||
|
||||
$delete.addEventListener('click', () => {
|
||||
$notification.parentNode.removeChild($notification);
|
||||
@@ -80,15 +57,33 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=notification_colors %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% 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.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Light colors" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.8.1" %}
|
||||
<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.
|
||||
</div>
|
||||
|
||||
Each color now comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to obtain the light version of the notification.
|
||||
|
||||
{% include elements/snippet.html content=notification_light_colors %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% 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.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="JavaScript example" %}
|
||||
|
||||
@@ -102,4 +97,4 @@ Each color now comes in its <strong>light</strong> version. Simply append the <c
|
||||
{% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -18,22 +18,6 @@ meta:
|
||||
<progress class="progress" value="15" max="100">15%</progress>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture progress_colors %}
|
||||
<progress class="progress is-primary" value="15" max="100">15%</progress>
|
||||
<progress class="progress is-link" value="30" max="100">30%</progress>
|
||||
<progress class="progress is-info" value="45" max="100">45%</progress>
|
||||
<progress class="progress is-success" value="60" max="100">60%</progress>
|
||||
<progress class="progress is-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress is-danger" value="90" max="100">90%</progress>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture progress_sizes %}
|
||||
<progress class="progress is-small" value="15" max="100">15%</progress>
|
||||
<progress class="progress" value="30" max="100">30%</progress>
|
||||
<progress class="progress is-medium" value="45" max="100">45%</progress>
|
||||
<progress class="progress is-large" value="60" max="100">60%</progress>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture progress_indeterminate %}
|
||||
<progress class="progress is-small is-primary" max="100">15%</progress>
|
||||
<progress class="progress is-danger" max="100">30%</progress>
|
||||
@@ -57,20 +41,32 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=progress_colors %}
|
||||
{% 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>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
{% include elements/snippet.html content=progress_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>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include 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 actual 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 elements/variables.html type='element' %}
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -621,4 +621,4 @@ meta:
|
||||
|
||||
{{ simple_scrollable_table_example }}
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -142,7 +142,7 @@ meta:
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">npm</span>
|
||||
<span class="tag is-info">{{ site.version }}</span>
|
||||
<span class="tag is-info">{{ site.data.meta.version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -303,8 +303,6 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/new-tag.html version="0.8.0" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p>
|
||||
@@ -485,11 +483,13 @@ meta:
|
||||
{{ tags_multiple }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Tag addons" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
@@ -501,7 +501,7 @@ meta:
|
||||
{{ tags_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ tags_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -517,7 +517,7 @@ meta:
|
||||
{{ tags_delete_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -533,7 +533,7 @@ meta:
|
||||
{{ tags_field_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -554,4 +554,4 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -60,7 +60,7 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-3">
|
||||
<div class="content">
|
||||
<p>There are <strong>2 types</strong> of heading:</p>
|
||||
<ul>
|
||||
@@ -73,11 +73,11 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-4">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ default }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,10 +85,10 @@ meta:
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-3">
|
||||
<p>There are <strong>6 sizes</strong> available:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-4">
|
||||
<p class="title is-1">Title 1</p>
|
||||
<p class="title is-2">Title 2</p>
|
||||
<p class="title is-3">Title 3 (default size)</p>
|
||||
@@ -96,14 +96,14 @@ meta:
|
||||
<p class="title is-5">Title 5</p>
|
||||
<p class="title is-6">Title 6</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ title_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column"></div>
|
||||
<div class="column">
|
||||
<div class="column is-3"></div>
|
||||
<div class="column is-4">
|
||||
<p class="subtitle is-1">Subtitle 1</p>
|
||||
<p class="subtitle is-2">Subtitle 2</p>
|
||||
<p class="subtitle is-3">Subtitle 3</p>
|
||||
@@ -111,7 +111,7 @@ meta:
|
||||
<p class="subtitle is-5">Subtitle 5 (default size)</p>
|
||||
<p class="subtitle is-6">Subtitle 6</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,13 +119,13 @@ meta:
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-4">
|
||||
<div class="block">
|
||||
<p class="title is-1">Title 1</p>
|
||||
<p class="subtitle is-3">Subtitle 3</p>
|
||||
@@ -139,7 +139,7 @@ meta:
|
||||
<p class="subtitle is-5">Subtitle 5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ combine }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -147,7 +147,7 @@ meta:
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-3">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
@@ -155,7 +155,7 @@ meta:
|
||||
<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">
|
||||
<div class="column is-4">
|
||||
<div class="block">
|
||||
<p class="title is-1 is-spaced">Title 1</p>
|
||||
<p class="subtitle is-3">Subtitle 3</p>
|
||||
@@ -169,9 +169,9 @@ meta:
|
||||
<p class="subtitle is-5">Subtitle 5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ spaced }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Form
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -45,7 +45,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{checkbox_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,7 +60,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{checkbox_link_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_link_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,7 +69,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{checkbox_disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -135,327 +135,111 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors %}
|
||||
<div class="field">
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Primary file…
|
||||
</span>
|
||||
{% capture file_colors_a %}
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-info has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Info file…
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Primary file…
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-warning is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Warning file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-danger has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Danger file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes %}
|
||||
<div class="field">
|
||||
<div class="file is-small">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
{% capture file_colors_b %}
|
||||
<div class="file is-info has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Info file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_name %}
|
||||
<div class="field">
|
||||
<div class="file is-small has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
{% capture file_colors_c %}
|
||||
<div class="file is-warning is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label">
|
||||
Warning file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_boxed %}
|
||||
<div class="field">
|
||||
<div class="file is-small is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
{% capture file_colors_d %}
|
||||
<div class="file is-danger has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Danger file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered %}
|
||||
<div class="field">
|
||||
<div class="file is-centered is-boxed is-success has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Centered file…
|
||||
</span>
|
||||
<div class="file is-centered is-boxed is-success has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label">
|
||||
Centered file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_right %}
|
||||
<div class="field">
|
||||
<div class="file is-right is-info">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Right file…
|
||||
</span>
|
||||
<div class="file is-right is-info">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label">
|
||||
Right file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -488,83 +272,7 @@ meta:
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_boxed_name %}
|
||||
<div class="field">
|
||||
<div class="file is-small is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<!-- -->
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -606,7 +314,7 @@ meta:
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
With the <code>has-name</code> modifier combined with the <code>file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
|
||||
@@ -616,13 +324,13 @@ meta:
|
||||
{{ file_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.
|
||||
@@ -632,13 +340,13 @@ meta:
|
||||
{{ file_name_right }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name_right }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can also <strong>expand</strong> the name to fill up the space with the <code>is-fullwidth</code> modifier.
|
||||
@@ -648,13 +356,13 @@ meta:
|
||||
{{ file_name_fullwidth }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.
|
||||
@@ -664,13 +372,13 @@ meta:
|
||||
{{ file_boxed }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_boxed }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.
|
||||
@@ -680,7 +388,7 @@ meta:
|
||||
{{ file_boxed_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_boxed_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -700,18 +408,24 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file_colors clipped=true %}
|
||||
{% include elements/snippet.html content=file_colors_a %}
|
||||
{% include elements/snippet.html content=file_colors_b %}
|
||||
{% include elements/snippet.html content=file_colors_c %}
|
||||
{% include elements/snippet.html content=file_colors_d %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can append one of <strong>3 additional sizes</strong>:
|
||||
You can append one of the <strong>4 available sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-small</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-normal</code> (default)
|
||||
</li>
|
||||
<li>
|
||||
<code>is-medium</code>
|
||||
</li>
|
||||
@@ -721,13 +435,87 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file_sizes clipped=true %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }}">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/snippet.html content=file_sizes_name clipped=true %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/snippet.html content=file_sizes_boxed clipped=true %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/snippet.html content=file_sizes_boxed_name clipped=true %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
|
||||
@@ -756,10 +544,11 @@ meta:
|
||||
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
|
||||
Here is an example of how this could be done:
|
||||
</p>
|
||||
{% include elements/snippet.html content=file_javascript %}
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html
|
||||
{% include elements/snippet.html horizontal=true content=file_javascript %}
|
||||
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
|
||||
@@ -1094,7 +1094,7 @@ variables_keys:
|
||||
|
||||
{% include elements/snippet.html content=disabled_fields_example %}
|
||||
|
||||
{% include elements/variables.html
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_control_keys
|
||||
custom_message=custom_message
|
||||
@@ -1102,7 +1102,7 @@ variables_keys:
|
||||
file='controls'
|
||||
%}
|
||||
|
||||
{% include elements/variables.html
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
|
||||
@@ -36,57 +36,6 @@ meta:
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
{% endcapture %}
|
||||
|
||||
{% capture colors_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-primary" type="text" placeholder="Primary input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-info" type="text" placeholder="Info input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-success" type="text" placeholder="Success input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-warning" type="text" placeholder="Warning input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-danger" type="text" placeholder="Danger input">
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-small" type="text" placeholder="Small input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Normal input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-medium" type="text" placeholder="Medium input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-large" type="text" placeholder="Large input">
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture rounded_example %}
|
||||
<input class="input is-rounded" type="text" placeholder="Rounded input">
|
||||
{% endcapture %}
|
||||
@@ -272,32 +221,28 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{input_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{input_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{colors_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{colors_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<input class="input is-{{ color }}" type="text" placeholder="{{ color | capitalize }} input">
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<input class="input is-{{ size }}" type="text" placeholder="{{ size | capitalize }} input">
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
|
||||
@@ -312,7 +257,8 @@ meta:
|
||||
|
||||
{% include elements/anchor.html name="States" %}
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
<h4 class="title is-5">Normal</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{normal_example}}
|
||||
@@ -322,7 +268,8 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
<h4 class="title is-5">Hover</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{hover_example}}
|
||||
@@ -332,7 +279,8 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
<h4 class="title is-5">Focus</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{focus_example}}
|
||||
@@ -342,7 +290,8 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
<h4 class="title is-5">Loading</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{loading_example}}
|
||||
@@ -366,7 +315,9 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
<h4 class="title is-5">Disabled</h4>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{disabled_example}}
|
||||
@@ -376,7 +327,8 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Readonly and static inputs</h4>
|
||||
<h4 class="title is-5">Readonly and static inputs</h4>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -477,7 +429,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element'
|
||||
{% include components/variables.html type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
file='form'
|
||||
|
||||
@@ -70,7 +70,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{radio_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,7 +85,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{radio_default_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_default_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -100,7 +100,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{radio_disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_disabled_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,59 +42,6 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture colors_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-primary">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-info">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-success">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-warning">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-danger">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture rounded_example %}
|
||||
<div class="select is-rounded">
|
||||
<select>
|
||||
@@ -104,117 +51,62 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-small">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-medium">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-large">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture normal_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hover_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select class="is-hovered">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<select class="is-hovered">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture focus_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select class="is-focused">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<select class="is-focused">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_example %}
|
||||
<div class="control">
|
||||
<div class="select is-loading">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select is-loading">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture disabled_example %}
|
||||
<div class="control">
|
||||
<div class="select is-disabled">
|
||||
<select disabled>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select is-disabled">
|
||||
<select disabled>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icons_example %}
|
||||
<div class="field">
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</div>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -289,7 +181,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{ select_example }}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{ select_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -314,21 +206,24 @@ meta:
|
||||
</div>
|
||||
{{ select_multiple_example }}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{ select_multiple_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ colors_example }}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{ colors_example }}{% endhighlight %}
|
||||
</div>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<div class="select is-{{ color }}">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
|
||||
@@ -355,14 +250,17 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ sizes_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ sizes_example }}{% endhighlight %}
|
||||
</div>
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="select is-{{ size }}">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="States" %}
|
||||
|
||||
|
||||
@@ -162,7 +162,12 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=colors_example %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<textarea class="textarea is-{{ color }}" placeholder="{{ color | capitalize }} textarea"></textarea>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
@@ -221,7 +226,7 @@ meta:
|
||||
</div>
|
||||
{{loading_sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{loading_sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Helpers
|
||||
layout: documentation
|
||||
doc-tab: helpers
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -320,19 +320,19 @@ breadcrumb:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-capitalized</code></td>
|
||||
<td>Transforms <strong>the first character</strong> of each word to <span class="is-capitalized">uppercase</span></td>
|
||||
<td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-lowercase</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <span class="is-lowercase">lowercase</span></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-uppercase</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <span class="is-uppercase">uppercase</span></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-italic</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <span class="is-italic">italic</span></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -359,23 +359,23 @@ breadcrumb:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-weight-light</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-light">light</span></td>
|
||||
<td>Transforms text weight to <strong>light</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-normal</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-normal">normal</span></td>
|
||||
<td>Transforms text weight to <strong>normal</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-medium</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-medium">medium</span></td>
|
||||
<td>Transforms text weight to <strong>medium</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-semibold</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-semibold">semi-bold</span></td>
|
||||
<td>Transforms text weight to <strong>semi-bold</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-bold</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-bold">bold</span></td>
|
||||
<td>Transforms text weight to <strong>bold</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Layout
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Container
|
||||
layout: documentation
|
||||
fullwidth: true
|
||||
hide_categories: true
|
||||
doc-tab: layout
|
||||
doc-subtab: container
|
||||
@@ -185,14 +186,10 @@ meta:
|
||||
<p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
@@ -204,24 +201,16 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_widescreen_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_widescreen_example }}{% endhighlight %}
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_fullhd_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_fullhd_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
@@ -243,24 +232,16 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_max_desktop_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_max_desktop_example }}{% endhighlight %}
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_max_widescreen_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_max_widescreen_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
@@ -283,14 +264,10 @@ meta:
|
||||
right sides, add the <code>is-fluid</code> modifier:</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_fluid_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/variables.html type='element' data=site.data.variables.elements.container %}
|
||||
{% include components/variables.html type='element' data=site.data.variables.elements.container %}
|
||||
|
||||
@@ -30,4 +30,4 @@ breadcrumb:
|
||||
|
||||
{% include elements/snippet.html content=footer_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/variables.html %}
|
||||
{% include components/variables.html %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Hero
|
||||
layout: documentation
|
||||
fullwidth: true
|
||||
hide_categories: true
|
||||
hide_fortyfour: true
|
||||
doc-tab: layout
|
||||
@@ -38,481 +39,183 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Hero title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Hero subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% highlight html %}
|
||||
{% capture hero_example %}
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Hero title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Hero subtitle
|
||||
</h2>
|
||||
</div>
|
||||
<p class="title">
|
||||
Hero title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Hero subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
<div class="content">
|
||||
As with buttons, you can choose one of the <strong>8 different colors</strong>:
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% include elements/snippet.html content=hero_example horizontal=true fullwidth=true %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Primary title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Primary subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Primary title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Primary subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-info">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Info title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Info subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-success">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Success title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Success subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-link">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Link title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Link subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Warning title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Warning subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-danger">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Danger title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Danger subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-light">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Light title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Light subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-dark">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Dark title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Dark subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Gradients" %}
|
||||
<div class="content">
|
||||
By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-primary is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Primary bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Primary bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<section class="hero is-medium is-primary is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Primary bold title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Primary bold subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-info is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Info bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Info bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-success is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Success bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Success bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-warning is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Warning bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Warning bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-danger is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Danger bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Danger bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-light is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Light bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Light bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-dark is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Dark bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Dark bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have even more imposing banners by using one of <strong>3 different sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
medium
|
||||
</li>
|
||||
<li>
|
||||
large
|
||||
</li>
|
||||
<li>
|
||||
fullheight
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Medium title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Medium subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Medium title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Medium subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Large title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Large subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Large title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Large subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div id="fullheight-hero" class="bd-example is-fullwidth">
|
||||
<section class="hero is-success is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Fullheight title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Fullheight subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="content">
|
||||
As with buttons, you can choose one of the <strong>8 different colors</strong>:
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-success is-fullheight">
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<section class="hero is-{{ color }}">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Fullheight title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Fullheight subtitle
|
||||
</h2>
|
||||
<p class="title">
|
||||
{{ color | capitalize }} hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
{{ color | capitalize }} subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar horizontal=true fullwidth=true %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have even more imposing banners by using one of <strong>5 different sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
<li><code>is-medium</code></li>
|
||||
<li><code>is-large</code></li>
|
||||
<li><code>is-halfheight</code></li>
|
||||
<li><code>is-fullheight</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% capture small_hero %}
|
||||
<section class="hero is-small is-primary">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Small hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Small subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=small_hero horizontal=true fullwidth=true %}
|
||||
|
||||
{% capture medium_hero %}
|
||||
<section class="hero is-medium is-link">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Medium hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Medium subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=medium_hero horizontal=true fullwidth=true %}
|
||||
|
||||
{% capture large_hero %}
|
||||
<section class="hero is-large is-info">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Large hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Large subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=large_hero horizontal=true fullwidth=true %}
|
||||
|
||||
<div id="halfheight-hero"></div>
|
||||
|
||||
{% capture halfheight_example %}
|
||||
<section class="hero is-success is-halfheight">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
Half height hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Half height subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=halfheight_example horizontal=true fullwidth=true %}
|
||||
|
||||
<div id="fullheight-hero"></div>
|
||||
|
||||
{% capture fullheight_example %}
|
||||
<section class="hero is-danger is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
Fullheight hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Fullheight subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=fullheight_example horizontal=true fullwidth=true %}
|
||||
|
||||
<!-- Fullheight with navbar -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Fullheight with navbar" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% include elements/anchor.html name="Fullheight with navbar" %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{% include examples/navbar-basic.html %}
|
||||
<section class="hero is-link is-fullheight-with-navbar">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Fullheight hero with navbar
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{% capture fullheight_with_navbar_example %}
|
||||
{% include examples/navbar-basic.html %}
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-link is-fullheight-with-navbar">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Fullheight hero with navbar
|
||||
</p>
|
||||
</div>
|
||||
<p class="title">
|
||||
Fullheight hero with navbar
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=fullheight_with_navbar_example horizontal=true fullwidth=true %}
|
||||
|
||||
<!-- Fullheight with 3 parts -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
|
||||
<div class="content">
|
||||
<p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
|
||||
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
|
||||
|
||||
<div class="content">
|
||||
<p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code>
|
||||
<ul>
|
||||
<li><code>hero-head</code> (always at the top)</li>
|
||||
<li><code>hero-body</code> (always vertically centered)</li>
|
||||
<li><code>hero-foot</code> (always at the bottom)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>hero-head</code> (always at the top)</li>
|
||||
<li><code>hero-body</code> (always vertically centered)</li>
|
||||
<li><code>hero-foot</code> (always at the bottom)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% capture heroNavbarA %}
|
||||
<section class="hero is-primary is-medium">
|
||||
@@ -558,12 +261,12 @@ meta:
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
<p class="title">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</h2>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -709,12 +412,12 @@ meta:
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
<p class="title">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</h2>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -736,12 +439,8 @@ meta:
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
{% include elements/snippet.html content=heroNavbarA horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarB horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
|
||||
</section>
|
||||
{% include elements/snippet.html content=heroNavbarA horizontal=true fullwidth=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarC horizontal=true fullwidth=true more=true %}
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% include elements/variables.html type='component' hide_content=true %}
|
||||
{% include components/variables.html type='component' hide_content=true %}
|
||||
|
||||
@@ -142,49 +142,6 @@ breadcrumb:
|
||||
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-structure">
|
||||
<nav class="level bd-structure-item bd-is-structure-container" title="level">
|
||||
<div class="level-left bd-structure-item" title="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right bd-structure-item" title="level-right">
|
||||
<p class="level-item">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Published</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Drafts</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Deleted</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a class="button is-success">
|
||||
New
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=nav_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Centered level" %}
|
||||
|
||||
@@ -75,6 +75,7 @@ breadcrumb:
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture media_nested_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
@@ -140,6 +141,7 @@ breadcrumb:
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
@@ -165,48 +167,13 @@ breadcrumb:
|
||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-structure">
|
||||
<article class="media">
|
||||
<figure class="media-left bd-structure-item" title="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="media-right bd-structure-item" title="media-right">
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_example horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=media_example more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
|
||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons… or even a <strong>navbar</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_bis_example horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=media_bis_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Nesting" %}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Section
|
||||
layout: documentation
|
||||
fullwidth: true
|
||||
doc-tab: layout
|
||||
doc-subtab: section
|
||||
breadcrumb:
|
||||
@@ -11,26 +12,48 @@ breadcrumb:
|
||||
---
|
||||
|
||||
{% capture section_example %}
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
<section class="section">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture section_medium_example %}
|
||||
<section class="section is-medium">
|
||||
<h1 class="title">Medium section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture section_large_example %}
|
||||
<section class="section is-large">
|
||||
<h1 class="title">Large section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
|
||||
<p>
|
||||
The <code>section</code> components are simple layout elements with responsive padding. They are best used as <strong>direct</strong> children of <code>body</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ section_example }}{% endhighlight %}
|
||||
{% include elements/snippet.html content=section_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html %}
|
||||
{% include elements/snippet.html content=section_medium_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/snippet.html content=section_large_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include components/variables.html %}
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Modifiers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -144,7 +144,7 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ button_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Overview
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
|
||||
@@ -84,7 +84,7 @@ $colors: map-merge($colors, $addColors);
|
||||
<p class="subtitle is-6">
|
||||
Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
|
||||
</p>
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -143,7 +143,7 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ button_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,5 @@ breadcrumb:
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-snippet-code highlight-full">
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -220,7 +220,7 @@ $fullhd-enabled: false
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -230,7 +230,7 @@ $fullhd-enabled: false
|
||||
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/variables.html
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
custom_message=custom_message
|
||||
|
||||
@@ -12,68 +12,179 @@ breadcrumb:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are several ways to <strong>get started</strong> with Bulma. You can either:
|
||||
Bulma is a <strong>CSS library</strong>. This means it provides CSS classes to help you style your HTML code.
|
||||
<br>
|
||||
To use Bulma, you can either use the pre-compiled <code>.css</code> file or install the <code>.sass</code> files so you can customize it to your needs.
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
use <strong>npm</strong> to install the Bulma package
|
||||
</li>
|
||||
<li>
|
||||
use the <strong>jsDelivr CDN</strong> to link to the Bulma stylesheet
|
||||
</li>
|
||||
<li>
|
||||
use the <strong>GitHub repository</strong> to get the latest development version
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use <strong>NPM</strong> <em>(recommended)</em>:
|
||||
</p>
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
<div class="bd-options">
|
||||
<div class="bd-option">
|
||||
<div class="block media is-align-items-center">
|
||||
<div class="media-left">
|
||||
<span class="icon is-flex is-large has-text-link">
|
||||
<i class="fab fa-css3 fa-2x"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use the <a href="https://www.jsdelivr.com/" target="_blank">jsDelivr</a> <strong>CDN</strong>
|
||||
<br>
|
||||
<a href="https://www.jsdelivr.com/package/npm/bulma">https://www.jsdelivr.com/package/npm/bulma</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Get the Bulma <strong class="has-text-link">CSS</strong> file</p>
|
||||
<p class="subtitle">A single <code>.css</code> file that includes all of Bulma</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Download from the <strong>repository</strong>
|
||||
<br>
|
||||
<a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
<span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
|
||||
Option 1. <strong>Use a CDN</strong>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
<p class="block">
|
||||
You can import the CSS file directly from <a href="{{ site.data.meta.jsdelivr }}" target="_blank">jsDelivr</a>:
|
||||
</p>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
Font Awesome icons
|
||||
{% capture jsdelivr_a %}
|
||||
{% highlight css %}@import "https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css"{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture jsdelivr_b %}
|
||||
{% highlight html %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/tabs.html
|
||||
button_a="CSS @import"
|
||||
button_b="HTML <link>"
|
||||
item_a=jsdelivr_a
|
||||
item_b=jsdelivr_b
|
||||
%}
|
||||
|
||||
<p class="block">
|
||||
The <strong>RTL version</strong> is also available:
|
||||
</p>
|
||||
|
||||
{% capture jsdelivr_rtl_a %}
|
||||
{% highlight css %}@import "https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css"{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture jsdelivr_rtl_b %}
|
||||
{% highlight html %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css">{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/tabs.html
|
||||
button_a="CSS @import"
|
||||
button_b="HTML <link>"
|
||||
item_a=jsdelivr_rtl_a
|
||||
item_b=jsdelivr_rtl_b
|
||||
%}
|
||||
|
||||
<p class="block">
|
||||
Bulma is also available via <a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
Option 2. <strong>Download the Github release</strong>
|
||||
</p>
|
||||
|
||||
<div class="block">
|
||||
You can get the latest Bulma release as a <code>.zip</code> from GitHub:
|
||||
</div>
|
||||
|
||||
<a class="button bd-fat-button is-primary is-light" href="{{ site.data.meta.download }}">
|
||||
Download v{{ site.data.meta.version }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fontawesome.com">Font Awesome 5</a>:</p>
|
||||
{% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
|
||||
|
||||
<div class="bd-option-or">
|
||||
<p>Or</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option">
|
||||
<div class="block media is-align-items-center">
|
||||
<div class="media-left">
|
||||
<span class="icon is-flex is-large has-text-sass">
|
||||
<i class="fab fa-sass fa-2x"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Get the Bulma <strong class="has-text-sass">Sass</strong> library</p>
|
||||
<p class="subtitle">A collection of <code>.sass</code> files to build your own version of Bulma</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
<span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
|
||||
Option 1. <strong>Install the NPM package</strong>
|
||||
</p>
|
||||
|
||||
<p class="block">
|
||||
Bulma is available through <a href="{{ site.data.meta.npm }}" target="_blank">npm</a>:
|
||||
</p>
|
||||
|
||||
{% capture npm_item %}
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture yarn_item %}
|
||||
{% highlight bash %}yarn install bulma{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/tabs.html
|
||||
button_a="npm"
|
||||
button_b="yarn"
|
||||
item_a=npm_item
|
||||
item_b=yarn_item
|
||||
%}
|
||||
|
||||
<p class="block">
|
||||
Bulma is also available via <a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
Option 2. <strong>Clone the GitHub repository</strong>
|
||||
</p>
|
||||
|
||||
<p class="block">
|
||||
Bulma is available on <a href="{{ site.data.meta.github }}" target="_blank">GitHub</a>:
|
||||
</p>
|
||||
|
||||
{% capture git_ssh %}
|
||||
{% highlight bash %}{{ site.data.meta.git_ssh }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture git_https %}
|
||||
{% highlight bash %}{{ site.data.meta.git_https }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture git_cli %}
|
||||
{% highlight bash %}{{ site.data.meta.git_cli }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/tabs.html
|
||||
button_a="SSH"
|
||||
button_b="HTTPS"
|
||||
button_c="GitHub CLI"
|
||||
item_a=git_ssh
|
||||
item_b=git_https
|
||||
item_c=git_cli
|
||||
%}
|
||||
|
||||
<div class="message is-warning">
|
||||
<div class="message-body">
|
||||
Note that the GitHub repository also includes this documentation, so it’s significantly bigger than the NPM package.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -117,7 +228,7 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example highlight-full">
|
||||
<div class="bd-example bd-highlight-full">
|
||||
{% highlight html %}{% include snippets/getting-started.html %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -88,7 +88,7 @@ breadcrumb:
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include elements/variables.html
|
||||
include components/variables.html
|
||||
anchor_name = 'Derived variables'
|
||||
data = derived_variables
|
||||
custom_message = custom_message
|
||||
@@ -100,7 +100,7 @@ breadcrumb:
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include elements/variables.html
|
||||
include components/variables.html
|
||||
anchor_name = 'Generic variables'
|
||||
tab = 'base'
|
||||
subtab = 'generic'
|
||||
|
||||
Reference in New Issue
Block a user