mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Move docs to bulma repo (#299)
* 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
GitHub
parent
1d9f6318a5
commit
9094eff30a
10
.gitignore
vendored
10
.gitignore
vendored
@ -1,5 +1,11 @@
|
|||||||
.sass-cache
|
# Files
|
||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules
|
.ruby-version
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
|
||||||
|
# Folders
|
||||||
.idea/
|
.idea/
|
||||||
|
.sass-cache
|
||||||
|
_gh_pages
|
||||||
|
_site
|
||||||
|
node_modules
|
||||||
|
|||||||
5
Gemfile
Normal file
5
Gemfile
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
source 'https://rubygems.org'
|
||||||
|
|
||||||
|
group :development, :test do
|
||||||
|
gem 'jekyll', '~> 3.1.2'
|
||||||
|
end
|
||||||
39
Gemfile.lock
Normal file
39
Gemfile.lock
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
GEM
|
||||||
|
remote: https://rubygems.org/
|
||||||
|
specs:
|
||||||
|
colorator (0.1)
|
||||||
|
ffi (1.9.10)
|
||||||
|
jekyll (3.1.3)
|
||||||
|
colorator (~> 0.1)
|
||||||
|
jekyll-sass-converter (~> 1.0)
|
||||||
|
jekyll-watch (~> 1.1)
|
||||||
|
kramdown (~> 1.3)
|
||||||
|
liquid (~> 3.0)
|
||||||
|
mercenary (~> 0.3.3)
|
||||||
|
rouge (~> 1.7)
|
||||||
|
safe_yaml (~> 1.0)
|
||||||
|
jekyll-sass-converter (1.4.0)
|
||||||
|
sass (~> 3.4)
|
||||||
|
jekyll-watch (1.3.1)
|
||||||
|
listen (~> 3.0)
|
||||||
|
kramdown (1.10.0)
|
||||||
|
liquid (3.0.6)
|
||||||
|
listen (3.1.1)
|
||||||
|
rb-fsevent (>= 0.9.3)
|
||||||
|
rb-inotify (>= 0.9.7)
|
||||||
|
mercenary (0.3.6)
|
||||||
|
rb-fsevent (0.9.7)
|
||||||
|
rb-inotify (0.9.7)
|
||||||
|
ffi (>= 0.5.0)
|
||||||
|
rouge (1.10.1)
|
||||||
|
safe_yaml (1.0.4)
|
||||||
|
sass (3.4.21)
|
||||||
|
|
||||||
|
PLATFORMS
|
||||||
|
ruby
|
||||||
|
|
||||||
|
DEPENDENCIES
|
||||||
|
jekyll (~> 3.1.2)
|
||||||
|
|
||||||
|
BUNDLED WITH
|
||||||
|
1.11.2
|
||||||
21
_config.yml
Normal file
21
_config.yml
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# Meta
|
||||||
|
|
||||||
|
title: "Bulma: a modern CSS framework based on Flexbox"
|
||||||
|
description: "Bulma is a CSS framework based on Flexbox and built with Sass"
|
||||||
|
|
||||||
|
# Build
|
||||||
|
|
||||||
|
encoding: UTF-8
|
||||||
|
markdown: kramdown
|
||||||
|
permalink: pretty
|
||||||
|
source: docs
|
||||||
|
url: "http://bulma.io"
|
||||||
|
|
||||||
|
# Variables
|
||||||
|
|
||||||
|
baseurl: ""
|
||||||
|
cssurl: "/css/bulma-docs.css"
|
||||||
|
documentation: "/documentation/overview/start/"
|
||||||
|
download: "https://github.com/jgthms/bulma/archive/0.1.2.zip"
|
||||||
|
github: "https://github.com/jgthms/bulma"
|
||||||
|
version: 0.1.2
|
||||||
@ -20,6 +20,8 @@
|
|||||||
"node_modules",
|
"node_modules",
|
||||||
"bower_components",
|
"bower_components",
|
||||||
"test",
|
"test",
|
||||||
"tests"
|
"tests",
|
||||||
|
"docs",
|
||||||
|
"images"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
322
css/bulma.css
vendored
322
css/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
10
docs/.gitignore
vendored
Normal file
10
docs/.gitignore
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.DS_Store
|
||||||
|
.sass-cache
|
||||||
|
/_sass
|
||||||
|
/bulma
|
||||||
|
/css
|
||||||
|
/styles/node_modules
|
||||||
|
_config.local.yml
|
||||||
|
_site
|
||||||
|
bulma-website-local.sass
|
||||||
|
npm-debug.log
|
||||||
21
docs/LICENSE
Normal file
21
docs/LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2016 Jeremy Thomas
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
31
docs/_includes/blog-hero.html
Normal file
31
docs/_includes/blog-hero.html
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<section class="hero is-primary">
|
||||||
|
<div class="hero-head">
|
||||||
|
<div class="container">
|
||||||
|
{% include header.html %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns is-vcentered">
|
||||||
|
<div class="column">
|
||||||
|
<h1 class="title">
|
||||||
|
<a href="{{ site.baseurl }}/blog">Blog</a>
|
||||||
|
</h1>
|
||||||
|
<p class="subtitle">
|
||||||
|
Stay updated about new features, bug fixes, and releases
|
||||||
|
</p>
|
||||||
|
<a class="button is-primary is-inverted" href="{{ site.baseurl }}/atom.xml">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-rss"></i>
|
||||||
|
</span>
|
||||||
|
<span>Subscribe</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="column is-narrow">
|
||||||
|
{% include carbon.html %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
3
docs/_includes/carbon.html
Normal file
3
docs/_includes/carbon.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<div id="carbon" class="box">
|
||||||
|
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js"></script>
|
||||||
|
</div>
|
||||||
134
docs/_includes/footer.html
Normal file
134
docs/_includes/footer.html
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
<section id="newsletter" class="hero is-primary">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Begin MailChimp Signup Form -->
|
||||||
|
<div id="mc_embed_signup" class="columns is-vcentered">
|
||||||
|
<div class="column is-one-third is-left">
|
||||||
|
<p class="title">Bulma <strong>Newsletter</strong></p>
|
||||||
|
<p class="subtitle">Get notified when v1 is ready!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<form action="https://bbxdesign.us3.list-manage.com/subscribe/post?u=b43b93fe633f0560b2a72a69c&id=52585e8803" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
||||||
|
<div id="mc_embed_signup_scroll">
|
||||||
|
<div class="control is-grouped">
|
||||||
|
<div class="control has-icon is-expanded">
|
||||||
|
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="mce-responses">
|
||||||
|
<div class="notification is-danger response" id="mce-error-response" style="display:none"></div>
|
||||||
|
<div class="notification is-success response" id="mce-success-response" style="display:none"></div>
|
||||||
|
</div>
|
||||||
|
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||||||
|
<div style="position: absolute; left: -5000px;" aria-hidden="true">
|
||||||
|
<input type="text" name="b_b43b93fe633f0560b2a72a69c_52585e8803" tabindex="-1" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End mc_embed_signup-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<p>
|
||||||
|
<strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>. The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||||
|
</p>
|
||||||
|
<div id="social">
|
||||||
|
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="105px" height="20px"></iframe>
|
||||||
|
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en">@jgthms</a>
|
||||||
|
<a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma">Tweet</a>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Want to learn how to <strong>create a website</strong>?
|
||||||
|
<br>
|
||||||
|
Read <a href="http://marksheet.io">MarkSheet: a free HTML & CSS tutorial</a>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Want to make a <strong>donation</strong>?
|
||||||
|
</p>
|
||||||
|
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
||||||
|
<input type="hidden" name="cmd" value="_s-xclick">
|
||||||
|
<input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
|
||||||
|
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
|
||||||
|
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
{% if page.route == 'index' %}
|
||||||
|
<style type="text/css">
|
||||||
|
@media screen and (max-width: 979px) {
|
||||||
|
.title.is-2 .icon.is-large {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title.is-2 {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title.is-2 a {
|
||||||
|
color: #222324;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title.is-2 a:hover {
|
||||||
|
color: #1fc8db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title.is-2 .icon.is-large {
|
||||||
|
left: -72px;
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .title.is-2 a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .title.is-2 a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<script async id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||||
|
<script async type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||||
|
|
||||||
|
<script src="{{ site.baseurl }}/javascript/jquery-2.2.0.min.js"></script>
|
||||||
|
<script src="{{ site.baseurl }}/javascript/clipboard.min.js"></script>
|
||||||
|
<script src="{{ site.baseurl }}/javascript/bulma.js"></script>
|
||||||
|
|
||||||
|
{% if page.route == 'index' %}
|
||||||
|
<script type="text/javascript" src="{{ site.baseurl }}/javascript/index.js"></script>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
(function($) {
|
||||||
|
window.fnames = new Array();
|
||||||
|
window.ftypes = new Array();
|
||||||
|
fnames[0]='EMAIL';
|
||||||
|
ftypes[0]='email';
|
||||||
|
}(jQuery));
|
||||||
|
var $mcj = jQuery.noConflict(true);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||||
|
|
||||||
|
ga('create', 'UA-82634666-2', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
35
docs/_includes/head.html
Normal file
35
docs/_includes/head.html
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
|
||||||
|
|
||||||
|
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||||
|
<link rel="stylesheet" href="{{ site.cssurl | prepend: site.baseurl }}">
|
||||||
|
|
||||||
|
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/favicons/apple-touch-icon-57x57.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/favicons/apple-touch-icon-60x60.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="72x72" href="{{ site.baseurl }}/favicons/apple-touch-icon-72x72.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="76x76" href="{{ site.baseurl }}/favicons/apple-touch-icon-76x76.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="114x114" href="{{ site.baseurl }}/favicons/apple-touch-icon-114x114.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="120x120" href="{{ site.baseurl }}/favicons/apple-touch-icon-120x120.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="144x144" href="{{ site.baseurl }}/favicons/apple-touch-icon-144x144.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="152x152" href="{{ site.baseurl }}/favicons/apple-touch-icon-152x152.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/favicons/apple-touch-icon-180x180.png">
|
||||||
|
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-32x32.png" sizes="32x32">
|
||||||
|
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/android-chrome-192x192.png" sizes="192x192">
|
||||||
|
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-96x96.png" sizes="96x96">
|
||||||
|
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-16x16.png" sizes="16x16">
|
||||||
|
<link rel="manifest" href="{{ site.baseurl }}/favicons/manifest.json">
|
||||||
|
<link rel="mask-icon" href="{{ site.baseurl }}/favicons/safari-pinned-tab.svg" color="#1fc8db">
|
||||||
|
<link rel="shortcut icon" href="{{ site.baseurl }}/favicons/favicon.ico">
|
||||||
|
<meta name="msapplication-TileColor" content="#1fc8db">
|
||||||
|
<meta name="msapplication-TileImage" content="{{ site.baseurl }}/favicons/mstile-144x144.png">
|
||||||
|
<meta name="msapplication-config" content="{{ site.baseurl }}/favicons/browserconfig.xml">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
</head>
|
||||||
88
docs/_includes/header.html
Normal file
88
docs/_includes/header.html
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item is-brand" href="{{ site.baseurl }}/">
|
||||||
|
{% if page.route == 'index' %}
|
||||||
|
<img src="{{ site.baseurl }}/images/bulma.png" alt="{{ site.title }}">
|
||||||
|
{% else %}
|
||||||
|
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="{{ site.title }}">
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-center">
|
||||||
|
<a class="nav-item" href="{{ site.github }}">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a class="nav-item" href="https://twitter.com/jgthms">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span id="nav-toggle" class="nav-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div id="nav-menu" class="nav-right nav-menu">
|
||||||
|
<a class="nav-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.baseurl }}/">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="is-hidden nav-item {% if page.route == 'templates' %}is-active{% endif %} {% if page.layout == 'templates' %}is-active{% endif %}" href="{{ site.baseurl }}/templates/">
|
||||||
|
<span>Templates</span>
|
||||||
|
<span class="tag is-small is-success">New!</span>
|
||||||
|
</a>
|
||||||
|
<a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<a class="nav-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.baseurl }}/blog/">
|
||||||
|
Blog
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{% if page.route == 'index' %}
|
||||||
|
<span class="nav-item">
|
||||||
|
<a id="twitter"
|
||||||
|
class="button"
|
||||||
|
data-social-network="Twitter"
|
||||||
|
data-social-action="tweet"
|
||||||
|
data-social-target="{{ site.url }}"
|
||||||
|
target="_blank"
|
||||||
|
href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
<span>Tweet</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-primary" href="{{ site.download }}">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="nav-item">
|
||||||
|
<a class="button is-light is-outlined"
|
||||||
|
data-social-network="Twitter"
|
||||||
|
data-social-action="tweet"
|
||||||
|
data-social-target="http://bulma.io/"
|
||||||
|
href="https://twitter.com/intent/tweet?text={{ 'Bulma: a modern CSS framework based on Flebox' | urlencode }}&url=http://bulma.io/&via=jgthms">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
<span>Tweet</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-primary is-inverted" href="{{ site.download }}">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
36
docs/_includes/subnav-components.html
Normal file
36
docs/_includes/subnav-components.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<nav class="nav has-shadow">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'card' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/card/">
|
||||||
|
Card
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'level' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/level/">
|
||||||
|
Level
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'media-object' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/media-object/">
|
||||||
|
Media object
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'menu' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/menu/">
|
||||||
|
Menu
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'message' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/message/">
|
||||||
|
Message
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/modal/">
|
||||||
|
Modal
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/nav/">
|
||||||
|
Nav
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/pagination/">
|
||||||
|
Pagination
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'panel' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/panel/">
|
||||||
|
Panel
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'tabs' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/components/tabs/">
|
||||||
|
Tabs
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
39
docs/_includes/subnav-elements.html
Normal file
39
docs/_includes/subnav-elements.html
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<nav class="nav has-shadow">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'box' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/box/">
|
||||||
|
Box
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'button' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/button/">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'content' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/content/">
|
||||||
|
Content
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/form/">
|
||||||
|
Form
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'icon' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/icon/">
|
||||||
|
Icon
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'image' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/image/">
|
||||||
|
Image
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'notification' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/notification/">
|
||||||
|
Notification
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'progress' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/progress/">
|
||||||
|
Progress
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'table' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/table/">
|
||||||
|
Table
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'tag' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/tag/">
|
||||||
|
Tag
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'title' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/elements/title/">
|
||||||
|
Title
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
11
docs/_includes/subnav-grid.html
Normal file
11
docs/_includes/subnav-grid.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<nav class="nav has-shadow">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'columns' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/grid/columns/">
|
||||||
|
Columns
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'tiles' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/grid/tiles/">
|
||||||
|
Tiles
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
18
docs/_includes/subnav-layout.html
Normal file
18
docs/_includes/subnav-layout.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<nav class="nav has-shadow">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/layout/container/">
|
||||||
|
Container
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'hero' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/layout/hero/">
|
||||||
|
Hero
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'section' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/layout/section/">
|
||||||
|
Section
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'footer' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/layout/footer/">
|
||||||
|
Footer
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
15
docs/_includes/subnav-modifiers.html
Normal file
15
docs/_includes/subnav-modifiers.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<nav class="nav has-shadow">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/modifiers/syntax/">
|
||||||
|
Syntax
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/modifiers/helpers/">
|
||||||
|
Helpers
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/modifiers/responsive-helpers/">
|
||||||
|
Responsive helpers
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
18
docs/_includes/subnav-overview.html
Normal file
18
docs/_includes/subnav-overview.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<nav class="nav has-shadow">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/start/">
|
||||||
|
Start
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/variables/">
|
||||||
|
Variables
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/classes/">
|
||||||
|
Classes
|
||||||
|
</a>
|
||||||
|
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/responsiveness/">
|
||||||
|
Responsiveness
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
8
docs/_layouts/default.html
Normal file
8
docs/_layouts/default.html
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
{% include head.html %}
|
||||||
|
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||||
|
{{ content }}
|
||||||
|
{% include footer.html %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
docs/_layouts/documentation.html
Normal file
59
docs/_layouts/documentation.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
layout: default
|
||||||
|
route: documentation
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="hero is-primary">
|
||||||
|
<div class="hero-head">
|
||||||
|
<div class="container">
|
||||||
|
{% include header.html %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns is-vcentered">
|
||||||
|
<div class="column">
|
||||||
|
<p class="title">
|
||||||
|
Documentation
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Everything you need to <strong>create a website</strong> with Bulma
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-narrow">
|
||||||
|
{% include carbon.html %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-foot">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="tabs is-boxed">
|
||||||
|
<ul>
|
||||||
|
<li {% if page.doc-tab == 'overview' %}class="is-active"{% endif %}>
|
||||||
|
<a href="{{ site.documentation }}">Overview</a>
|
||||||
|
</li>
|
||||||
|
<li {% if page.doc-tab == 'modifiers' %}class="is-active"{% endif %}>
|
||||||
|
<a href="{{ site.baseurl }}/documentation/modifiers/syntax">Modifiers</a>
|
||||||
|
</li>
|
||||||
|
<li {% if page.doc-tab == 'grid' %}class="is-active"{% endif %}>
|
||||||
|
<a href="{{ site.baseurl }}/documentation/grid/columns">Grid</a>
|
||||||
|
</li>
|
||||||
|
<li {% if page.doc-tab == 'elements' %}class="is-active"{% endif %}>
|
||||||
|
<a href="{{ site.baseurl }}/documentation/elements/box/">Elements</a>
|
||||||
|
</li>
|
||||||
|
<li {% if page.doc-tab == 'components' %}class="is-active"{% endif %}>
|
||||||
|
<a href="{{ site.baseurl }}/documentation/components/card/">Components</a>
|
||||||
|
</li>
|
||||||
|
<li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
|
||||||
|
<a href="{{ site.baseurl }}/documentation/layout/container/">Layout</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
25
docs/_layouts/post.html
Normal file
25
docs/_layouts/post.html
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
layout: default
|
||||||
|
route: blog
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include blog-hero.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<article class="article {{ page.category | downcase }}{% if page.recommended == true %} recommended{% endif %}">
|
||||||
|
<p class="subtitle">
|
||||||
|
<a href="{{ site.baseurl }}/blog">Back</a>
|
||||||
|
</p>
|
||||||
|
<p class="subtitle is-4">
|
||||||
|
{{ page.date | date_to_string }}
|
||||||
|
</p>
|
||||||
|
<h1 class="title is-2">
|
||||||
|
{{ page.title }}
|
||||||
|
</h1>
|
||||||
|
<div class="content is-medium">
|
||||||
|
{{ content }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: "Blog launched, new responsive columns, new helpers"
|
||||||
|
---
|
||||||
|
|
||||||
|
First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes.
|
||||||
|
|
||||||
|
### Columns on mobile too
|
||||||
|
|
||||||
|
By default, columns are only activated on **tablet** and **desktop**. If you want to use columns on mobile _too_, add the `is-mobile` modifier on the `columns` container.
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column"></div>
|
||||||
|
<div class="column"></div>
|
||||||
|
<div class="column"></div>
|
||||||
|
<!-- etc. -->
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
### Responsive columns
|
||||||
|
|
||||||
|
You can now apply different **column size** for each **breakpoint**.
|
||||||
|
|
||||||
|
For example, let's say you want a column to take half the width on mobile, a third on tablet, and a quarter on desktop:
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code>is-half-mobile</code><br>
|
||||||
|
<code>is-one-third-tablet</code><br>
|
||||||
|
<code>is-one-quarter-desktop</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop"></div>
|
||||||
|
<!-- Other columns -->
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="message is-info">
|
||||||
|
<div class="message-header">
|
||||||
|
Info
|
||||||
|
</div>
|
||||||
|
<div class="message-body">
|
||||||
|
If you use <strong>mobile</strong> modifiers on single <code>column</code> elements, make sure to use the <code>is-mobile</code> modifier on the <code>columns</code> container.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Multiline columns
|
||||||
|
|
||||||
|
By default, if you want to start a new **row**, you just need to close a `columns` container and open a new one.
|
||||||
|
|
||||||
|
But you can also add the `is-multiline` **modifier** on the `columns` container, and use **column size** modifiers (like `is-half` or `is-3`) to define size on multiple rows within the _same_ container.
|
||||||
|
|
||||||
|
<div class="columns is-multiline is-mobile">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info"><code>is-half</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-multiline is-mobile">
|
||||||
|
<div class="column is-one-quarter"></div>
|
||||||
|
<div class="column is-one-quarter"></div>
|
||||||
|
<div class="column is-one-quarter"></div>
|
||||||
|
<div class="column is-one-quarter"></div>
|
||||||
|
<div class="column is-half"></div>
|
||||||
|
<div class="column is-one-quarter"></div>
|
||||||
|
<div class="column is-one-quarter"></div>
|
||||||
|
<div class="column is-one-quarter"></div>
|
||||||
|
<div class="column"></div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
### Helpers section
|
||||||
|
|
||||||
|
While modifiers are specific to each Bulma element, **helpers** are general utility classes that can be applied on almost _any_ element. Check out the new [helpers documentation](/documentation/modifiers/helpers/)!
|
||||||
11
docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md
Normal file
11
docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: "Metro UI CSS grid with Bulma tiles"
|
||||||
|
---
|
||||||
|
|
||||||
|
Have you ever wanted to build a **Metro-UI-like grid in CSS**?
|
||||||
|
Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.
|
||||||
|
|
||||||
|
[](http://bulma.io/documentation/grid/tiles/)
|
||||||
|
|
||||||
|
Check out the [documentation](http://bulma.io/documentation/grid/tiles/)!
|
||||||
33
docs/atom.xml
Normal file
33
docs/atom.xml
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||||
|
<channel>
|
||||||
|
<title>{{ site.name | xml_escape }}</title>
|
||||||
|
<description>{% if site.description %}{{ site.description | xml_escape }}{% endif %}</description>
|
||||||
|
<link>{{ site.url }}</link>
|
||||||
|
<id>{{ site.url }}</id>
|
||||||
|
<updated>{{ site.time | date_to_xmlschema }}</updated>
|
||||||
|
<author>
|
||||||
|
<name>{{ site.name }}</name>
|
||||||
|
<email>bbxdesign@gmail.com</email>
|
||||||
|
</author>
|
||||||
|
<atom:link href="{{ site.url }}/feed.xml" rel="self" type="application/rss+xml" />
|
||||||
|
{% for post in site.posts limit:10 %}
|
||||||
|
<item>
|
||||||
|
<title>{{ post.title | xml_escape }}</title>
|
||||||
|
{% if post.author.name %}
|
||||||
|
<dc:creator>{{ post.author.name | xml_escape }}</dc:creator>
|
||||||
|
{% endif %}
|
||||||
|
{% if post.introduction %}
|
||||||
|
<description>{{ post.introduction | xml_escape }}</description>
|
||||||
|
{% else %}
|
||||||
|
<description>{{ post.content | xml_escape }}</description>
|
||||||
|
{% endif %}
|
||||||
|
<pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
|
||||||
|
<link>{{ site.url }}{{ post.url }}</link>
|
||||||
|
<guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
|
||||||
|
</item>
|
||||||
|
{% endfor %}
|
||||||
|
</channel>
|
||||||
|
</rss>
|
||||||
28
docs/blog.html
Normal file
28
docs/blog.html
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
---
|
||||||
|
layout: default
|
||||||
|
route: blog
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include blog-hero.html %}
|
||||||
|
|
||||||
|
{% for post in site.posts %}
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-8">
|
||||||
|
<p class="subtitle4">
|
||||||
|
{{ post.date | date_to_string }}
|
||||||
|
</p>
|
||||||
|
<h2 class="title">
|
||||||
|
<a href="{{ post.url }}">
|
||||||
|
{{ post.title }}
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
<div class="content">
|
||||||
|
{{ post.content }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endfor %}
|
||||||
273
docs/bulma-docs.sass
Normal file
273
docs/bulma-docs.sass
Normal file
@ -0,0 +1,273 @@
|
|||||||
|
@charset "utf-8"
|
||||||
|
|
||||||
|
@import "../bulma.sass"
|
||||||
|
|
||||||
|
// Override
|
||||||
|
|
||||||
|
.button
|
||||||
|
+tablet
|
||||||
|
small
|
||||||
|
color: $text
|
||||||
|
left: 0
|
||||||
|
margin-top: 10px
|
||||||
|
position: absolute
|
||||||
|
top: 100%
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
body.page-grid .column > .notification
|
||||||
|
padding-left: 0
|
||||||
|
padding-right: 0
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
+tablet
|
||||||
|
.header-item .button + .button
|
||||||
|
margin-left: 10px
|
||||||
|
|
||||||
|
// Additional
|
||||||
|
|
||||||
|
$carbon-space: 15px
|
||||||
|
|
||||||
|
#carbon
|
||||||
|
max-width: 340px
|
||||||
|
min-height: 100px + ($carbon-space * 2)
|
||||||
|
min-width: 300px
|
||||||
|
padding: $carbon-space
|
||||||
|
+tablet
|
||||||
|
margin-left: auto
|
||||||
|
margin-right: auto
|
||||||
|
width: 340px
|
||||||
|
|
||||||
|
#carbonads
|
||||||
|
text-align: left
|
||||||
|
a:hover
|
||||||
|
text-decoration: underline
|
||||||
|
span
|
||||||
|
display: block
|
||||||
|
.carbon-img
|
||||||
|
float: left
|
||||||
|
height: 100px
|
||||||
|
width: 130px
|
||||||
|
img
|
||||||
|
display: block
|
||||||
|
.carbon-text
|
||||||
|
display: block
|
||||||
|
color: $text-strong
|
||||||
|
margin-bottom: 5px
|
||||||
|
margin-left: 130px + $carbon-space
|
||||||
|
.carbon-poweredby
|
||||||
|
font-size: $size-small
|
||||||
|
margin-left: $carbon-space
|
||||||
|
|
||||||
|
$github: #333333
|
||||||
|
$twitter: #55acee
|
||||||
|
|
||||||
|
#github
|
||||||
|
color: $github
|
||||||
|
border-color: $github
|
||||||
|
&:hover
|
||||||
|
background: $github
|
||||||
|
border-color: $github
|
||||||
|
color: $white
|
||||||
|
|
||||||
|
#twitter
|
||||||
|
color: $twitter
|
||||||
|
border-color: $twitter
|
||||||
|
&:hover
|
||||||
|
background: $twitter
|
||||||
|
border-color: $twitter
|
||||||
|
color: $white
|
||||||
|
|
||||||
|
#b
|
||||||
|
border-radius: 20px
|
||||||
|
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||||
|
display: inline-block
|
||||||
|
height: 240px
|
||||||
|
margin-bottom: 40px
|
||||||
|
vertical-align: top
|
||||||
|
width: 240px
|
||||||
|
+mobile
|
||||||
|
border-radius: 10px
|
||||||
|
height: 120px
|
||||||
|
width: 120px
|
||||||
|
|
||||||
|
#npm
|
||||||
|
background: none
|
||||||
|
margin: -10px 0 20px
|
||||||
|
code
|
||||||
|
border-radius: $radius
|
||||||
|
color: $link
|
||||||
|
display: inline-block
|
||||||
|
font-size: 16px
|
||||||
|
padding: 16px 32px
|
||||||
|
|
||||||
|
#grid
|
||||||
|
.notification
|
||||||
|
padding-left: 0
|
||||||
|
padding-right: 0
|
||||||
|
|
||||||
|
#message
|
||||||
|
display: none
|
||||||
|
|
||||||
|
#tweet
|
||||||
|
background: $white
|
||||||
|
border-radius: $radius-large
|
||||||
|
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||||
|
padding: 20px
|
||||||
|
|
||||||
|
#mc_embed_signup
|
||||||
|
.control
|
||||||
|
margin-bottom: 0
|
||||||
|
.notification
|
||||||
|
margin-top: 10px
|
||||||
|
|
||||||
|
#social
|
||||||
|
align-items: center
|
||||||
|
display: flex
|
||||||
|
height: 20px
|
||||||
|
margin-bottom: 1em
|
||||||
|
justify-content: center
|
||||||
|
a
|
||||||
|
display: inline-block
|
||||||
|
font-size: 11px
|
||||||
|
height: 20px
|
||||||
|
line-height: 20px
|
||||||
|
iframe:last-child
|
||||||
|
margin-left: 10px
|
||||||
|
|
||||||
|
#images
|
||||||
|
tr
|
||||||
|
td:nth-child(2)
|
||||||
|
width: 320px
|
||||||
|
|
||||||
|
.color
|
||||||
|
display: inline-block
|
||||||
|
float: left
|
||||||
|
height: 18px
|
||||||
|
margin-right: 5px
|
||||||
|
width: 18px
|
||||||
|
|
||||||
|
.example,
|
||||||
|
.structure
|
||||||
|
border: 1px solid $warning
|
||||||
|
border-top-right-radius: $radius
|
||||||
|
color: $warning-invert
|
||||||
|
padding: 15px 20px
|
||||||
|
position: relative
|
||||||
|
&:not(:first-child)
|
||||||
|
margin-top: 30px
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 20px
|
||||||
|
&:before
|
||||||
|
background: $warning
|
||||||
|
border-radius: $radius $radius 0 0
|
||||||
|
bottom: 100%
|
||||||
|
content: "Example"
|
||||||
|
display: inline-block
|
||||||
|
font-size: 7px
|
||||||
|
font-weight: bold
|
||||||
|
left: -1px
|
||||||
|
letter-spacing: 1px
|
||||||
|
padding: 3px 5px
|
||||||
|
position: absolute
|
||||||
|
text-transform: uppercase
|
||||||
|
vertical-align: top
|
||||||
|
+tablet
|
||||||
|
&.is-fullwidth
|
||||||
|
border-left: none
|
||||||
|
border-right: none
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
.example
|
||||||
|
& + .highlight
|
||||||
|
border: 1px solid $warning
|
||||||
|
border-radius: 0 0 $radius $radius
|
||||||
|
border-top: none
|
||||||
|
margin-top: -20px
|
||||||
|
pre
|
||||||
|
max-height: 600px
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 40px
|
||||||
|
|
||||||
|
$structure: $danger
|
||||||
|
$structure-invert: $danger-invert
|
||||||
|
|
||||||
|
.structure
|
||||||
|
border-color: $structure
|
||||||
|
border-radius: $radius
|
||||||
|
padding: 20px
|
||||||
|
&:before
|
||||||
|
background: $structure
|
||||||
|
color: $structure-invert
|
||||||
|
content: "Structure"
|
||||||
|
|
||||||
|
.structure-item
|
||||||
|
position: relative
|
||||||
|
&:before
|
||||||
|
+overlay
|
||||||
|
background: rgba($black, 0.7)
|
||||||
|
background: $background
|
||||||
|
border: 1px solid $border
|
||||||
|
content: ""
|
||||||
|
display: block
|
||||||
|
z-index: 1
|
||||||
|
&:after
|
||||||
|
+overlay
|
||||||
|
align-items: center
|
||||||
|
content: attr(title)
|
||||||
|
display: flex
|
||||||
|
font-family: $family-monospace
|
||||||
|
font-size: 11px
|
||||||
|
justify-content: center
|
||||||
|
padding: 3px 5px
|
||||||
|
z-index: 2
|
||||||
|
&.is-structure-container
|
||||||
|
padding: 20px 10px 10px
|
||||||
|
&:after
|
||||||
|
align-items: flex-start
|
||||||
|
justify-content: flex-start
|
||||||
|
padding: 5px 10px
|
||||||
|
|
||||||
|
.highlight
|
||||||
|
position: relative
|
||||||
|
.copy,
|
||||||
|
.expand
|
||||||
|
@extend .unselectable
|
||||||
|
background: $white
|
||||||
|
border: solid $border
|
||||||
|
border-width: 0 0 1px 1px
|
||||||
|
color: $text-light
|
||||||
|
outline: none
|
||||||
|
position: absolute
|
||||||
|
right: 0
|
||||||
|
top: 0
|
||||||
|
&:hover
|
||||||
|
border-color: $code
|
||||||
|
color: $code
|
||||||
|
.expand
|
||||||
|
border-right-width: 1px
|
||||||
|
right: 50px
|
||||||
|
|
||||||
|
+tablet
|
||||||
|
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
|
||||||
|
margin-left: 20px
|
||||||
|
margin-right: 20px
|
||||||
|
& + .highlight
|
||||||
|
margin-left: 20px
|
||||||
|
margin-right: 20px
|
||||||
|
|
||||||
|
.section.is-fullwidth
|
||||||
|
padding: 0 !important
|
||||||
|
.example
|
||||||
|
border-left: none
|
||||||
|
border-radius: 0
|
||||||
|
border-right: none
|
||||||
|
padding: 0
|
||||||
|
& + .highlight
|
||||||
|
border-left: none
|
||||||
|
border-radius: 0
|
||||||
|
border-right: none
|
||||||
|
|
||||||
|
#newsletter
|
||||||
|
.input
|
||||||
|
border-color: $white
|
||||||
|
box-shadow: none
|
||||||
134
docs/documentation/components/card.html
Normal file
134
docs/documentation/components/card.html
Normal 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
260
docs/documentation/components/level.html
Normal 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
358
docs/documentation/components/media-object.html
Normal 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
91
docs/documentation/components/menu.html
Normal 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
247
docs/documentation/components/message.html
Normal 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
218
docs/documentation/components/modal.html
Normal 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
200
docs/documentation/components/nav.html
Normal 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
75
docs/documentation/components/pagination.html
Normal 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
116
docs/documentation/components/panel.html
Normal 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
730
docs/documentation/components/tabs.html
Normal 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><ul></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>
|
||||||
99
docs/documentation/elements/box.html
Normal file
99
docs/documentation/elements/box.html
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: box
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Box</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A white <strong>box</strong> to contain other elements
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-4">
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
|
||||||
|
<br>
|
||||||
|
For example, you can include a media object:
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column is-8">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<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>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
377
docs/documentation/elements/button.html
Normal file
377
docs/documentation/elements/button.html
Normal file
@ -0,0 +1,377 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: button
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Buttons</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
The classic <strong>button</strong>, in different colors, sizes, and states
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="block">
|
||||||
|
<a class="button">Button</a>
|
||||||
|
<a class="button is-white">White</a>
|
||||||
|
<a class="button is-light">Light</a>
|
||||||
|
<a class="button is-dark">Dark</a>
|
||||||
|
<a class="button is-black">Black</a>
|
||||||
|
<a class="button is-link">Link</a>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<a class="button is-primary">Primary</a>
|
||||||
|
<a class="button is-info">Info</a>
|
||||||
|
<a class="button is-success">Success</a>
|
||||||
|
<a class="button is-warning">Warning</a>
|
||||||
|
<a class="button is-danger">Danger</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button">Button</a>
|
||||||
|
<a class="button is-primary">Primary</a>
|
||||||
|
<a class="button is-info">Info</a>
|
||||||
|
<a class="button is-success">Success</a>
|
||||||
|
<a class="button is-warning">Warning</a>
|
||||||
|
<a class="button is-danger">Danger</a>
|
||||||
|
<a class="button is-link">Link</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Sizes</h3>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<a class="button is-small">Small</a>
|
||||||
|
<a class="button">Normal</a>
|
||||||
|
<a class="button is-medium">Medium</a>
|
||||||
|
<a class="button is-large">Large</a>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-small">Small</a>
|
||||||
|
<a class="button">Normal</a>
|
||||||
|
<a class="button is-medium">Medium</a>
|
||||||
|
<a class="button is-large">Large</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Styles</h3>
|
||||||
|
<h4 class="subtitle">Outlined</h4>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<a class="button is-outlined">Outlined</a>
|
||||||
|
<a class="button is-primary is-outlined">Outlined</a>
|
||||||
|
<a class="button is-info is-outlined">Outlined</a>
|
||||||
|
<a class="button is-success is-outlined">Outlined</a>
|
||||||
|
<a class="button is-danger is-outlined">Outlined</a>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-outlined">Outlined</a>
|
||||||
|
<a class="button is-primary is-outlined">Outlined</a>
|
||||||
|
<a class="button is-info is-outlined">Outlined</a>
|
||||||
|
<a class="button is-success is-outlined">Outlined</a>
|
||||||
|
<a class="button is-danger is-outlined">Outlined</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="notification is-primary">
|
||||||
|
<a class="button is-primary is-inverted">Inverted</a>
|
||||||
|
<a class="button is-info is-inverted">Inverted</a>
|
||||||
|
<a class="button is-success is-inverted">Inverted</a>
|
||||||
|
<a class="button is-danger is-inverted">Inverted</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-primary is-inverted">Inverted</a>
|
||||||
|
<a class="button is-info is-inverted">Inverted</a>
|
||||||
|
<a class="button is-success is-inverted">Inverted</a>
|
||||||
|
<a class="button is-danger is-inverted">Inverted</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">States</h3>
|
||||||
|
<h4 class="subtitle">Loading</h4>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<a class="button is-loading">Loading</a>
|
||||||
|
<a class="button is-primary is-loading">Loading</a>
|
||||||
|
<a class="button is-info is-loading">Loading</a>
|
||||||
|
<a class="button is-success is-loading">Loading</a>
|
||||||
|
<a class="button is-warning is-loading">Loading</a>
|
||||||
|
<a class="button is-danger is-loading">Loading</a>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-loading">Loading</a>
|
||||||
|
<a class="button is-primary is-loading">Loading</a>
|
||||||
|
<a class="button is-info is-loading">Loading</a>
|
||||||
|
<a class="button is-success is-loading">Loading</a>
|
||||||
|
<a class="button is-warning is-loading">Loading</a>
|
||||||
|
<a class="button is-danger is-loading">Loading</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="subtitle">Active</h4>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<a class="button is-active">Active</a>
|
||||||
|
<a class="button is-primary is-active">Active</a>
|
||||||
|
<a class="button is-info is-active">Active</a>
|
||||||
|
<a class="button is-success is-active">Active</a>
|
||||||
|
<a class="button is-warning is-active">Active</a>
|
||||||
|
<a class="button is-danger is-active">Active</a>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-active">Active</a>
|
||||||
|
<a class="button is-primary is-active">Active</a>
|
||||||
|
<a class="button is-info is-active">Active</a>
|
||||||
|
<a class="button is-success is-active">Active</a>
|
||||||
|
<a class="button is-warning is-active">Active</a>
|
||||||
|
<a class="button is-danger is-active">Active</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="subtitle">Disabled</h4>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<a class="button is-disabled">Disabled</a>
|
||||||
|
<a class="button is-primary is-disabled">Disabled</a>
|
||||||
|
<a class="button is-info is-disabled">Disabled</a>
|
||||||
|
<a class="button is-success is-disabled">Disabled</a>
|
||||||
|
<a class="button is-warning is-disabled">Disabled</a>
|
||||||
|
<a class="button is-danger is-disabled">Disabled</a>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-disabled">Disabled</a>
|
||||||
|
<a class="button is-primary is-disabled">Disabled</a>
|
||||||
|
<a class="button is-info is-disabled">Disabled</a>
|
||||||
|
<a class="button is-success is-disabled">Disabled</a>
|
||||||
|
<a class="button is-warning is-disabled">Disabled</a>
|
||||||
|
<a class="button is-danger is-disabled">Disabled</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-primary">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
<span>Twitter</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-success">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
<span>Save</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-danger is-outlined">
|
||||||
|
<span>Delete</span>
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-small">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-medium">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-large">
|
||||||
|
<span class="icon is-medium">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-primary">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
<span>Twitter</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-success">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</span>
|
||||||
|
<span>Save</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-danger">
|
||||||
|
<span>Delete</span>
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a class="button is-danger is-outlined">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</span>
|
||||||
|
<span>Delete</span>
|
||||||
|
</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Button group</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<div class="control is-grouped">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary">
|
||||||
|
Save changes
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button">
|
||||||
|
Cancel
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-danger">
|
||||||
|
Delete post
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="control is-grouped">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary">
|
||||||
|
Save changes
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button">
|
||||||
|
Cancel
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-danger">
|
||||||
|
Delete post
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Button addons</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<p class="control has-addons">
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-align-left"></i>
|
||||||
|
</span>
|
||||||
|
<span>Left</span>
|
||||||
|
</a>
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-align-center"></i>
|
||||||
|
</span>
|
||||||
|
<span>Center</span>
|
||||||
|
</a>
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-align-right"></i>
|
||||||
|
</span>
|
||||||
|
<span>Right</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control has-addons">
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-align-left"></i>
|
||||||
|
</span>
|
||||||
|
<span>Left</span>
|
||||||
|
</a>
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-align-center"></i>
|
||||||
|
</span>
|
||||||
|
<span>Center</span>
|
||||||
|
</a>
|
||||||
|
<a class="button">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-align-right"></i>
|
||||||
|
</span>
|
||||||
|
<span>Right</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
144
docs/documentation/elements/content.html
Normal file
144
docs/documentation/elements/content.html
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: content
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Content</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code><p></code> paragraphs</li>
|
||||||
|
<li><code><ul> <ol> <dl></code> lists</li>
|
||||||
|
<li><code><h1></code> to <code><h6></code> headings</li>
|
||||||
|
<li><code><blockquotes></code> quotes</li>
|
||||||
|
<li><code><em></code> and <code><strong></code></li>
|
||||||
|
<li><code><table> <tr> <th> <td></code> tables</li>
|
||||||
|
</ul>
|
||||||
|
<p>This <code>content</code> class can be used in <em>any</em>, whenever you just want to write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<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>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Sizes</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>You can use the <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<div class="content is-medium">
|
||||||
|
<h1>Hello World</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||||
|
<h2>Second level</h2>
|
||||||
|
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
|
||||||
|
<ul>
|
||||||
|
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||||||
|
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||||||
|
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||||||
|
<li>Ut non enim metus.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<div class="content is-large">
|
||||||
|
<h1>Hello World</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||||
|
<h2>Second level</h2>
|
||||||
|
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
|
||||||
|
<ul>
|
||||||
|
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||||||
|
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||||||
|
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||||||
|
<li>Ut non enim metus.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
684
docs/documentation/elements/form.html
Normal file
684
docs/documentation/elements/form.html
Normal file
@ -0,0 +1,684 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: form
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Form controls</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
All generic <strong>form controls</strong>, designed for consistency
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>The following form controls <strong>classes</strong> are supported:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>.label</code></li>
|
||||||
|
<li><code>.input</code></li>
|
||||||
|
<li><code>.textarea</code></li>
|
||||||
|
<li><code>.select</code></li>
|
||||||
|
<li><code>.checkbox</code></li>
|
||||||
|
<li><code>.radio</code></li>
|
||||||
|
<li><code>.button</code></li>
|
||||||
|
<li><code>.help</code></li>
|
||||||
|
</ul>
|
||||||
|
<p>When combining several controls in a <strong>form</strong>, use the <code>.control</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<label class="label">Name</label>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input" type="text" placeholder="Text input">
|
||||||
|
</p>
|
||||||
|
<label class="label">Username</label>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
<span class="help is-success">This username is available</span>
|
||||||
|
</p>
|
||||||
|
<label class="label">Email</label>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-danger" type="text" placeholder="Email input" value="hello@">
|
||||||
|
<i class="fa fa-warning"></i>
|
||||||
|
<span class="help is-danger">This email is invalid</span>
|
||||||
|
</p>
|
||||||
|
<label class="label">Subject</label>
|
||||||
|
<p class="control">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>Select dropdown</option>
|
||||||
|
<option>With options</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<label class="label">Message</label>
|
||||||
|
<p class="control">
|
||||||
|
<textarea class="textarea" placeholder="Textarea"></textarea>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="question">
|
||||||
|
Yes
|
||||||
|
</label>
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="question">
|
||||||
|
No
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<button class="button is-primary">Submit</button>
|
||||||
|
<button class="button is-link">Cancel</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<label class="label">Name</label>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input" type="text" placeholder="Text input">
|
||||||
|
</p>
|
||||||
|
<label class="label">Username</label>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
<span class="help is-success">This username is available</span>
|
||||||
|
</p>
|
||||||
|
<label class="label">Email</label>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-danger" type="text" placeholder="Email input" value="hello@">
|
||||||
|
<i class="fa fa-warning"></i>
|
||||||
|
<span class="help is-danger">This email is invalid</span>
|
||||||
|
</p>
|
||||||
|
<label class="label">Subject</label>
|
||||||
|
<p class="control">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>Select dropdown</option>
|
||||||
|
<option>With options</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<label class="label">Message</label>
|
||||||
|
<p class="control">
|
||||||
|
<textarea class="textarea" placeholder="Textarea"></textarea>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="question">
|
||||||
|
Yes
|
||||||
|
</label>
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="question">
|
||||||
|
No
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<button class="button is-primary">Submit</button>
|
||||||
|
<button class="button is-link">Cancel</button>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Colors</h3>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-primary" type="text" placeholder="Primary input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-info" type="text" placeholder="Info input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-success" type="text" placeholder="Success input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-warning" type="text" placeholder="Warning input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-danger" type="text" placeholder="Danger input">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-primary" type="text" placeholder="Primary input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-info" type="text" placeholder="Info input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-success" type="text" placeholder="Success input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-warning" type="text" placeholder="Warning input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-danger" type="text" placeholder="Danger input">
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Sizes</h3>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-small" type="text" placeholder="Small input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input" type="text" placeholder="Normal input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-medium" type="text" placeholder="Medium input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-large" type="text" placeholder="Large input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="select is-small">
|
||||||
|
<select>
|
||||||
|
<option>Select dropdown</option>
|
||||||
|
<option>With options</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>Select dropdown</option>
|
||||||
|
<option>With options</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="select is-medium">
|
||||||
|
<select>
|
||||||
|
<option>Select dropdown</option>
|
||||||
|
<option>With options</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="select is-large">
|
||||||
|
<select>
|
||||||
|
<option>Select dropdown</option>
|
||||||
|
<option>With options</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-small" type="text" placeholder="Small input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input" type="text" placeholder="Normal input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-medium" type="text" placeholder="Medium input">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<input class="input is-large" type="text" placeholder="Large input">
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">States</h3>
|
||||||
|
<h4 class="subtitle">Loading</h4>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="control is-loading">
|
||||||
|
<input class="input" type="text" placeholder="Loading input">
|
||||||
|
</p>
|
||||||
|
<p class="control is-loading">
|
||||||
|
<textarea class="textarea" placeholder="Loading textarea"></textarea>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control is-loading">
|
||||||
|
<input class="input" type="text" placeholder="Loading input">
|
||||||
|
</p>
|
||||||
|
<p class="control is-loading">
|
||||||
|
<textarea class="textarea" placeholder="Loading textarea"></textarea>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="subtitle">Disabled</h4>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="control">
|
||||||
|
<input class="input" type="text" placeholder="Disabled input" disabled>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<label class="checkbox is-disabled">
|
||||||
|
<input type="checkbox" disabled>
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<label class="radio is-disabled">
|
||||||
|
<input type="radio" name="question" disabled>
|
||||||
|
Yes
|
||||||
|
</label>
|
||||||
|
<label class="radio is-disabled">
|
||||||
|
<input type="radio" name="question" disabled>
|
||||||
|
No
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<button class="button is-primary" disabled>Submit</button>
|
||||||
|
<button class="button" disabled>Cancel</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control">
|
||||||
|
<input class="input" type="text" placeholder="Disabled input" disabled>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<label class="checkbox is-disabled">
|
||||||
|
<input type="checkbox" disabled>
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<label class="radio is-disabled">
|
||||||
|
<input type="radio" name="question" disabled>
|
||||||
|
Yes
|
||||||
|
</label>
|
||||||
|
<label class="radio is-disabled">
|
||||||
|
<input type="radio" name="question" disabled>
|
||||||
|
No
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<button class="button is-primary" disabled>Submit</button>
|
||||||
|
<button class="button" disabled>Cancel</button>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input" type="password" placeholder="Password">
|
||||||
|
<i class="fa fa-lock"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<button class="button is-success">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input" type="password" placeholder="Password">
|
||||||
|
<i class="fa fa-lock"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<button class="button is-success">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input is-small" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input is-medium" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input is-large" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-small" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-medium" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-large" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input is-small" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input is-medium" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon">
|
||||||
|
<input class="input is-large" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-small" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-medium" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</p>
|
||||||
|
<p class="control has-icon has-icon-right">
|
||||||
|
<input class="input is-large" type="email" placeholder="Email">
|
||||||
|
<i class="fa fa-check"></i>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Form addons</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<p class="control has-addons">
|
||||||
|
<input class="input" type="text" placeholder="Find a repository">
|
||||||
|
<a class="button is-info">
|
||||||
|
Search
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control has-addons">
|
||||||
|
<input class="input" type="text" placeholder="Find a repository">
|
||||||
|
<a class="button is-info">
|
||||||
|
Search
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="content">
|
||||||
|
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
||||||
|
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaing space (in this case, the input):</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<p class="control has-addons">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>$</option>
|
||||||
|
<option>£</option>
|
||||||
|
<option>€</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
<input class="input is-expanded" type="text" placeholder="Amount of money">
|
||||||
|
<a class="button is-success">
|
||||||
|
Transfer
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control has-addons">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>$</option>
|
||||||
|
<option>£</option>
|
||||||
|
<option>€</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
<input class="input is-expanded" type="text" placeholder="Amount of money">
|
||||||
|
<a class="button is-success">
|
||||||
|
Transfer
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="content">
|
||||||
|
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<p class="control has-addons has-addons-centered">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>$</option>
|
||||||
|
<option>£</option>
|
||||||
|
<option>€</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
<input class="input" type="text" placeholder="Amount of money">
|
||||||
|
<a class="button is-success">
|
||||||
|
Transfer
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control has-addons has-addons-centered">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>$</option>
|
||||||
|
<option>£</option>
|
||||||
|
<option>€</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
<input class="input" type="text" placeholder="Amount of money">
|
||||||
|
<a class="button is-success">
|
||||||
|
Transfer
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="example">
|
||||||
|
<p class="control has-addons has-addons-right">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>$</option>
|
||||||
|
<option>£</option>
|
||||||
|
<option>€</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
<input class="input" type="text" placeholder="Amount of money">
|
||||||
|
<a class="button is-success">
|
||||||
|
Transfer
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control has-addons has-addons-right">
|
||||||
|
<span class="select">
|
||||||
|
<select>
|
||||||
|
<option>$</option>
|
||||||
|
<option>£</option>
|
||||||
|
<option>€</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
<input class="input" type="text" placeholder="Amount of money">
|
||||||
|
<a class="button is-success">
|
||||||
|
Transfer
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Form group</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<div class="control is-grouped">
|
||||||
|
<p class="control is-expanded">
|
||||||
|
<input class="input" type="text" placeholder="Find a repository">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-info">
|
||||||
|
Search
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="control is-grouped">
|
||||||
|
<p class="control is-expanded">
|
||||||
|
<input class="input" type="text" placeholder="Find a repository">
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-info">
|
||||||
|
Search
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="content">
|
||||||
|
<p>Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Horizontal form</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the <code>control</code> container, in which you include:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>control-label</code> for the side label
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>control</code> for the input/select/textarea container
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||||
|
</div>
|
||||||
|
<div class="control is-horizontal">
|
||||||
|
<div class="control-label">
|
||||||
|
<label class="label">From</label>
|
||||||
|
</div>
|
||||||
|
<div class="control is-grouped">
|
||||||
|
<p class="control is-expanded">
|
||||||
|
<input class="input" type="text" placeholder="Name">
|
||||||
|
</p>
|
||||||
|
<p class="control is-expanded">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control is-horizontal">
|
||||||
|
<div class="control-label">
|
||||||
|
<label class="label">Subject</label>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<div class="select is-fullwidth">
|
||||||
|
<select>
|
||||||
|
<option>General enquiry</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control is-horizontal">
|
||||||
|
<div class="control-label">
|
||||||
|
<label class="label">Question</label>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<textarea class="textarea" placeholder="Explain how we can help you"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="control is-horizontal">
|
||||||
|
<div class="control-label">
|
||||||
|
<label class="label">From</label>
|
||||||
|
</div>
|
||||||
|
<div class="control is-grouped">
|
||||||
|
<p class="control is-expanded">
|
||||||
|
<input class="input" type="text" placeholder="Name">
|
||||||
|
</p>
|
||||||
|
<p class="control is-expanded">
|
||||||
|
<input class="input" type="email" placeholder="Email">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control is-horizontal">
|
||||||
|
<div class="control-label">
|
||||||
|
<label class="label">Subject</label>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<div class="select is-fullwidth">
|
||||||
|
<select>
|
||||||
|
<option>General enquiry</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control is-horizontal">
|
||||||
|
<div class="control-label">
|
||||||
|
<label class="label">Question</label>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<textarea class="textarea" placeholder="Explain how we can help you"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
83
docs/documentation/elements/icon.html
Normal file
83
docs/documentation/elements/icon.html
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: icon
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Icons</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Bulma is compatible with <strong><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></strong> icons.
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class:</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-home"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-home"></i>
|
||||||
|
</span>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>24 x 24 pixels</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Sizes</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>
|
||||||
|
<p>The Bulma <code>icon</code> container is always slightly bigger than the font-size used:</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">Class</th>
|
||||||
|
<th>Font-size</th>
|
||||||
|
<th>Container size</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>icon is-small</code></td>
|
||||||
|
<td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
|
||||||
|
<td>14px</td>
|
||||||
|
<td>16x16px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>icon</code></td>
|
||||||
|
<td><span class="icon"><i class="fa fa-home"></i></span></td>
|
||||||
|
<td>21px</td>
|
||||||
|
<td>24x24px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>icon is-medium</code></td>
|
||||||
|
<td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
|
||||||
|
<td>28px</td>
|
||||||
|
<td>32x32px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>icon is-large</code></td>
|
||||||
|
<td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
|
||||||
|
<td>42px</td>
|
||||||
|
<td>48x48px</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
146
docs/documentation/elements/image.html
Normal file
146
docs/documentation/elements/image.html
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: image
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Images</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A container for <strong>responsive images</strong>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<figure class="image is-128x128">
|
||||||
|
<img src="http://placehold.it/128x128">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<figure class="image is-128x128">
|
||||||
|
<img src="http://placehold.it/128x128">
|
||||||
|
</figure>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Fixed square images</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-16x16</code></td>
|
||||||
|
<td><figure class="image is-16x16"><img src="http://placehold.it/16x16"></figure></td>
|
||||||
|
<td>16x16px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-24x24</code></td>
|
||||||
|
<td><figure class="image is-24x24"><img src="http://placehold.it/24x24"></figure></td>
|
||||||
|
<td>24x24px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-32x32</code></td>
|
||||||
|
<td><figure class="image is-32x32"><img src="http://placehold.it/32x32"></figure></td>
|
||||||
|
<td>32x32px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-48x48</code></td>
|
||||||
|
<td><figure class="image is-48x48"><img src="http://placehold.it/48x48"></figure></td>
|
||||||
|
<td>48x48px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-64x64</code></td>
|
||||||
|
<td><figure class="image is-64x64"><img src="http://placehold.it/64x64"></figure></td>
|
||||||
|
<td>64x64px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-96x96</code></td>
|
||||||
|
<td><figure class="image is-96x96"><img src="http://placehold.it/96x96"></figure></td>
|
||||||
|
<td>96x96px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-128x128</code></td>
|
||||||
|
<td><figure class="image is-128x128"><img src="http://placehold.it/128x128"></figure></td>
|
||||||
|
<td>128x128px</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h4 class="title is-4">Retina images</h4>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<figure class="image is-128x128">
|
||||||
|
<img src="http://placehold.it/256x256">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<figure class="image is-128x128">
|
||||||
|
<img src="http://placehold.it/256x256">
|
||||||
|
</figure>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Responsive images with ratios</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>5 ratio modifers</strong>:</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id="images" class="table is-bordered">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-square</code></td>
|
||||||
|
<td><figure class="image is-square"><img src="http://placehold.it/480x480"></figure></td>
|
||||||
|
<td>Square (or 1by1)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-1by1</code></td>
|
||||||
|
<td><figure class="image is-1by1"><img src="http://placehold.it/480x480"></figure></td>
|
||||||
|
<td>1 by 1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-4by3</code></td>
|
||||||
|
<td><figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure></td>
|
||||||
|
<td>4 by 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-3by2</code></td>
|
||||||
|
<td><figure class="image is-3by2"><img src="http://placehold.it/480x320"></figure></td>
|
||||||
|
<td>3 by 2</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-16by9</code></td>
|
||||||
|
<td><figure class="image is-16by9"><img src="http://placehold.it/640x360"></figure></td>
|
||||||
|
<td>16 by 9</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>image is-2by1</code></td>
|
||||||
|
<td><figure class="image is-2by1"><img src="http://placehold.it/640x320"></figure></td>
|
||||||
|
<td>2 by 1</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
92
docs/documentation/elements/notification.html
Normal file
92
docs/documentation/elements/notification.html
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: notification
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Notifications</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Bold <strong>notification</strong> blocks, to alert your users of something
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="notification">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
<div class="notification is-primary">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
<div class="notification is-info">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
<div class="notification is-success">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
<div class="notification is-warning">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Warning lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
<div class="notification is-danger">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Danger lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="notification">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur
|
||||||
|
adipiscing elit lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notification is-primary">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Primar lorem ipsum dolor sit amet, consectetur
|
||||||
|
adipiscing elit lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notification is-info">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Info lorem ipsum dolor sit amet, consectetur
|
||||||
|
adipiscing elit lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notification is-success">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Success lorem ipsum dolor sit amet, consectetur
|
||||||
|
adipiscing elit lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notification is-warning">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Warning lorem ipsum dolor sit amet, consectetur
|
||||||
|
adipiscing elit lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notification is-danger">
|
||||||
|
<button class="delete"></button>
|
||||||
|
Danger lorem ipsum dolor sit amet, consectetur
|
||||||
|
adipiscing elit lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
52
docs/documentation/elements/progress.html
Normal file
52
docs/documentation/elements/progress.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: progress
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Progress bars</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Native HTML <strong>progress</strong> bars
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<progress class="progress" value="15" max="100">15%</progress>
|
||||||
|
<progress class="progress is-primary" value="30" max="100">30%</progress>
|
||||||
|
<progress class="progress is-info" value="45" max="100">45%</progress>
|
||||||
|
<progress class="progress is-success" value="60" max="100">60%</progress>
|
||||||
|
<progress class="progress is-warning" value="75" max="100">75%</progress>
|
||||||
|
<progress class="progress is-danger" value="90" max="100">90%</progress>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<progress class="progress" value="15" max="100">15%</progress>
|
||||||
|
<progress class="progress is-primary" value="30" max="100">30%</progress>
|
||||||
|
<progress class="progress is-info" value="45" max="100">45%</progress>
|
||||||
|
<progress class="progress is-success" value="60" max="100">60%</progress>
|
||||||
|
<progress class="progress is-warning" value="75" max="100">75%</progress>
|
||||||
|
<progress class="progress is-danger" value="90" max="100">90%</progress>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Sizes</h3>
|
||||||
|
<div class="example">
|
||||||
|
<progress class="progress is-small" value="15" max="100">15%</progress>
|
||||||
|
<progress class="progress" value="30" max="100">30%</progress>
|
||||||
|
<progress class="progress is-medium" value="45" max="100">45%</progress>
|
||||||
|
<progress class="progress is-large" value="60" max="100">60%</progress>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<progress class="progress is-small" value="15" max="100">15%</progress>
|
||||||
|
<progress class="progress" value="30" max="100">30%</progress>
|
||||||
|
<progress class="progress is-medium" value="45" max="100">45%</progress>
|
||||||
|
<progress class="progress is-large" value="60" max="100">60%</progress>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
350
docs/documentation/elements/table.html
Normal file
350
docs/documentation/elements/table.html
Normal file
@ -0,0 +1,350 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: table
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Tables</h1>
|
||||||
|
<h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>Open source projects</th>
|
||||||
|
<th>Year started</th>
|
||||||
|
<th colspan="3">Links</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>Open source projects</th>
|
||||||
|
<th>Year started</th>
|
||||||
|
<th colspan="3">Links</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="is-icon">
|
||||||
|
<i class="fa fa-android"></i>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="#">Android</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
2003
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-globe"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-icon">
|
||||||
|
<i class="fa fa-firefox"></i>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="#">Firefox</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
2003
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-globe"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-icon">
|
||||||
|
<i class="fa fa-linux"></i>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="#">Linux</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
2003
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-globe"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-icon">
|
||||||
|
<i class="fa fa-wordpress"></i>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="#">WordPress</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
2003
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-globe"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Instrument</th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Instrument</th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Misty Abbott</td>
|
||||||
|
<td>Bass Guitar</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-instagram"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>John Smith</td>
|
||||||
|
<td>Rhythm Guitar</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-instagram"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Robert Mikels</td>
|
||||||
|
<td>Lead Guitar</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-instagram"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Karyn Holmberg</td>
|
||||||
|
<td>Drums</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="is-icon">
|
||||||
|
<a href="#">
|
||||||
|
<i class="fa fa-instagram"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Modifiers</h3>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>Add <strong>borders</strong> to all the cells.</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<code>table is-bordered</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>One</th>
|
||||||
|
<th>Two</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Three</td>
|
||||||
|
<td>Four</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>Add <strong>stripes</strong> to the table.</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<code>table is-striped</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<table class="table is-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>One</th>
|
||||||
|
<th>Two</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Three</td>
|
||||||
|
<td>Four</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Five</td>
|
||||||
|
<td>Six</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Seven</td>
|
||||||
|
<td>Eight</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>Make the cells <strong>narrower</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<code>table is-narrow</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<table class="table is-narrow">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>One</th>
|
||||||
|
<th>Two</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Three</td>
|
||||||
|
<td>Four</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Five</td>
|
||||||
|
<td>Six</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Seven</td>
|
||||||
|
<td>Eight</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>You can <strong>combine</strong> all three modifiers.</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<code>table is-bordered is-striped is-narrow</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<table class="table is-bordered is-striped is-narrow">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>One</th>
|
||||||
|
<th>Two</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Three</td>
|
||||||
|
<td>Four</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Five</td>
|
||||||
|
<td>Six</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Seven</td>
|
||||||
|
<td>Eight</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
159
docs/documentation/elements/tag.html
Normal file
159
docs/documentation/elements/tag.html
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: tag
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Tags</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Small <strong>tag labels</strong> to insert anywhere
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-4">
|
||||||
|
By default, a <strong>tag</strong> is a 24px high label.
|
||||||
|
</div>
|
||||||
|
<div class="column is-2">
|
||||||
|
<span class="tag">
|
||||||
|
Tag label
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="column is-6">
|
||||||
|
{% highlight html %}
|
||||||
|
<span class="tag">
|
||||||
|
Tag label
|
||||||
|
</span>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-4">
|
||||||
|
There are <strong>6 different colors</strong> available.
|
||||||
|
</div>
|
||||||
|
<div class="column is-2">
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-dark">
|
||||||
|
Dark
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-primary">
|
||||||
|
Primary
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-info">
|
||||||
|
Info
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-success">
|
||||||
|
Success
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-warning">
|
||||||
|
Warning
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<span class="tag is-danger">
|
||||||
|
Danger
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="column is-6">
|
||||||
|
{% highlight html %}
|
||||||
|
<span class="tag is-dark">Dark</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>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-4">
|
||||||
|
And <strong>3 additional</strong> sizes.
|
||||||
|
</div>
|
||||||
|
<div class="column is-2">
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-dark is-small">
|
||||||
|
Small
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-primary is-medium">
|
||||||
|
Medium
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-info is-large">
|
||||||
|
Large
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-6">
|
||||||
|
{% highlight html %}
|
||||||
|
<span class="tag is-primary is-medium">Medium</span>
|
||||||
|
<span class="tag is-info is-large">Large</span>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-4">
|
||||||
|
You can also append a <strong>delete button</strong>.
|
||||||
|
</div>
|
||||||
|
<div class="column is-2">
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-info is-small">
|
||||||
|
Foo
|
||||||
|
<button class="delete"></button>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-success">
|
||||||
|
Bar
|
||||||
|
<button class="delete"></button>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-warning is-medium">
|
||||||
|
Hello
|
||||||
|
<button class="delete"></button>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<span class="tag is-danger is-large">
|
||||||
|
World
|
||||||
|
<button class="delete"></button>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-6">
|
||||||
|
{% highlight html %}
|
||||||
|
<span class="tag is-success">
|
||||||
|
Foo
|
||||||
|
<button class="delete"></button>
|
||||||
|
</span>
|
||||||
|
<span class="tag is-warning is-medium">
|
||||||
|
Bar
|
||||||
|
<button class="delete"></button>
|
||||||
|
</span>
|
||||||
|
<span class="tag is-danger is-large">
|
||||||
|
Foo bar
|
||||||
|
<button class="delete"></button>
|
||||||
|
</span>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
112
docs/documentation/elements/title.html
Normal file
112
docs/documentation/elements/title.html
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: elements
|
||||||
|
doc-subtab: title
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Titles</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Simple <strong>headings</strong> to add depth to your page
|
||||||
|
</h2>
|
||||||
|
<hr>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>There are <strong>2 types</strong> of heading:</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="title">Title</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<h1 class="title">Title</h1>
|
||||||
|
<h2 class="subtitle">Subtitle</h2>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>There are <strong>6 sizes</strong> available:</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="title is-1">Title 1</p>
|
||||||
|
<p class="title is-2">Title 2</p>
|
||||||
|
<p class="title is-3">Title 3 (default size)</p>
|
||||||
|
<p class="title is-4">Title 4</p>
|
||||||
|
<p class="title is-5">Title 5</p>
|
||||||
|
<p class="title is-6">Title 6</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<h1 class="title is-1">Title 1</h1>
|
||||||
|
<h2 class="title is-2">Title 2</h2>
|
||||||
|
<h3 class="title is-3">Title 3</h3>
|
||||||
|
<h4 class="title is-4">Title 4</h4>
|
||||||
|
<h5 class="title is-5">Title 5</h5>
|
||||||
|
<h6 class="title is-6">Title 6</h6>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column"></div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="subtitle is-1">Subtitle 1</p>
|
||||||
|
<p class="subtitle is-2">Subtitle 2</p>
|
||||||
|
<p class="subtitle is-3">Subtitle 3</p>
|
||||||
|
<p class="subtitle is-4">Subtitle 4</p>
|
||||||
|
<p class="subtitle is-5">Subtitle 5 (default size)</p>
|
||||||
|
<p class="subtitle is-6">Subtitle 6</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<h1 class="subtitle is-1">Subtitle 1</h1>
|
||||||
|
<h2 class="subtitle is-2">Subtitle 2</h2>
|
||||||
|
<h3 class="subtitle is-3">Subtitle 3</h3>
|
||||||
|
<h4 class="subtitle is-4">Subtitle 4</h4>
|
||||||
|
<h5 class="subtitle is-5">Subtitle 5</h5>
|
||||||
|
<h6 class="subtitle is-6">Subtitle 6</h6>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
|
||||||
|
<p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="block">
|
||||||
|
<p class="title is-1">Title 1</p>
|
||||||
|
<p class="subtitle is-3">Subtitle 3</p>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<p class="title is-2">Title 2</p>
|
||||||
|
<p class="subtitle is-4">Subtitle 4</p>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<p class="title is-3">Title 3</p>
|
||||||
|
<p class="subtitle is-5">Subtitle 5</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="title is-1">Title 1</p>
|
||||||
|
<p class="subtitle is-3">Subtitle 3</p>
|
||||||
|
|
||||||
|
<p class="title is-2">Title 2</p>
|
||||||
|
<p class="subtitle is-4">Subtitle 4</p>
|
||||||
|
|
||||||
|
<p class="title is-3">Title 3</p>
|
||||||
|
<p class="subtitle is-5">Subtitle 5</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
749
docs/documentation/grid.html
Normal file
749
docs/documentation/grid.html
Normal file
@ -0,0 +1,749 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: grid
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Grid</h1>
|
||||||
|
<h2 class="subtitle">A simple way to build columns</h2>
|
||||||
|
<hr>
|
||||||
|
<div class="content">
|
||||||
|
<p>To build a <strong>grid</strong>, just:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Add a <code>columns</code> container</li>
|
||||||
|
<li>Add as many <code>column</code> elements as you want</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">First column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Second column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Third column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Fourth column</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
First column
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Second column
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Third column
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Fourth column
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Sizes</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>is-three-quarters</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-two-thirds</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-half</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-one-third</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-three-quarters">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-three-quarters</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-two-thirds</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-half</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-one-third</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-one-quarter</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-three-quarters">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-three-quarters</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-two-thirds</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-half</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-one-third</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-one-quarter</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h4 class="title is-4">12 columns</h4>
|
||||||
|
<div class="content">
|
||||||
|
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>is-2</code></li>
|
||||||
|
<li><code>is-3</code></li>
|
||||||
|
<li><code>is-4</code></li>
|
||||||
|
<li><code>is-5</code></li>
|
||||||
|
<li><code>is-6</code></li>
|
||||||
|
<li><code>is-7</code></li>
|
||||||
|
<li><code>is-8</code></li>
|
||||||
|
<li><code>is-9</code></li>
|
||||||
|
<li><code>is-10</code></li>
|
||||||
|
<li><code>is-11</code></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="message is-danger">
|
||||||
|
<p class="message-header">Naming</p>
|
||||||
|
<p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-2">
|
||||||
|
<p class="notification is-info"><code>is-2</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<p class="notification is-info"><code>is-3</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-4">
|
||||||
|
<p class="notification is-info"><code>is-4</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-5">
|
||||||
|
<p class="notification is-info"><code>is-5</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-6">
|
||||||
|
<p class="notification is-info"><code>is-6</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-7">
|
||||||
|
<p class="notification is-info"><code>is-7</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-8">
|
||||||
|
<p class="notification is-info"><code>is-8</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-9">
|
||||||
|
<p class="notification is-info"><code>is-9</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-10">
|
||||||
|
<p class="notification is-info"><code>is-10</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-11">
|
||||||
|
<p class="notification is-info"><code>is-11</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Offset</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half is-offset-one-quarter">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-half</code><br>
|
||||||
|
<code class="html">is-offset-one-quarter</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-4 is-offset-8">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-4</code><br>
|
||||||
|
<code class="html">is-offset-8</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-11 is-offset-1">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-11</code><br>
|
||||||
|
<code class="html">is-offset-1</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half is-offset-one-quarter"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-4 is-offset-8"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-11 is-offset-1"></div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Responsiveness</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
|
||||||
|
<p>If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">2</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">3</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">4</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">2</div>
|
||||||
|
<div class="column">3</div>
|
||||||
|
<div class="column">4</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="message is-info">
|
||||||
|
<p class="message-header">Resize</p>
|
||||||
|
<p class="message-body">If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you <em>only</em> want columns on <strong>desktop</strong>, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-desktop">
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">2</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">3</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">4</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-desktop">
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">2</div>
|
||||||
|
<div class="column">3</div>
|
||||||
|
<div class="column">4</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h4 class="title is-4">Different sizes per breakpoint</h4>
|
||||||
|
<div class="content">
|
||||||
|
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code>is-half-mobile</code><br>
|
||||||
|
<code>is-one-third-tablet</code><br>
|
||||||
|
<code>is-one-quarter-desktop</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="message is-info">
|
||||||
|
<p class="message-header">Resize</p>
|
||||||
|
<p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||||
|
<code>is-half-mobile</code><br>
|
||||||
|
<code>is-one-third-tablet</code><br>
|
||||||
|
<code>is-one-quarter-desktop</code>
|
||||||
|
</div>
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">1</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Multiline</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-multiline is-mobile">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info"><code>is-half</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-multiline is-mobile">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<code>is-half</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Auto
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Gapless</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-gapless">
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">First column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Second column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Third column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Fourth column</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-gapless">
|
||||||
|
<div class="column">First column</div>
|
||||||
|
<div class="column">Second column</div>
|
||||||
|
<div class="column">Third column</div>
|
||||||
|
<div class="column">Fourth column</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="content">
|
||||||
|
<p>You can combine it with the <code>is-multiline</code> modifier:</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-multiline is-mobile is-gapless">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info"><code>is-half</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-gapless is-multiline is-mobile">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<code>is-half</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Auto
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
801
docs/documentation/grid/columns.html
Normal file
801
docs/documentation/grid/columns.html
Normal file
@ -0,0 +1,801 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: grid
|
||||||
|
doc-subtab: columns
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-grid.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Columns</h1>
|
||||||
|
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
|
||||||
|
<hr>
|
||||||
|
<div class="content">
|
||||||
|
<p>To build a <strong>grid</strong>, just:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Add a <code>columns</code> container</li>
|
||||||
|
<li>Add as many <code>column</code> elements as you want</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">First column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Second column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Third column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Fourth column</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
First column
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Second column
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Third column
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Fourth column
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Sizes</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>is-three-quarters</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-two-thirds</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-half</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-one-third</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-three-quarters">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-three-quarters</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-two-thirds</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-half</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-one-third</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-one-quarter</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-three-quarters">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-three-quarters</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-two-thirds</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-half</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-one-third</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Auto</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-one-quarter</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h4 class="title is-4">12 columns</h4>
|
||||||
|
<div class="content">
|
||||||
|
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>is-2</code></li>
|
||||||
|
<li><code>is-3</code></li>
|
||||||
|
<li><code>is-4</code></li>
|
||||||
|
<li><code>is-5</code></li>
|
||||||
|
<li><code>is-6</code></li>
|
||||||
|
<li><code>is-7</code></li>
|
||||||
|
<li><code>is-8</code></li>
|
||||||
|
<li><code>is-9</code></li>
|
||||||
|
<li><code>is-10</code></li>
|
||||||
|
<li><code>is-11</code></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="message is-danger">
|
||||||
|
<p class="message-header">Naming</p>
|
||||||
|
<p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-2">
|
||||||
|
<p class="notification is-info"><code>is-2</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-3">
|
||||||
|
<p class="notification is-info"><code>is-3</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-4">
|
||||||
|
<p class="notification is-info"><code>is-4</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-5">
|
||||||
|
<p class="notification is-info"><code>is-5</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-6">
|
||||||
|
<p class="notification is-info"><code>is-6</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-7">
|
||||||
|
<p class="notification is-info"><code>is-7</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-8">
|
||||||
|
<p class="notification is-info"><code>is-8</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-9">
|
||||||
|
<p class="notification is-info"><code>is-9</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-10">
|
||||||
|
<p class="notification is-info"><code>is-10</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-11">
|
||||||
|
<p class="notification is-info"><code>is-11</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning has-text-centered">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Offset</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half is-offset-one-quarter">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-half</code><br>
|
||||||
|
<code class="html">is-offset-one-quarter</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-4 is-offset-8">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-4</code><br>
|
||||||
|
<code class="html">is-offset-8</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-11 is-offset-1">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code class="html">is-11</code><br>
|
||||||
|
<code class="html">is-offset-1</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half is-offset-one-quarter"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-4 is-offset-8"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-11 is-offset-1"></div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Responsiveness</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
|
||||||
|
<p>If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">2</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">3</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">4</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">2</div>
|
||||||
|
<div class="column">3</div>
|
||||||
|
<div class="column">4</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="message is-info">
|
||||||
|
<p class="message-header">Resize</p>
|
||||||
|
<p class="message-body">If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you <em>only</em> want columns on <strong>desktop</strong>, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-desktop">
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">2</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">3</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">4</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-desktop">
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">2</div>
|
||||||
|
<div class="column">3</div>
|
||||||
|
<div class="column">4</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h4 class="title is-4">Different sizes per breakpoint</h4>
|
||||||
|
<div class="content">
|
||||||
|
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||||
|
<p class="notification is-info">
|
||||||
|
<code>is-half-mobile</code><br>
|
||||||
|
<code>is-one-third-tablet</code><br>
|
||||||
|
<code>is-one-quarter-desktop</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="message is-info">
|
||||||
|
<p class="message-header">Resize</p>
|
||||||
|
<p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-mobile">
|
||||||
|
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||||
|
<code>is-half-mobile</code><br>
|
||||||
|
<code>is-one-third-tablet</code><br>
|
||||||
|
<code>is-one-quarter-desktop</code>
|
||||||
|
</div>
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">1</div>
|
||||||
|
<div class="column">1</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Multiline</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-multiline is-mobile">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info"><code>is-half</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-multiline is-mobile">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<code>is-half</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Auto
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Gapless</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-gapless">
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">First column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-success">Second column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-warning">Third column</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-danger">Fourth column</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-gapless">
|
||||||
|
<div class="column">First column</div>
|
||||||
|
<div class="column">Second column</div>
|
||||||
|
<div class="column">Third column</div>
|
||||||
|
<div class="column">Fourth column</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="content">
|
||||||
|
<p>You can combine it with the <code>is-multiline</code> modifier:</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns is-multiline is-mobile is-gapless">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-info"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<p class="notification is-info"><code>is-half</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="notification is-info">Auto</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns is-gapless is-multiline is-mobile">
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<code>is-half</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-one-quarter">
|
||||||
|
<code>is-one-quarter</code>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
Auto
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Narrow column</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-narrow">
|
||||||
|
<div class="box" style="width: 200px;">
|
||||||
|
<p class="title is-5">Narrow column</p>
|
||||||
|
<p class="subtitle">This column is only 200px wide.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="box">
|
||||||
|
<p class="title is-5">Flexible column</p>
|
||||||
|
<p class="subtitle">This column will take up the remaining space available.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-narrow">
|
||||||
|
<div class="box" style="width: 200px;">
|
||||||
|
<p class="title is-5">Narrow column</p>
|
||||||
|
<p class="subtitle">This column is only 200px wide.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="box">
|
||||||
|
<p class="title is-5">Flexible column</p>
|
||||||
|
<p class="subtitle">This column will take up the remaining space available.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="content">
|
||||||
|
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>is-narrow-mobile</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-narrow-tablet</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>is-narrow-desktop</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
896
docs/documentation/grid/tiles.html
Normal file
896
docs/documentation/grid/tiles.html
Normal file
@ -0,0 +1,896 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: grid
|
||||||
|
doc-subtab: tiles
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-grid.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Tiles</h1>
|
||||||
|
<h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>To build intricate 2-dimensional, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile">
|
||||||
|
<!-- The magical tile element! -->
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Example</h3>
|
||||||
|
<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="http://placehold.it/640x480">
|
||||||
|
</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">
|
||||||
|
<div class="content">
|
||||||
|
<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>
|
||||||
|
</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 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="http://placehold.it/640x480">
|
||||||
|
</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">
|
||||||
|
<!-- Content -->
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child notification is-success">
|
||||||
|
<div class="content">
|
||||||
|
<p class="title">Tall tile</p>
|
||||||
|
<p class="subtitle">With even more content</p>
|
||||||
|
<div class="content">
|
||||||
|
<!-- Content -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Modifiers</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>3 contextual</strong> modifiers
|
||||||
|
<ul>
|
||||||
|
<li><code>is-ancestor</code></li>
|
||||||
|
<li><code>is-parent</code></li>
|
||||||
|
<li><code>is-child</code></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>1 directional</strong> modifier
|
||||||
|
<ul>
|
||||||
|
<li><code>is-vertical</code></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>12 horizontal size</strong> modifiers
|
||||||
|
<ul>
|
||||||
|
<li>from <code>is-1</code></li>
|
||||||
|
<li>to <code>is-12</code></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">How it works: Nesting</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<!-- All other tile elemnts -->
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile">
|
||||||
|
<!-- Add content or other tiles -->
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<!-- Add content or other tiles -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<p>
|
||||||
|
You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
|
||||||
|
<br>
|
||||||
|
For example, <code>is-4</code> will take up 1/3 of the horizontal space:
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-4">
|
||||||
|
<!-- 1/3 -->
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<!-- This tile will take the rest: 2/3 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-4 is-vertical">
|
||||||
|
<div class="tile">
|
||||||
|
<!-- Top tile -->
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<!-- Bottom tile -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<!-- This tile will take up the whole vertical space -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<div class="content">
|
||||||
|
<p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
|
||||||
|
<ul>
|
||||||
|
<li>add <em>any</em> class you want, like <code>box</code></li>
|
||||||
|
<li>add the <code>is-child</code> modifier on the tile</li>
|
||||||
|
<li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column is-two-thirds">
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-4 is-vertical is-parent">
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">One</p>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">Two</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">Three</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-4 is-vertical is-parent">
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">One</p>
|
||||||
|
<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>
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">Two</p>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">Three</p>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-4 is-vertical is-parent">
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">One</p>
|
||||||
|
<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>
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">Two</p>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<div class="tile is-child box">
|
||||||
|
<p class="title">Three</p>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Nesting requirements</h3>
|
||||||
|
|
||||||
|
<article class="message is-danger">
|
||||||
|
<div class="message-header">
|
||||||
|
3 levels deep at least...
|
||||||
|
</div>
|
||||||
|
<div class="message-body">
|
||||||
|
<div class="content">
|
||||||
|
<p>You need at least <strong>3 levels</strong> of hierarchy:</p>
|
||||||
|
{% highlight markdown %}
|
||||||
|
tile is-ancestor
|
||||||
|
|
|
||||||
|
└───tile is-parent
|
||||||
|
|
|
||||||
|
└───tile is-child
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="message is-success">
|
||||||
|
<div class="message-header">
|
||||||
|
...but more levels if you want!
|
||||||
|
</div>
|
||||||
|
<div class="message-body">
|
||||||
|
<div class="content">
|
||||||
|
<p>You can however nest tiles more deeply than that, and mix it up!</p>
|
||||||
|
{% highlight markdown %}
|
||||||
|
tile is-ancestor
|
||||||
|
|
|
||||||
|
├───tile is-vertical is-8
|
||||||
|
| |
|
||||||
|
| ├───tile
|
||||||
|
| | |
|
||||||
|
| | ├───tile is-parent is-vertical
|
||||||
|
| | | ├───tile is-child
|
||||||
|
| | | └───tile is-child
|
||||||
|
| | |
|
||||||
|
| | └───tile is-parent
|
||||||
|
| | └───tile is-child
|
||||||
|
| |
|
||||||
|
| └───tile is-parent
|
||||||
|
| └───tile is-child
|
||||||
|
|
|
||||||
|
└───tile is-parent
|
||||||
|
└───tile is-child
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<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 box">
|
||||||
|
<p class="title">Vertical tiles</p>
|
||||||
|
<p class="subtitle">Top box</p>
|
||||||
|
</article>
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Vertical tiles</p>
|
||||||
|
<p class="subtitle">Bottom box</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Middle box</p>
|
||||||
|
<p class="subtitle">With an image</p>
|
||||||
|
<figure class="image is-4by3">
|
||||||
|
<img src="http://placehold.it/640x480">
|
||||||
|
</figure>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Wide column</p>
|
||||||
|
<p class="subtitle">Aligned with the right column</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 box">
|
||||||
|
<div class="content">
|
||||||
|
<p class="title">Tall column</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>
|
||||||
|
</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 box">
|
||||||
|
<!-- Put any content you want -->
|
||||||
|
</article>
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<!-- Put any content you want -->
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<!-- Put any content you want -->
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<!-- Put any content you want -->
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<!-- Put any content you want -->
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">3 columns</h3>
|
||||||
|
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Hello World</p>
|
||||||
|
<p class="subtitle">What is up?</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Foo</p>
|
||||||
|
<p class="subtitle">Bar</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Third column</p>
|
||||||
|
<p class="subtitle">With some content</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-ancestor">
|
||||||
|
<div class="tile is-vertical is-8">
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-parent is-vertical">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Vertical tiles</p>
|
||||||
|
<p class="subtitle">Top box</p>
|
||||||
|
</article>
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Vertical tiles</p>
|
||||||
|
<p class="subtitle">Bottom box</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Middle box</p>
|
||||||
|
<p class="subtitle">With an image</p>
|
||||||
|
<figure class="image is-4by3">
|
||||||
|
<img src="http://placehold.it/640x480">
|
||||||
|
</figure>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Wide column</p>
|
||||||
|
<p class="subtitle">Aligned with the right column</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 box">
|
||||||
|
<div class="content">
|
||||||
|
<p class="title">Tall column</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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Side column</p>
|
||||||
|
<p class="subtitle">With some content</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 class="tile is-parent is-8">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Main column</p>
|
||||||
|
<p class="subtitle">With some content</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>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Hello World</p>
|
||||||
|
<p class="subtitle">What is up?</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Foo</p>
|
||||||
|
<p class="subtitle">Bar</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Third column</p>
|
||||||
|
<p class="subtitle">With some content</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-ancestor">
|
||||||
|
<div class="tile is-vertical is-8">
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-parent is-vertical">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Vertical tiles</p>
|
||||||
|
<p class="subtitle">Top box</p>
|
||||||
|
</article>
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Vertical tiles</p>
|
||||||
|
<p class="subtitle">Bottom box</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Middle box</p>
|
||||||
|
<p class="subtitle">With an image</p>
|
||||||
|
<figure class="image is-4by3">
|
||||||
|
<img src="http://placehold.it/640x480">
|
||||||
|
</figure>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Wide column</p>
|
||||||
|
<p class="subtitle">Aligned with the right column</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 box">
|
||||||
|
<div class="content">
|
||||||
|
<p class="title">Tall column</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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Side column</p>
|
||||||
|
<p class="subtitle">With some content</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 class="tile is-parent is-8">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Main column</p>
|
||||||
|
<p class="subtitle">With some content</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>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">4 columns</h3>
|
||||||
|
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">One</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Two</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Three</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Four</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-vertical is-9">
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Five</p>
|
||||||
|
<p class="subtitle">Subtitle</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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-8 is-vertical">
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Six</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Seven</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Eight</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-8 is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Nine</p>
|
||||||
|
<p class="subtitle">Subtitle</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 class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Ten</p>
|
||||||
|
<p class="subtitle">Subtitle</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>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<div class="content">
|
||||||
|
<p class="title">Eleven</p>
|
||||||
|
<p class="subtitle">Subtitle</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>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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Twelve</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
<div class="content">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent is-6">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Thirteen</p>
|
||||||
|
<p class="subtitle">Subtitle</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 class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Fourteen</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
<div class="content">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">One</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Two</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Three</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Four</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-vertical is-9">
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Five</p>
|
||||||
|
<p class="subtitle">Subtitle</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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-8 is-vertical">
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Six</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Seven</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Eight</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tile">
|
||||||
|
<div class="tile is-8 is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Nine</p>
|
||||||
|
<p class="subtitle">Subtitle</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 class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Ten</p>
|
||||||
|
<p class="subtitle">Subtitle</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>
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<div class="content">
|
||||||
|
<p class="title">Eleven</p>
|
||||||
|
<p class="subtitle">Subtitle</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>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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Twelve</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
<div class="content">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="tile is-parent is-6">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Thirteen</p>
|
||||||
|
<p class="subtitle">Subtitle</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 class="tile is-parent">
|
||||||
|
<article class="tile is-child box">
|
||||||
|
<p class="title">Fourteen</p>
|
||||||
|
<p class="subtitle">Subtitle</p>
|
||||||
|
<div class="content">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
70
docs/documentation/layout/container.html
Normal file
70
docs/documentation/layout/container.html
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: layout
|
||||||
|
doc-subtab: container
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-layout.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Container</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A simple <strong>container</strong> to center your content horizontally
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>.header</code></li>
|
||||||
|
<li><code>.hero</code></li>
|
||||||
|
<li><code>.section</code></li>
|
||||||
|
<li><code>.footer</code></li>
|
||||||
|
</ul>
|
||||||
|
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
|
||||||
|
<p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<div class="container">
|
||||||
|
<div class="notification">
|
||||||
|
This container is <strong>centered</strong> on desktop.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="container">
|
||||||
|
<div class="notification">
|
||||||
|
This container is <strong>centered</strong> on desktop.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<hr>
|
||||||
|
<h3 class="title">Fluid container</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example is-fullwidth">
|
||||||
|
<div class="container is-fluid">
|
||||||
|
<div class="notification">
|
||||||
|
This container is <strong>fluid</strong>: it will have a 20px gap on either side.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="container is-fluid">
|
||||||
|
<div class="notification">
|
||||||
|
This container is <strong>fluid</strong>: it will have a 20px gap on either side, on any viewport size.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
</section>
|
||||||
54
docs/documentation/layout/footer.html
Normal file
54
docs/documentation/layout/footer.html
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: layout
|
||||||
|
doc-subtab: footer
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-layout.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Footer</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons...
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<p>
|
||||||
|
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||||
|
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
|
||||||
|
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a class="icon" href="https://github.com/jgthms/bulma">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<p>
|
||||||
|
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||||
|
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
|
||||||
|
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a class="icon" href="https://github.com/jgthms/bulma">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
870
docs/documentation/layout/hero.html
Normal file
870
docs/documentation/layout/hero.html
Normal file
@ -0,0 +1,870 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: layout
|
||||||
|
doc-subtab: hero
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-layout.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Hero</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
An imposing <strong>hero banner</strong> to showcase something
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section is-fullwidth">
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Hero title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Hero subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
Hero title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Hero subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h3 class="title">Colors</h3>
|
||||||
|
<h4 class="subtitle">
|
||||||
|
As with buttons, you can choose one of the <strong>7 different colors</strong>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section is-fullwidth">
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-primary">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Primary title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Primary subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero is-primary">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
Primary title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Primary subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-info">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Info title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Info subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-success">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Success title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Success subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-warning">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Warning title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Warning subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-danger">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Danger title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Danger subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-light">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Light title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Light subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-dark">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Dark title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Dark subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h3 class="title">
|
||||||
|
Gradients
|
||||||
|
<span class="tag is-warning">Experimental</span>
|
||||||
|
</h3>
|
||||||
|
<h4 class="subtitle">
|
||||||
|
By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section is-fullwidth">
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-medium is-primary is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Primary bold title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Primary bold subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero is-medium is-primary is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
Primary bold title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Primary bold subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-medium is-info is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Info bold title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Info bold subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-medium is-success is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Success bold title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Success bold subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-medium is-warning is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Warning bold title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Warning bold subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-medium is-danger is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Danger bold title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Danger bold subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-medium is-light is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Light bold title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Light bold subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-medium is-dark is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Dark bold title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Dark bold subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h3 class="title">Sizes</h3>
|
||||||
|
<h4 class="subtitle">
|
||||||
|
You can have even more imposing banners by using one of <strong>3 different sizes</strong>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section is-fullwidth">
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-primary is-medium">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Medium title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Medium subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero is-primary is-medium">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
Medium title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Medium subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-info is-large">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Large title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Large subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero is-info is-large">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
Large title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Large subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="example is-fullwidth">
|
||||||
|
<section class="hero is-success is-fullheight">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<p class="title">
|
||||||
|
Full Height title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Full Height subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero is-success is-fullheight">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
Full Height title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Full Height subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h3 class="title">Full height hero</h3>
|
||||||
|
<h4 class="subtitle">And vertically centered</h4>
|
||||||
|
<div class="content">
|
||||||
|
<p>You can split the hero in <strong>3 vertical parts</strong>:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>hero</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>hero-head</code> (always at the top)</li>
|
||||||
|
<li><code>hero-body</code> (always vertically centered)</li>
|
||||||
|
<li><code>hero-foot</code> (always at the bottom)</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section is-fullwidth">
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-primary is-medium">
|
||||||
|
<div class="hero-head">
|
||||||
|
<header class="nav">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item">
|
||||||
|
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<span class="nav-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
<div class="nav-right nav-menu">
|
||||||
|
<a class="nav-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="nav-item">
|
||||||
|
<a class="button is-primary is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<p class="title">
|
||||||
|
Title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-foot">
|
||||||
|
<nav class="tabs">
|
||||||
|
<div class="container">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active">
|
||||||
|
<a>Overview</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Modifiers</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Grid</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Elements</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Components</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Layout</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero is-primary is-medium">
|
||||||
|
<!-- Hero header: will stick at the top -->
|
||||||
|
<div class="hero-head">
|
||||||
|
<header class="nav">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item">
|
||||||
|
<img src="images/bulma-white.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<span class="nav-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
<div class="nav-right nav-menu">
|
||||||
|
<a class="nav-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="nav-item">
|
||||||
|
<a class="button is-primary is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero content: will be in the middle -->
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<h1 class="title">
|
||||||
|
Title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero footer: will stick at the bottom -->
|
||||||
|
<div class="hero-foot">
|
||||||
|
<nav class="tabs">
|
||||||
|
<div class="container">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active"><a>Overview</a></li>
|
||||||
|
<li><a>Modifiers</a></li>
|
||||||
|
<li><a>Grid</a></li>
|
||||||
|
<li><a>Elements</a></li>
|
||||||
|
<li><a>Components</a></li>
|
||||||
|
<li><a>Layout</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<section class="hero is-info is-large">
|
||||||
|
<div class="hero-head">
|
||||||
|
<header class="nav">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item">
|
||||||
|
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<span class="nav-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
<div class="nav-right nav-menu">
|
||||||
|
<a class="nav-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="nav-item">
|
||||||
|
<a class="button is-info is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<p class="title">
|
||||||
|
Title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-foot">
|
||||||
|
<nav class="tabs is-boxed is-fullwidth">
|
||||||
|
<div class="container">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active">
|
||||||
|
<a>Overview</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Modifiers</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Grid</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Elements</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Components</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Layout</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero is-info is-large">
|
||||||
|
<!-- Hero header: will stick at the top -->
|
||||||
|
<div class="hero-head">
|
||||||
|
<header class="nav">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item">
|
||||||
|
<img src="images/bulma-white.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<span class="nav-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
<div class="nav-right nav-menu">
|
||||||
|
<a class="nav-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="nav-item">
|
||||||
|
<a class="button is-info is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero content: will be in the middle -->
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<h1 class="title">
|
||||||
|
Title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero footer: will stick at the bottom -->
|
||||||
|
<div class="hero-foot">
|
||||||
|
<nav class="tabs is-boxed is-fullwidth">
|
||||||
|
<div class="container">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active"><a>Overview</a></li>
|
||||||
|
<li><a>Modifiers</a></li>
|
||||||
|
<li><a>Grid</a></li>
|
||||||
|
<li><a>Elements</a></li>
|
||||||
|
<li><a>Components</a></li>
|
||||||
|
<li><a>Layout</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="example is-fullwidth">
|
||||||
|
<section class="hero is-success is-fullheight">
|
||||||
|
<div class="hero-head">
|
||||||
|
<header class="nav">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item">
|
||||||
|
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<span class="nav-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
<div class="nav-right nav-menu">
|
||||||
|
<a class="nav-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="nav-item">
|
||||||
|
<a class="button is-success is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<p class="title">
|
||||||
|
Title
|
||||||
|
</p>
|
||||||
|
<p class="subtitle">
|
||||||
|
Subtitle
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-foot">
|
||||||
|
<nav class="tabs is-boxed is-fullwidth">
|
||||||
|
<div class="container">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active">
|
||||||
|
<a>Overview</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Modifiers</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Grid</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Elements</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Components</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Layout</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<section class="hero is-success is-fullheight">
|
||||||
|
<!-- Hero header: will stick at the top -->
|
||||||
|
<div class="hero-head">
|
||||||
|
<header class="nav">
|
||||||
|
<div class="container">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="nav-item">
|
||||||
|
<img src="images/bulma-white.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<span class="nav-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</span>
|
||||||
|
<div class="nav-right nav-menu">
|
||||||
|
<a class="nav-item is-active">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a class="nav-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<span class="nav-item">
|
||||||
|
<a class="button is-success is-inverted">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero content: will be in the middle -->
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container has-text-centered">
|
||||||
|
<h1 class="title">
|
||||||
|
Title
|
||||||
|
</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
Subtitle
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero footer: will stick at the bottom -->
|
||||||
|
<div class="hero-foot">
|
||||||
|
<nav class="tabs is-boxed is-fullwidth">
|
||||||
|
<div class="container">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active"><a>Overview</a></li>
|
||||||
|
<li><a>Modifiers</a></li>
|
||||||
|
<li><a>Grid</a></li>
|
||||||
|
<li><a>Elements</a></li>
|
||||||
|
<li><a>Components</a></li>
|
||||||
|
<li><a>Layout</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endhighlight %}
|
||||||
|
</section>
|
||||||
42
docs/documentation/layout/section.html
Normal file
42
docs/documentation/layout/section.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: layout
|
||||||
|
doc-subtab: section
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-layout.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Section</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<body>
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="heading">
|
||||||
|
<h1 class="title">Section</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
72
docs/documentation/modifiers/helpers.html
Normal file
72
docs/documentation/modifiers/helpers.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: modifiers
|
||||||
|
doc-subtab: helpers
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-modifiers.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Helpers</h1>
|
||||||
|
<h2 class="subtitle">You can apply <strong>responsive helper classes</strong> to almost any element, in order to alter its style based upon the browser's width.</h2>
|
||||||
|
<hr>
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th rowspan="3">Float</th>
|
||||||
|
<td><code>is-clearfix</code></td>
|
||||||
|
<td>Fixes an element's floating children</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>is-pulled-left</code></td>
|
||||||
|
<td>Moves an element to the left</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>is-pulled-right</code></td>
|
||||||
|
<td>Moves an element to the right</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Overlay</th>
|
||||||
|
<td><code>is-overlay</code></td>
|
||||||
|
<td>Completely covers the first positioned parent</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Size</th>
|
||||||
|
<td><code>is-fullwidth</code></td>
|
||||||
|
<td>Takes up the whole width (100%)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th rowspan="3">Text</th>
|
||||||
|
<td><code>has-text-centered</code></td>
|
||||||
|
<td>Centers the text</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>has-text-left</code></td>
|
||||||
|
<td>Text is left-aligned</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>has-text-right</code></td>
|
||||||
|
<td>Text is right-aligned</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th rowspan="4">Other</th>
|
||||||
|
<td><code>is-disabled</code></td>
|
||||||
|
<td>Removes any <strong>click</strong> event</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>is-marginless</code></td>
|
||||||
|
<td>Removes any <strong>margin</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>is-paddingless</code></td>
|
||||||
|
<td>Removes any <strong>padding</strong></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>is-unselectable</code></td>
|
||||||
|
<td>Prevents the text from being <strong>selectable</strong></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
343
docs/documentation/modifiers/responsive-helpers.html
Normal file
343
docs/documentation/modifiers/responsive-helpers.html
Normal file
@ -0,0 +1,343 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: modifiers
|
||||||
|
doc-subtab: responsive-helpers
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-modifiers.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Responsive helpers</h1>
|
||||||
|
<h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Show</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can use one of the following <code>display</code> classes:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>block</code></li>
|
||||||
|
<li><code>flex</code></li>
|
||||||
|
<li><code>inline</code></li>
|
||||||
|
<li><code>inline-block</code></li>
|
||||||
|
<li><code>inline-flex</code></li>
|
||||||
|
</ul>
|
||||||
|
<p>For example, here's what the <code>is-flex</code> helper works:</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
Class
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Mobile<br>
|
||||||
|
Up to <code>768px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Tablet<br>
|
||||||
|
Between <code>769px</code> and <code>979px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Desktop<br>
|
||||||
|
Between <code>980px</code> and <code>1179px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Widescreen<br>
|
||||||
|
Above <code>1180px</code>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-flex-mobile</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-flex-tablet-only</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-flex-desktop-only</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-flex-widescreen</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="4">
|
||||||
|
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-flex-touch</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-flex-tablet</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-flex-desktop</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">unchanged</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">flex</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Hide</h3>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
Class
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Mobile<br>
|
||||||
|
Up to <code>768px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Tablet<br>
|
||||||
|
Between <code>769px</code> and <code>979px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Desktop<br>
|
||||||
|
Between <code>980px</code> and <code>1179px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Widescreen<br>
|
||||||
|
Above <code>1180px</code>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-hidden-mobile</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-hidden-tablet-only</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-hidden-desktop-only</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-hidden-widescreen</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th colspan="4">
|
||||||
|
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-hidden-touch</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-hidden-tablet</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<code>is-hidden-desktop</code>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">visible</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">hidden</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
179
docs/documentation/modifiers/syntax.html
Normal file
179
docs/documentation/modifiers/syntax.html
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: modifiers
|
||||||
|
doc-subtab: syntax
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-modifiers.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Modifiers syntax</h1>
|
||||||
|
<h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.
|
||||||
|
<br>
|
||||||
|
They all start with <code>is-</code> or <code>has-</code>.</h2>
|
||||||
|
<hr>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p>
|
||||||
|
<a class="button">Button</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p>
|
||||||
|
<a class="button is-primary">Button</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-primary">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>You can use one of the <strong>5 main colors</strong>:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>is-primary</code></li>
|
||||||
|
<li><code>is-info</code></li>
|
||||||
|
<li><code>is-success</code></li>
|
||||||
|
<li><code>is-warning</code></li>
|
||||||
|
<li><code>is-danger</code></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-info">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-success">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-warning">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-danger">Button</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-primary">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
<a class="button is-info">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
<a class="button is-success">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
<a class="button is-warning">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
<a class="button is-danger">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>You can also alter the <strong>size</strong>:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>is-small</code></li>
|
||||||
|
<li><code>is-medium</code></li>
|
||||||
|
<li><code>is-large</code></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-small">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-medium">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-large">Button</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-small">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-medium">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-large">Button</a>
|
||||||
|
</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<div class="content">
|
||||||
|
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>is-outlined</code></li>
|
||||||
|
<li><code>is-loading</code></li>
|
||||||
|
<li><code>is-disabled</code></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary is-outlined">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary is-loading">Button</a>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<a class="button is-primary is-disabled">Button</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
{% highlight html %}
|
||||||
|
<a class="button is-primary is-outlined">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
<a class="button is-primary is-loading">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
<a class="button is-primary is-disabled">
|
||||||
|
Button
|
||||||
|
</a>
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
257
docs/documentation/navbar.html
Normal file
257
docs/documentation/navbar.html
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: navbar
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Navbar</h1>
|
||||||
|
<h2 class="subtitle">A multi-purpose <strong>horizontal navbar</strong>, which can contain almost any other element</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>The <strong>structure</strong> of a navbar is the following:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>navbar</code>: main container
|
||||||
|
<ul>
|
||||||
|
<li><code>navbar-left</code> for the left side</li>
|
||||||
|
<li>
|
||||||
|
<code>navbar-right</code> for the right side
|
||||||
|
<ul>
|
||||||
|
<li><code>navbar-item</code> for each individual element</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>In a <code>navbar-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>navbar</code>, they will always be <strong>vertically aligned</strong>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="structure">
|
||||||
|
<nav class="navbar structure-item is-structure-container" title="navbar">
|
||||||
|
<div class="navbar-left structure-item" title="navbar-left">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<p class="subtitle is-5">
|
||||||
|
<strong>123</strong> posts
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-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="navbar-right structure-item" title="navbar-right">
|
||||||
|
<p class="navbar-item">
|
||||||
|
<strong>All</strong>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item">
|
||||||
|
<a>Published</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item">
|
||||||
|
<a>Drafts</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item">
|
||||||
|
<a>Deleted</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item">
|
||||||
|
<a class="button is-success">
|
||||||
|
New
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-left">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<p class="subtitle is-5">
|
||||||
|
<strong>123</strong> posts
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-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="navbar-right">
|
||||||
|
<p class="navbar-item">
|
||||||
|
<strong>All</strong>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item">
|
||||||
|
<a>Published</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item">
|
||||||
|
<a>Drafts</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item">
|
||||||
|
<a>Deleted</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item">
|
||||||
|
<a class="button is-success">
|
||||||
|
New
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<!-- Main container -->
|
||||||
|
<nav class="navbar">
|
||||||
|
<!-- Left side -->
|
||||||
|
<div class="navbar-left">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<p class="subtitle is-5">
|
||||||
|
<strong>123</strong> posts
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-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="navbar-right">
|
||||||
|
<p class="navbar-item"><strong>All</strong></p>
|
||||||
|
<p class="navbar-item"><a>Published</a></p>
|
||||||
|
<p class="navbar-item"><a>Drafts</a></p>
|
||||||
|
<p class="navbar-item"><a>Deleted</a></p>
|
||||||
|
<p class="navbar-item"><a class="button is-success">New</a></p>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<h3 class="title">Centered navbar</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
If you want a <strong>centered navbar</strong>, you can use as many <code>navbar-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>navbar</code> container.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Tweets</p>
|
||||||
|
<p class="title">3,456</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Following</p>
|
||||||
|
<p class="title">123</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Followers</p>
|
||||||
|
<p class="title">456K</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Likes</p>
|
||||||
|
<p class="title">789</p>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Tweets</p>
|
||||||
|
<p class="title">3,456</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Following</p>
|
||||||
|
<p class="title">123</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Followers</p>
|
||||||
|
<p class="title">456K</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Likes</p>
|
||||||
|
<p class="title">789</p>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<nav class="navbar">
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<a class="link is-info">Home</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<a class="link is-info">Menu</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<a class="link is-info">Reservations</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<a class="link is-info">Contact</a>
|
||||||
|
</p>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
<nav class="navbar">
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<a class="link is-info">Home</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<a class="link is-info">Menu</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<a class="link is-info">Reservations</a>
|
||||||
|
</p>
|
||||||
|
<p class="navbar-item has-text-centered">
|
||||||
|
<a class="link is-info">Contact</a>
|
||||||
|
</p>
|
||||||
|
</nav>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<h3 class="title">Mobile navbar</h3>
|
||||||
|
<div class="content">
|
||||||
|
By default, for space concerns, the navbar is vertical on mobile. If you want the navbar to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>navbar</code> container.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
<nav class="navbar is-mobile">
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Tweets</p>
|
||||||
|
<p class="title">3,456</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Following</p>
|
||||||
|
<p class="title">123</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Followers</p>
|
||||||
|
<p class="title">456K</p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-text-centered">
|
||||||
|
<p class="heading">Likes</p>
|
||||||
|
<p class="title">789</p>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
37
docs/documentation/overview/classes.html
Normal file
37
docs/documentation/overview/classes.html
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: overview
|
||||||
|
doc-subtab: classes
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-overview.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Classes</h1>
|
||||||
|
<h2 class="subtitle">Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
|
||||||
|
<br>
|
||||||
|
<a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms/bulma/blob/master/css/bulma.css</a></p>
|
||||||
|
<p>
|
||||||
|
Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code><input type="text"></code> elements you want to style.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/jgthms/bulma/blob/master/bulma/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
the <a href="{{ site.baseurl }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
161
docs/documentation/overview/responsiveness.html
Normal file
161
docs/documentation/overview/responsiveness.html
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: overview
|
||||||
|
doc-subtab: responsiveness
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-overview.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Responsiveness</h1>
|
||||||
|
<h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Breakpoints</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>Bulma has 4 breakpoints:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>mobile</code>: up to <code>768px</code></li>
|
||||||
|
<li><code>tablet</code>: from <code>769px</code></li>
|
||||||
|
<li><code>desktop</code>: from <code>980px</code></li>
|
||||||
|
<li><code>widescreen</code>: from <code>1180px</code></li>
|
||||||
|
</ul>
|
||||||
|
<p>Bulma uses 7 responsive mixins:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>=mobile</code><br>
|
||||||
|
until <code>768px</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>=tablet</code><br>
|
||||||
|
from <code>769px</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>=tablet-only</code><br>
|
||||||
|
from <code>769px</code> and until <code>979px</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>=touch</code><br>
|
||||||
|
until <code>979px</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>=desktop</code><br>
|
||||||
|
from <code>980px</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>=desktop-only</code><br>
|
||||||
|
from <code>980px</code> and until <code>1179px</code>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>=widescreen</code><br>
|
||||||
|
from <code>1180px</code>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
Mobile<br>
|
||||||
|
Up to <code>768px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Tablet<br>
|
||||||
|
Between <code>769px</code> and <code>979px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Desktop<br>
|
||||||
|
Between <code>980px</code> and <code>1179px</code>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Widescreen<br>
|
||||||
|
<code>1180px</code> and above
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">mobile</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow" colspan="3">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow" colspan="3">
|
||||||
|
<p class="notification is-success">tablet</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow" colspan="2">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow" colspan="3">
|
||||||
|
<p class="notification is-success">desktop</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow" colspan="3">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">widescreen</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">tablet-only</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow" colspan="2">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow" colspan="2">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification is-success">desktop-only</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="is-narrow" colspan="2">
|
||||||
|
<p class="notification is-success">touch</p>
|
||||||
|
</td>
|
||||||
|
<td class="is-narrow" colspan="2">
|
||||||
|
<p class="notification">-</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h4>
|
||||||
|
|
||||||
|
<h3 class="title">Vertical by default</h3>
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
Every element in Bulma is <strong>mobile-first</strong> and optmizes for <strong>vertical reading</strong>, so by default on mobile:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>columns</code> are stacked vertically</li>
|
||||||
|
<li>the <code>level</code> component will show its children stacked vertically</li>
|
||||||
|
<li>the <code>nav</code> menu will be hidden</li>
|
||||||
|
</ul>
|
||||||
|
<p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
135
docs/documentation/overview/start.html
Normal file
135
docs/documentation/overview/start.html
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: overview
|
||||||
|
doc-subtab: start
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-overview.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title"><strong>3</strong> ways to start</h1>
|
||||||
|
<h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<article class="media is-large">
|
||||||
|
<div class="media-number">1</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-5">
|
||||||
|
Use <strong>NPM</strong> <em>(recommended)</em>:
|
||||||
|
</p>
|
||||||
|
{% highlight bash %}
|
||||||
|
npm install bulma
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="media is-large">
|
||||||
|
<div class="media-number">2</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-5">
|
||||||
|
Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
|
||||||
|
<br>
|
||||||
|
<a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="media is-large">
|
||||||
|
<div class="media-number">3</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-5">
|
||||||
|
Download from the <strong>repository</strong>
|
||||||
|
<br>
|
||||||
|
<a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="message is-info">
|
||||||
|
<div class="message-header">
|
||||||
|
Font Awesome icons
|
||||||
|
</div>
|
||||||
|
<div class="message-body">
|
||||||
|
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
|
||||||
|
{% highlight html %}
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h3 class="title">Customizing with Sass</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="media is-large">
|
||||||
|
<div class="media-number">1</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-5">
|
||||||
|
<strong>Download</strong> the source files:
|
||||||
|
</p>
|
||||||
|
{% highlight bash %}
|
||||||
|
npm install bulma
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="media is-large">
|
||||||
|
<div class="media-number">2</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-5">
|
||||||
|
<strong>Set</strong> your variables:<br>
|
||||||
|
{% highlight sass %}
|
||||||
|
// Override initial variables here
|
||||||
|
// You can add new ones or update existing ones:
|
||||||
|
|
||||||
|
$blue: #72d0eb // Update blue
|
||||||
|
$pink: #ffb3b3 // Add pink
|
||||||
|
$family-serif: "Georgia", serif // Add a serif family
|
||||||
|
|
||||||
|
// Override generated variables here
|
||||||
|
// For example, by default, the $danger color is $red and the font is sans-serif
|
||||||
|
// You can change these values:
|
||||||
|
|
||||||
|
$danger: $orange // Use the existing orange
|
||||||
|
$family-primary: $family-serif // Use the new serif family
|
||||||
|
{% endhighlight %}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="media is-large">
|
||||||
|
<div class="media-number">3</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-5">
|
||||||
|
<strong>Import</strong> Bulma <em>after</em> having set your variables:<br>
|
||||||
|
{% highlight sass %}
|
||||||
|
// Override variables here
|
||||||
|
// You can add new ones or update existing ones:
|
||||||
|
|
||||||
|
$blue: #72d0eb // Update blue
|
||||||
|
$pink: #ffb3b3 // Add pink
|
||||||
|
$family-serif: "Georgia", serif // Add a serif family
|
||||||
|
|
||||||
|
// Override generated variables here
|
||||||
|
// For example, by default, the $danger color is $red and the font is sans-serif
|
||||||
|
// You can change these values:
|
||||||
|
|
||||||
|
$danger: $orange // Use the existing orange
|
||||||
|
$family-primary: $family-serif // Use the new serif family
|
||||||
|
|
||||||
|
@import "bulma"
|
||||||
|
{% endhighlight %}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
314
docs/documentation/overview/variables.html
Normal file
314
docs/documentation/overview/variables.html
Normal file
@ -0,0 +1,314 @@
|
|||||||
|
---
|
||||||
|
layout: documentation
|
||||||
|
doc-tab: overview
|
||||||
|
doc-subtab: variables
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include subnav-overview.html %}
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">Variables</h1>
|
||||||
|
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>Bulma has 1 variable file divided into <strong>4</strong> sections:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
|
||||||
|
<ul>
|
||||||
|
<li><strong>colors</strong>: <code>$blue: #42afe3</code></li>
|
||||||
|
<li><strong>font families</strong>: <code>$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif</code></li>
|
||||||
|
<li><strong>font sizes</strong>: <code>$size-1: 48px</code></li>
|
||||||
|
<li><strong>other values</strong>: <code>$nav-height: 50px</code> or <code>$easing: ease-out</code></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Primary colors</strong> derived from the initial variables:
|
||||||
|
<ul>
|
||||||
|
<li><code>$primary: $turquoise</code></li>
|
||||||
|
<li><code>$info: $blue</code></li>
|
||||||
|
<li><code>$success: $green</code></li>
|
||||||
|
<li><code>$warning: $yellow</code></li>
|
||||||
|
<li><code>$danger: $red</code></li>
|
||||||
|
<li><code>$dark: $grey-darker</code></li>
|
||||||
|
<li><code>$text: $grey-dark</code></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
||||||
|
<ul>
|
||||||
|
<li><code>$body-background: $grey-lighter</code>: the page's main background is the lighter grey</li>
|
||||||
|
<li><code>$link: $primary</code>: the links use the primary color</li>
|
||||||
|
<li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Lists and maps</strong> which are collections so already defined variables:
|
||||||
|
<ul>
|
||||||
|
<li><code>$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))</code></li>
|
||||||
|
<li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<table class="table is-bordered is-striped">
|
||||||
|
<tr><th colspan="2">1. Initial variables</th></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Colors</th></tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td><code>$black</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #111;"></span>
|
||||||
|
#111
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$grey-darker</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #222324;"></span>
|
||||||
|
#222324
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$grey-dark</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #69707a;"></span>
|
||||||
|
#69707a
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$grey</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #aeb1b5;"></span>
|
||||||
|
#aeb1b5
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$grey-light</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #d3d6db;"></span>
|
||||||
|
#d3d6db
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$grey-lighter</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #f5f7fa;"></span>
|
||||||
|
#f5f7fa
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$white</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #fff;"></span>
|
||||||
|
#fff
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$blue</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #42afe3;"></span>
|
||||||
|
#42afe3
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$green</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #97cd76;"></span>
|
||||||
|
#97cd76
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$orange</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #f68b39;"></span>
|
||||||
|
#f68b39
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$purple</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #847bb9;"></span>
|
||||||
|
#847bb9
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$red</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #ed6c63;"></span>
|
||||||
|
#ed6c63
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$turquoise</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #1fc8db;"></span>
|
||||||
|
#1fc8db
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>$yellow</code></td>
|
||||||
|
<td>
|
||||||
|
<span class="color" style="background-color: #fce473;"></span>
|
||||||
|
#fce473
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Typography</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$family-sans-serif</code></td><td>"Helvetica Neue", "Helvetica", "Arial", sans-serif</td></tr>
|
||||||
|
<tr><td><code>$family-monospace</code></td><td>"Source Code Pro", "Monaco", "Inconsolata", monospace</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$size-1</code></td><td>48px</td></tr>
|
||||||
|
<tr><td><code>$size-2</code></td><td>40px</td></tr>
|
||||||
|
<tr><td><code>$size-3</code></td><td>28px</td></tr>
|
||||||
|
<tr><td><code>$size-4</code></td><td>24px</td></tr>
|
||||||
|
<tr><td><code>$size-5</code></td><td>18px</td></tr>
|
||||||
|
<tr><td><code>$size-6</code></td><td>14px</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$size-7</code></td><td>11px</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$weight-normal</code></td><td>400</td></tr>
|
||||||
|
<tr><td><code>$weight-bold</code></td><td>700</td></tr>
|
||||||
|
<tr><td><code>$weight-title-normal</code></td><td>300</td></tr>
|
||||||
|
<tr><td><code>$weight-title-bold</code></td><td>500</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Breakpoints</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$tablet</code></td><td>769px</td></tr>
|
||||||
|
<tr><td><code>$desktop</code></td><td>980px</td></tr>
|
||||||
|
<tr><td><code>$widescreen</code></td><td>1180px</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Dimensions</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$column-gap</code></td><td>20px</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$nav-height</code></td><td>50px</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Miscellaneous</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$easing</code></td><td>ease-out</td></tr>
|
||||||
|
<tr><td><code>$radius</code></td><td>3px</td></tr>
|
||||||
|
<tr><td><code>$speed</code></td><td>86ms</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">2. Primary colors</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$primary</code></td><td>$turquoise</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$info</code></td><td>$blue</td></tr>
|
||||||
|
<tr><td><code>$success</code></td><td>$green</td></tr>
|
||||||
|
<tr><td><code>$warning</code></td><td>$yellow</td></tr>
|
||||||
|
<tr><td><code>$danger</code></td><td>$red</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$light</code></td><td>$grey-lighter</td></tr>
|
||||||
|
<tr><td><code>$dark</code></td><td>$grey-dark</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$text</code></td><td>$grey-dark</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">3. Generated variables</th></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Invert colors</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$primary-invert</code></td><td>findColorInvert($primary)</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$info-invert</code></td><td>findColorInvert($info)</td></tr>
|
||||||
|
<tr><td><code>$success-invert</code></td><td>findColorInvert($success)</td></tr>
|
||||||
|
<tr><td><code>$warning-invert</code></td><td>findColorInvert($warning)</td></tr>
|
||||||
|
<tr><td><code>$danger-invert</code></td><td>findColorInvert($danger)</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$light-invert</code></td><td>$dark</td></tr>
|
||||||
|
<tr><td><code>$dark-invert</code></td><td>$light</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">General colors</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$body-background</code></td><td>$grey-lighter</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$background</code></td><td>$grey-lighter</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$border</code></td><td>$grey-light</td></tr>
|
||||||
|
<tr><td><code>$border-hover</code></td><td>$grey</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Text colors</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$text-invert</code></td><td>findColorInvert($text)</td></tr>
|
||||||
|
<tr><td><code>$text-light</code></td><td>$grey</td></tr>
|
||||||
|
<tr><td><code>$text-strong</code></td><td>$grey-darker</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Code colors</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$code</code></td><td>$red</td></tr>
|
||||||
|
<tr><td><code>$code-background</code></td><td>$background</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$pre</code></td><td>$text</td></tr>
|
||||||
|
<tr><td><code>$pre-background</code></td><td>$background</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Link colors</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$link</code></td><td>$primary</td></tr>
|
||||||
|
<tr><td><code>$link-invert</code></td><td>$primary-invert</td></tr>
|
||||||
|
<tr><td><code>$link-visited</code></td><td>$purple</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$link-hover</code></td><td>$grey-darker</td></tr>
|
||||||
|
<tr><td><code>$link-hover-background</code></td><td>$grey-lighter</td></tr>
|
||||||
|
<tr><td><code>$link-hover-border</code></td><td>$grey-darker</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$link-active</code></td><td>$grey-darker</td></tr>
|
||||||
|
<tr><td><code>$link-active-border</code></td><td>$grey-darker</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Control colors</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$control</code></td><td>$text-strong</td></tr>
|
||||||
|
<tr><td><code>$control-background</code></td><td>$text-invert</td></tr>
|
||||||
|
<tr><td><code>$control-border</code></td><td>$border</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$control-hover</code></td><td>$link-hover</td></tr>
|
||||||
|
<tr><td><code>$control-hover-border</code></td><td>$border-hover</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$control-active</code></td><td>$link</td></tr>
|
||||||
|
<tr><td><code>$control-active-background</code></td><td>$link</td></tr>
|
||||||
|
<tr><td><code>$control-active-background-invert</code></td><td>$link-invert</td></tr>
|
||||||
|
<tr><td><code>$control-active-border</code></td><td>$link</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">Typography</th></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$family-primary</code></td><td>$family-sans-serif</td></tr>
|
||||||
|
<tr><td><code>$family-code</code></td><td>$family-monospace</td></tr>
|
||||||
|
|
||||||
|
<tr><td><code>$size-small</code></td><td>$size-7</td></tr>
|
||||||
|
<tr><td><code>$size-normal</code></td><td>$size-6</td></tr>
|
||||||
|
<tr><td><code>$size-medium</code></td><td>$size-5</td></tr>
|
||||||
|
<tr><td><code>$size-large</code></td><td>$size-3</td></tr>
|
||||||
|
<tr><td><code>$size-huge</code></td><td>$size-1</td></tr>
|
||||||
|
|
||||||
|
<tr><th colspan="2">4. Lists and maps</th></tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td><code>$colors</code>
|
||||||
|
<td>
|
||||||
|
(white: ($white, $black),<br>
|
||||||
|
black: ($black, $white),<br>
|
||||||
|
light: ($light, $light-invert),<br>
|
||||||
|
dark: ($dark, $dark-invert),<br>
|
||||||
|
primary: ($primary, $primary-invert),<br>
|
||||||
|
info: ($info, $info-invert),<br>
|
||||||
|
success: ($success, $success-invert),<br>
|
||||||
|
warning: ($warning, $warning-invert),<br>
|
||||||
|
danger: ($danger, $danger-invert))
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr><td><code>$sizes</code></td><td>$size-1 $size-2 $size-3 $size-4 $size-5 $size-6</td></tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
BIN
docs/favicons/android-chrome-144x144.png
Normal file
BIN
docs/favicons/android-chrome-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
docs/favicons/android-chrome-192x192.png
Normal file
BIN
docs/favicons/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
docs/favicons/android-chrome-36x36.png
Normal file
BIN
docs/favicons/android-chrome-36x36.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
docs/favicons/android-chrome-48x48.png
Normal file
BIN
docs/favicons/android-chrome-48x48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
docs/favicons/android-chrome-72x72.png
Normal file
BIN
docs/favicons/android-chrome-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
docs/favicons/android-chrome-96x96.png
Normal file
BIN
docs/favicons/android-chrome-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
docs/favicons/apple-touch-icon-114x114.png
Normal file
BIN
docs/favicons/apple-touch-icon-114x114.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
docs/favicons/apple-touch-icon-120x120.png
Normal file
BIN
docs/favicons/apple-touch-icon-120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
docs/favicons/apple-touch-icon-144x144.png
Normal file
BIN
docs/favicons/apple-touch-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
docs/favicons/apple-touch-icon-152x152.png
Normal file
BIN
docs/favicons/apple-touch-icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
docs/favicons/apple-touch-icon-180x180.png
Normal file
BIN
docs/favicons/apple-touch-icon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
docs/favicons/apple-touch-icon-57x57.png
Normal file
BIN
docs/favicons/apple-touch-icon-57x57.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
docs/favicons/apple-touch-icon-60x60.png
Normal file
BIN
docs/favicons/apple-touch-icon-60x60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
docs/favicons/apple-touch-icon-72x72.png
Normal file
BIN
docs/favicons/apple-touch-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
docs/favicons/apple-touch-icon-76x76.png
Normal file
BIN
docs/favicons/apple-touch-icon-76x76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
docs/favicons/apple-touch-icon-precomposed.png
Normal file
BIN
docs/favicons/apple-touch-icon-precomposed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
docs/favicons/apple-touch-icon.png
Normal file
BIN
docs/favicons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
12
docs/favicons/browserconfig.xml
Normal file
12
docs/favicons/browserconfig.xml
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<browserconfig>
|
||||||
|
<msapplication>
|
||||||
|
<tile>
|
||||||
|
<square70x70logo src="/favicons/mstile-70x70.png"/>
|
||||||
|
<square150x150logo src="/favicons/mstile-150x150.png"/>
|
||||||
|
<square310x310logo src="/favicons/mstile-310x310.png"/>
|
||||||
|
<wide310x150logo src="/favicons/mstile-310x150.png"/>
|
||||||
|
<TileColor>#1fc8db</TileColor>
|
||||||
|
</tile>
|
||||||
|
</msapplication>
|
||||||
|
</browserconfig>
|
||||||
BIN
docs/favicons/favicon-16x16.png
Normal file
BIN
docs/favicons/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
docs/favicons/favicon-32x32.png
Normal file
BIN
docs/favicons/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
docs/favicons/favicon-96x96.png
Normal file
BIN
docs/favicons/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
docs/favicons/favicon.ico
Normal file
BIN
docs/favicons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
41
docs/favicons/manifest.json
Normal file
41
docs/favicons/manifest.json
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"name": "Bulma",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "\/favicons\/android-chrome-36x36.png",
|
||||||
|
"sizes": "36x36",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": 0.75
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/favicons\/android-chrome-48x48.png",
|
||||||
|
"sizes": "48x48",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/favicons\/android-chrome-72x72.png",
|
||||||
|
"sizes": "72x72",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": 1.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/favicons\/android-chrome-96x96.png",
|
||||||
|
"sizes": "96x96",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/favicons\/android-chrome-144x144.png",
|
||||||
|
"sizes": "144x144",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/favicons\/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
docs/favicons/mstile-144x144.png
Normal file
BIN
docs/favicons/mstile-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
docs/favicons/mstile-150x150.png
Normal file
BIN
docs/favicons/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
docs/favicons/mstile-310x150.png
Normal file
BIN
docs/favicons/mstile-310x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
docs/favicons/mstile-310x310.png
Normal file
BIN
docs/favicons/mstile-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
docs/favicons/mstile-70x70.png
Normal file
BIN
docs/favicons/mstile-70x70.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
19
docs/favicons/safari-pinned-tab.svg
Normal file
19
docs/favicons/safari-pinned-tab.svg
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="320.000000pt" height="320.000000pt" viewBox="0 0 320.000000 320.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
<metadata>
|
||||||
|
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||||
|
</metadata>
|
||||||
|
<g transform="translate(0.000000,320.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000" stroke="none">
|
||||||
|
<path d="M1105 2807 c-214 -215 -394 -397 -398 -404 -5 -8 -17 -74 -27 -146
|
||||||
|
-11 -73 -22 -148 -24 -167 -3 -19 -26 -179 -51 -355 -57 -403 -54 -385 -60
|
||||||
|
-415 -2 -14 -6 -41 -9 -60 -11 -84 -27 -198 -32 -227 -5 -31 12 -49 496 -533
|
||||||
|
l500 -500 600 400 600 400 -395 395 c-217 217 -395 399 -395 405 0 6 133 143
|
||||||
|
295 305 l295 295 -500 500 c-275 275 -501 500 -503 499 -1 0 -177 -177 -392
|
||||||
|
-392z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 901 B |
BIN
docs/images/arc-de-triomphe.png
Normal file
BIN
docs/images/arc-de-triomphe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
BIN
docs/images/b.png
Normal file
BIN
docs/images/b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
docs/images/bulma-white.png
Normal file
BIN
docs/images/bulma-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/images/bulma.png
Normal file
BIN
docs/images/bulma.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
docs/images/metro-ui-css-grid-tiles.png
Normal file
BIN
docs/images/metro-ui-css-grid-tiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
129
docs/images/sparrow/app-store-badge.svg
Normal file
129
docs/images/sparrow/app-store-badge.svg
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="US_UK_Download_on_the" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px" y="0px" width="135px" height="40px" viewBox="0 0 135 40" enable-background="new 0 0 135 40" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path fill="#A6A6A6" d="M130.197,40H4.729C2.122,40,0,37.872,0,35.267V4.726C0,2.12,2.122,0,4.729,0h125.468
|
||||||
|
C132.803,0,135,2.12,135,4.726v30.541C135,37.872,132.803,40,130.197,40L130.197,40z"/>
|
||||||
|
<path d="M134.032,35.268c0,2.116-1.714,3.83-3.834,3.83H4.729c-2.119,0-3.839-1.714-3.839-3.83V4.725
|
||||||
|
c0-2.115,1.72-3.835,3.839-3.835h125.468c2.121,0,3.834,1.72,3.834,3.835L134.032,35.268L134.032,35.268z"/>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path fill="#FFFFFF" d="M30.128,19.784c-0.029-3.223,2.639-4.791,2.761-4.864c-1.511-2.203-3.853-2.504-4.676-2.528
|
||||||
|
c-1.967-0.207-3.875,1.177-4.877,1.177c-1.022,0-2.565-1.157-4.228-1.123c-2.14,0.033-4.142,1.272-5.24,3.196
|
||||||
|
c-2.266,3.923-0.576,9.688,1.595,12.859c1.086,1.553,2.355,3.287,4.016,3.226c1.625-0.067,2.232-1.036,4.193-1.036
|
||||||
|
c1.943,0,2.513,1.036,4.207,0.997c1.744-0.028,2.842-1.56,3.89-3.127c1.255-1.78,1.759-3.533,1.779-3.623
|
||||||
|
C33.507,24.924,30.161,23.647,30.128,19.784z"/>
|
||||||
|
<path fill="#FFFFFF" d="M26.928,10.306c0.874-1.093,1.472-2.58,1.306-4.089c-1.265,0.056-2.847,0.875-3.758,1.944
|
||||||
|
c-0.806,0.942-1.526,2.486-1.34,3.938C24.557,12.205,26.016,11.382,26.928,10.306z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path fill="#FFFFFF" d="M53.645,31.504h-2.271l-1.244-3.909h-4.324l-1.185,3.909h-2.211l4.284-13.308h2.646L53.645,31.504z
|
||||||
|
M49.755,25.955L48.63,22.48c-0.119-0.355-0.342-1.191-0.671-2.507h-0.04c-0.131,0.566-0.342,1.402-0.632,2.507l-1.105,3.475
|
||||||
|
H49.755z"/>
|
||||||
|
<path fill="#FFFFFF" d="M64.662,26.588c0,1.632-0.441,2.922-1.323,3.869c-0.79,0.843-1.771,1.264-2.942,1.264
|
||||||
|
c-1.264,0-2.172-0.454-2.725-1.362h-0.04v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
|
||||||
|
c0.711-1.146,1.79-1.718,3.238-1.718c1.132,0,2.077,0.447,2.833,1.342C64.284,23.949,64.662,25.127,64.662,26.588z M62.49,26.666
|
||||||
|
c0-0.934-0.21-1.704-0.632-2.31c-0.461-0.632-1.08-0.948-1.856-0.948c-0.526,0-1.004,0.176-1.431,0.523
|
||||||
|
c-0.428,0.35-0.708,0.807-0.839,1.373c-0.066,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.642,1.768
|
||||||
|
s0.984,0.721,1.668,0.721c0.803,0,1.428-0.31,1.875-0.928C62.266,28.496,62.49,27.68,62.49,26.666z"/>
|
||||||
|
<path fill="#FFFFFF" d="M75.699,26.588c0,1.632-0.441,2.922-1.324,3.869c-0.789,0.843-1.77,1.264-2.941,1.264
|
||||||
|
c-1.264,0-2.172-0.454-2.724-1.362H68.67v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
|
||||||
|
c0.71-1.146,1.789-1.718,3.238-1.718c1.131,0,2.076,0.447,2.834,1.342C75.32,23.949,75.699,25.127,75.699,26.588z M73.527,26.666
|
||||||
|
c0-0.934-0.211-1.704-0.633-2.31c-0.461-0.632-1.078-0.948-1.855-0.948c-0.527,0-1.004,0.176-1.432,0.523
|
||||||
|
c-0.428,0.35-0.707,0.807-0.838,1.373c-0.065,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.64,1.768
|
||||||
|
c0.428,0.48,0.984,0.721,1.67,0.721c0.803,0,1.428-0.31,1.875-0.928C73.303,28.496,73.527,27.68,73.527,26.666z"/>
|
||||||
|
<path fill="#FFFFFF" d="M88.039,27.772c0,1.132-0.393,2.053-1.182,2.764c-0.867,0.777-2.074,1.165-3.625,1.165
|
||||||
|
c-1.432,0-2.58-0.276-3.449-0.829l0.494-1.777c0.936,0.566,1.963,0.85,3.082,0.85c0.803,0,1.428-0.182,1.877-0.544
|
||||||
|
c0.447-0.362,0.67-0.848,0.67-1.454c0-0.54-0.184-0.995-0.553-1.364c-0.367-0.369-0.98-0.712-1.836-1.029
|
||||||
|
c-2.33-0.869-3.494-2.142-3.494-3.816c0-1.094,0.408-1.991,1.225-2.689c0.814-0.699,1.9-1.048,3.258-1.048
|
||||||
|
c1.211,0,2.217,0.211,3.02,0.632l-0.533,1.738c-0.75-0.408-1.598-0.612-2.547-0.612c-0.75,0-1.336,0.185-1.756,0.553
|
||||||
|
c-0.355,0.329-0.533,0.73-0.533,1.205c0,0.526,0.203,0.961,0.611,1.303c0.355,0.316,1,0.658,1.936,1.027
|
||||||
|
c1.145,0.461,1.986,1,2.527,1.618C87.77,26.081,88.039,26.852,88.039,27.772z"/>
|
||||||
|
<path fill="#FFFFFF" d="M95.088,23.508h-2.35v4.659c0,1.185,0.414,1.777,1.244,1.777c0.381,0,0.697-0.033,0.947-0.099l0.059,1.619
|
||||||
|
c-0.42,0.157-0.973,0.236-1.658,0.236c-0.842,0-1.5-0.257-1.975-0.77c-0.473-0.514-0.711-1.376-0.711-2.587v-4.837h-1.4v-1.6h1.4
|
||||||
|
v-1.757l2.094-0.632v2.389h2.35V23.508z"/>
|
||||||
|
<path fill="#FFFFFF" d="M105.691,26.627c0,1.475-0.422,2.686-1.264,3.633c-0.883,0.975-2.055,1.461-3.516,1.461
|
||||||
|
c-1.408,0-2.529-0.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487,0.43-2.705,1.293-3.652c0.861-0.948,2.023-1.422,3.484-1.422
|
||||||
|
c1.408,0,2.541,0.467,3.396,1.402C105.283,24.021,105.691,25.192,105.691,26.627z M103.479,26.696
|
||||||
|
c0-0.885-0.189-1.644-0.572-2.277c-0.447-0.766-1.086-1.148-1.914-1.148c-0.857,0-1.508,0.383-1.955,1.148
|
||||||
|
c-0.383,0.634-0.572,1.405-0.572,2.317c0,0.885,0.189,1.644,0.572,2.276c0.461,0.766,1.105,1.148,1.936,1.148
|
||||||
|
c0.814,0,1.453-0.39,1.914-1.168C103.281,28.347,103.479,27.58,103.479,26.696z"/>
|
||||||
|
<path fill="#FFFFFF" d="M112.621,23.783c-0.211-0.039-0.436-0.059-0.672-0.059c-0.75,0-1.33,0.283-1.738,0.85
|
||||||
|
c-0.355,0.5-0.533,1.132-0.533,1.895v5.035h-2.131l0.02-6.574c0-1.106-0.027-2.113-0.08-3.021h1.857l0.078,1.836h0.059
|
||||||
|
c0.225-0.631,0.58-1.139,1.066-1.52c0.475-0.343,0.988-0.514,1.541-0.514c0.197,0,0.375,0.014,0.533,0.039V23.783z"/>
|
||||||
|
<path fill="#FFFFFF" d="M122.156,26.252c0,0.382-0.025,0.704-0.078,0.967h-6.396c0.025,0.948,0.334,1.673,0.928,2.173
|
||||||
|
c0.539,0.447,1.236,0.671,2.092,0.671c0.947,0,1.811-0.151,2.588-0.454l0.334,1.48c-0.908,0.396-1.98,0.593-3.217,0.593
|
||||||
|
c-1.488,0-2.656-0.438-3.506-1.313c-0.848-0.875-1.273-2.05-1.273-3.524c0-1.447,0.395-2.652,1.186-3.613
|
||||||
|
c0.828-1.026,1.947-1.539,3.355-1.539c1.383,0,2.43,0.513,3.141,1.539C121.873,24.047,122.156,25.055,122.156,26.252z
|
||||||
|
M120.123,25.699c0.014-0.632-0.125-1.178-0.414-1.639c-0.369-0.593-0.936-0.889-1.699-0.889c-0.697,0-1.264,0.289-1.697,0.869
|
||||||
|
c-0.355,0.461-0.566,1.014-0.631,1.658H120.123z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path fill="#FFFFFF" d="M49.05,10.009c0,1.177-0.353,2.063-1.058,2.658c-0.653,0.549-1.581,0.824-2.783,0.824
|
||||||
|
c-0.596,0-1.106-0.026-1.533-0.078V6.982c0.557-0.09,1.157-0.136,1.805-0.136c1.145,0,2.008,0.249,2.59,0.747
|
||||||
|
C48.723,8.156,49.05,8.961,49.05,10.009z M47.945,10.038c0-0.763-0.202-1.348-0.606-1.756c-0.404-0.407-0.994-0.611-1.771-0.611
|
||||||
|
c-0.33,0-0.611,0.022-0.844,0.068v4.889c0.129,0.02,0.365,0.029,0.708,0.029c0.802,0,1.421-0.223,1.857-0.669
|
||||||
|
S47.945,10.892,47.945,10.038z"/>
|
||||||
|
<path fill="#FFFFFF" d="M54.909,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.009,0.718-1.727,0.718
|
||||||
|
c-0.692,0-1.243-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.712-0.698
|
||||||
|
c0.692,0,1.248,0.229,1.669,0.688C54.708,9.757,54.909,10.333,54.909,11.037z M53.822,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||||
|
c-0.22-0.376-0.533-0.564-0.94-0.564c-0.421,0-0.741,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||||
|
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.714-0.191,0.94-0.574
|
||||||
|
C53.725,11.882,53.822,11.506,53.822,11.071z"/>
|
||||||
|
<path fill="#FFFFFF" d="M62.765,8.719l-1.475,4.714h-0.96l-0.611-2.047c-0.155-0.511-0.281-1.019-0.379-1.523h-0.019
|
||||||
|
c-0.091,0.518-0.217,1.025-0.379,1.523l-0.649,2.047h-0.971l-1.387-4.714h1.077l0.533,2.241c0.129,0.53,0.235,1.035,0.32,1.513
|
||||||
|
h0.019c0.078-0.394,0.207-0.896,0.389-1.503l0.669-2.25h0.854l0.641,2.202c0.155,0.537,0.281,1.054,0.378,1.552h0.029
|
||||||
|
c0.071-0.485,0.178-1.002,0.32-1.552l0.572-2.202H62.765z"/>
|
||||||
|
<path fill="#FFFFFF" d="M68.198,13.433H67.15v-2.7c0-0.832-0.316-1.248-0.95-1.248c-0.311,0-0.562,0.114-0.757,0.343
|
||||||
|
c-0.193,0.229-0.291,0.499-0.291,0.808v2.796h-1.048v-3.366c0-0.414-0.013-0.863-0.038-1.349h0.921l0.049,0.737h0.029
|
||||||
|
c0.122-0.229,0.304-0.418,0.543-0.569c0.284-0.176,0.602-0.265,0.95-0.265c0.44,0,0.806,0.142,1.097,0.427
|
||||||
|
c0.362,0.349,0.543,0.87,0.543,1.562V13.433z"/>
|
||||||
|
<path fill="#FFFFFF" d="M71.088,13.433h-1.047V6.556h1.047V13.433z"/>
|
||||||
|
<path fill="#FFFFFF" d="M77.258,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.01,0.718-1.727,0.718
|
||||||
|
c-0.693,0-1.244-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.711-0.698
|
||||||
|
c0.693,0,1.248,0.229,1.67,0.688C77.057,9.757,77.258,10.333,77.258,11.037z M76.17,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||||
|
c-0.219-0.376-0.533-0.564-0.939-0.564c-0.422,0-0.742,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||||
|
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.713-0.191,0.939-0.574
|
||||||
|
C76.074,11.882,76.17,11.506,76.17,11.071z"/>
|
||||||
|
<path fill="#FFFFFF" d="M82.33,13.433h-0.941l-0.078-0.543h-0.029c-0.322,0.433-0.781,0.65-1.377,0.65
|
||||||
|
c-0.445,0-0.805-0.143-1.076-0.427c-0.246-0.258-0.369-0.579-0.369-0.96c0-0.576,0.24-1.015,0.723-1.319
|
||||||
|
c0.482-0.304,1.16-0.453,2.033-0.446V10.3c0-0.621-0.326-0.931-0.979-0.931c-0.465,0-0.875,0.117-1.229,0.349l-0.213-0.688
|
||||||
|
c0.438-0.271,0.979-0.407,1.617-0.407c1.232,0,1.85,0.65,1.85,1.95v1.736C82.262,12.78,82.285,13.155,82.33,13.433z
|
||||||
|
M81.242,11.813v-0.727c-1.156-0.02-1.734,0.297-1.734,0.95c0,0.246,0.066,0.43,0.201,0.553c0.135,0.123,0.307,0.184,0.512,0.184
|
||||||
|
c0.23,0,0.445-0.073,0.641-0.218c0.197-0.146,0.318-0.331,0.363-0.558C81.236,11.946,81.242,11.884,81.242,11.813z"/>
|
||||||
|
<path fill="#FFFFFF" d="M88.285,13.433h-0.93l-0.049-0.757h-0.029c-0.297,0.576-0.803,0.864-1.514,0.864
|
||||||
|
c-0.568,0-1.041-0.223-1.416-0.669s-0.562-1.025-0.562-1.736c0-0.763,0.203-1.381,0.611-1.853c0.395-0.44,0.879-0.66,1.455-0.66
|
||||||
|
c0.633,0,1.076,0.213,1.328,0.64h0.02V6.556h1.049v5.607C88.248,12.622,88.26,13.045,88.285,13.433z M87.199,11.445v-0.786
|
||||||
|
c0-0.136-0.01-0.246-0.029-0.33c-0.059-0.252-0.186-0.464-0.379-0.635c-0.195-0.171-0.43-0.257-0.701-0.257
|
||||||
|
c-0.391,0-0.697,0.155-0.922,0.466c-0.223,0.311-0.336,0.708-0.336,1.193c0,0.466,0.107,0.844,0.322,1.135
|
||||||
|
c0.227,0.31,0.533,0.465,0.916,0.465c0.344,0,0.619-0.129,0.828-0.388C87.1,12.069,87.199,11.781,87.199,11.445z"/>
|
||||||
|
<path fill="#FFFFFF" d="M97.248,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.008,0.718-1.727,0.718
|
||||||
|
c-0.691,0-1.242-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.713-0.698
|
||||||
|
c0.691,0,1.248,0.229,1.668,0.688C97.047,9.757,97.248,10.333,97.248,11.037z M96.162,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||||
|
c-0.221-0.376-0.533-0.564-0.941-0.564c-0.42,0-0.74,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||||
|
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.715-0.191,0.941-0.574
|
||||||
|
C96.064,11.882,96.162,11.506,96.162,11.071z"/>
|
||||||
|
<path fill="#FFFFFF" d="M102.883,13.433h-1.047v-2.7c0-0.832-0.316-1.248-0.951-1.248c-0.311,0-0.562,0.114-0.756,0.343
|
||||||
|
s-0.291,0.499-0.291,0.808v2.796h-1.049v-3.366c0-0.414-0.012-0.863-0.037-1.349h0.92l0.049,0.737h0.029
|
||||||
|
c0.123-0.229,0.305-0.418,0.543-0.569c0.285-0.176,0.602-0.265,0.951-0.265c0.439,0,0.805,0.142,1.096,0.427
|
||||||
|
c0.363,0.349,0.543,0.87,0.543,1.562V13.433z"/>
|
||||||
|
<path fill="#FFFFFF" d="M109.936,9.504h-1.154v2.29c0,0.582,0.205,0.873,0.611,0.873c0.188,0,0.344-0.016,0.467-0.049
|
||||||
|
l0.027,0.795c-0.207,0.078-0.479,0.117-0.814,0.117c-0.414,0-0.736-0.126-0.969-0.378c-0.234-0.252-0.35-0.676-0.35-1.271V9.504
|
||||||
|
h-0.689V8.719h0.689V7.855l1.027-0.31v1.173h1.154V9.504z"/>
|
||||||
|
<path fill="#FFFFFF" d="M115.484,13.433h-1.049v-2.68c0-0.845-0.316-1.268-0.949-1.268c-0.486,0-0.818,0.245-1,0.735
|
||||||
|
c-0.031,0.103-0.049,0.229-0.049,0.377v2.835h-1.047V6.556h1.047v2.841h0.02c0.33-0.517,0.803-0.775,1.416-0.775
|
||||||
|
c0.434,0,0.793,0.142,1.078,0.427c0.355,0.355,0.533,0.883,0.533,1.581V13.433z"/>
|
||||||
|
<path fill="#FFFFFF" d="M121.207,10.853c0,0.188-0.014,0.346-0.039,0.475h-3.143c0.014,0.466,0.164,0.821,0.455,1.067
|
||||||
|
c0.266,0.22,0.609,0.33,1.029,0.33c0.465,0,0.889-0.074,1.271-0.223l0.164,0.728c-0.447,0.194-0.973,0.291-1.582,0.291
|
||||||
|
c-0.73,0-1.305-0.215-1.721-0.645c-0.418-0.43-0.625-1.007-0.625-1.731c0-0.711,0.193-1.303,0.582-1.775
|
||||||
|
c0.406-0.504,0.955-0.756,1.648-0.756c0.678,0,1.193,0.252,1.541,0.756C121.068,9.77,121.207,10.265,121.207,10.853z
|
||||||
|
M120.207,10.582c0.008-0.311-0.061-0.579-0.203-0.805c-0.182-0.291-0.459-0.437-0.834-0.437c-0.342,0-0.621,0.142-0.834,0.427
|
||||||
|
c-0.174,0.227-0.277,0.498-0.311,0.815H120.207z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 12 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user