mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
126
docs/_includes/library/components/breadcrumb.html
Normal file
126
docs/_includes/library/components/breadcrumb.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-right" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-home" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Bulma</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-puzzle-piece" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Components</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-thumbs-up" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Breadcrumb</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-large" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
105
docs/_includes/library/components/card.html
Normal file
105
docs/_includes/library/components/card.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/96x96.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4">John Smith</p>
|
||||
<p class="subtitle is-6">@johnsmith</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
|
||||
<a href="https://bulma.io">@bulmaio</a>. <a href="#css">#css</a> <a href="#responsive">#responsive</a>
|
||||
<br>
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">Component</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 class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<a href="#">@bulmaio</a>. <a href="#css">#css</a> <a href="#responsive">#responsive</a>
|
||||
<br>
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||||
</p>
|
||||
<p class="subtitle">Jeff Atwood</p>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<span> View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a> </span>
|
||||
</p>
|
||||
<p class="card-footer-item">
|
||||
<span> Share on <a href="#">Facebook</a> </span>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
150
docs/_includes/library/components/dropdown.html
Normal file
150
docs/_includes/library/components/dropdown.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<div style="height: 20rem;">
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
|
||||
<span>Dropdown button</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu" id="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<button role="menuitem" class="dropdown-item">Dropdown item</button>
|
||||
<a role="menuitem" class="dropdown-item"> Other dropdown item </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Other dropdown item </a>
|
||||
<hr class="dropdown-divider">
|
||||
<a role="menuitem" href="#" class="dropdown-item"> With a divider </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 20rem;">
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
|
||||
<span>Content</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div role="presentation" class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
</div>
|
||||
<hr role="presentation" class="dropdown-divider">
|
||||
<div role="presentation" class="dropdown-item">
|
||||
<p>You simply need to use a <code><div></code> instead.</p>
|
||||
</div>
|
||||
<hr role="presentation" class="dropdown-divider">
|
||||
<a role="menuitem" href="#" class="dropdown-item"> This is a link </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
|
||||
<span>Click me</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Overview </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Modifiers </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Grid </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Form </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Elements </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Components </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Layout </a>
|
||||
<hr class="dropdown-divider">
|
||||
<a role="menuitem" href="#" class="dropdown-item"> More </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown is-hoverable">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
|
||||
<span>Hover me</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
|
||||
<span>Left aligned</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu" id="dropdown-menu5" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div role="menuitem" class="dropdown-item">
|
||||
<p>The dropdown is <strong>left-aligned</strong> by default.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown is-right is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
|
||||
<span>Right aligned</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu" id="dropdown-menu6" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div role="menuitem" class="dropdown-item">
|
||||
<p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown is-up">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
|
||||
<span>Dropup button</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-up" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu7" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div class="dropdown-item">
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
28
docs/_includes/library/components/menu.html
Normal file
28
docs/_includes/library/components/menu.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<aside class="menu">
|
||||
<p class="menu-label">General</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Dashboard</a></li>
|
||||
<li><a>Customers</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">Administration</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Team Settings</a></li>
|
||||
<li>
|
||||
<a class="is-active">Manage Your Team</a>
|
||||
<ul>
|
||||
<li><a>Members</a></li>
|
||||
<li><a>Plugins</a></li>
|
||||
<li><a>Add a member</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a>Invitations</a></li>
|
||||
<li><a>Cloud Storage Environment Settings</a></li>
|
||||
<li><a>Authentication</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">Transactions</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Payments</a></li>
|
||||
<li><a>Transfers</a></li>
|
||||
<li><a>Balance</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
91
docs/_includes/library/components/message.html
Normal file
91
docs/_includes/library/components/message.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<article class="message">
|
||||
<div class="message-header">
|
||||
<p>Hello World</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>
|
||||
|
||||
{% for status in site.data.colors.status %}
|
||||
<article class="message is-{{ status }}">
|
||||
<div class="message-header">
|
||||
<p>Hello World</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.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="message is-{{ status }}">
|
||||
<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.
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
<article class="message is-small">
|
||||
<div class="message-header">
|
||||
<p>Hello World</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>
|
||||
|
||||
<article class="message is-normal">
|
||||
<div class="message-header">
|
||||
<p>Hello World</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>
|
||||
|
||||
<article class="message is-medium">
|
||||
<div class="message-header">
|
||||
<p>Hello World</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>
|
||||
|
||||
<article class="message is-large">
|
||||
<div class="message-header">
|
||||
<p>Hello World</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>
|
||||
72
docs/_includes/library/components/modal.html
Normal file
72
docs/_includes/library/components/modal.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<div class="buttons">
|
||||
<button class="button js-modal-trigger" data-target="modal-empty">Empty</button>
|
||||
<button class="button js-modal-trigger" data-target="modal-image">Image</button>
|
||||
<button class="button js-modal-trigger" data-target="modal-box">Box</button>
|
||||
<button class="button js-modal-trigger" data-target="modal-card">Card</button>
|
||||
</div>
|
||||
|
||||
<div id="modal-empty" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<!-- Any other Bulma elements you want -->
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-image" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-box" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="box">
|
||||
<p>Modal JS example</p>
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-card" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<div class="buttons">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
112
docs/_includes/library/components/navbar.html
Normal file
112
docs/_includes/library/components/navbar.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://bulma.io">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item"> Home </a>
|
||||
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> More </a>
|
||||
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item"> About </a>
|
||||
<a class="navbar-item"> Jobs </a>
|
||||
<a class="navbar-item"> Contact </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item"> Report an issue </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-light"> Log in </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://bulma.io">
|
||||
<img
|
||||
src="https://bulma.io/images/bulma-logo.png"
|
||||
alt="Bulma: a modern CSS framework based on Flexbox"
|
||||
width="112"
|
||||
height="28"
|
||||
>
|
||||
</a>
|
||||
<div class="navbar-burger" data-target="navbarExampleTransparentExample">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navbarExampleTransparentExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="https://bulma.io/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link" href="https://bulma.io/documentation/overview/start/"> Docs </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/overview/start/"> Overview </a>
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/overview/modifiers/"> Modifiers </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/columns/basics/"> Columns </a>
|
||||
<a class="navbar-item is-selected" href="https://bulma.io/documentation/layout/container/"> Layout </a>
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/form/general/"> Form </a>
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/elements/box/"> Elements </a>
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/components/breadcrumb/"> Components </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a
|
||||
class="bd-tw-button button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.9.4/bulma-0.9.4.zip">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
127
docs/_includes/library/components/pagination.html
Normal file
127
docs/_includes/library/components/pagination.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 1">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous is-disabled" title="This is the first page">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>
|
||||
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-right" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-small" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-medium" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-large" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
108
docs/_includes/library/components/panel.html
Normal file
108
docs/_includes/library/components/panel.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">Repositories</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input" type="text" placeholder="Search">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
<a>Private</a>
|
||||
<a>Sources</a>
|
||||
<a>Forks</a>
|
||||
</p>
|
||||
<a class="panel-block is-active">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
bulma
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
||||
</span>
|
||||
daniellowtw/infboard
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
||||
</span>
|
||||
mojs
|
||||
</a>
|
||||
<label class="panel-block">
|
||||
<input type="checkbox">
|
||||
remember me
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
<button class="button is-link is-outlined is-fullwidth">Reset all filters</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% for status in site.data.colors.status %}
|
||||
<article class="panel is-{{ status }}">
|
||||
<p class="panel-heading">
|
||||
{{ status | capitalize }}
|
||||
</p>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
<a>Private</a>
|
||||
<a>Sources</a>
|
||||
<a>Forks</a>
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-{{ status }}" type="text" placeholder="Search">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<a class="panel-block is-active">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
bulma
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
308
docs/_includes/library/components/tabs.html
Normal file
308
docs/_includes/library/components/tabs.html
Normal file
@@ -0,0 +1,308 @@
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-right">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-small">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-medium">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-large">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-toggle">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-toggle is-toggle-rounded">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-fullwidth">
|
||||
<ul>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
|
||||
<span>Up</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span>Right</span>
|
||||
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-centered is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-toggle is-fullwidth">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-centered is-boxed is-medium">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-toggle is-fullwidth is-large">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
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>
|
||||
351
docs/_includes/library/form/file.html
Normal file
351
docs/_includes/library/form/file.html
Normal file
@@ -0,0 +1,351 @@
|
||||
<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"> Choose a file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file has-name is-right">
|
||||
<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"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file has-name is-fullwidth">
|
||||
<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"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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"> Choose a file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file 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-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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 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"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-normal">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-normal 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"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-normal 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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-normal 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"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
95
docs/_includes/library/form/general.html
Normal file
95
docs/_includes/library/form/general.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<div class="field">
|
||||
<label for="text" class="label">Name</label>
|
||||
|
||||
<div class="control">
|
||||
<input id="text" class="input" type="text" placeholder="Text input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="username" class="label">Username</label>
|
||||
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input id="username" class="input is-success" type="text" placeholder="Text input" value="bulma">
|
||||
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-user"></i>
|
||||
</span>
|
||||
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="help is-success">This username is available</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="email" class="label">Email</label>
|
||||
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input id="email" class="input is-danger" type="email" placeholder="Email input" value="hello@">
|
||||
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
</div>
|
||||
<p class="help is-danger">This email is invalid</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="subject" class="label">Subject</label>
|
||||
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select id="subject">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="message" class="label">Message</label>
|
||||
|
||||
<div class="control">
|
||||
<textarea id="mesage" class="textarea" placeholder="Textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label for="terms" class="checkbox">
|
||||
<input id="terms" type="checkbox">
|
||||
I agree to the <a href="#">terms and conditions</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label for="yes" class="radio">
|
||||
<input id="yes" type="radio" name="question">
|
||||
Yes
|
||||
</label>
|
||||
<label for="no" class="radio">
|
||||
<input id="no" type="radio" name="question">
|
||||
No
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-link">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-link is-light">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
21
docs/_includes/library/grid/columns.html
Normal file
21
docs/_includes/library/grid/columns.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<div class="columns is-mobile">
|
||||
<div style="background: tomato; color: white; padding: 1em 2em;" class="column is-half is-offset-one-quarter">
|
||||
is-half is-offset-one-quarter
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div style="background: purple; color: white; padding: 1em 2em;" class="column is-three-fifths is-offset-one-fifth">
|
||||
is-three-fifths is-offset-one-fifth
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div style="background: navy; color: white; padding: 1em 2em;" class="column is-4 is-offset-8">is-4 is-offset-8</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div style="background: green; color: white; padding: 1em 2em;" class="column is-11 is-offset-1">
|
||||
is-11 is-offset-1
|
||||
</div>
|
||||
</div>
|
||||
35
docs/_includes/library/layout/container.html
Normal file
35
docs/_includes/library/layout/container.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<div class="container">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>centered</strong> on desktop and larger viewports.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-fullhd">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-max-desktop">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-max-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-fluid">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any viewport size.
|
||||
</div>
|
||||
</div>
|
||||
9
docs/_includes/library/layout/footer.html
Normal file
9
docs/_includes/library/layout/footer.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed
|
||||
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
231
docs/_includes/library/layout/hero.html
Normal file
231
docs/_includes/library/layout/hero.html
Normal file
@@ -0,0 +1,231 @@
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<p class="title">Hero title</p>
|
||||
<p class="subtitle">Hero subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% for status in site.data.colors.status %}
|
||||
<section class="hero is-{{ status }}">
|
||||
<div class="hero-body">
|
||||
<p class="title">{{ status | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ status | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
{% for size in site.data.colors.sizes %}
|
||||
<section class="hero is-{{ size }}">
|
||||
<div class="hero-body">
|
||||
<p class="title">{{ size | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ size | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
<section class="hero is-halfheight">
|
||||
<div class="hero-body">
|
||||
<div>
|
||||
<p class="title">{{ 'halfheight' | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ 'halfheight' | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div>
|
||||
<p class="title">{{ 'fullheight' | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ 'fullheight' | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-primary is-medium">
|
||||
<!-- Hero head: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroA">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroA" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-primary is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero footer: will stick at the bottom -->
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active"><a>Overview</a></li>
|
||||
<li><a>Modifiers</a></li>
|
||||
<li><a>Grid</a></li>
|
||||
<li><a>Elements</a></li>
|
||||
<li><a>Components</a></li>
|
||||
<li><a>Layout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-head">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroB">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroB" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-info is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Modifiers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Grid</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Components</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-success is-fullheight">
|
||||
<!-- Hero head: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
<header class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroC">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroC" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-success is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero footer: will stick at the bottom -->
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active"><a>Overview</a></li>
|
||||
<li><a>Modifiers</a></li>
|
||||
<li><a>Grid</a></li>
|
||||
<li><a>Elements</a></li>
|
||||
<li><a>Components</a></li>
|
||||
<li><a>Layout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
100
docs/_includes/library/layout/level.html
Normal file
100
docs/_includes/library/layout/level.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!-- Main container -->
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="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>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="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>
|
||||
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="level">
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Home</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-type.png" alt="" style="height: 30px;">
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Contact</a>
|
||||
</p>
|
||||
</nav>
|
||||
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
150
docs/_includes/library/layout/media.html
Normal file
150
docs/_includes/library/layout/media.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<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. Proin ornare magna eros, eu pellentesque tortor
|
||||
vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<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">
|
||||
<button aria-label="delete" class="delete"></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a class="button is-info">Submit</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<label class="checkbox"> <input type="checkbox"> Press enter to submit </label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Barbara Middleton</strong>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non.
|
||||
Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/96x96.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Sean Brown</strong>
|
||||
<br>
|
||||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et
|
||||
netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod.
|
||||
Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/96x96.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Kayli Eunice </strong>
|
||||
<br>
|
||||
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna
|
||||
vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
||||
posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<button aria-label="delete" class="button">Post comment</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
20
docs/_includes/library/layout/section.html
Normal file
20
docs/_includes/library/layout/section.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user