Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-18 19:34:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Move docs to bulma repo (#299)

Browse Source 
* Add package files whitelist

* Add flex shrink

* Add flex shrink

* Add docs config

* Fix flex shrink

* Fix hero pages

* Add docs folder
This commit is contained in:
Jeremy Thomas
2016-09-11 12:00:49 +01:00
committed by GitHub
parent 1d9f6318a5
commit 9094eff30a
127 changed files with 21908 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
docs/documentation/components/card.html Normal file
View File

@@ -0,0 +1,134 @@
---
layout: documentation
doc-tab: components
doc-subtab: card
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Card</h1>
<h2 class="subtitle">An all-around flexible and composable component</h2>
<hr>
<div class="columns">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="http://placehold.it/300x225" alt="">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<img src="http://placehold.it/64x64" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-5">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="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>
</div>
<div class="column">
{% highlight html %}
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="http://placehold.it/300x225" alt="">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<img src="http://placehold.it/64x64" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-5">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="#">@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>
{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column is-one-third">
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a class="card-header-icon">
<i class="fa fa-angle-down"></i>
</a>
</header>
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column">
{% highlight html %}
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a class="card-header-icon">
<i class="fa fa-angle-down"></i>
</a>
</header>
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
{% endhighlight %}
</div>
</div>
</div>
</section>

260
docs/documentation/components/level.html Normal file
View File

@@ -0,0 +1,260 @@
---
layout: documentation
doc-tab: components
doc-subtab: level
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Level</h1>
<h2 class="subtitle">A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element</h2>
<hr>
<div class="content">
<p>The <strong>structure</strong> of a level is the following:</p>
<ul>
<li>
<code>level</code>: main container
<ul>
<li><code>level-left</code> for the left side</li>
<li>
<code>level-right</code> for the right side
<ul>
<li><code>level-item</code> for each individual element</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
</div>
<div class="structure">
<nav class="level structure-item is-structure-container" title="level">
<div class="level-left structure-item" title="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> posts
</p>
</div>
<div class="level-item">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a post">
<button class="button">
Search
</button>
</p>
</div>
</div>
<div class="level-right structure-item" title="level-right">
<p class="level-item">
<strong>All</strong>
</p>
<p class="level-item">
<a>Published</a>
</p>
<p class="level-item">
<a>Drafts</a>
</p>
<p class="level-item">
<a>Deleted</a>
</p>
<p class="level-item">
<a class="button is-success">
New
</a>
</p>
</div>
</nav>
</div>
<div class="example">
<nav class="level">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> posts
</p>
</div>
<div class="level-item">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a post">
<button class="button">
Search
</button>
</p>
</div>
</div>
<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>
</div>
{% highlight html %}
<!-- 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">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a post">
<button class="button">
Search
</button>
</p>
</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>
{% endhighlight %}
<hr>
<h3 class="title">Centered level</h3>
<div class="content">
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
</div>
<div class="example">
<nav class="level">
<div class="level-item has-text-centered">
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Following</p>
<p class="title">123</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</nav>
</div>
{% highlight html %}
<nav class="level">
<div class="level-item has-text-centered">
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Following</p>
<p class="title">123</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</nav>
{% endhighlight %}
<div class="example">
<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 src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
</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>
</div>
{% highlight html %}
<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 src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
</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>
{% endhighlight %}
<hr>
<h3 class="title">Mobile level</h3>
<div class="content">
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
</div>
<div class="example">
<nav class="level is-mobile">
<div class="level-item has-text-centered">
<p class="heading">Tweets</p>
<p class="title">3,456</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Following</p>
<p class="title">123</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
<div class="level-item has-text-centered">
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</nav>
</div>
</div>
</section>

358
docs/documentation/components/media-object.html Normal file
View File

@@ -0,0 +1,358 @@
---
layout: documentation
doc-tab: components
doc-subtab: media-object
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Media Object</h1>
<h2 class="subtitle">The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context</h2>
<hr>
<div class="content">
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
</div>
<div class="structure">
<article class="media">
<figure class="media-left structure-item" title="media-left">
<p class="image is-64x64">
<img src="http://placehold.it/128x128">
</p>
</figure>
<div class="media-content structure-item is-structure-right" title="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<nav class="level">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fa fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-heart"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right structure-item" title="media-right">
<button class="delete"></button>
</div>
</article>
</div>
<div class="example">
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://placehold.it/128x128">
</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">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fa fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-heart"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
</div>
{% highlight html %}
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://placehold.it/128x128">
</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">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fa fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-heart"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
{% endhighlight %}
<div class="content">
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
</div>
<div class="example">
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://placehold.it/128x128">
</p>
</figure>
<div class="media-content">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
<nav class="level">
<div class="level-left">
<div class="level-item">
<a class="button is-info">Post comment</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>
</div>
{% highlight html %}
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://placehold.it/128x128">
</p>
</figure>
<div class="media-content">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
<nav class="level">
<div class="level-left">
<div class="level-item">
<a class="button is-info">Post comment</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>
{% endhighlight %}
<hr>
<h3 class="title">Nesting</h3>
<div class="content">
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
</div>
<div class="example">
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://placehold.it/128x128">
</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 src="http://placehold.it/96x96">
</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 src="http://placehold.it/96x96">
</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 src="http://placehold.it/128x128">
</p>
</figure>
<div class="media-content">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
<p class="control">
<button class="button">Post comment</button>
</p>
</div>
</article>
</div>
{% highlight html %}
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="http://placehold.it/128x128">
</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 src="http://placehold.it/96x96">
</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 src="http://placehold.it/96x96">
</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 src="http://placehold.it/128x128">
</p>
</figure>
<div class="media-content">
<p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea>
</p>
<p class="control">
<button class="button">Post comment</button>
</p>
</div>
</article>
{% endhighlight %}
</div>
</section>

91
docs/documentation/components/menu.html Normal file
View File

@@ -0,0 +1,91 @@
---
layout: documentation
doc-tab: components
doc-subtab: menu
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Menu</h1>
<h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
<hr>
<div class="columns">
<div class="column is-3">
<aside class="menu">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Customers</a></li>
</ul>
<p class="menu-label">
Administration
</p>
<ul class="menu-list">
<li><a href="#">Team Settings</a></li>
<li>
<a class="is-active" href="#">Manage Your Team</a>
<ul>
<li><a href="#">Members</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Add a member</a></li>
</ul>
</li>
<li><a href="#">Invitations</a></li>
<li><a href="#">Authentication</a></li>
</ul>
<p class="menu-label">
Transactions
</p>
<ul class="menu-list">
<li><a href="#">Payments</a></li>
<li><a href="#">Transfers</a></li>
<li><a href="#">Balance</a></li>
</ul>
</aside>
</div>
<div class="column">
{% highlight html %}
<aside class="menu">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Customers</a></li>
</ul>
<p class="menu-label">
Administration
</p>
<ul class="menu-list">
<li><a href="#">Team Settings</a></li>
<li>
<a class="is-active" href="#">Manage Your Team</a>
<ul>
<li><a href="#">Members</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Add a member</a></li>
</ul>
</li>
<li><a href="#">Invitations</a></li>
<li><a href="#">Authentication</a></li>
</ul>
<p class="menu-label">
Transactions
</p>
<ul class="menu-list">
<li><a href="#">Payments</a></li>
<li><a href="#">Transfers</a></li>
<li><a href="#">Balance</a></li>
</ul>
</aside>
{% endhighlight %}
</div>
</div>
</div>
</section>

247
docs/documentation/components/message.html Normal file
View File

@@ -0,0 +1,247 @@
---
layout: documentation
doc-tab: components
doc-subtab: message
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Messages</h1>
<h2 class="subtitle">
Colored <strong>message</strong> blocks, to emphasize part of your page
</h2>
<hr>
<div class="columns">
<div class="column is-half">
<article class="message">
<div class="message-header">
Hello World
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-primary">
<div class="message-header">
Primary
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-info">
<div class="message-header">
Info
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-success">
<div class="message-header">
Success
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-warning">
<div class="message-header">
Warning
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-danger">
<div class="message-header">
Danger
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
</div>
<div class="column is-half">
{% highlight html %}
<article class="message">
<div class="message-header">
Hello World
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum felis venenatis efficitur.
Aenean ac eleifend lacus, 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-primary">
<div class="message-header">
Primary
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum felis venenatis efficitur.
Aenean ac eleifend lacus, 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-info">
<div class="message-header">
Info
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum felis venenatis efficitur.
Aenean ac eleifend lacus, 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-success">
<div class="message-header">
Success
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum felis venenatis efficitur.
Aenean ac eleifend lacus, 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-warning">
<div class="message-header">
Warning
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum felis venenatis efficitur.
Aenean ac eleifend lacus, 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-danger">
<div class="message-header">
Danger
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum felis venenatis efficitur.
Aenean ac eleifend lacus, 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>
{% endhighlight %}
</div>
</div>
<hr>
<h3 class="subtitle">Message body only</h3>
<div class="content">
<p>You can <strong>omit</strong> the message header:</p>
</div>
<div class="columns">
<div class="column is-half">
<article class="message">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-primary">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-info">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-success">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-warning">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-danger">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
</div>
<div class="column is-half">
{% highlight html %}
<article class="message">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-primary">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-info">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-success">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-warning">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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-danger">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, 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>
{% endhighlight %}
</div>
</div>
</div>
</section>

218
docs/documentation/components/modal.html Normal file
View File

@@ -0,0 +1,218 @@
---
layout: documentation
doc-tab: components
doc-subtab: modal
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Modal</h1>
<h2 class="subtitle">A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want</h2>
<hr>
<div class="content">
<p>The modal structure is very simple:</p>
<ul>
<li>
<code>modal</code>: the main container
<ul>
<li>
<code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
</li>
<li>
<code>modal-content</code>: a horizontally and verticaly centered container, with a maximum width of 640px, in which you can include <em>any</em> content
</li>
<li>
<code>modal-close</code>: a simple cross located in the top right corner
</li>
</ul>
</li>
</ul>
<p>
<a class="button is-primary is-large modal-button" data-target="#modal">Launch example modal</a>
</p>
</div>
{% highlight html %}
<div class="modal">
<div class="modal-background"></div>
<div class="modal-container">
<div class="modal-content">
<!-- Any other Bulma elements you want -->
</div>
</div>
<button class="modal-close"></button>
</div>
{% endhighlight %}
<div class="content">
<p>To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the <code>.modal</code> container</p>
</div>
<div class="message is-danger">
<div class="message-header">
No JavaScript
</div>
<div class="message-body">
Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself
</div>
</div>
<hr>
<h3 class="title">Image modal</h3>
<div class="content">
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
<p>
<a class="button is-primary is-large modal-button" data-target="#modal-bis">Launch image modal</a>
</p>
</div>
{% highlight html %}
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-4by3">
<img src="http://placehold.it/1280x960">
</p>
</div>
<button class="modal-close"></button>
</div>
{% endhighlight %}
<hr>
<h3 class="title">Modal card</h3>
<div class="content">
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
<p>
<a class="button is-primary is-large modal-button" data-target="#modal-ter">Launch modal card</a>
</p>
</div>
{% highlight html %}
<div 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"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
</section>
<footer class="modal-card-foot">
<a class="button is-primary">Save changes</a>
<a class="button">Cancel</a>
</footer>
</div>
</div>
{% endhighlight %}
</div>
</section>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="http://placehold.it/128x128" 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">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fa fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fa fa-heart"></i></span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
<button class="modal-close"></button>
</div>
<div id="modal-bis" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-4by3">
<img src="http://placehold.it/1280x960">
</p>
</div>
<button class="modal-close"></button>
</div>
<div id="modal-ter" 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"></button>
</header>
<section class="modal-card-body">
<div class="content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
<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>
<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>
<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>
<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>
<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>
</ul>
</div>
</section>
<footer class="modal-card-foot">
<a class="button is-success">Save changes</a>
<a class="button">Cancel</a>
</footer>
</div>
</div>

200
docs/documentation/components/nav.html Normal file
View File

@@ -0,0 +1,200 @@
---
layout: documentation
doc-tab: components
doc-subtab: nav
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Nav</h1>
<h2 class="subtitle">
A responsive horizontal <strong>nav bar</strong> that can contain links, tabs, buttons, icons, and a logo
</h2>
<hr>
<div class="content">
<p>
The <code>nav</code> container can have <strong>3 parts</strong>:
</p>
<ul>
<li><code>nav-left</code></li>
<li><code>nav-center</code></li>
<li><code>nav-right</code></li>
</ul>
<p>
For responsiveness, <strong>2 additional</strong> classes are available:
</p>
<ul>
<li><code>nav-toggle</code> for the hamburger menu on mobile</li>
<li><code>nav-menu</code> for menu that is collapsable on mobile (you can combine it with <code>nav-right</code>)</li>
</ul>
</div>
<div class="example">
<nav class="nav">
<div class="nav-left">
<a class="nav-item is-brand" href="#">
<img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo">
</a>
</div>
<div class="nav-center">
<a class="nav-item" href="#">
<span class="icon">
<i class="fa fa-github"></i>
</span>
</a>
<a class="nav-item" href="#">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item" href="#">
Home
</a>
<a class="nav-item" href="#">
Documentation
</a>
<a class="nav-item" href="#">
Blog
</a>
<span class="nav-item">
<a class="button" >
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>Tweet</span>
</a>
<a class="button is-primary" href="#">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</span>
</div>
</nav>
</div>
{% highlight html %}
<nav class="nav">
<div class="nav-left">
<a class="nav-item is-brand" href="#">
<img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo">
</a>
</div>
<div class="nav-center">
<a class="nav-item" href="#">
<span class="icon">
<i class="fa fa-github"></i>
</span>
</a>
<a class="nav-item" href="#">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item" href="#">
Home
</a>
<a class="nav-item" href="#">
Documentation
</a>
<a class="nav-item" href="#">
Blog
</a>
<span class="nav-item">
<a class="button" >
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>Tweet</span>
</a>
<a class="button is-primary" href="#">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</span>
</div>
</nav>
{% endhighlight %}
<hr>
<h3 class="title">Modifiers</h3>
<div class="content">
<ul>
<li>the <code>nav</code> container can have a <strong>shadow</strong> by adding the <code>has-shadow</code> modifier</li>
<li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
<li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
</ul>
</div>
</div>
<div class="example">
<nav class="nav has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-tab is-active">Card</a>
<a class="nav-item is-tab">Level</a>
<a class="nav-item is-tab">Media object</a>
<a class="nav-item is-tab">Menu</a>
<a class="nav-item is-tab">Message</a>
<a class="nav-item is-tab">Modal</a>
<a class="nav-item is-tab">Nav</a>
<a class="nav-item is-tab">Pagination</a>
<a class="nav-item is-tab">Panel</a>
<a class="nav-item is-tab">Tabs</a>
</div>
</div>
</nav>
</div>
{% highlight html %}
<nav class="nav has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-tab is-active">Card</a>
<a class="nav-item is-tab">Level</a>
<a class="nav-item is-tab">Media object</a>
<a class="nav-item is-tab">Menu</a>
<a class="nav-item is-tab">Message</a>
<a class="nav-item is-tab">Modal</a>
<a class="nav-item is-tab">Nav</a>
<a class="nav-item is-tab">Pagination</a>
<a class="nav-item is-tab">Panel</a>
<a class="nav-item is-tab">Tabs</a>
</div>
</div>
</nav>
{% endhighlight %}
</section>

75
docs/documentation/components/pagination.html Normal file
View File

@@ -0,0 +1,75 @@
---
layout: documentation
doc-tab: components
doc-subtab: pagination
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Pagination</h1>
<h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
<hr>
<div class="example">
<nav class="pagination">
<a class="button">Previous</a>
<a class="button">Next page</a>
<ul>
<li>
<a class="button">1</a>
</li>
<li>
<span>...</span>
</li>
<li>
<a class="button">45</a>
</li>
<li>
<a class="button is-primary">46</a>
</li>
<li>
<a class="button">47</a>
</li>
<li>
<span>...</span>
</li>
<li>
<a class="button">86</a>
</li>
</ul>
</nav>
</div>
{% highlight html %}
<nav class="pagination">
<a class="button">Previous</a>
<a class="button">Next page</a>
<ul>
<li>
<a class="button">1</a>
</li>
<li>
<span>...</span>
</li>
<li>
<a class="button">45</a>
</li>
<li>
<a class="button is-primary">46</a>
</li>
<li>
<a class="button">47</a>
</li>
<li>
<span>...</span>
</li>
<li>
<a class="button">86</a>
</li>
</ul>
</nav>
{% endhighlight %}
</div>
</section>

116
docs/documentation/components/panel.html Normal file
View File

@@ -0,0 +1,116 @@
---
layout: documentation
doc-tab: components
doc-subtab: panel
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Panel</h1>
<h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
<hr>
<div class="columns">
<div class="column is-4">
<nav class="panel">
<p class="panel-heading">
Repositories
</p>
<p class="panel-tabs">
<a class="is-active" href="#">All</a>
<a href="#">Public</a>
<a href="#">Private</a>
<a href="#">Sources</a>
<a href="#">Forks</a>
</p>
<a class="panel-block is-active" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma-website</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>marksheet</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>daniellowtw/infBoard</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>jgthms.github.io</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>mojs</a>
<a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>grumpy-cat</a>
<label class="panel-block">
<input type="checkbox">
Remember me
</label>
<div class="panel-block">
<button class="button is-primary is-outlined is-fullwidth">
Reset all filters
</button>
</div>
</nav>
</div>
<div class="column">
{% highlight html %}
<nav class="panel">
<p class="panel-heading">
Repositories
</p>
<p class="panel-tabs">
<a class="is-active" href="#">All</a>
<a href="#">Public</a>
<a href="#">Private</a>
<a href="#">Sources</a>
<a href="#">Forks</a>
</p>
<a class="panel-block is-active" href="#">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
bulma-website
</a>
<a class="panel-block" href="#">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
bulma
</a>
<a class="panel-block" href="#">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
marksheet
</a>
<a class="panel-block" href="#">
<span class="panel-icon">
<i class="fa fa-code-fork"></i>
</span>
daniellowtw/infBoard
</a>
<a class="panel-block" href="#">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block" href="#">
<span class="panel-icon">
<i class="fa fa-code-fork"></i>
</span>
mojs
</a>
<a class="panel-block" href="#">
<span class="panel-icon">
<i class="fa fa-book"></i>
</span>
grumpy-cat
</a>
<label class="panel-checkbox">
<input type="checkbox">
Remember me
</label>
<div class="panel-block">
<button class="button is-primary is-outlined is-fullwidth">
Reset all filters
</button>
</div>
</nav>
{% endhighlight %}
</div>
</div>
</div>
</section>

730
docs/documentation/components/tabs.html Normal file
View File

@@ -0,0 +1,730 @@
---
layout: documentation
doc-tab: components
doc-subtab: tabs
---
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Tabs</h1>
<h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
<hr>
<div class="content">
<p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code>&lt;ul&gt;</code> list.<br>
The <strong>default</strong> tabs style has a single border at the bottom.</p>
</div>
<div class="example">
<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>
{% highlight html %}
<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>
{% endhighlight %}
<hr>
<h3 class="title">Alignment</h3>
<div class="content">
<p>
To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
</p>
</div>
<div class="example">
<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>
{% highlight html %}
<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>
{% endhighlight %}
<div class="example">
<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>
{% highlight html %}
<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>
{% endhighlight %}
<div class="content">
<p>
To have several lists aligned differently, use one of <strong>3 modifiers</strong> on the <code>ul</code>:
</p>
<ul>
<li><code>is-left</code></li>
<li><code>is-center</code></li>
<li><code>is-right</code></li>
</ul>
</div>
<div class="example">
<div class="tabs">
<ul class="is-left">
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
<ul class="is-center">
<li><a>Previous</a></li>
<li><a>Up</a></li>
<li><a>Next</a></li>
</ul>
<ul class="is-right">
<li><a>Search</a></li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs">
<ul class="is-left">
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
<ul class="is-center">
<li><a>Previous</a></li>
<li><a>Up</a></li>
<li><a>Next</a></li>
</ul>
<ul class="is-right">
<li><a>Search</a></li>
</ul>
</div>
{% endhighlight %}
<hr>
<h3 class="title">Icons</h3>
<div class="content">
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
</div>
<div class="example">
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
{% endhighlight %}
<hr>
<h3 class="title">Sizes</h3>
<div class="content">
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
<div class="example">
<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>
{% highlight html %}
<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>
{% endhighlight %}
<div class="example">
<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>
{% highlight html %}
<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>
{% endhighlight %}
<div class="example">
<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>
{% highlight html %}
<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>
{% endhighlight %}
<hr>
<h3 class="title">Styles</h3>
<div class="content">
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
</div>
<div class="example">
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
{% endhighlight %}
<p class="content">
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
</p>
<div class="example">
<div class="tabs is-toggle">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs is-toggle">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
Music
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
Videos
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
Documents
</a>
</li>
</ul>
</div>
{% endhighlight %}
<p class="content">
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
</p>
<div class="example">
<div class="tabs is-fullwidth">
<ul>
<li>
<a>
<span class="icon"><i class="fa fa-angle-left"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fa fa-angle-up"></i></span>
<span>Up</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fa fa-angle-right"></i></span>
</a>
</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs is-fullwidth">
<ul>
<li>
<a>
<span class="icon"><i class="fa fa-angle-left"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fa fa-angle-up"></i></span>
<span>Up</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fa fa-angle-right"></i></span>
</a>
</li>
</ul>
</div>
{% endhighlight %}
<hr>
<h3 class="title">Combining</h3>
<div class="content">
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
</div>
<div class="example">
<div class="tabs is-centered is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs is-centered is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
{% endhighlight %}
<div class="example">
<div class="tabs is-toggle is-fullwidth">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs is-toggle is-fullwidth">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
{% endhighlight %}
<div class="example">
<div class="tabs is-centered is-boxed is-medium">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs is-centered is-boxed is-medium">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
{% endhighlight %}
<div class="example">
<div class="tabs is-toggle is-fullwidth is-large">
<ul>
<li class="is-active">
<a>
<span class="icon"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
{% highlight html %}
<div class="tabs is-toggle is-fullwidth is-large">
<ul>
<li class="is-active">
<a>
<span class="icon"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
{% endhighlight %}
</div>
</section>