mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
955 lines
33 KiB
HTML
955 lines
33 KiB
HTML
---
|
|
layout: default
|
|
route: index
|
|
---
|
|
|
|
<div class="container">
|
|
{% include navbar.html id="Index" transparent=true boxed=true %}
|
|
</div>
|
|
|
|
<section class="hero is-medium has-text-centered">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<p id="b">
|
|
{% include svg/bulma-icon.svg %}
|
|
{% include svg/bulma-icon.svg %}
|
|
</p>
|
|
<h1 id="bulma" class="title">
|
|
Bulma
|
|
</h1>
|
|
<h2 id="modern-framework" class="subtitle">
|
|
A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong>
|
|
</h2>
|
|
<pre id="npm"><code>npm install bulma</code></pre>
|
|
<div id="ghbtns" class="block">
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
|
|
</div>
|
|
{% include carbon.html %}
|
|
<p id="download" class="hero-buttons">
|
|
<a class="button is-primary is-large" href="{{ site.download }}">
|
|
<span class="icon">
|
|
<i class="fa fa-download"></i>
|
|
</span>
|
|
<span>Download</span>
|
|
<small>v{{ site.version }}</small>
|
|
</a>
|
|
<a class="button is-large" href="{{ site.documentation }}">
|
|
View docs
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<nav class="columns">
|
|
<a class="column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
|
|
<span class="icon is-large" style="margin-right: -15px;">
|
|
<i class="fa fa-mobile"></i>
|
|
</span>
|
|
<span class="icon is-large">
|
|
<i class="fa fa-tablet"></i>
|
|
</span>
|
|
<span class="icon is-large" style="margin-right: 10px;">
|
|
<i class="fa fa-desktop"></i>
|
|
</span>
|
|
<p class="title is-4"><strong>Responsive</strong></p>
|
|
<p class="subtitle">Designed for <strong>mobile</strong>-first</p>
|
|
</a>
|
|
<a class="column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
|
|
<span class="icon is-large">
|
|
<i class="fa fa-cubes"></i>
|
|
</span>
|
|
<p class="title is-4"><strong>Modular</strong></p>
|
|
<p class="subtitle">Just import what you <strong>need</strong></p>
|
|
</a>
|
|
<a class="column has-text-centered" href="{{ site.url }}/documentation/grid/columns/">
|
|
<span class="icon is-large">
|
|
<i class="fa fa-css3"></i>
|
|
</span>
|
|
<p class="title is-4"><strong>Modern</strong></p>
|
|
<p class="subtitle">Built with <strong>Flexbox</strong></p>
|
|
</a>
|
|
<a class="column has-text-centered" href="{{ site.github }}">
|
|
<span class="icon is-large">
|
|
<i class="fa fa-github"></i>
|
|
</span>
|
|
<p class="title is-4"><strong>Free</strong></p>
|
|
<p class="subtitle">Open source on <strong>GitHub</strong></p>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<h3 class="title is-2">
|
|
<a href="{{ site.url }}/documentation/grid/columns">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-pause"></i>
|
|
</span>
|
|
Simple <strong>columns</strong>
|
|
</a>
|
|
</h3>
|
|
<h4 class="subtitle is-4">Just add columns, they will resize themselves</h4>
|
|
<div id="grid" class="columns">
|
|
<div class="column">
|
|
<div class="notification is-primary has-text-centered">
|
|
<p class="title">1</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="notification is-info has-text-centered">
|
|
<p class="title">2</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="notification is-success has-text-centered">
|
|
<p class="title">3</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="notification is-warning has-text-centered">
|
|
<p class="title">4</p>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="notification is-danger has-text-centered">
|
|
<p class="title">5</p>
|
|
</div>
|
|
</div>
|
|
<div class="column" style="display: none;">
|
|
<div class="notification is-primary has-text-centered">
|
|
<p class="title">6</p>
|
|
</div>
|
|
</div>
|
|
<div class="column" style="display: none;">
|
|
<div class="notification is-info has-text-centered">
|
|
<p class="title">7</p>
|
|
</div>
|
|
</div>
|
|
<div class="column" style="display: none;">
|
|
<div class="notification is-success has-text-centered">
|
|
<p class="title">8</p>
|
|
</div>
|
|
</div>
|
|
<div class="column" style="display: none;">
|
|
<div class="notification is-warning has-text-centered">
|
|
<p class="title">9</p>
|
|
</div>
|
|
</div>
|
|
<div class="column" style="display: none;">
|
|
<div class="notification is-danger has-text-centered">
|
|
<p class="title">10</p>
|
|
</div>
|
|
</div>
|
|
<div class="column" style="display: none;">
|
|
<div class="notification is-primary has-text-centered">
|
|
<p class="title">11</p>
|
|
</div>
|
|
</div>
|
|
<div class="column" style="display: none;">
|
|
<div class="notification is-info has-text-centered">
|
|
<p class="title">12</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field has-addons has-addons-centered">
|
|
<p class="control">
|
|
<a id="add" class="button is-unselectable">Add column</a>
|
|
</p>
|
|
<p class="control">
|
|
<a id="remove" class="button is-unselectable">Remove column</a>
|
|
</p>
|
|
</div>
|
|
<div id="message" class="message is-info">
|
|
<p class="message-header">Info</p>
|
|
<p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
|
|
If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
|
|
</div>
|
|
<div id="markup">
|
|
{% highlight html %}
|
|
<div class="columns">
|
|
<div class="column">1</div>
|
|
<div class="column">2</div>
|
|
<div class="column">3</div>
|
|
<div class="column">4</div>
|
|
<div class="column">5</div>
|
|
</div>
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="is-marginless">
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<h3 class="title is-2">
|
|
<a href="{{ site.url }}/documentation/grid/tiles">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-th-large"></i>
|
|
</span>
|
|
Magic <strong>tiles</strong>
|
|
</a>
|
|
</h3>
|
|
<h4 class="subtitle is-4">A single element for a Metro UI CSS grid</h4>
|
|
<div class="tile is-ancestor">
|
|
<div class="tile is-vertical is-8">
|
|
<div class="tile">
|
|
<div class="tile is-parent is-vertical">
|
|
<article class="tile is-child notification is-primary">
|
|
<p class="title">Vertical...</p>
|
|
<p class="subtitle">Top tile</p>
|
|
</article>
|
|
<article class="tile is-child notification is-warning">
|
|
<p class="title">...tiles</p>
|
|
<p class="subtitle">Bottom tile</p>
|
|
</article>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child notification is-info">
|
|
<p class="title">Middle tile</p>
|
|
<p class="subtitle">With an image</p>
|
|
<figure class="image is-4by3">
|
|
<img src="{{site.url}}/images/placeholders/640x480.png">
|
|
</figure>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child notification is-danger">
|
|
<p class="title">Wide tile</p>
|
|
<p class="subtitle">Aligned with the right tile</p>
|
|
<div class="content">
|
|
<p>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>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child notification is-success">
|
|
<p class="title">Tall tile</p>
|
|
<p class="subtitle">With even more content</p>
|
|
<div class="content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
|
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
|
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
{% highlight html %}
|
|
<div class="tile is-ancestor">
|
|
<div class="tile is-vertical is-8">
|
|
<div class="tile">
|
|
<div class="tile is-parent is-vertical">
|
|
<article class="tile is-child">
|
|
<!-- Any content you want here -->
|
|
</article>
|
|
<article class="tile is-child">
|
|
<!-- Any content you want here -->
|
|
</article>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child">
|
|
<!-- Any content you want here -->
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child">
|
|
<!-- Any content you want here -->
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="tile is-parent">
|
|
<article class="tile is-child">
|
|
<!-- Any content you want here -->
|
|
</article>
|
|
</div>
|
|
</div>
|
|
{% endhighlight %}
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="is-marginless">
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<h3 class="title is-2">
|
|
<a href="{{ site.url }}/documentation/components/level/">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-arrows-h"></i>
|
|
</span>
|
|
Flexible <strong>horizontal level</strong>
|
|
</a>
|
|
</h3>
|
|
<h4 class="subtitle is-4">Include any type of element, they will remain vertically centered</h4>
|
|
<nav class="level">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<p class="title is-4">
|
|
<strong>123</strong> posts
|
|
</p>
|
|
</div>
|
|
<p class="level-item">
|
|
<a class="button is-primary">
|
|
New
|
|
</a>
|
|
</p>
|
|
<div class="level-item">
|
|
<div class="field has-addons">
|
|
<p class="control">
|
|
<input class="input" type="text" placeholder="Filter">
|
|
</p>
|
|
<p class="control">
|
|
<button class="button">
|
|
Search
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
<div class="level-item">
|
|
Show:
|
|
</div>
|
|
<p class="level-item">
|
|
<strong>All</strong>
|
|
</p>
|
|
<p class="level-item">
|
|
<a href="#">Published</a>
|
|
</p>
|
|
<p class="level-item">
|
|
<a href="#">Drafts</a>
|
|
</p>
|
|
<div class="level-item">
|
|
Sort:
|
|
</div>
|
|
<div class="level-item">
|
|
<span class="select">
|
|
<select>
|
|
<option>Date created</option>
|
|
</select>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="is-marginless">
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<div class="columns is-vcentered">
|
|
<div class="column">
|
|
<h3 class="title is-2">
|
|
<a href="{{ site.url }}/documentation/components/media-object/">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-magic"></i>
|
|
</span>
|
|
Versatile <strong>media object</strong>
|
|
</a>
|
|
</h3>
|
|
<h4 class="subtitle is-4">A simple block with an image that will solve 90% of your UI problems</h4>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="box">
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-64x64">
|
|
<img src="{{site.url}}/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. 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="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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="hero is-fullheight is-primary">
|
|
<div class="hero-head">
|
|
<div class="container">
|
|
<div class="tabs is-centered">
|
|
<ul>
|
|
<li><a>This is always at the top</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<h3 class="title is-2">
|
|
<a href="{{ site.url }}/documentation/layout/hero/">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-arrows-v"></i>
|
|
</span>
|
|
Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
|
|
</a>
|
|
</h3>
|
|
<h4 class="subtitle is-4">Include any content you want, it's always centered</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-foot">
|
|
<div class="container">
|
|
<div class="tabs is-centered">
|
|
<ul>
|
|
<li><a>And this at the bottom</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<div class="columns is-vcentered">
|
|
<div class="column">
|
|
<h3 class="title is-2">
|
|
<a href="{{ site.url }}/documentation/modifiers/syntax/" style="display: block;">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-cogs"></i>
|
|
</span>
|
|
Compose your element with <strong>modifier</strong> classes
|
|
</a>
|
|
</h3>
|
|
<h4 class="subtitle is-4">Add and combine <code>is-*</code> CSS classes to quickly alter styles</h4>
|
|
</div>
|
|
<div class="column">
|
|
<div class="block">
|
|
<div class="field">
|
|
<p class="control">
|
|
<code>button</code>
|
|
</p>
|
|
</div>
|
|
<a class="button">Button</a>
|
|
</div>
|
|
<div class="block">
|
|
<div class="field">
|
|
<p class="control">
|
|
<code>button is-primary</code>
|
|
</p>
|
|
</div>
|
|
<a class="button is-primary">Button</a>
|
|
</div>
|
|
<div class="block">
|
|
<div class="field">
|
|
<p class="control">
|
|
<code>button is-primary is-large</code>
|
|
</p>
|
|
</div>
|
|
<a class="button is-primary is-large">Button</a>
|
|
</div>
|
|
<div class="block">
|
|
<div class="field">
|
|
<p class="control">
|
|
<code>button is-primary is-large is-loading</code>
|
|
</p>
|
|
</div>
|
|
<a class="button is-primary is-large is-loading">Button</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="is-marginless">
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<h3 class="title is-2">
|
|
<a href="{{ site.url }}/documentation/elements/box/">
|
|
<span class="icon is-medium">
|
|
<i class="fa fa-asterisk"></i>
|
|
</span>
|
|
And all the usual <strong>elements</strong> and <strong>components</strong>
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section is-medium" style="padding-top: 0;">
|
|
<div class="container">
|
|
|
|
<div class="columns">
|
|
<div class="column is-2">
|
|
<h4 class="title is-4"><strong>Elements</strong></h4>
|
|
</div>
|
|
<div class="column is-10">
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Form</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<div class="field">
|
|
<label class="label">Form label</label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="Input">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<span class="select">
|
|
<select>
|
|
<option>Select dropdown</option>
|
|
</select>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<textarea class="textarea" placeholder="Textarea"></textarea>
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<label class="checkbox">
|
|
<input type="checkbox">
|
|
Checkbox
|
|
</label>
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<label class="radio">
|
|
<input type="radio" name="question">
|
|
Radio
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="question">
|
|
Buttons
|
|
</label>
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<a class="button is-primary">Button</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Box</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<div class="box">
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-64x64">
|
|
<img src="{{site.url}}/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">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Button</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
<div class="control"><a class="button">Button</a></div>
|
|
<div class="control"><a class="button is-white">White</a></div>
|
|
<div class="control"><a class="button is-light">Light</a></div>
|
|
<div class="control"><a class="button is-dark">Dark</a></div>
|
|
<div class="control"><a class="button is-black">Black</a></div>
|
|
<div class="control"><a class="button is-link">Link</a></div>
|
|
</div>
|
|
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
<div class="control"><a class="button is-primary">Primary</a></div>
|
|
<div class="control"><a class="button is-info">Info</a></div>
|
|
<div class="control"><a class="button is-success">Success</a></div>
|
|
<div class="control"><a class="button is-warning">Warning</a></div>
|
|
<div class="control"><a class="button is-danger">Danger</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Notification</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<div class="notification">
|
|
<button class="delete"></button>
|
|
Lorem ipsum dolor sit amet, consectetur
|
|
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
|
consectetur adipiscing elit
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Tags</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<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-info">Info</span>
|
|
<span class="tag is-success">Success</span>
|
|
<span class="tag is-warning">Warning</span>
|
|
<span class="tag is-danger">Danger</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-2">
|
|
<h4 class="title is-4"><strong>Components</strong></h4>
|
|
</div>
|
|
<div class="column is-10">
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Card</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<div class="columns">
|
|
<div class="column is-half">
|
|
<div class="card">
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img src="http://localhost:4000/images/placeholders/1280x960.png" alt="Image">
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-48x48">
|
|
<img src="http://localhost:4000/images/placeholders/96x96.png" alt="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>@bulmaio</a>.
|
|
<a>#css</a> <a>#responsive</a>
|
|
<br>
|
|
<small>11:09 PM - 1 Jan 2016</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-half">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Dropdown</h4>
|
|
</div>
|
|
<div class="column is-9" style="height: 16rem;">
|
|
<div class="dropdown is-active">
|
|
<div class="dropdown-trigger">
|
|
<a class="button">
|
|
<span>Dropdown button</span>
|
|
<span class="icon is-small">
|
|
<i class="fa fa-angle-down"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-content">
|
|
<a class="dropdown-item">
|
|
Dropdown item
|
|
</a>
|
|
<a class="dropdown-item">
|
|
Other dropdown item
|
|
</a>
|
|
<a class="dropdown-item is-active">
|
|
Active dropdown item
|
|
</a>
|
|
<a class="dropdown-item">
|
|
Other item
|
|
</a>
|
|
<hr class="dropdown-divider">
|
|
<a class="dropdown-item">
|
|
With a divider
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Message</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<article class="message is-primary">
|
|
<div class="message-header">
|
|
<p>Primary</p>
|
|
<button class="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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Pagination</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<nav class="pagination">
|
|
<a class="pagination-previous">Previous</a>
|
|
<a class="pagination-next">Next page</a>
|
|
<ul class="pagination-list">
|
|
<li>
|
|
<a class="pagination-link">1</a>
|
|
</li>
|
|
<li>
|
|
<span class="pagination-ellipsis">…</span>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link">45</a>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link is-current">46</a>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link">47</a>
|
|
</li>
|
|
<li>
|
|
<span class="pagination-ellipsis">…</span>
|
|
</li>
|
|
<li>
|
|
<a class="pagination-link">86</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Panel</h4>
|
|
</div>
|
|
<div class="column is-6">
|
|
<nav class="panel" style="max-width: 320px;">
|
|
<p class="panel-heading">
|
|
Repositories
|
|
</p>
|
|
<div class="panel-block">
|
|
<p class="control has-icons-left">
|
|
<input class="input is-small" type="text" placeholder="Search">
|
|
<span class="icon is-small is-left">
|
|
<i class="fa fa-search"></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="fa fa-book"></i>
|
|
</span>
|
|
bulma
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-book"></i>
|
|
</span>
|
|
marksheet
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-book"></i>
|
|
</span>
|
|
minireset.css
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-book"></i>
|
|
</span>
|
|
jgthms.github.io
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-code-fork"></i>
|
|
</span>
|
|
daniellowtw/infBoard
|
|
</a>
|
|
<a class="panel-block">
|
|
<span class="panel-icon">
|
|
<i class="fa fa-code-fork"></i>
|
|
</span>
|
|
mojs
|
|
</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>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<h4 class="subtitle is-4">Tabs</h4>
|
|
</div>
|
|
<div class="column is-9">
|
|
<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>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr class="is-marginless">
|
|
|
|
<section class="section is-medium">
|
|
<div class="container">
|
|
<p class="title has-text-centered">Get started</p>
|
|
<div class="hero-buttons">
|
|
<a class="button is-info is-large" href="{{ site.documentation }}">
|
|
<span class="icon">
|
|
<i class="fa fa-book"></i>
|
|
</span>
|
|
<span>Check the <strong>Docs</strong></span>
|
|
</a>
|
|
<a class="button is-black is-large" href="{{ site.github }}">
|
|
<span class="icon">
|
|
<i class="fa fa-github"></i>
|
|
</span>
|
|
<span>Contribute</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|