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

Bulma v9 website (#3249)

Browse Source 
* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/documentation/components/breadcrumb.html
View File

@@ -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' %}

100
docs/documentation/components/card.html
View File

@@ -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' %}

62
docs/documentation/components/dropdown.html
View File

@@ -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' %}

2
docs/documentation/components/menu.html
View File

@@ -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' %}

55
docs/documentation/components/message.html
View File

@@ -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' %}

16
docs/documentation/components/modal.html
View File

@@ -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>

4
docs/documentation/components/navbar.html
View File

@@ -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' %}

2
docs/documentation/components/pagination.html
View File

@@ -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' %}

89
docs/documentation/components/panel.html
View File

@@ -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>&lt;a&gt;</code> or a label <code>&lt;label&gt;</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>&lt;a&gt;</code> or a label <code>&lt;label&gt;</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' %}

2
docs/documentation/components/tabs.html
View File

@@ -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' %}