mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 10:14:29 -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
@@ -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' %}
|
||||
|
||||
Reference in New Issue
Block a user