mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 11:24:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
8
docs/_includes/library/elements/block.html
Normal file
8
docs/_includes/library/elements/block.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="block">This text is within a <strong>block</strong>.</div>
|
||||
|
||||
<div class="block">
|
||||
This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
|
||||
efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
</div>
|
||||
|
||||
<div class="block">This text is within a <strong>third block</strong>. This block has no margin at the bottom.</div>
|
||||
58
docs/_includes/library/elements/box.html
Normal file
58
docs/_includes/library/elements/box.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<div class="box">I'm in a box.</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
|
||||
Nullam condimentum luctus turpis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item" aria-label="reply">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-reply" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="retweet">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-retweet" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="like">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
16
docs/_includes/library/elements/button.html
Normal file
16
docs/_includes/library/elements/button.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<button class="button">Button</button>
|
||||
|
||||
<div class="buttons">
|
||||
<a class="button">Anchor</a>
|
||||
<button class="button">Button</button>
|
||||
<input class="button" type="submit" value="Submit input">
|
||||
<input class="button" type="reset" value="Reset input">
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="button is-white">White</button>
|
||||
<button class="button is-light">Light</button>
|
||||
<button class="button is-dark">Dark</button>
|
||||
<button class="button is-black">Black</button>
|
||||
<button class="button is-ghost">Ghost</button>
|
||||
</div>
|
||||
34
docs/_includes/library/elements/buttons.html
Normal file
34
docs/_includes/library/elements/buttons.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<div class="buttons" style="margin-bottom: 1em">
|
||||
<button class="button dn">
|
||||
<span>Button</span>
|
||||
</button>
|
||||
{% for status in site.data.colors.status %}
|
||||
<button class="button is-{{ status }}">
|
||||
<span>{{ status | capitalize }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="buttons" style="margin-bottom: 1em">
|
||||
{% for status in site.data.colors.status %}
|
||||
<button class="button is-{{ status }} is-outlined">
|
||||
<span>{{ status | capitalize }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="buttons" style="margin-bottom: 1em">
|
||||
{% for status in site.data.colors.status %}
|
||||
<button class="button is-{{ status }} is-light">
|
||||
<span>{{ status | capitalize }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="buttons" style="margin-bottom: 1em">
|
||||
{% for status in site.data.colors.status %}
|
||||
<button class="button is-{{ status }} is-dark">
|
||||
<span>{{ status | capitalize }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
134
docs/_includes/library/elements/content.html
Normal file
134
docs/_includes/library/elements/content.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<div class="content">
|
||||
<h1>Hello World</h1>
|
||||
<p>
|
||||
Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices
|
||||
eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat
|
||||
odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!
|
||||
</p>
|
||||
<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>
|
||||
<h3>Third level</h3>
|
||||
<p>
|
||||
Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor
|
||||
nec, fringilla condimentum orci. Fusce eu rutrum tellus.
|
||||
</p>
|
||||
<ol>
|
||||
<li>Donec blandit a lorem id convallis.</li>
|
||||
<li>Cras gravida arcu at diam gravida gravida.</li>
|
||||
<li>Integer in volutpat libero.</li>
|
||||
<li>Donec a diam tellus.</li>
|
||||
<li>Aenean nec tortor orci.</li>
|
||||
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
||||
<li>Vivamus maximus ultricies pulvinar.</li>
|
||||
</ol>
|
||||
<blockquote>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet
|
||||
turpis.
|
||||
</blockquote>
|
||||
<p>
|
||||
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices
|
||||
lacus quis neque consectetur, et lobortis nisi molestie.
|
||||
</p>
|
||||
<p>
|
||||
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas
|
||||
vestibulum interdum commodo.
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Web</dt>
|
||||
<dd>The part of the Internet that contains websites and web pages</dd>
|
||||
<dt>HTML</dt>
|
||||
<dd>A markup language for creating web pages</dd>
|
||||
<dt>CSS</dt>
|
||||
<dd>A technology to make HTML look better</dd>
|
||||
</dl>
|
||||
<p>
|
||||
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis
|
||||
malesuada nulla. Nulla facilisi. Nullam ac erat ante.
|
||||
</p>
|
||||
<h4>Fourth level</h4>
|
||||
<p>
|
||||
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at
|
||||
elementum ex efficitur.
|
||||
</p>
|
||||
<pre>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello World</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
<p>
|
||||
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula.
|
||||
Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>One</th>
|
||||
<th>Two</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Three</td>
|
||||
<td>Four</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Five</td>
|
||||
<td>Six</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Seven</td>
|
||||
<td>Eight</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nine</td>
|
||||
<td>Ten</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eleven</td>
|
||||
<td>Twelve</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis.
|
||||
Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique,
|
||||
leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies
|
||||
nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat,
|
||||
pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non
|
||||
pellentesque.
|
||||
</p>
|
||||
<h5>Fifth level</h5>
|
||||
<p>
|
||||
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent
|
||||
aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
|
||||
laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
|
||||
</p>
|
||||
<figure>
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/256x256.png">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/256x256.png">
|
||||
<figcaption>Figure 1: Some beautiful placeholders</figcaption>
|
||||
</figure>
|
||||
<h6>Sixth level</h6>
|
||||
<p>
|
||||
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros
|
||||
accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada
|
||||
ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum
|
||||
tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
|
||||
</p>
|
||||
</div>
|
||||
268
docs/_includes/library/elements/icon.html
Normal file
268
docs/_includes/library/elements/icon.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<span class="icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</span>
|
||||
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</span>
|
||||
<span>Home</span>
|
||||
</span>
|
||||
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-train"></i>
|
||||
</span>
|
||||
<span>Paris</span>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</span>
|
||||
<span>Budapest</span>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</span>
|
||||
<span>Bucharest</span>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</span>
|
||||
<span>Istanbul</span>
|
||||
<span class="icon">
|
||||
<i class="fas fa-flag-checkered"></i>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</span>
|
||||
<span>Information</span>
|
||||
</div>
|
||||
|
||||
<p class="block">Your package will be delivered on <strong>Tuesday at 08:00</strong>.</p>
|
||||
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-success">
|
||||
<i class="fas fa-check-square"></i>
|
||||
</span>
|
||||
<span>Success</span>
|
||||
</div>
|
||||
|
||||
<p class="block">Your image has been successfully uploaded.</p>
|
||||
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-warning">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
<span>Warning</span>
|
||||
</div>
|
||||
|
||||
<p class="block">Some information is missing from your <a href="#">profile</a> details.</p>
|
||||
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-danger">
|
||||
<i class="fas fa-ban"></i>
|
||||
</span>
|
||||
<span>Danger</span>
|
||||
</div>
|
||||
|
||||
<p class="block">There was an error in your submission. <a href="#">Please try again</a>.</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container class</th>
|
||||
<th>Container size</th>
|
||||
<th>Font Awesome 5 class</th>
|
||||
<th>Icon size</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon is-small</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1rem x 1rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>fas</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
<code>icon</code>
|
||||
</td>
|
||||
<td rowspan="2">
|
||||
<code>1.5rem x 1.5rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>fas</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fas fa-lg</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.33em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<i class="fas fa-lg fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="3">
|
||||
<code>icon is-medium</code>
|
||||
</td>
|
||||
<td rowspan="3">
|
||||
<code>2rem x 2rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>fas</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fas fa-lg</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.33em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-lg fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fas fa-2x</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>2em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<i class="fas fa-2x fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="3">
|
||||
<code>icon is-large</code>
|
||||
</td>
|
||||
<td rowspan="4">
|
||||
<code>3rem x 3rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>fas</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fas fa-lg</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.33em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-lg fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fas fa-2x</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>2em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-2x fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
An invitation to
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-utensils"></i>
|
||||
</span>
|
||||
<span>dinner</span>
|
||||
</span>
|
||||
was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her
|
||||
housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-city"></i>
|
||||
</span>
|
||||
<span>town</span>
|
||||
</span>
|
||||
the following day, and, consequently, unable to accept the honour of their
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-envelope-open-text"></i>
|
||||
</span>
|
||||
<span>invitation</span> </span
|
||||
>, etc.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-flag-checkered"></i>
|
||||
</span>
|
||||
<span>arrival</span>
|
||||
</span>
|
||||
in Hertfordshire; and she began to fear that he might be always
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-plane-departure"></i>
|
||||
</span>
|
||||
<span>flying</span>
|
||||
</span>
|
||||
about from one place to another, and never settled at Netherfield as he ought to be.
|
||||
</p>
|
||||
</div>
|
||||
148
docs/_includes/library/elements/image.html
Normal file
148
docs/_includes/library/elements/image.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<table id="images" class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>image is-square</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-square">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>Square (or 1 by 1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by1</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-1by1">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>1 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-5by4</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-5by4">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/600x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>5 by 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by3</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-4by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>4 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by2</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-3by2">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x320.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>3 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-5by3</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-5by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/800x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>5 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-16by9</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-16by9">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/640x360.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>16 by 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by1</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-2by1">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/640x320.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>2 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by1</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-3by1">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/720x240.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>3 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by5</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-4by5">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x600.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>4 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by4</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-3by4">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x640.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>3 by 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by3</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-2by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/320x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>2 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by5</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-3by5">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x800.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>3 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-9by16</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-9by16">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/360x640.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>9 by 16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by2</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-1by2">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/320x640.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>1 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by3</code></td>
|
||||
<td style="width: 10rem;">
|
||||
<figure class="image is-1by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/240x720.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>1 by 3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
31
docs/_includes/library/elements/notification.html
Normal file
31
docs/_includes/library/elements/notification.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<div class="notification">
|
||||
<button aria-label="delete" 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.
|
||||
</div>
|
||||
|
||||
{% for status in site.data.colors.status %}
|
||||
<div class="notification is-{{ status }}">
|
||||
<button aria-label="delete" class="delete"></button>
|
||||
<strong>{{ status | capitalize }}</strong>
|
||||
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>
|
||||
|
||||
<div class="notification is-light is-{{ status }}">
|
||||
<button aria-label="delete" class="delete"></button>
|
||||
<strong>Light {{ status | capitalize }}</strong> 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>
|
||||
|
||||
<div class="notification is-dark is-{{ status }}">
|
||||
<button aria-label="delete" class="delete"></button>
|
||||
<strong>Dark {{ status | capitalize }}</strong>
|
||||
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>
|
||||
{% endfor %}
|
||||
13
docs/_includes/library/elements/progress.html
Normal file
13
docs/_includes/library/elements/progress.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<progress class="progress" value="15" max="100">15%</progress>
|
||||
|
||||
<progress class="progress is-small" value="15" max="100">15%</progress>
|
||||
<progress class="progress is-normal" value="15" max="100">15%</progress>
|
||||
<progress class="progress is-medium" value="15" max="100">15%</progress>
|
||||
<progress class="progress is-large" value="15" max="100">15%</progress>
|
||||
|
||||
{% for status in site.data.colors.status %}
|
||||
<progress class="progress is-{{ status }}" value="{{ forloop.index | times: 10 }}" max="100">
|
||||
{{ forloop.index | times: 10 }}%
|
||||
</progress>
|
||||
<progress class="progress is-{{ status }}" max="100">{{ forloop.index | times: 10 }}%</progress>
|
||||
{% endfor %}
|
||||
175
docs/_includes/library/elements/tag.html
Normal file
175
docs/_includes/library/elements/tag.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<div class="tags">
|
||||
<span class="tag"> Tag label </span>
|
||||
|
||||
<span class="tag is-black">Black</span>
|
||||
<span class="tag is-dark">Dark</span>
|
||||
<span class="tag is-light">Light</span>
|
||||
<span class="tag is-white">White</span>
|
||||
<span class="tag is-primary">Primary</span>
|
||||
<span class="tag is-link">Link</span>
|
||||
<span class="tag is-info">Info</span>
|
||||
<span class="tag is-success">Success</span>
|
||||
<span class="tag is-warning">Warning</span>
|
||||
<span class="tag is-danger">Danger</span>
|
||||
|
||||
<span class="tag is-primary is-light">Primary</span>
|
||||
<span class="tag is-link is-light">Link</span>
|
||||
<span class="tag is-info is-light">Info</span>
|
||||
<span class="tag is-success is-light">Success</span>
|
||||
<span class="tag is-warning is-light">Warning</span>
|
||||
<span class="tag is-danger is-light">Danger</span>
|
||||
|
||||
<span class="tag is-link is-normal">Normal</span>
|
||||
<span class="tag is-primary is-medium">Medium</span>
|
||||
<span class="tag is-info is-large">Large</span>
|
||||
</div>
|
||||
|
||||
<div class="tags are-medium">
|
||||
<span class="tag">All</span>
|
||||
<span class="tag">Medium</span>
|
||||
<span class="tag">Size</span>
|
||||
</div>
|
||||
|
||||
<div class="tags are-large">
|
||||
<span class="tag">All</span>
|
||||
<span class="tag">Large</span>
|
||||
<span class="tag">Size</span>
|
||||
</div>
|
||||
|
||||
<div class="tags are-medium">
|
||||
<span class="tag">Medium</span>
|
||||
<span class="tag is-normal">Normal</span>
|
||||
<span class="tag">Medium</span>
|
||||
<span class="tag is-large">Large</span>
|
||||
<span class="tag">Medium</span>
|
||||
</div>
|
||||
|
||||
<span class="tag is-rounded">Rounded</span>
|
||||
|
||||
<a class="tag is-delete"></a>
|
||||
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
<button aria-label="delete" class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-warning is-medium">
|
||||
Hello
|
||||
<button aria-label="delete" class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-danger is-large">
|
||||
World
|
||||
<button aria-label="delete" class="delete"></button>
|
||||
</span>
|
||||
|
||||
<div class="tags">
|
||||
<span class="tag">One</span>
|
||||
<span class="tag">Two</span>
|
||||
<span class="tag">Three</span>
|
||||
</div>
|
||||
|
||||
<div class="tags">
|
||||
<span class="tag">One</span>
|
||||
<span class="tag">Two</span>
|
||||
<span class="tag">Three</span>
|
||||
<span class="tag">Four</span>
|
||||
<span class="tag">Five</span>
|
||||
<span class="tag">Six</span>
|
||||
<span class="tag">Seven</span>
|
||||
<span class="tag">Eight</span>
|
||||
<span class="tag">Nine</span>
|
||||
<span class="tag">Ten</span>
|
||||
<span class="tag">Eleven</span>
|
||||
<span class="tag">Twelve</span>
|
||||
<span class="tag">Thirteen</span>
|
||||
<span class="tag">Fourteen</span>
|
||||
<span class="tag">Fifteen</span>
|
||||
<span class="tag">Sixteen</span>
|
||||
<span class="tag">Seventeen</span>
|
||||
<span class="tag">Eighteen</span>
|
||||
<span class="tag">Nineteen</span>
|
||||
<span class="tag">Twenty</span>
|
||||
</div>
|
||||
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Package</span>
|
||||
<span class="tag is-primary">Bulma</span>
|
||||
</div>
|
||||
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-danger">Alex Smith</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">npm</span>
|
||||
<span class="tag is-info">0.9.4</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">build</span>
|
||||
<span class="tag is-success">passing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">chat</span>
|
||||
<span class="tag is-primary">on gitter</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<a class="tag is-link">Technology</a>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<a class="tag is-link">CSS</a>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<a class="tag is-link">Flexbox</a>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<a class="tag is-link">Web Design</a>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<a class="tag is-link">Open Source</a>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<a class="tag is-link">Community</a>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<a class="tag is-link">Documentation</a>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
34
docs/_includes/library/elements/title.html
Normal file
34
docs/_includes/library/elements/title.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<h1 class="title">Title</h1>
|
||||
<h2 class="subtitle">Subtitle</h2>
|
||||
|
||||
<h1 class="title is-1">Title 1</h1>
|
||||
<h2 class="title is-2">Title 2</h2>
|
||||
<h3 class="title is-3">Title 3</h3>
|
||||
<h4 class="title is-4">Title 4</h4>
|
||||
<h5 class="title is-5">Title 5</h5>
|
||||
<h6 class="title is-6">Title 6</h6>
|
||||
|
||||
<h1 class="subtitle is-1">Subtitle 1</h1>
|
||||
<h2 class="subtitle is-2">Subtitle 2</h2>
|
||||
<h3 class="subtitle is-3">Subtitle 3</h3>
|
||||
<h4 class="subtitle is-4">Subtitle 4</h4>
|
||||
<h5 class="subtitle is-5">Subtitle 5</h5>
|
||||
<h6 class="subtitle is-6">Subtitle 6</h6>
|
||||
|
||||
<p class="title is-1">Title 1</p>
|
||||
<p class="subtitle is-3">Subtitle 3</p>
|
||||
|
||||
<p class="title is-2">Title 2</p>
|
||||
<p class="subtitle is-4">Subtitle 4</p>
|
||||
|
||||
<p class="title is-3">Title 3</p>
|
||||
<p class="subtitle is-5">Subtitle 5</p>
|
||||
|
||||
<p class="title is-1 is-spaced">Title 1</p>
|
||||
<p class="subtitle is-3">Subtitle 3</p>
|
||||
|
||||
<p class="title is-2 is-spaced">Title 2</p>
|
||||
<p class="subtitle is-4">Subtitle 4</p>
|
||||
|
||||
<p class="title is-3 is-spaced">Title 3</p>
|
||||
<p class="subtitle is-5">Subtitle 5</p>
|
||||
Reference in New Issue
Block a user