Archive version 0.5.0
This commit is contained in:
Jeremy Thomas
parent
b5c3d17e19
commit
fcac45ae4d
216 changed files with 132552 additions and 5 deletions
|
|
@ -2,6 +2,9 @@
|
|||
title: Versions
|
||||
layout: default
|
||||
route: versions
|
||||
versions:
|
||||
- 0.4.4
|
||||
- 0.5.0
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -20,11 +23,13 @@ route: versions
|
|||
Access previous versions of Bulma
|
||||
</p>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<a class="button" href="{{site.url}}/versions/0.4.4">
|
||||
0.4.4
|
||||
</a>
|
||||
</div>
|
||||
{% for version in page.versions %}
|
||||
<div class="control">
|
||||
<a class="button" href="{{site.url}}/versions/{{ version }}">
|
||||
{{ version }}
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,655 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-post">
|
||||
<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="First blog post on the newly launched blog! It even has its own RSS feed for those who still use that. This blog will be more frequently updated than the new...">
|
||||
|
||||
<title>Blog launched, new responsive columns, new helpers | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/2016/02/09/blog-launched-new-responsive-columns-new-helpers/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-post">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuBlogHero">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuBlogHero" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
<a href="http://bulma.io/versions/0.5.0/blog">Blog</a>
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Stay updated about new features, bug fixes, and releases
|
||||
</p>
|
||||
<a class="button is-rss" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-offset-2 is-8">
|
||||
<div class="article-image is-single is-danger">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-rocket"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
Launch!
|
||||
</strong>
|
||||
</div>
|
||||
<p class="subtitle is-6">
|
||||
<a class="article-back href="http://bulma.io/versions/0.5.0/blog">Back</a>
|
||||
</p>
|
||||
<p class="subtitle is-4">
|
||||
09 Feb 2016
|
||||
</p>
|
||||
<h1 class="title is-2">
|
||||
Blog launched, new responsive columns, new helpers
|
||||
</h1>
|
||||
</article>
|
||||
<hr>
|
||||
<div class="content is-medium">
|
||||
<p>First blog post on the newly launched blog! It even has its own <a href="/atom.xml">RSS feed</a> for those who still use that. This blog will be more frequently updated than the <a href="#newsletter">newsletter</a>, so you can subscribe to either or both, as they will be used for different purposes.</p>
|
||||
|
||||
<h3 id="columns-on-mobile-too">Columns on mobile too</h3>
|
||||
|
||||
<p>By default, columns are only activated on <strong>tablet</strong> and <strong>desktop</strong>. If you want to use columns on mobile <em>too</em>, add the <code class="highlighter-rouge">is-mobile</code> modifier on the <code class="highlighter-rouge">columns</code> container.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"columns is-mobile"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></div></span>
|
||||
<span class="c"><!-- etc. --></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="responsive-columns">Responsive columns</h3>
|
||||
|
||||
<p>You can now apply different <strong>column size</strong> for each <strong>breakpoint</strong>.</p>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<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>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"columns is-mobile"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-half-mobile is-one-third-tablet is-one-quarter-desktop"</span><span class="nt">></div></span>
|
||||
<span class="c"><!-- Other columns --></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<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>
|
||||
|
||||
<h3 id="multiline-columns">Multiline columns</h3>
|
||||
|
||||
<p>By default, if you want to start a new <strong>row</strong>, you just need to close a <code class="highlighter-rouge">columns</code> container and open a new one.</p>
|
||||
|
||||
<p>But you can also add the <code class="highlighter-rouge">is-multiline</code> <strong>modifier</strong> on the <code class="highlighter-rouge">columns</code> container, and use <strong>column size</strong> modifiers (like <code class="highlighter-rouge">is-half</code> or <code class="highlighter-rouge">is-3</code>) to define size on multiple rows within the <em>same</em> container.</p>
|
||||
|
||||
<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>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"columns is-multiline is-mobile"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-one-quarter"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-one-quarter"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-one-quarter"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-one-quarter"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-half"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-one-quarter"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-one-quarter"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column is-one-quarter"</span><span class="nt">></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="helpers-section">Helpers section</h3>
|
||||
|
||||
<p>While modifiers are specific to each Bulma element, <strong>helpers</strong> are general utility classes that can be applied on almost <em>any</em> element. Check out the new <a href="/documentation/modifiers/helpers/">helpers documentation</a>!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,555 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-post">
|
||||
<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="Have you ever wanted to build a Metro-UI-like grid in CSS?Thanks to Flexbox and the new Bulma tiles, you now can! And it only requires 1 HTML element: the ti...">
|
||||
|
||||
<title>Metro UI CSS grid with Bulma tiles | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-post">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuBlogHero">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuBlogHero" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
<a href="http://bulma.io/versions/0.5.0/blog">Blog</a>
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Stay updated about new features, bug fixes, and releases
|
||||
</p>
|
||||
<a class="button is-rss" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-offset-2 is-8">
|
||||
<div class="article-image is-single is-info">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
Metro UI
|
||||
</strong>
|
||||
</div>
|
||||
<p class="subtitle is-6">
|
||||
<a class="article-back href="http://bulma.io/versions/0.5.0/blog">Back</a>
|
||||
</p>
|
||||
<p class="subtitle is-4">
|
||||
11 Apr 2016
|
||||
</p>
|
||||
<h1 class="title is-2">
|
||||
Metro UI CSS grid with Bulma tiles
|
||||
</h1>
|
||||
</article>
|
||||
<hr>
|
||||
<div class="content is-medium">
|
||||
<p>Have you ever wanted to build a <strong>Metro-UI-like grid in CSS</strong>?
|
||||
Thanks to Flexbox and the new <a href="http://bulma.io/documentation/grid/tiles/">Bulma tiles</a>, you now can! And it only requires 1 HTML element: the <code class="highlighter-rouge">tile</code> element.</p>
|
||||
|
||||
<p><a href="http://bulma.io/documentation/grid/tiles/"><img src="/images/blog/metro-ui-css-grid-tiles.png" alt="Metro UI grid tiles in CSS" /></a></p>
|
||||
|
||||
<p>Check out the <a href="http://bulma.io/documentation/grid/tiles/">documentation</a>!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
667
docs/versions/0.5.0/2017/03/10/new-field-element/index.html
Normal file
667
docs/versions/0.5.0/2017/03/10/new-field-element/index.html
Normal file
|
|
@ -0,0 +1,667 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-post">
|
||||
<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="TL;DR: there’s a new .field container, and .control has been re-purposed.">
|
||||
|
||||
<title>New field element (for better controls) | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/2017/03/10/new-field-element/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-post">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuBlogHero">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuBlogHero" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
<a href="http://bulma.io/versions/0.5.0/blog">Blog</a>
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Stay updated about new features, bug fixes, and releases
|
||||
</p>
|
||||
<a class="button is-rss" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-offset-2 is-8">
|
||||
<div class="article-image is-single is-success">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-square-o"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
Field element
|
||||
</strong>
|
||||
</div>
|
||||
<p class="subtitle is-6">
|
||||
<a class="article-back href="http://bulma.io/versions/0.5.0/blog">Back</a>
|
||||
</p>
|
||||
<p class="subtitle is-4">
|
||||
10 Mar 2017
|
||||
</p>
|
||||
<h1 class="title is-2">
|
||||
New field element (for better controls)
|
||||
</h1>
|
||||
</article>
|
||||
<hr>
|
||||
<div class="content is-medium">
|
||||
<p><strong>TL;DR: there’s a new <code class="highlighter-rouge">.field</code> container, and <code class="highlighter-rouge">.control</code> has been re-purposed.</strong></p>
|
||||
|
||||
<p>Since the beginning, the <code class="highlighter-rouge">.control</code> has been a very <strong>versatile</strong> element that allowed:</p>
|
||||
|
||||
<ul>
|
||||
<li>to <strong>space</strong> controls vertically</li>
|
||||
<li>to include an <strong>icon</strong> alongside inputs, buttons, textareas…</li>
|
||||
<li>to append a <strong>loading spinner</strong></li>
|
||||
<li>to create <strong>horizontal forms</strong></li>
|
||||
<li>to create <strong>control addons</strong></li>
|
||||
<li>to create <strong>control groups</strong></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="the-problem">The problem</h2>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.control</code> element acted as both a <em>block</em> container (for spacing, for other controls in a horizontal form), but also an <em>inline</em> container (for adding an icon, a loader, an addon, and grouping).
|
||||
It led to issues where you couldn’t:</p>
|
||||
|
||||
<ul>
|
||||
<li>add a help text horizontally</li>
|
||||
<li>add multiple icons or loaders in a group of controls</li>
|
||||
<li>add a different icon on addons</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="the-solution">The solution</h2>
|
||||
|
||||
<p>The new <code class="highlighter-rouge">.field</code> element becomes the <strong>block</strong> container for <code class="highlighter-rouge">.control</code> elements. As a result, it inherits the <code class="highlighter-rouge">.has-addons</code>, <code class="highlighter-rouge">.is-grouped</code>, and <code class="highlighter-rouge">.is-horizontal</code> modifiers.</p>
|
||||
|
||||
<p>Furthermore <code class="highlighter-rouge">.control</code> element can only contain a <code class="highlighter-rouge">.button</code>, <code class="highlighter-rouge">.input</code>, <code class="highlighter-rouge">.select</code>, or <code class="highlighter-rouge">.textarea</code>, and eventually a <code class="highlighter-rouge">.icon</code>. It can <strong>no longer</strong> contain a <code class="highlighter-rouge">.help</code> element or other <code class="highlighter-rouge">.control</code>.</p>
|
||||
|
||||
<p>But it allows more elaborate designs.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="c1">// Before
|
||||
</span><span class="nc">.control</span>
|
||||
<span class="nc">.has-addons</span>
|
||||
<span class="nc">.has-icon</span>
|
||||
<span class="nc">.is-grouped</span>
|
||||
<span class="nc">.is-horizontal</span>
|
||||
<span class="nc">.is-loading</span>
|
||||
|
||||
<span class="c1">// After
|
||||
</span><span class="nc">.control</span>
|
||||
<span class="nc">.has-icon</span>
|
||||
<span class="nc">.is-loading</span>
|
||||
<span class="nc">.field</span>
|
||||
<span class="nc">.has-addons</span>
|
||||
<span class="nc">.is-grouped</span>
|
||||
<span class="nc">.is-horizontal</span>
|
||||
<span class="nc">.field-label</span>
|
||||
<span class="nc">.field-body</span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Before --></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"label"</span><span class="nt">></span>Username<span class="nt"></label></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"control has-icon has-icon-right"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"input is-success"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Text input"</span> <span class="na">value=</span><span class="s">"bulma"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon is-small"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-check"</span><span class="nt">></i></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"help is-success"</span><span class="nt">></span>This username is available<span class="nt"></span></span>
|
||||
<span class="nt"></p></span>
|
||||
|
||||
<span class="c"><!-- After --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"label"</span><span class="nt">></span>Username<span class="nt"></label></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"control has-icon has-icon-right"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"input is-success"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Text input"</span> <span class="na">value=</span><span class="s">"bulma"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon is-small"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-check"</span><span class="nt">></i></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"help is-success"</span><span class="nt">></span>This username is available<span class="nt"></p></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Addons with multiple icons or states.</p>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<p class="control is-expanded has-icon">
|
||||
<input class="input is-success" type="text" placeholder="Username" value="alexsmith" />
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control is-expanded has-icon">
|
||||
<input class="input is-warning" type="email" placeholder="Email" value="alex@smith.com" />
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-warning"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control is-expanded is-loading">
|
||||
<input class="input" type="email" placeholder="Name" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>Horizontal form with help text</p>
|
||||
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label">
|
||||
<label class="label">From</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field is-grouped">
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="Name" />
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control is-expanded has-icon has-icon-right">
|
||||
<input class="input is-success" type="email" placeholder="Email" value="alex@smith.com" />
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-check"></i>
|
||||
</span>
|
||||
</p>
|
||||
<p class="help is-success">This email is correct</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,558 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-post">
|
||||
<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="It is now possible to access previous versions of Bulma. Just head towards: http://bulma.io/versions/">
|
||||
|
||||
<title>Access previous Bulma versions | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/2017/07/24/access-previous-bulma-versions/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-post">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuBlogHero">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuBlogHero" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
<a href="http://bulma.io/versions/0.5.0/blog">Blog</a>
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Stay updated about new features, bug fixes, and releases
|
||||
</p>
|
||||
<a class="button is-rss" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-offset-2 is-8">
|
||||
<div class="article-image is-single is-primary">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-undo"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
Versions
|
||||
</strong>
|
||||
</div>
|
||||
<p class="subtitle is-6">
|
||||
<a class="article-back href="http://bulma.io/versions/0.5.0/blog">Back</a>
|
||||
</p>
|
||||
<p class="subtitle is-4">
|
||||
24 Jul 2017
|
||||
</p>
|
||||
<h1 class="title is-2">
|
||||
Access previous Bulma versions
|
||||
</h1>
|
||||
</article>
|
||||
<hr>
|
||||
<div class="content is-medium">
|
||||
<p>It is now possible to <strong>access previous versions</strong> of Bulma. Just head towards: <a href="http://bulma.io/versions/">http://bulma.io/versions/</a></p>
|
||||
|
||||
<figure>
|
||||
<a href="/versions/">
|
||||
<img src="/images/blog/bulma-previous-versions.png" alt="Previous versions of Bulma" width="520" height="240" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
<p>While only version <a href="http://bulma.io/versions/0.4.4">0.4.4</a> is accessible now, each <strong>new release</strong> will remain available forever.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
21
docs/versions/0.5.0/LICENSE
Normal file
21
docs/versions/0.5.0/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2017 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.
|
||||
19
docs/versions/0.5.0/README.md
Normal file
19
docs/versions/0.5.0/README.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
## Building the documentation
|
||||
|
||||
The documentation HTML is produced with the Ruby-based `jekyll` tool.
|
||||
|
||||
1. Make sure Ruby 2.x is installed.
|
||||
2. `gem install jekyll`
|
||||
|
||||
## Viewing the documentation locally
|
||||
|
||||
Then to view the documentation in your local checkout:
|
||||
|
||||
1. Before you begin, cd into `docs/` directory, and `cp _config.yml _config.local.yml`. Then edit `_config.local.yml` and change the `url:` value to `http://localhost:4000`. This local config file will be ignored by git.
|
||||
1. In a separate shell session, `cd` to the `docs/` directory, and do:
|
||||
```
|
||||
jekyll serve --incremental --config _config.local.yml
|
||||
```
|
||||
This will start an HTTP server at `http://localhost:4000/` that serves the docs built in the `_site` directory; and anytime the docs are rebuilt by you, it will serve the docs site on the fly.
|
||||
2. In your main shell session where you develop, if you change anything in `docs/` the jekyll server will rebuild those on the fly. But if you change anything about the Bulma SASS or CSS, you need to do `npm run start-docs` to build the docs' CSS before you will see it in the browser. The process running `jekyll serve` will pick up the new CSS automatically.
|
||||
|
||||
673
docs/versions/0.5.0/blog/index.html
Normal file
673
docs/versions/0.5.0/blog/index.html
Normal file
|
|
@ -0,0 +1,673 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-blog">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-default">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuBlogHero">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuBlogHero" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
<a href="http://bulma.io/versions/0.5.0/blog">Blog</a>
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Stay updated about new features, bug fixes, and releases
|
||||
</p>
|
||||
<a class="button is-rss" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<article class="box article">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<a class="article-image is-primary" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-undo"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
Versions
|
||||
</strong>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="subtitle">
|
||||
24 Jul 2017
|
||||
</p>
|
||||
<h2 class="title">
|
||||
<a href="/2017/07/24/access-previous-bulma-versions/">
|
||||
Access previous Bulma versions
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="content is-medium">
|
||||
<p>It is now possible to <strong>access previous versions</strong> of Bulma. Just head towards: <a href="http://bulma.io/versions/">http://bulma.io/versions/</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="box article">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<a class="article-image is-success" href="/2017/03/10/new-field-element/">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-square-o"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
Field element
|
||||
</strong>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="subtitle">
|
||||
10 Mar 2017
|
||||
</p>
|
||||
<h2 class="title">
|
||||
<a href="/2017/03/10/new-field-element/">
|
||||
New field element (for better controls)
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="content is-medium">
|
||||
<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="box article">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<a class="article-image is-info" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-th-large"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
Metro UI
|
||||
</strong>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="subtitle">
|
||||
11 Apr 2016
|
||||
</p>
|
||||
<h2 class="title">
|
||||
<a href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
Metro UI CSS grid with Bulma tiles
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="content is-medium">
|
||||
<p>Have you ever wanted to build a <strong>Metro-UI-like grid in CSS</strong>?<br />Thanks to Flexbox and the new <a href="http://bulma.io/documentation/grid/tiles/">Bulma tiles</a>, you now can! And it only requires 1 HTML element: the <code class="highlighter-rouge">tile</code> element.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="box article">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<a class="article-image is-danger" href="/2016/02/09/blog-launched-new-responsive-columns-new-helpers/">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-rocket"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
Launch!
|
||||
</strong>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="subtitle">
|
||||
09 Feb 2016
|
||||
</p>
|
||||
<h2 class="title">
|
||||
<a href="/2016/02/09/blog-launched-new-responsive-columns-new-helpers/">
|
||||
Blog launched, new responsive columns, new helpers
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="content is-medium">
|
||||
<p>First blog post on the newly launched blog! It even has its own <a href="/atom.xml">RSS feed</a> for those who still use that. This blog will be more frequently updated than the <a href="#newsletter">newsletter</a>, so you can subscribe to either or both, as they will be used for different purposes.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
10145
docs/versions/0.5.0/css/bulma-docs.css
Normal file
10145
docs/versions/0.5.0/css/bulma-docs.css
Normal file
File diff suppressed because one or more lines are too long
1039
docs/versions/0.5.0/documentation/components/breadcrumb/index.html
Normal file
1039
docs/versions/0.5.0/documentation/components/breadcrumb/index.html
Normal file
File diff suppressed because it is too large
Load diff
972
docs/versions/0.5.0/documentation/components/card/index.html
Normal file
972
docs/versions/0.5.0/documentation/components/card/index.html
Normal file
|
|
@ -0,0 +1,972 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/components/card/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-components">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container is-fullhd">
|
||||
<div class="navbar-brand">
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/components/card/">
|
||||
Card
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/dropdown/">
|
||||
Dropdown
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/level/">
|
||||
Level
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/menu/">
|
||||
Menu
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/message/">
|
||||
Message
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/panel/">
|
||||
Panel
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/tabs/">
|
||||
Tabs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Card</h1>
|
||||
<h2 class="subtitle">An all-around flexible and composable component</h2>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>card</code>: the main container
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-header</code>: a horizontal bar with a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-header-title</code>: a left-aligned bold text
|
||||
</li>
|
||||
<li>
|
||||
<code>card-header-icon</code>: a placeholder for an icon
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<code>card-image</code>: a fullwidth container for a reponsive image
|
||||
</li>
|
||||
<li>
|
||||
<code>card-content</code>: a multi-purpose container for <em>any</em> other element
|
||||
</li>
|
||||
<li>
|
||||
<code>card-footer</code>: a horizontal list of controls
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-footer-item</code>: a repeatable list item
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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://bulma.io/versions/0.5.0/images/placeholders/1280x960.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/placeholders/96x96.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4">John Smith</p>
|
||||
<p class="subtitle is-6">@johnsmith</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
|
||||
<a>#css</a> <a>#responsive</a>
|
||||
<br>
|
||||
<small>11:09 PM - 1 Jan 2016</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-image"</span><span class="nt">></span>
|
||||
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">"image is-4by3"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/placeholders/1280x960.png"</span> <span class="na">alt=</span><span class="s">"Image"</span><span class="nt">></span>
|
||||
<span class="nt"></figure></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-left"</span><span class="nt">></span>
|
||||
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">"image is-48x48"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/placeholders/96x96.png"</span> <span class="na">alt=</span><span class="s">"Image"</span><span class="nt">></span>
|
||||
<span class="nt"></figure></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-content"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title is-4"</span><span class="nt">></span>John Smith<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle is-6"</span><span class="nt">></span>@johnsmith<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Phasellus nec iaculis mauris. <span class="nt"><a></span>@bulmaio<span class="nt"></a></span>.
|
||||
<span class="nt"><a></span>#css<span class="nt"></a></span> <span class="nt"><a></span>#responsive<span class="nt"></a></span>
|
||||
<span class="nt"><br></span>
|
||||
<span class="nt"><small></span>11:09 PM - 1 Jan 2016<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<a class="card-header-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-angle-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
|
||||
<a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
|
||||
<br>
|
||||
<small>11:09 PM - 1 Jan 2016</small>
|
||||
</div>
|
||||
</div>
|
||||
<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-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><header</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-header-title"</span><span class="nt">></span>
|
||||
Component
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"card-header-icon"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-angle-down"</span><span class="nt">></i></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></header></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
|
||||
<span class="nt"><a></span>@bulmaio<span class="nt"></a></span>. <span class="nt"><a></span>#css<span class="nt"></a></span> <span class="nt"><a></span>#responsive<span class="nt"></a></span>
|
||||
<span class="nt"><br></span>
|
||||
<span class="nt"><small></span>11:09 PM - 1 Jan 2016<span class="nt"></small></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"card-footer-item"</span><span class="nt">></span>Save<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"card-footer-item"</span><span class="nt">></span>Edit<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"card-footer-item"</span><span class="nt">></span>Delete<span class="nt"></a></span>
|
||||
<span class="nt"></footer></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Jeff Atwood
|
||||
</p>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<span>
|
||||
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
|
||||
</span>
|
||||
</p>
|
||||
<p class="card-footer-item">
|
||||
<span>
|
||||
Share on <a href="#">Facebook</a>
|
||||
</span>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-content"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>
|
||||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">></span>
|
||||
Jeff Atwood
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-footer-item"</span><span class="nt">></span>
|
||||
<span class="nt"><span></span>
|
||||
View on <span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://twitter.com/codinghorror/status/506010907021828096"</span><span class="nt">></span>Twitter<span class="nt"></a></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-footer-item"</span><span class="nt">></span>
|
||||
<span class="nt"><span></span>
|
||||
Share on <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Facebook<span class="nt"></a></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></footer></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title anchor-title">
|
||||
Variables
|
||||
<a class="anchor-link" href="#variables">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use these variables to <strong>customize</strong> this component. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$card-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$text</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$card-background-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$white</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$card-shadow</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$card-header-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$text-strong</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$card-header-shadow</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0 1px 2px rgba($black, 0.1)</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$card-header-weight</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$weight-bold</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$card-footer-border-top</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1px solid $border</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/components/card.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1225
docs/versions/0.5.0/documentation/components/dropdown/index.html
Normal file
1225
docs/versions/0.5.0/documentation/components/dropdown/index.html
Normal file
File diff suppressed because it is too large
Load diff
948
docs/versions/0.5.0/documentation/components/level/index.html
Normal file
948
docs/versions/0.5.0/documentation/components/level/index.html
Normal file
|
|
@ -0,0 +1,948 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/components/level/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-components">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container is-fullhd">
|
||||
<div class="navbar-brand">
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/card/">
|
||||
Card
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/dropdown/">
|
||||
Dropdown
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/components/level/">
|
||||
Level
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/menu/">
|
||||
Menu
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/message/">
|
||||
Message
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/panel/">
|
||||
Panel
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/tabs/">
|
||||
Tabs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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. This element is <em>required</em>, even if it is empty</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">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
|
||||
<!-- Main container -->
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="level-right">
|
||||
<p class="level-item"><strong>All</strong></p>
|
||||
<p class="level-item"><a>Published</a></p>
|
||||
<p class="level-item"><a>Drafts</a></p>
|
||||
<p class="level-item"><a>Deleted</a></p>
|
||||
<p class="level-item"><a class="button is-success">New</a></p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Main container --></span>
|
||||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"level"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Left side --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-left"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle is-5"</span><span class="nt">></span>
|
||||
<span class="nt"><strong></span>123<span class="nt"></strong></span> posts
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field has-addons"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"input"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Find a post"</span><span class="nt">></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Search
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- Right side --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-right"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">><strong></span>All<span class="nt"></strong></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">><a></span>Published<span class="nt"></a></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">><a></span>Drafts<span class="nt"></a></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">><a></span>Deleted<span class="nt"></a></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">><a</span> <span class="na">class=</span><span class="s">"button is-success"</span><span class="nt">></span>New<span class="nt"></a></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<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">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"level"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">></span>Tweets<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>3,456<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">></span>Following<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>123<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">></span>Followers<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>456K<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">></span>Likes<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>789<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
<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="http://bulma.io/versions/0.5.0/images/bulma-type.png" alt="" style="height: 30px;">
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Contact</a>
|
||||
</p>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"level"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"link is-info"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"link is-info"</span><span class="nt">></span>Menu<span class="nt"></a></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/bulma-type.png"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">style=</span><span class="s">"height: 30px;"</span><span class="nt">></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"link is-info"</span><span class="nt">></span>Reservations<span class="nt"></a></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"link is-info"</span><span class="nt">></span>Contact<span class="nt"></a></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<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">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"level is-mobile"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">></span>Tweets<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>3,456<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">></span>Following<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>123<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">></span>Followers<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>456K<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-item has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"heading"</span><span class="nt">></span>Likes<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>789<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/components/level.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1002
docs/versions/0.5.0/documentation/components/media-object/index.html
Normal file
1002
docs/versions/0.5.0/documentation/components/media-object/index.html
Normal file
File diff suppressed because it is too large
Load diff
835
docs/versions/0.5.0/documentation/components/menu/index.html
Normal file
835
docs/versions/0.5.0/documentation/components/menu/index.html
Normal file
|
|
@ -0,0 +1,835 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/components/menu/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-components">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container is-fullhd">
|
||||
<div class="navbar-brand">
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/card/">
|
||||
Card
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/dropdown/">
|
||||
Dropdown
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/level/">
|
||||
Level
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/components/menu/">
|
||||
Menu
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/message/">
|
||||
Message
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/panel/">
|
||||
Panel
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/tabs/">
|
||||
Tabs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Dashboard</a></li>
|
||||
<li><a>Customers</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Administration
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Team Settings</a></li>
|
||||
<li>
|
||||
<a class="is-active">Manage Your Team</a>
|
||||
<ul>
|
||||
<li><a>Members</a></li>
|
||||
<li><a>Plugins</a></li>
|
||||
<li><a>Add a member</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a>Invitations</a></li>
|
||||
<li><a>Cloud Storage Environment Settings</a></li>
|
||||
<li><a>Authentication</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Transactions
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Payments</a></li>
|
||||
<li><a>Transfers</a></li>
|
||||
<li><a>Balance</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><aside</span> <span class="na">class=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"menu-label"</span><span class="nt">></span>
|
||||
General
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"menu-list"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a></span>Dashboard<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a></span>Customers<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"menu-label"</span><span class="nt">></span>
|
||||
Administration
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"menu-list"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a></span>Team Settings<span class="nt"></a></li></span>
|
||||
<span class="nt"><li></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"is-active"</span><span class="nt">></span>Manage Your Team<span class="nt"></a></span>
|
||||
<span class="nt"><ul></span>
|
||||
<span class="nt"><li><a></span>Members<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a></span>Plugins<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a></span>Add a member<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li><a></span>Invitations<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a></span>Cloud Storage Environment Settings<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a></span>Authentication<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"menu-label"</span><span class="nt">></span>
|
||||
Transactions
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"menu-list"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a></span>Payments<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a></span>Transfers<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a></span>Balance<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></aside></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title anchor-title">
|
||||
Variables
|
||||
<a class="anchor-link" href="#variables">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use these variables to <strong>customize</strong> this component. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$menu-item-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$text</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$menu-item-radius</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$radius-small</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$menu-item-hover-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$text-strong</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$menu-item-hover-background-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$background</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$menu-item-active-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$link-invert</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$menu-item-active-background-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$link</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$menu-list-border-left</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1px solid $border</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$menu-label-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$text-light</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/components/menu.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1165
docs/versions/0.5.0/documentation/components/message/index.html
Normal file
1165
docs/versions/0.5.0/documentation/components/message/index.html
Normal file
File diff suppressed because it is too large
Load diff
1072
docs/versions/0.5.0/documentation/components/modal/index.html
Normal file
1072
docs/versions/0.5.0/documentation/components/modal/index.html
Normal file
File diff suppressed because it is too large
Load diff
873
docs/versions/0.5.0/documentation/components/nav/index.html
Normal file
873
docs/versions/0.5.0/documentation/components/nav/index.html
Normal file
|
|
@ -0,0 +1,873 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/components/nav/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-components">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container is-fullhd">
|
||||
<div class="navbar-brand">
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/card/">
|
||||
Card
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/dropdown/">
|
||||
Dropdown
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/level/">
|
||||
Level
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/menu/">
|
||||
Menu
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/message/">
|
||||
Message
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/panel/">
|
||||
Panel
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/components/tabs/">
|
||||
Tabs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
<p>This component has been <strong>deprecated</strong> and will be deleted soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility, the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using <a href="http://bulma.io/versions/0.5.0/documentation/components/navbar/">the new navbar</a> instead.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
Each nav item needs to be wrapped in a <code>nav-item</code> element.
|
||||
</p>
|
||||
<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>
|
||||
<li>toggle <code>is-active</code> on <code>nav-toggle</code> and <code>nav-menu</code> when <code>nav-toggle</code> was clicked</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="example is-paddingless">
|
||||
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-center">
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
|
||||
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<!-- This "nav-menu" is hidden on mobile -->
|
||||
<!-- Add the modifier "is-active" to display it on mobile -->
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Blog
|
||||
</a>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="button" >
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-left"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/bulma-logo.png"</span> <span class="na">alt=</span><span class="s">"Bulma logo"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-center"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-github"</span><span class="nt">></i></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">></i></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- This "nav-toggle" hamburger menu is only visible on mobile --></span>
|
||||
<span class="c"><!-- You need JavaScript to toggle the "is-active" class on "nav-menu" --></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nav-toggle"</span><span class="nt">></span>
|
||||
<span class="nt"><span></span></span>
|
||||
<span class="nt"><span></span></span>
|
||||
<span class="nt"><span></span></span>
|
||||
<span class="nt"></span></span>
|
||||
|
||||
<span class="c"><!-- This "nav-menu" is hidden on mobile --></span>
|
||||
<span class="c"><!-- Add the modifier "is-active" to display it on mobile --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-right nav-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
Home
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
Documentation
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
Blog
|
||||
<span class="nt"></a></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field is-grouped"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button"</span> <span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">></i></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"><span></span>Tweet<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-primary"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-download"</span><span class="nt">></i></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"><span></span>Download<span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
<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>
|
||||
<p>
|
||||
To optimise the space on desktop, but also allow the mobile view to be usable, you can <strong>duplicate</strong> nav items in both <code>nav-left</code> and <code>nav-right</code>, and show/hide them with <a href="http://bulma.io/versions/0.5.0/documentation/modifiers/responsive-helpers/">responsive helpers</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="example is-paddingless">
|
||||
|
||||
<nav class="nav has-shadow">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma logo">
|
||||
</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">About</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">About</a>
|
||||
<a class="nav-item is-tab">
|
||||
<figure class="image is-16x16" style="margin-right: 8px;">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/jgthms.png">
|
||||
</figure>
|
||||
Profile
|
||||
</a>
|
||||
<a class="nav-item is-tab">Log out</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav has-shadow"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-left"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/bulma-logo.png"</span> <span class="na">alt=</span><span class="s">"Bulma logo"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab is-hidden-mobile is-active"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab is-hidden-mobile"</span><span class="nt">></span>Features<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab is-hidden-mobile"</span><span class="nt">></span>Pricing<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab is-hidden-mobile"</span><span class="nt">></span>About<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"nav-toggle"</span><span class="nt">></span>
|
||||
<span class="nt"><span></span></span>
|
||||
<span class="nt"><span></span></span>
|
||||
<span class="nt"><span></span></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-right nav-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab is-hidden-tablet is-active"</span><span class="nt">></span>Home<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab is-hidden-tablet"</span><span class="nt">></span>Features<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab is-hidden-tablet"</span><span class="nt">></span>Pricing<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab is-hidden-tablet"</span><span class="nt">></span>About<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab"</span><span class="nt">></span>
|
||||
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">"image is-16x16"</span> <span class="na">style=</span><span class="s">"margin-right: 8px;"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/jgthms.png"</span><span class="nt">></span>
|
||||
<span class="nt"></figure></span>
|
||||
Profile
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-item is-tab"</span><span class="nt">></span>Log out<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span></code></pre></figure>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/components/nav.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
2732
docs/versions/0.5.0/documentation/components/navbar/index.html
Normal file
2732
docs/versions/0.5.0/documentation/components/navbar/index.html
Normal file
File diff suppressed because it is too large
Load diff
1122
docs/versions/0.5.0/documentation/components/pagination/index.html
Normal file
1122
docs/versions/0.5.0/documentation/components/pagination/index.html
Normal file
File diff suppressed because it is too large
Load diff
1022
docs/versions/0.5.0/documentation/components/panel/index.html
Normal file
1022
docs/versions/0.5.0/documentation/components/panel/index.html
Normal file
File diff suppressed because it is too large
Load diff
1593
docs/versions/0.5.0/documentation/components/tabs/index.html
Normal file
1593
docs/versions/0.5.0/documentation/components/tabs/index.html
Normal file
File diff suppressed because it is too large
Load diff
822
docs/versions/0.5.0/documentation/elements/box/index.html
Normal file
822
docs/versions/0.5.0/documentation/elements/box/index.html
Normal file
|
|
@ -0,0 +1,822 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Box | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-elements">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/icon/">
|
||||
Icon
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/image/">
|
||||
Image
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/progress/">
|
||||
Progress
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/table/">
|
||||
Table
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/tag/">
|
||||
Tag
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/title/">
|
||||
Title
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Box</h1>
|
||||
<h2 class="subtitle">
|
||||
A white <strong>box</strong> to contain other elements
|
||||
</h2>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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://bulma.io/versions/0.5.0/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fa fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fa fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"box"</span><span class="nt">></span>
|
||||
<span class="nt"><article</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-left"</span><span class="nt">></span>
|
||||
<span class="nt"><figure</span> <span class="na">class=</span><span class="s">"image is-64x64"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/placeholders/128x128.png"</span> <span class="na">alt=</span><span class="s">"Image"</span><span class="nt">></span>
|
||||
<span class="nt"></figure></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>
|
||||
<span class="nt"><strong></span>John Smith<span class="nt"></strong></span> <span class="nt"><small></span>@johnsmith<span class="nt"></small></span> <span class="nt"><small></span>31m<span class="nt"></small></span>
|
||||
<span class="nt"><br></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"level is-mobile"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"level-left"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon is-small"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-reply"</span><span class="nt">></i></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon is-small"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-retweet"</span><span class="nt">></i></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"level-item"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon is-small"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-heart"</span><span class="nt">></i></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></article></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title anchor-title">
|
||||
Variables
|
||||
<a class="anchor-link" href="#variables">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use these variables to <strong>customize</strong> this component. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$box-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$text</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$box-background-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$white</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$box-radius</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$radius-large</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$box-shadow</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$box-padding</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.25rem</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$box-link-hover-shadow</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0 2px 3px rgba($black, 0.1), 0 0 0 1px $link</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$box-link-active-shadow</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/elements/box.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1728
docs/versions/0.5.0/documentation/elements/button/index.html
Normal file
1728
docs/versions/0.5.0/documentation/elements/button/index.html
Normal file
File diff suppressed because it is too large
Load diff
1082
docs/versions/0.5.0/documentation/elements/content/index.html
Normal file
1082
docs/versions/0.5.0/documentation/elements/content/index.html
Normal file
File diff suppressed because it is too large
Load diff
764
docs/versions/0.5.0/documentation/elements/delete/index.html
Normal file
764
docs/versions/0.5.0/documentation/elements/delete/index.html
Normal file
|
|
@ -0,0 +1,764 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Delete | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/elements/delete/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-elements">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/icon/">
|
||||
Icon
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/image/">
|
||||
Image
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/progress/">
|
||||
Progress
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/table/">
|
||||
Table
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/tag/">
|
||||
Tag
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/title/">
|
||||
Title
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Delete</h1>
|
||||
<h2 class="subtitle">
|
||||
A versatile <strong>delete</strong> cross
|
||||
</h2>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<a class="tag is-success" href="#sizes">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
On its own, it's a simple circle with a cross:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a class="delete"></a>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></a></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title anchor-title">
|
||||
Sizes
|
||||
<a class="anchor-link" href="#sizes">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
It comes in <strong>4 sizes</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a class="delete is-small"></a>
|
||||
<a class="delete"></a>
|
||||
<a class="delete is-medium"></a>
|
||||
<a class="delete is-large"></a>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"delete is-small"</span><span class="nt">></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"delete is-medium"</span><span class="nt">></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"delete is-large"</span><span class="nt">></a></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="combinations" class="title" style="padding-top: 1.5rem;">
|
||||
Combinations
|
||||
</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<span class="tag is-success">
|
||||
Hello World
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="notification is-danger">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
<article class="message is-info">
|
||||
<div class="message-header">
|
||||
Info
|
||||
<button class="delete"></button>
|
||||
</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">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"block"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"tag is-success"</span><span class="nt">></span>
|
||||
Hello World
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete is-small"</span><span class="nt">></button></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification is-danger"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></button></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><article</span> <span class="na">class=</span><span class="s">"message is-info"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"message-header"</span><span class="nt">></span>
|
||||
Info
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"message-body"</span><span class="nt">></span>
|
||||
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.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></article></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/elements/delete.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
2562
docs/versions/0.5.0/documentation/elements/form/index.html
Normal file
2562
docs/versions/0.5.0/documentation/elements/form/index.html
Normal file
File diff suppressed because it is too large
Load diff
786
docs/versions/0.5.0/documentation/elements/icon/index.html
Normal file
786
docs/versions/0.5.0/documentation/elements/icon/index.html
Normal file
|
|
@ -0,0 +1,786 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Icon | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/elements/icon/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-elements">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/icon/">
|
||||
Icon
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/image/">
|
||||
Image
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/progress/">
|
||||
Progress
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/table/">
|
||||
Table
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/tag/">
|
||||
Tag
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/title/">
|
||||
Title
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<a class="tag is-success" href="#sizes">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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 as a container:</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<span class="icon">
|
||||
<i class="fa fa-home"></i>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-home"</span><span class="nt">></i></span>
|
||||
<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title anchor-title">
|
||||
Sizes
|
||||
<a class="anchor-link" href="#sizes">
|
||||
#
|
||||
</a>
|
||||
</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>1rem x 1rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>icon</code></td>
|
||||
<td><span class="icon"><i class="fa fa-home"></i></span></td>
|
||||
<td>21px</td>
|
||||
<td>1.5rem x 1.5rem</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>2rem x 2rem</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>3rem x 3rem</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title anchor-title">
|
||||
Variables
|
||||
<a class="anchor-link" href="#variables">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use these variables to <strong>customize</strong> this component. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$icon-dimensions</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.5rem</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$icon-dimensions-small</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1rem</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$icon-dimensions-medium</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>2rem</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$icon-dimensions-large</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>3rem</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/elements/icon.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
822
docs/versions/0.5.0/documentation/elements/image/index.html
Normal file
822
docs/versions/0.5.0/documentation/elements/image/index.html
Normal file
|
|
@ -0,0 +1,822 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Image | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/elements/image/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-elements">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/icon/">
|
||||
Icon
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/image/">
|
||||
Image
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/progress/">
|
||||
Progress
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/table/">
|
||||
Table
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/tag/">
|
||||
Tag
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/title/">
|
||||
Title
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Images</h1>
|
||||
<h2 class="subtitle">
|
||||
A container for <strong>responsive images</strong>
|
||||
</h2>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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://bulma.io/versions/0.5.0/images/placeholders/128x128.png">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><figure</span> <span class="na">class=</span><span class="s">"image is-128x128"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/placeholders/128x128.png"</span><span class="nt">></span>
|
||||
<span class="nt"></figure></span></code></pre></figure>
|
||||
|
||||
<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://bulma.io/versions/0.5.0/images/placeholders/16x16.png"></figure></td>
|
||||
<td>16x16px</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>image is-24x24</code></td>
|
||||
<td><figure class="image is-24x24"><img src="http://bulma.io/versions/0.5.0/images/placeholders/24x24.png"></figure></td>
|
||||
<td>24x24px</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>image is-32x32</code></td>
|
||||
<td><figure class="image is-32x32"><img src="http://bulma.io/versions/0.5.0/images/placeholders/32x32.png"></figure></td>
|
||||
<td>32x32px</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>image is-48x48</code></td>
|
||||
<td><figure class="image is-48x48"><img src="http://bulma.io/versions/0.5.0/images/placeholders/48x48.png"></figure></td>
|
||||
<td>48x48px</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>image is-64x64</code></td>
|
||||
<td><figure class="image is-64x64"><img src="http://bulma.io/versions/0.5.0/images/placeholders/64x64.png"></figure></td>
|
||||
<td>64x64px</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>image is-96x96</code></td>
|
||||
<td><figure class="image is-96x96"><img src="http://bulma.io/versions/0.5.0/images/placeholders/96x96.png"></figure></td>
|
||||
<td>96x96px</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><code>image is-128x128</code></td>
|
||||
<td><figure class="image is-128x128"><img src="http://bulma.io/versions/0.5.0/images/placeholders/128x128.png"></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://bulma.io/versions/0.5.0/images/placeholders/256x256.png">
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><figure</span> <span class="na">class=</span><span class="s">"image is-128x128"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://bulma.io/versions/0.5.0/images/placeholders/256x256.png"</span><span class="nt">></span>
|
||||
<span class="nt"></figure></span></code></pre></figure>
|
||||
|
||||
<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://bulma.io/versions/0.5.0/images/placeholders/480x480.png"></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://bulma.io/versions/0.5.0/images/placeholders/480x480.png"></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://bulma.io/versions/0.5.0/images/placeholders/640x480.png"></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://bulma.io/versions/0.5.0/images/placeholders/480x320.png"></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://bulma.io/versions/0.5.0/images/placeholders/640x360.png"></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://bulma.io/versions/0.5.0/images/placeholders/640x320.png"></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>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title anchor-title">
|
||||
Variables
|
||||
<a class="anchor-link" href="#variables">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use these variables to <strong>customize</strong> this component. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$dimensions</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>16 24 32 48 64 96 128</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/elements/image.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,816 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Notification | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/elements/notification/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-elements">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/icon/">
|
||||
Icon
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/image/">
|
||||
Image
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/progress/">
|
||||
Progress
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/table/">
|
||||
Table
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/tag/">
|
||||
Tag
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/title/">
|
||||
Title
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<a class="tag is-success" href="#colors">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></button></span>
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <span class="nt"><strong></span>Pellentesque risus mi<span class="nt"></strong></span>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <span class="nt"><a></span>felis venenatis<span class="nt"></a></span> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="colors" class="title anchor-title">
|
||||
Colors
|
||||
<a class="anchor-link" href="#colors">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
<div class="notification is-primary">
|
||||
<button class="delete"></button>
|
||||
Primar lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
<div class="notification is-info">
|
||||
<button class="delete"></button>
|
||||
Info lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
<div class="notification is-success">
|
||||
<button class="delete"></button>
|
||||
Success lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
<div class="notification is-warning">
|
||||
<button class="delete"></button>
|
||||
Warning lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
<div class="notification is-danger">
|
||||
<button class="delete"></button>
|
||||
Danger lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification is-primary"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></button></span>
|
||||
Primar lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <span class="nt"><strong></span>Pellentesque risus mi<span class="nt"></strong></span>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <span class="nt"><a></span>felis venenatis<span class="nt"></a></span> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification is-info"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></button></span>
|
||||
Info lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <span class="nt"><strong></span>Pellentesque risus mi<span class="nt"></strong></span>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <span class="nt"><a></span>felis venenatis<span class="nt"></a></span> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification is-success"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></button></span>
|
||||
Success lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <span class="nt"><strong></span>Pellentesque risus mi<span class="nt"></strong></span>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <span class="nt"><a></span>felis venenatis<span class="nt"></a></span> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification is-warning"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></button></span>
|
||||
Warning lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <span class="nt"><strong></span>Pellentesque risus mi<span class="nt"></strong></span>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <span class="nt"><a></span>felis venenatis<span class="nt"></a></span> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification is-danger"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"delete"</span><span class="nt">></button></span>
|
||||
Danger lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <span class="nt"><strong></span>Pellentesque risus mi<span class="nt"></strong></span>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <span class="nt"><a></span>felis venenatis<span class="nt"></a></span> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title anchor-title">
|
||||
Variables
|
||||
<a class="anchor-link" href="#variables">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use these variables to <strong>customize</strong> this component. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$notification-background-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$background</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$notification-radius</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$radius</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$notification-padding</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.25rem 2.5rem 1.25rem 1.5rem</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/elements/notification.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
756
docs/versions/0.5.0/documentation/elements/progress/index.html
Normal file
756
docs/versions/0.5.0/documentation/elements/progress/index.html
Normal file
|
|
@ -0,0 +1,756 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Progess Bar | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/elements/progress/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-elements">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/icon/">
|
||||
Icon
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/image/">
|
||||
Image
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/progress/">
|
||||
Progress
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/table/">
|
||||
Table
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/tag/">
|
||||
Tag
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/title/">
|
||||
Title
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Progress bars</h1>
|
||||
<h2 class="subtitle">
|
||||
Native HTML <strong>progress</strong> bars
|
||||
</h2>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<a class="tag is-success" href="#colors">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<a class="tag is-success" href="#sizes">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="example">
|
||||
|
||||
<progress class="progress" value="15" max="100">15%</progress>
|
||||
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress"</span> <span class="na">value=</span><span class="s">"15"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>15%<span class="nt"></progress></span></code></pre></figure>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="colors" class="title anchor-title">
|
||||
Colors
|
||||
<a class="anchor-link" href="#colors">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="example">
|
||||
|
||||
<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>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress is-primary"</span> <span class="na">value=</span><span class="s">"30"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>30%<span class="nt"></progress></span>
|
||||
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress is-info"</span> <span class="na">value=</span><span class="s">"45"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>45%<span class="nt"></progress></span>
|
||||
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress is-success"</span> <span class="na">value=</span><span class="s">"60"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>60%<span class="nt"></progress></span>
|
||||
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress is-warning"</span> <span class="na">value=</span><span class="s">"75"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>75%<span class="nt"></progress></span>
|
||||
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress is-danger"</span> <span class="na">value=</span><span class="s">"90"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>90%<span class="nt"></progress></span></code></pre></figure>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title anchor-title">
|
||||
Sizes
|
||||
<a class="anchor-link" href="#sizes">
|
||||
#
|
||||
</a>
|
||||
</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>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress is-small"</span> <span class="na">value=</span><span class="s">"15"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>15%<span class="nt"></progress></span>
|
||||
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress"</span> <span class="na">value=</span><span class="s">"30"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>30%<span class="nt"></progress></span>
|
||||
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress is-medium"</span> <span class="na">value=</span><span class="s">"45"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>45%<span class="nt"></progress></span>
|
||||
<span class="nt"><progress</span> <span class="na">class=</span><span class="s">"progress is-large"</span> <span class="na">value=</span><span class="s">"60"</span> <span class="na">max=</span><span class="s">"100"</span><span class="nt">></span>60%<span class="nt"></progress></span></code></pre></figure>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title anchor-title">
|
||||
Variables
|
||||
<a class="anchor-link" href="#variables">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use these variables to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$progress-bar-background-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$border</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$progress-value-background-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$text</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/elements/progress.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1654
docs/versions/0.5.0/documentation/elements/table/index.html
Normal file
1654
docs/versions/0.5.0/documentation/elements/table/index.html
Normal file
File diff suppressed because it is too large
Load diff
1251
docs/versions/0.5.0/documentation/elements/tag/index.html
Normal file
1251
docs/versions/0.5.0/documentation/elements/tag/index.html
Normal file
File diff suppressed because it is too large
Load diff
907
docs/versions/0.5.0/documentation/elements/title/index.html
Normal file
907
docs/versions/0.5.0/documentation/elements/title/index.html
Normal file
|
|
@ -0,0 +1,907 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Title and Subtitle | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/elements/title/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-elements">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/icon/">
|
||||
Icon
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/image/">
|
||||
Image
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/progress/">
|
||||
Progress
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/table/">
|
||||
Table
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/elements/tag/">
|
||||
Tag
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/elements/title/">
|
||||
Title
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<a class="tag is-success" href="#sizes">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<a class="tag is-success" href="#variables">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>There are <strong>2 types</strong> of heading:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.title</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.subtitle</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>Title<span class="nt"></h1></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">></span>Subtitle<span class="nt"></h2></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title anchor-title">
|
||||
Sizes
|
||||
<a class="anchor-link" href="#sizes">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<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">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"title is-1"</span><span class="nt">></span>Title 1<span class="nt"></h1></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"title is-2"</span><span class="nt">></span>Title 2<span class="nt"></h2></span>
|
||||
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"title is-3"</span><span class="nt">></span>Title 3<span class="nt"></h3></span>
|
||||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"title is-4"</span><span class="nt">></span>Title 4<span class="nt"></h4></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"title is-5"</span><span class="nt">></span>Title 5<span class="nt"></h5></span>
|
||||
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"title is-6"</span><span class="nt">></span>Title 6<span class="nt"></h6></span></code></pre></figure>
|
||||
</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">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"subtitle is-1"</span><span class="nt">></span>Subtitle 1<span class="nt"></h1></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"subtitle is-2"</span><span class="nt">></span>Subtitle 2<span class="nt"></h2></span>
|
||||
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"subtitle is-3"</span><span class="nt">></span>Subtitle 3<span class="nt"></h3></span>
|
||||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"subtitle is-4"</span><span class="nt">></span>Subtitle 4<span class="nt"></h4></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"subtitle is-5"</span><span class="nt">></span>Subtitle 5<span class="nt"></h5></span>
|
||||
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"subtitle is-6"</span><span class="nt">></span>Subtitle 6<span class="nt"></h6></span></code></pre></figure>
|
||||
</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">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"title is-1"</span><span class="nt">></span>Title 1<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle is-3"</span><span class="nt">></span>Subtitle 3<span class="nt"></p></span>
|
||||
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title is-2"</span><span class="nt">></span>Title 2<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle is-4"</span><span class="nt">></span>Subtitle 4<span class="nt"></p></span>
|
||||
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title is-3"</span><span class="nt">></span>Title 3<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle is-5"</span><span class="nt">></span>Subtitle 5<span class="nt"></p></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
</p>
|
||||
<p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
<p class="title is-1 is-spaced">Title 1</p>
|
||||
<p class="subtitle is-3">Subtitle 3</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<p class="title is-2 is-spaced">Title 2</p>
|
||||
<p class="subtitle is-4">Subtitle 4</p>
|
||||
</div>
|
||||
<div class="block">
|
||||
<p class="title is-3 is-spaced">Title 3</p>
|
||||
<p class="subtitle is-5">Subtitle 5</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"title is-1 is-spaced"</span><span class="nt">></span>Title 1<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle is-3"</span><span class="nt">></span>Subtitle 3<span class="nt"></p></span>
|
||||
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title is-2 is-spaced"</span><span class="nt">></span>Title 2<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle is-4"</span><span class="nt">></span>Subtitle 4<span class="nt"></p></span>
|
||||
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"title is-3 is-spaced"</span><span class="nt">></span>Title 3<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle is-5"</span><span class="nt">></span>Subtitle 5<span class="nt"></p></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="variables" class="title anchor-title">
|
||||
Variables
|
||||
<a class="anchor-link" href="#variables">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use these variables to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$title-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$grey-darker</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$title-size</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$size-3</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$title-weight</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$weight-light</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$title-weight-bold</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$weight-semibold</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$subtitle-color</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$grey-dark</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$subtitle-size</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$size-5</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$subtitle-strong</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$grey-darker</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>$subtitle-weight</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$weight-light</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/elements/title.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
695
docs/versions/0.5.0/documentation/form/checkbox/index.html
Normal file
695
docs/versions/0.5.0/documentation/form/checkbox/index.html
Normal file
|
|
@ -0,0 +1,695 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Checkbox | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/form/checkbox/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-form">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
General
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/input/">
|
||||
Input
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/textarea/">
|
||||
Textarea
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/select/">
|
||||
Select
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/form/checkbox/">
|
||||
Checkbox
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/radio/">
|
||||
Radio
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Checkbox</h1>
|
||||
<h2 class="subtitle">
|
||||
The 2-state <strong>checkbox</strong> in its native format
|
||||
</h2>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>checkbox</code> class is a simple wrapper around the <code><input type="checkbox"></code> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
Remember me
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
||||
Remember me
|
||||
<span class="nt"></label></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
I agree to the <a href="#">terms and conditions</a>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">class=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
||||
I agree to the <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>terms and conditions<span class="nt"></a></span>
|
||||
<span class="nt"></label></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<label class="checkbox" disabled>
|
||||
<input type="checkbox" disabled>
|
||||
Save my preferences
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><label</span> <span class="na">class=</span><span class="s">"checkbox"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
Save my preferences
|
||||
<span class="nt"></label></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/form/checkbox.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
2404
docs/versions/0.5.0/documentation/form/general/index.html
Normal file
2404
docs/versions/0.5.0/documentation/form/general/index.html
Normal file
File diff suppressed because it is too large
Load diff
1308
docs/versions/0.5.0/documentation/form/input/index.html
Normal file
1308
docs/versions/0.5.0/documentation/form/input/index.html
Normal file
File diff suppressed because it is too large
Load diff
748
docs/versions/0.5.0/documentation/form/radio/index.html
Normal file
748
docs/versions/0.5.0/documentation/form/radio/index.html
Normal file
|
|
@ -0,0 +1,748 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Radio button | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/form/radio/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-form">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
General
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/input/">
|
||||
Input
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/textarea/">
|
||||
Textarea
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/select/">
|
||||
Select
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/checkbox/">
|
||||
Checkbox
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/form/radio/">
|
||||
Radio
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Radio</h1>
|
||||
<h2 class="subtitle">
|
||||
The mutually exclusive <strong>radio buttons</strong> in their native format
|
||||
</h2>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>radio</code> class is a simple wrapper around the <code><input type="radio"></code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
</p>
|
||||
<p>
|
||||
Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="answer">
|
||||
Yes
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="answer">
|
||||
No
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"answer"</span><span class="nt">></span>
|
||||
Yes
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"answer"</span><span class="nt">></span>
|
||||
No
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the <code><input></code> element.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="foobar">
|
||||
Foo
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="foobar" checked>
|
||||
Bar
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"foobar"</span><span class="nt">></span>
|
||||
Foo
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"foobar"</span> <span class="na">checked</span><span class="nt">></span>
|
||||
Bar
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the <code><label></code> and the <code><input></code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="rsvp">
|
||||
Going
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="rsvp">
|
||||
Not going
|
||||
</label>
|
||||
<label class="radio" disabled>
|
||||
<input type="radio" name="rsvp" disabled>
|
||||
Maybe
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"rsvp"</span><span class="nt">></span>
|
||||
Going
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"rsvp"</span><span class="nt">></span>
|
||||
Not going
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"radio"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"rsvp"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
Maybe
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/form/radio.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1259
docs/versions/0.5.0/documentation/form/select/index.html
Normal file
1259
docs/versions/0.5.0/documentation/form/select/index.html
Normal file
File diff suppressed because it is too large
Load diff
959
docs/versions/0.5.0/documentation/form/textarea/index.html
Normal file
959
docs/versions/0.5.0/documentation/form/textarea/index.html
Normal file
|
|
@ -0,0 +1,959 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Textarea | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/form/textarea/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-form">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
General
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/input/">
|
||||
Input
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/form/textarea/">
|
||||
Textarea
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/select/">
|
||||
Select
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/checkbox/">
|
||||
Checkbox
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/form/radio/">
|
||||
Radio
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Textarea</h1>
|
||||
<h2 class="subtitle">
|
||||
The multiline <strong>textarea</strong> and its variations
|
||||
</h2>
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Colors</span>
|
||||
|
||||
<a class="tag is-success" href="#colors">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Sizes</span>
|
||||
|
||||
<a class="tag is-success" href="#sizes">Yes</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Variables</span>
|
||||
|
||||
<span class="tag is-danger">No</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The following <strong>modifiers</strong> are supported:</p>
|
||||
<ul>
|
||||
<li>the <strong><a href="#input-color">color</a></strong></li>
|
||||
<li>the <strong><a href="#input-size">size</a></strong></li>
|
||||
<li>the <strong><a href="#input-state">state</a></strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<textarea class="textarea" placeholder="e.g. Hello world"></textarea>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea"</span> <span class="na">placeholder=</span><span class="s">"e.g. Hello world"</span><span class="nt">></textarea></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.4</span>
|
||||
</p>
|
||||
<p>
|
||||
You can set the height of the textarea using the `rows` HTML attribute.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<textarea class="textarea" placeholder="10 lines of textarea" rows="10"></textarea>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea"</span> <span class="na">placeholder=</span><span class="s">"10 lines of textarea"</span> <span class="na">rows=</span><span class="s">"10"</span><span class="nt">></textarea></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="colors" class="title anchor-title">
|
||||
Colors
|
||||
<a class="anchor-link" href="#colors">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-primary" type="text" placeholder="Primary textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-info" type="text" placeholder="Info textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-success" type="text" placeholder="Success textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-warning" type="text" placeholder="Warning textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-danger" type="text" placeholder="Danger textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-primary"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Primary textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-info"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Info textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-success"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Success textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-warning"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Warning textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-danger"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Danger textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title anchor-title">
|
||||
Sizes
|
||||
<a class="anchor-link" href="#sizes">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-small" type="text" placeholder="Small textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea" type="text" placeholder="Normal textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-medium" type="text" placeholder="Medium textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-large" type="text" placeholder="Large textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-small"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Small textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Normal textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-medium"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Medium textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-large"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Large textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="input-state" class="title">States</h3>
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="control">
|
||||
<textarea class="textarea" type="text" placeholder="Normal textarea"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Normal textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="control">
|
||||
<textarea class="textarea is-hovered" type="text" placeholder="Hovered textarea"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-hovered"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Hovered textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="control">
|
||||
<textarea class="textarea is-focused" type="text" placeholder="Focused textarea"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-focused"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Focused textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="control is-loading">
|
||||
<textarea class="textarea" type="text" placeholder="Loading textarea"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"control is-loading"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Loading textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p style="margin-bottom: 0.5rem;">
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.3</span>
|
||||
</p>
|
||||
<div class="content">
|
||||
<p>
|
||||
You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control is-small is-loading">
|
||||
<textarea class="textarea is-small" type="text" placeholder="Small loading textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-loading">
|
||||
<textarea class="textarea" type="text" placeholder="Normal loading textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-medium is-loading">
|
||||
<textarea class="textarea is-medium" type="text" placeholder="Medium loading textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-large is-loading">
|
||||
<textarea class="textarea is-large" type="text" placeholder="Large loading textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control is-small is-loading"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-small"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Small loading textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control is-loading"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Normal loading textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control is-medium is-loading"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-medium"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Medium loading textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"field"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"control is-large is-loading"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea is-large"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Large loading textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="control">
|
||||
<textarea class="textarea" type="text" placeholder="Disabled textarea" disabled></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"control"</span><span class="nt">></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"textarea"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled textarea"</span> <span class="na">disabled</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/form/textarea.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1431
docs/versions/0.5.0/documentation/grid/columns/index.html
Normal file
1431
docs/versions/0.5.0/documentation/grid/columns/index.html
Normal file
File diff suppressed because it is too large
Load diff
1431
docs/versions/0.5.0/documentation/grid/tiles/index.html
Normal file
1431
docs/versions/0.5.0/documentation/grid/tiles/index.html
Normal file
File diff suppressed because it is too large
Load diff
707
docs/versions/0.5.0/documentation/layout/container/index.html
Normal file
707
docs/versions/0.5.0/documentation/layout/container/index.html
Normal file
|
|
@ -0,0 +1,707 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Container | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-layout">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Container
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/hero/">
|
||||
Hero
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/section/">
|
||||
Section
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/footer/">
|
||||
Footer
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>.nav</code></li>
|
||||
<li><code>.hero</code></li>
|
||||
<li><code>.section</code></li>
|
||||
<li><code>.footer</code></li>
|
||||
</ul>
|
||||
<p>This is how the container will behave:</p>
|
||||
<ul>
|
||||
<li>on <strong>mobile</strong> and <strong>tablet</strong> <span class="tag">< 1008px</span>
|
||||
, it will have a margin of <strong>24px</strong> on each side.</li>
|
||||
<li>on <strong>desktop</strong> <span class="tag">>= 1008px</span>
|
||||
, it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
|
||||
<li>on <strong>widescreen</strong> <span class="tag">>= 1200px</span>
|
||||
, it will have a maximum width of <strong>1152px</strong>.</li>
|
||||
<li>on <strong>fullhd</strong> <span class="tag">>= 1392px</span>
|
||||
, it will have a maximum width of <strong>1344px</strong>.</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <code>$gap</code> variable has a default value of <code>24px</code> but can be modified.
|
||||
</p>
|
||||
<p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
|
||||
<div class="container">
|
||||
<div class="notification">
|
||||
This container is <strong>centered</strong> on desktop.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification"</span><span class="nt">></span>
|
||||
This container is <span class="nt"><strong></span>centered<span class="nt"></strong></span> on desktop.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<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 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
|
||||
<div class="container is-fluid">
|
||||
<div class="notification">
|
||||
This container is <strong>fluid</strong>: it will have a 24px gap on either side, on any viewport size.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container is-fluid"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification"</span><span class="nt">></span>
|
||||
This container is <span class="nt"><strong></span>fluid<span class="nt"></strong></span>: it will have a 24px gap on either side, on any viewport size.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h3 class="title">Breakpoint containers</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
<span class="tag is-info">0.4.4</span>
|
||||
</p>
|
||||
<p>
|
||||
With the two modifiers <code>.is-widescreen</code> and <code>.is-fullhd</code>, you can have a <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
|
||||
<div class="container is-widescreen">
|
||||
<div class="notification">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container is-widescreen"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification"</span><span class="nt">></span>
|
||||
This container is <span class="nt"><strong></span>fullwidth<span class="nt"></strong></span> <span class="nt"><em></span>until<span class="nt"></em></span> the <span class="nt"><code></span>$widescreen<span class="nt"></code></span> breakpoint.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
|
||||
<div class="container is-fullhd">
|
||||
<div class="notification">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container is-fullhd"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notification"</span><span class="nt">></span>
|
||||
This container is <span class="nt"><strong></span>fullwidth<span class="nt"></strong></span> <span class="nt"><em></span>until<span class="nt"></em></span> the <span class="nt"><code></span>$fullhd<span class="nt"></code></span> breakpoint.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/layout/container.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
620
docs/versions/0.5.0/documentation/layout/footer/index.html
Normal file
620
docs/versions/0.5.0/documentation/layout/footer/index.html
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Footer | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/layout/footer/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-layout">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Container
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/hero/">
|
||||
Hero
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/section/">
|
||||
Section
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/layout/footer/">
|
||||
Footer
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><footer</span> <span class="na">class=</span><span class="s">"footer"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content has-text-centered"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>
|
||||
<span class="nt"><strong></span>Bulma<span class="nt"></strong></span> by <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://jgthms.com"</span><span class="nt">></span>Jeremy Thomas<span class="nt"></a></span>. The source code is licensed
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://opensource.org/licenses/mit-license.php"</span><span class="nt">></span>MIT<span class="nt"></a></span>. The website content
|
||||
is licensed <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://creativecommons.org/licenses/by-nc-sa/4.0/"</span><span class="nt">></span>CC ANS 4.0<span class="nt"></a></span>.
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">href=</span><span class="s">"https://github.com/jgthms/bulma"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-github"</span><span class="nt">></i></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></footer></span></code></pre></figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/layout/footer.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1420
docs/versions/0.5.0/documentation/layout/hero/index.html
Normal file
1420
docs/versions/0.5.0/documentation/layout/hero/index.html
Normal file
File diff suppressed because it is too large
Load diff
606
docs/versions/0.5.0/documentation/layout/section/index.html
Normal file
606
docs/versions/0.5.0/documentation/layout/section/index.html
Normal file
|
|
@ -0,0 +1,606 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Section | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/layout/section/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-layout">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Container
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/hero/">
|
||||
Hero
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/layout/section/">
|
||||
Section
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/layout/footer/">
|
||||
Footer
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><body></span>
|
||||
<span class="nt"><section</span> <span class="na">class=</span><span class="s">"section"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>Section<span class="nt"></h1></span>
|
||||
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">></span>
|
||||
A simple container to divide your page into <span class="nt"><strong></span>sections<span class="nt"></strong></span>, like the one you're currently reading
|
||||
<span class="nt"></h2></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></section></span>
|
||||
<span class="nt"></body></span></code></pre></figure>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/layout/section.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
632
docs/versions/0.5.0/documentation/modifiers/helpers/index.html
Normal file
632
docs/versions/0.5.0/documentation/modifiers/helpers/index.html
Normal file
|
|
@ -0,0 +1,632 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Helpers | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/modifiers/helpers/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-modifiers">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Syntax
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/modifiers/helpers/">
|
||||
Helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/responsive-helpers/">
|
||||
Responsive helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/typography-helpers/">
|
||||
Typography helpers
|
||||
<span class="tag is-success" style="margin-left: 1em;">
|
||||
New!
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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 rowspan="2">Spacing</th>
|
||||
<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>
|
||||
<th rowspan="5">Other</th>
|
||||
<td><code>is-overlay</code></td>
|
||||
<td>Completely covers the first positioned parent</td>
|
||||
</tr>
|
||||
<td><code>is-clipped</code></td>
|
||||
<td>Adds overflow <strong>hidden</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-radiusless</code></td>
|
||||
<td>Removes any <strong>radius</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-shadowless</code></td>
|
||||
<td>Removes any <strong>shadow</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>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/modifiers/helpers.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
750
docs/versions/0.5.0/documentation/modifiers/syntax/index.html
Normal file
750
docs/versions/0.5.0/documentation/modifiers/syntax/index.html
Normal file
|
|
@ -0,0 +1,750 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Modifiers syntax | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-modifiers">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Syntax
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/helpers/">
|
||||
Helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/responsive-helpers/">
|
||||
Responsive helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/typography-helpers/">
|
||||
Typography helpers
|
||||
<span class="tag is-success" style="margin-left: 1em;">
|
||||
New!
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span></code></pre></figure>
|
||||
</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">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-primary"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span></code></pre></figure>
|
||||
</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="field">
|
||||
<a class="button is-primary">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-success">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-warning">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-primary"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-info"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-success"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-warning"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-danger"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span></code></pre></figure>
|
||||
</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="field">
|
||||
<a class="button is-small">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-medium">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-large">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-small"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-medium"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-large"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span></code></pre></figure>
|
||||
</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>[disabled]</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-outlined">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-primary is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-primary" disabled>Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-primary is-outlined"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-primary is-loading"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-primary"</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/modifiers/syntax.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,988 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Typography helpers | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/modifiers/typography-helpers/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-modifiers">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li >
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Syntax
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/helpers/">
|
||||
Helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/modifiers/responsive-helpers/">
|
||||
Responsive helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/modifiers/typography-helpers/">
|
||||
Typography helpers
|
||||
<span class="tag is-success" style="margin-left: 1em;">
|
||||
New!
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Typography helpers</h1>
|
||||
<h2 class="subtitle">
|
||||
Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Size</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>7 sizes</strong> to choose from:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Font-size
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-size-1</code></td>
|
||||
<td><code>3rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-2</code></td>
|
||||
<td><code>2.5rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-3</code></td>
|
||||
<td><code>2rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-4</code></td>
|
||||
<td><code>1.5rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-5</code></td>
|
||||
<td><code>1.25rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-6</code></td>
|
||||
<td><code>1rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-7</code></td>
|
||||
<td><code>0.75rem</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">
|
||||
Responsive size
|
||||
</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply needed to append the <strong>viewport width</strong> to the size modifier.
|
||||
</p>
|
||||
<p>
|
||||
For example, here are the modifiers for <code>$size-1</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Mobile<br>
|
||||
Up to <code>768px</code>
|
||||
</th>
|
||||
<th>
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>1007px</code>
|
||||
</th>
|
||||
<th>
|
||||
Desktop<br>
|
||||
Between <code>1008px</code> and <code>1199px</code>
|
||||
</th>
|
||||
<th>
|
||||
Widescreen<br>
|
||||
Between <code>1200px</code> and <code>1391px</code>
|
||||
</th>
|
||||
<th>
|
||||
FullHD<br>
|
||||
Above <code>1392px</code>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-size-1-mobile</code></td>
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></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>
|
||||
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification">unchanged</p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-tablet</code></td>
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification">unchanged</p>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></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><code>is-size-1-touch</code></td>
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></p>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></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><code>is-size-1-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"><code>3rem</code></p>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></p>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-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"><code>3rem</code></p>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-fullhd</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">unchanged</p>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></p>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>7 sizes</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">
|
||||
Colors
|
||||
</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>.has-text-white</code></td><td><span class="color" style="background: hsl(0, 0%, 100%);"></span>
|
||||
<code>hsl(0, 0%, 100%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-black</code></td><td><span class="color" style="background: hsl(0, 0%, 4%);"></span>
|
||||
<code>hsl(0, 0%, 4%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-light</code></td><td><span class="color" style="background: hsl(0, 0%, 96%);"></span>
|
||||
<code>hsl(0, 0%, 96%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-dark</code></td><td><span class="color" style="background: hsl(0, 0%, 21%);"></span>
|
||||
<code>hsl(0, 0%, 21%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-primary</code></td><td><span class="color" style="background: hsl(171, 100%, 41%);"></span>
|
||||
<code>hsl(171, 100%, 41%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-info</code></td><td><span class="color" style="background: hsl(217, 71%, 53%);"></span>
|
||||
<code>hsl(217, 71%, 53%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-success</code></td><td><span class="color" style="background: hsl(141, 71%, 48%);"></span>
|
||||
<code>hsl(141, 71%, 48%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-warning</code></td><td><span class="color" style="background: hsl(48, 100%, 67%);"></span>
|
||||
<code>hsl(48, 100%, 67%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-danger</code></td><td><span class="color" style="background: hsl(348, 100%, 61%);"></span>
|
||||
<code>hsl(348, 100%, 61%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-black-bis</code></td><td><span class="color" style="background: hsl(0, 0%, 7%);"></span>
|
||||
<code>hsl(0, 0%, 7%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-black-ter</code></td><td><span class="color" style="background: hsl(0, 0%, 14%);"></span>
|
||||
<code>hsl(0, 0%, 14%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-grey-darker</code></td><td><span class="color" style="background: hsl(0, 0%, 21%);"></span>
|
||||
<code>hsl(0, 0%, 21%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-grey-dark</code></td><td><span class="color" style="background: hsl(0, 0%, 29%);"></span>
|
||||
<code>hsl(0, 0%, 29%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-grey</code></td><td><span class="color" style="background: hsl(0, 0%, 48%);"></span>
|
||||
<code>hsl(0, 0%, 48%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-grey-light</code></td><td><span class="color" style="background: hsl(0, 0%, 71%);"></span>
|
||||
<code>hsl(0, 0%, 71%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-grey-lighter</code></td><td><span class="color" style="background: hsl(0, 0%, 86%);"></span>
|
||||
<code>hsl(0, 0%, 86%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-white-ter</code></td><td><span class="color" style="background: hsl(0, 0%, 96%);"></span>
|
||||
<code>hsl(0, 0%, 96%)</code>
|
||||
</td></tr>
|
||||
<tr><td><code>.has-text-white-bis</code></td><td><span class="color" style="background: hsl(0, 0%, 98%);"></span>
|
||||
<code>hsl(0, 0%, 98%)</code>
|
||||
</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Alignment</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can align the text with the use of one of <strong>3 alignment helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Alignment
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>.has-text-centered</code></td>
|
||||
<td>Makes the text <strong>centered</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.has-text-left</code></td>
|
||||
<td>Makes the text aligned to the <strong>left</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.has-text-right</code></td>
|
||||
<td>Makes the text aligned to the <strong>right</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/modifiers/typography-helpers.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
620
docs/versions/0.5.0/documentation/overview/classes/index.html
Normal file
620
docs/versions/0.5.0/documentation/overview/classes/index.html
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>CSS classes | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-overview">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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/sass/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
|
||||
</li>
|
||||
<li>
|
||||
the <a href="http://bulma.io/versions/0.5.0/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/overview/classes.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
866
docs/versions/0.5.0/documentation/overview/colors/index.html
Normal file
866
docs/versions/0.5.0/documentation/overview/colors/index.html
Normal file
|
|
@ -0,0 +1,866 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Colors | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-overview">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Colors</h1>
|
||||
<h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> all Bulma elements and components</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
|
||||
</p>
|
||||
<p>
|
||||
This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
<th>Actual value</th>
|
||||
<th>Invert variable</th>
|
||||
<th>Actual invert value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>White</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$white</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$white</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 100%);"></span>
|
||||
<code>hsl(0, 0%, 100%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$black</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Black</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$black</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$black</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 4%);"></span>
|
||||
<code>hsl(0, 0%, 4%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$white</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Light</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$light</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$white-ter</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 96%);"></span>
|
||||
<code>hsl(0, 0%, 96%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$light-invert</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Dark</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$dark</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$grey-darker</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(0, 0%, 21%);"></span>
|
||||
<code>hsl(0, 0%, 21%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$dark-invert</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Primary</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$primary</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$turquoise</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(171, 100%, 41%);"></span>
|
||||
<code>hsl(171, 100%, 41%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$primary-invert</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Info</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$info</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$blue</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(217, 71%, 53%);"></span>
|
||||
<code>hsl(217, 71%, 53%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$info-invert</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Success</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$success</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$green</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(141, 71%, 48%);"></span>
|
||||
<code>hsl(141, 71%, 48%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$success-invert</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Warning</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$warning</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$yellow</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(48, 100%, 67%);"></span>
|
||||
<code>hsl(48, 100%, 67%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$warning-invert</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Danger</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>$danger</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>$red</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(348, 100%, 61%);"></span>
|
||||
<code>hsl(348, 100%, 61%)</code>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<code>$danger-invert</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/overview/colors.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
675
docs/versions/0.5.0/documentation/overview/customize/index.html
Normal file
675
docs/versions/0.5.0/documentation/overview/customize/index.html
Normal file
|
|
@ -0,0 +1,675 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Customize Bulma | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-overview">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Customizing with Sass</h1>
|
||||
<h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of <strong>variables</strong></h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<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-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Download</strong> the source files:
|
||||
</p>
|
||||
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">npm install bulma</code></pre></figure>
|
||||
<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-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Set</strong> your variables
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Add your own colors, set new fonts, override Bulma styles...
|
||||
</p>
|
||||
<div class="highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="c1">// 1. Import the initial variables
|
||||
</span><span class="k">@import</span> <span class="s">"../sass/utilities/initial-variables"</span>
|
||||
|
||||
<span class="c1">// 2. Set your own initial variables
|
||||
// Update blue
|
||||
</span><span class="nv">$blue</span><span class="p">:</span> <span class="mh">#72d0eb</span>
|
||||
<span class="c1">// Add pink and its invert
|
||||
</span><span class="nv">$pink</span><span class="p">:</span> <span class="mh">#ffb3b3</span>
|
||||
<span class="nv">$pink-invert</span><span class="p">:</span> <span class="mh">#fff</span>
|
||||
<span class="c1">// Add a serif family
|
||||
</span><span class="nv">$family-serif</span><span class="p">:</span> <span class="s2">"Merriweather"</span><span class="o">,</span> <span class="s2">"Georgia"</span><span class="o">,</span> <span class="nb">serif</span>
|
||||
|
||||
<span class="c1">// 3. Set the derived variables
|
||||
// Use the new pink as the primary color
|
||||
</span><span class="nv">$primary</span><span class="p">:</span> <span class="nv">$pink</span>
|
||||
<span class="nv">$primary-invert</span><span class="p">:</span> <span class="nv">$pink-invert</span>
|
||||
<span class="c1">// Use the existing orange as the danger color
|
||||
</span><span class="nv">$danger</span><span class="p">:</span> <span class="nv">$orange</span>
|
||||
<span class="c1">// Use the new serif family
|
||||
</span><span class="nv">$family-primary</span><span class="p">:</span> <span class="nv">$family-serif</span>
|
||||
|
||||
<span class="c1">// 4. Import the rest of Bulma
|
||||
</span><span class="k">@import</span> <span class="s">"../bulma"</span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
See the <strong>result</strong>: before and after
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
|
||||
</p>
|
||||
<figure>
|
||||
<img width="640" height="640" src="http://bulma.io/versions/0.5.0/images/customize-before.png" alt="Customizing Bulma with Sass">
|
||||
<img width="640" height="640" src="http://bulma.io/versions/0.5.0/images/customize-after.png" alt="Customizing Bulma with Sass">
|
||||
</figure>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/overview/customize.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
820
docs/versions/0.5.0/documentation/overview/functions/index.html
Normal file
820
docs/versions/0.5.0/documentation/overview/functions/index.html
Normal file
|
|
@ -0,0 +1,820 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Functions | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-overview">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Functions</h1>
|
||||
<h2 class="subtitle">Utility functions to calculate colors and other values</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma uses 5 custom functions to help define the values and colors dynamically:</p>
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 id="findColorInvert" class="title">The <code>findColorInvert()</code> function</h2>
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
|
||||
<ul>
|
||||
<li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
|
||||
<li>otherwise, it outputs <code>#fff</code></li>
|
||||
</ul>
|
||||
<p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>color luminance</th>
|
||||
<th>findColorInvert()</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #00d1b2;"></span>
|
||||
<code>#00d1b2</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.52831</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #3273dc;"></span>
|
||||
<code>#3273dc</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.23119</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #23d160;"></span>
|
||||
<code>#23d160</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.51067</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #ffdd57;"></span>
|
||||
<code>#ffdd57</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.76863</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #ff3860;"></span>
|
||||
<code>#ff3860</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.27313</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #ffb3b3;"></span>
|
||||
<code>#ffb3b3</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.61796</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #ffbc6b;"></span>
|
||||
<code>#ffbc6b</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.63053</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: hsl(294, 71%, 79%);"></span>
|
||||
<code>hsl(294, 71%, 79%)</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.5529</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
|
||||
<br>
|
||||
For example, this shade of <span class="color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
|
||||
</p>
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
with <code>findColorInvert()</code>
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: findColorInvert($purple)</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
with manual setting
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: #fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/overview/functions.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
654
docs/versions/0.5.0/documentation/overview/mixins/index.html
Normal file
654
docs/versions/0.5.0/documentation/overview/mixins/index.html
Normal file
|
|
@ -0,0 +1,654 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Mixins | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-overview">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Mixins</h1>
|
||||
<h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td><code>=arrow($color)</code></td>
|
||||
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=block</code></td>
|
||||
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=clearfix</code></td>
|
||||
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=center($size)</code></td>
|
||||
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=delete</code></td>
|
||||
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=fa($size, $dimensions)</code></td>
|
||||
<td>Sets the style of a Font Awesome icon container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=hamburger($dimensions)</code></td>
|
||||
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=loader</code></td>
|
||||
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overflow-touch</code></td>
|
||||
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overlay($offset: 0)</code></td>
|
||||
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=placeholder</code></td>
|
||||
<td>Sets the styles of an input placeholder.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=unselectable</code></td>
|
||||
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/overview/mixins.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
674
docs/versions/0.5.0/documentation/overview/modular/index.html
Normal file
674
docs/versions/0.5.0/documentation/overview/modular/index.html
Normal file
|
|
@ -0,0 +1,674 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Modularity | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-overview">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Modular</h1>
|
||||
<h2 class="subtitle">Just import what you <strong>need</strong></h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma consists of <strong>29</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
||||
</p>
|
||||
<p>
|
||||
For example, let's say you only want the Bulma <strong>columns.</strong>
|
||||
<br>
|
||||
The file is located in the <code>bulma/sass/grid</code> folder.
|
||||
<br>
|
||||
Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
|
||||
</p>
|
||||
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="k">@import</span> <span class="s">"bulma/sass/utilities/_all"</span>
|
||||
<span class="k">@import</span> <span class="s">"bulma/sass/grid/columns"</span></code></pre></figure>
|
||||
<p>
|
||||
Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
|
||||
</p>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"columns"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>1<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>2<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>3<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>4<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>5<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
What if you only want the <strong>button</strong> styles instead?
|
||||
</p>
|
||||
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="k">@import</span> <span class="s">"bulma/sass/utilities/_all"</span>
|
||||
<span class="k">@import</span> <span class="s">"bulma/sass/elements/button.sass"</span></code></pre></figure>
|
||||
<p>
|
||||
You can now use the <code>.button</code> class, and all its modifiers:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.is-active</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-primary</code>,
|
||||
<code>.is-info</code>,
|
||||
<code>.is-success</code>...
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-small</code>,
|
||||
<code>.is-medium</code>,
|
||||
<code>.is-large</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-outlined</code>,
|
||||
<code>.is-inverted</code>,
|
||||
<code>.is-link</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-loading</code>,
|
||||
<code>[disabled]</code>
|
||||
</li>
|
||||
</ul>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Button
|
||||
<span class="nt"></a></span>
|
||||
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-primary"</span><span class="nt">></span>
|
||||
Primary button
|
||||
<span class="nt"></a></span>
|
||||
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-large"</span><span class="nt">></span>
|
||||
Large button
|
||||
<span class="nt"></a></span>
|
||||
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"button is-loading"</span><span class="nt">></span>
|
||||
Loading button
|
||||
<span class="nt"></a></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/overview/modular.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,776 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Responsiveness | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-overview">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<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">Vertical by default</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
Every element in Bulma is <strong>mobile-first</strong> and optimizes 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>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Breakpoints</h3>
|
||||
<div class="content">
|
||||
<p>Bulma has 5 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>1008px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1200px</code></li>
|
||||
<li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1392px</code></li>
|
||||
</ul>
|
||||
<p>Bulma uses 9 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>1007px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>1007px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop</code><br>
|
||||
from <code>1008px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop-only</code><br>
|
||||
from <code>1008px</code> and until <code>1199px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen</code><br>
|
||||
from <code>1200px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen-only</code><br>
|
||||
from <code>1200px</code> and until <code>1391px</code>
|
||||
</li>
|
||||
<li>
|
||||
<span class="tag is-success">New!</span>
|
||||
<code>=fullhd</code><br>
|
||||
from <code>1392px</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 20%;">
|
||||
Mobile<br>
|
||||
Up to <code>768px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>1007px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Desktop<br>
|
||||
Between <code>1008px</code> and <code>1199px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
Widescreen<br>
|
||||
Between <code>1200px</code> and <code>1391px</code>
|
||||
</th>
|
||||
<th style="width: 20%;">
|
||||
FullHD<br>
|
||||
<code>1392px</code> and above
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification is-success">mobile</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification is-success">tablet</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification is-success">desktop</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification is-success">widescreen</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">fullhd</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">tablet-only</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">desktop-only</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">widescreen-only</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification is-success">touch</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/overview/responsiveness.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
707
docs/versions/0.5.0/documentation/overview/start/index.html
Normal file
707
docs/versions/0.5.0/documentation/overview/start/index.html
Normal file
|
|
@ -0,0 +1,707 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-documentation">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Get started with Bulma | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-documentation page-overview">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuDocumentation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuDocumentation" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary">
|
||||
<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">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a href="/versions/0.5.0/documentation/overview/start/">Overview</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/grid/columns">Grid</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li >
|
||||
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">Components</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://bulma.io/versions/0.5.0/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-tab is-active" href="http://bulma.io/versions/0.5.0/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab " href="http://bulma.io/versions/0.5.0/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Getting started</h1>
|
||||
<h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are several ways to <strong>get started</strong> with Bulma. You can either:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
use <strong>npm</strong> to install the Bulma package
|
||||
</li>
|
||||
<li>
|
||||
use the cdnjs <strong>CDN</strong> to link to the Bulma stylesheet
|
||||
</li>
|
||||
<li>
|
||||
use the <strong>GitHub repository</strong> to get the latest development version
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use <strong>NPM</strong> <em>(recommended)</em>:
|
||||
</p>
|
||||
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">npm install bulma</code></pre></figure>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</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-left">
|
||||
<p class="title is-5">3</p>
|
||||
</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>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"</span><span class="nt">></span></code></pre></figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="starter-template" class="title anchor-title">
|
||||
Starter template
|
||||
<a class="anchor-link" href="#starter-template">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example highlight-full">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
|
||||
<span class="nt"><title></span>Hello Bulma!<span class="nt"></title></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"</span><span class="nt">></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css"</span><span class="nt">></span>
|
||||
<span class="nt"></head></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><section</span> <span class="na">class=</span><span class="s">"section"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"title"</span><span class="nt">></span>
|
||||
Hello World
|
||||
<span class="nt"></h1></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"subtitle"</span><span class="nt">></span>
|
||||
My first website with <span class="nt"><strong></span>Bulma<span class="nt"></strong></span>!
|
||||
<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></section></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span></code></pre></figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<p class="has-text-grey-light">
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo?
|
||||
Or something unclear?
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/documentation/overview/start.html" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1541
docs/versions/0.5.0/documentation/overview/variables/index.html
Normal file
1541
docs/versions/0.5.0/documentation/overview/variables/index.html
Normal file
File diff suppressed because it is too large
Load diff
629
docs/versions/0.5.0/extensions/index.html
Normal file
629
docs/versions/0.5.0/extensions/index.html
Normal file
|
|
@ -0,0 +1,629 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="route-extensions">
|
||||
<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="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<title>Extensions | Bulma v0.5.0: a modern CSS framework based on Flexbox</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://bulma.io/versions/0.5.0/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<link rel="alternate" type="application/rss+xml" title="Bulma v0.5.0: a modern CSS framework based on Flexbox" href="http://bulma.io/versions/0.5.0/feed.xml">
|
||||
|
||||
<meta property="og:url" content="http://bulma.io/versions/0.5.0">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta property="og:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="Bulma v0.5.0: a modern CSS framework based on Flexbox">
|
||||
<meta name="twitter:image" content="http://bulma.io/versions/0.5.0/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="http://bulma.io/versions/0.5.0/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="http://bulma.io/versions/0.5.0/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="http://bulma.io/versions/0.5.0/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="http://bulma.io/versions/0.5.0/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="http://bulma.io/versions/0.5.0/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="http://bulma.io/versions/0.5.0/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
</head>
|
||||
|
||||
<body class="layout-default">
|
||||
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>0.5.0</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar ">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/bulma-logo.png" alt="Bulma v0.5.0: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-burger burger" data-target="navMenuExtensions">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuExtensions" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown ">
|
||||
<a class="navbar-item " href="/versions/0.5.0/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<a class="navbar-item " href="http://bulma.io/versions/0.5.0/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>
|
||||
<p class="is-size-6-desktop">
|
||||
<strong class="has-text-info">0.5.0</strong>
|
||||
</p>
|
||||
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link " href="http://bulma.io/versions/0.5.0/blog/">
|
||||
Blog
|
||||
</a>
|
||||
<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">
|
||||
|
||||
<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">24 Jul 2017</small>
|
||||
</p>
|
||||
<p>Access previous Bulma versions</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2017/03/10/new-field-element/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">10 Mar 2017</small>
|
||||
</p>
|
||||
<p>New field element (for better controls)</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
|
||||
<div class="navbar-content">
|
||||
<p>
|
||||
<small class="has-text-info">11 Apr 2016</small>
|
||||
</p>
|
||||
<p>Metro UI CSS grid with Bulma tiles</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item" href="http://bulma.io/versions/0.5.0/blog/">
|
||||
More posts
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-rss is-small" href="http://bulma.io/versions/0.5.0/atom.xml">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
</div>
|
||||
<div id="moreDropdown" class="navbar-dropdown ">
|
||||
<a class="navbar-item is-active" href="http://bulma.io/versions/0.5.0/extensions/">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>
|
||||
<strong>Extensions</strong>
|
||||
<br>
|
||||
<small>Side projects to enhance Bulma</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-plug"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
<a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a id="twitter"
|
||||
class="button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="http://bulma.io/versions/0.5.0"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma v0.5.0: a modern CSS framework based on Flexbox&url=http://bulma.io/versions/0.5.0&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.0.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="hero is-info">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
<a href="http://bulma.io/versions/0.5.0/blog">Extensions</a>
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Side projects to enhance Bulma
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div id="carbon" class="box">
|
||||
<script>
|
||||
var _0xa6d2 = [
|
||||
'\x73\x63\x72\x69\x70\x74',
|
||||
'\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65',
|
||||
'\x72\x65\x6d\x6f\x76\x65\x43\x68\x69\x6c\x64',
|
||||
'\x73\x70\x6c\x69\x74',
|
||||
'\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74'
|
||||
];
|
||||
(function (_0x2fd559, _0x28dd75) {
|
||||
var _0x78c626 = function (_0x497400) {
|
||||
while (--_0x497400) {
|
||||
_0x2fd559['\x70\x75\x73\x68'](_0x2fd559['\x73\x68\x69\x66\x74']());
|
||||
}
|
||||
};
|
||||
_0x78c626(++_0x28dd75);
|
||||
}(_0xa6d2, 0x125));
|
||||
var _0x2a6d = function (_0x8ed41, _0x381cfd) {
|
||||
_0x8ed41 = _0x8ed41 - 0x0;
|
||||
var _0x546dea = _0xa6d2[_0x8ed41];
|
||||
return _0x546dea;
|
||||
};
|
||||
function __fb(_0x5ea579) {
|
||||
var _0x3142de = '\x30\x7c\x31\x7c\x34\x7c\x33\x7c\x35\x7c\x32'[_0x2a6d('0x0')]('\x7c'), _0x58dc19 = 0x0;
|
||||
while (!![]) {
|
||||
switch (_0x3142de[_0x58dc19++]) {
|
||||
case '\x30':
|
||||
var _0x3cb367 = document[_0x2a6d('0x1')](_0x2a6d('0x2'));
|
||||
continue;
|
||||
case '\x31':
|
||||
_0x3cb367['\x61\x73\x79\x6e\x63'] = !![];
|
||||
continue;
|
||||
case '\x32':
|
||||
_0x5ea579[_0x2a6d('0x3')][_0x2a6d('0x4')](_0x5ea579);
|
||||
continue;
|
||||
case '\x33':
|
||||
_0x3cb367['\x73\x72\x63'] = '\x2f\x2f\x63\x72\x62\x63\x64\x6e\x2e\x6a\x73\x66\x69\x64\x64\x6c\x65\x2e\x6e\x65\x74\x2f\x63\x61\x72\x62\x6f\x6e\x2e\x6a\x73\x3f\x7a\x6f\x6e\x65\x69\x64\x3d\x31\x36\x37\x33\x26\x73\x65\x72\x76\x65\x3d\x43\x36\x41\x49\x4c\x4b\x54\x26\x70\x6c\x61\x63\x65\x6d\x65\x6e\x74\x3d\x62\x75\x6c\x6d\x61\x69\x6f\x26\x63\x64\x3d\x73\x72\x76\x2e\x6a\x74\x2e\x6d\x73';
|
||||
continue;
|
||||
case '\x34':
|
||||
_0x3cb367['\x69\x64'] = _0x5ea579['\x69\x64'];
|
||||
continue;
|
||||
case '\x35':
|
||||
_0x5ea579[_0x2a6d('0x3')]['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](_0x3cb367, _0x5ea579);
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bulmaio" id="_carbonads_js" onerror="__fb(this)"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<a class="box" href="https://github.com/Wikiki/bulma-pageloader">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<h3 class="title is-4">
|
||||
<strong>bulma-pageloader</strong>
|
||||
</h3>
|
||||
<h4 class="subtitle is-6">
|
||||
github.com/Wikiki/bulma-pageloader
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/extensions/bulma-pageloader.png" width="490" height="278">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="box" href="https://github.com/Wikiki/bulma-ribbon">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<h3 class="title is-4">
|
||||
<strong>bulma-ribbon</strong>
|
||||
</h3>
|
||||
<h4 class="subtitle is-6">
|
||||
github.com/Wikiki/bulma-ribbon
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/extensions/bulma-ribbon.png" width="646" height="174">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="box" href="https://github.com/Wikiki/bulma-badge">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<h3 class="title is-4">
|
||||
<strong>bulma-badge</strong>
|
||||
</h3>
|
||||
<h4 class="subtitle is-6">
|
||||
github.com/Wikiki/bulma-badge
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/extensions/bulma-badge.png" width="455" height="133">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="box" href="https://github.com/Wikiki/bulma-steps">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<h3 class="title is-4">
|
||||
<strong>bulma-steps</strong>
|
||||
</h3>
|
||||
<h4 class="subtitle is-6">
|
||||
github.com/Wikiki/bulma-steps
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/extensions/bulma-steps.png" width="989" height="89">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="box" href="https://github.com/Wikiki/bulma-tooltip">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<h3 class="title is-4">
|
||||
<strong>bulma-tooltip</strong>
|
||||
</h3>
|
||||
<h4 class="subtitle is-6">
|
||||
github.com/Wikiki/bulma-tooltip
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/extensions/bulma-tooltip.png" width="215" height="55">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="box" href="https://github.com/Wikiki/bulma-timeline">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<h3 class="title is-4">
|
||||
<strong>bulma-timeline</strong>
|
||||
</h3>
|
||||
<h4 class="subtitle is-6">
|
||||
github.com/Wikiki/bulma-timeline
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/extensions/bulma-timeline.png" width="435" height="228">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<div class="message">
|
||||
<div class="message-body">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>Have an extension to share with the community?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/pulls">
|
||||
Submit a Pull Request
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||||
|
||||
<section class="hero is-info bsa">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<p class="title">Bulma <strong>Partners</strong></p>
|
||||
<p class="subtitle">Check out their products!</p>
|
||||
</div>
|
||||
|
||||
<div class="column is-8">
|
||||
<div class="bsa-cpc"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||||
_bsa.init('default', 'CVAIKK3E', 'placement:bulmaio', {
|
||||
target: '.bsa-cpc',
|
||||
align: 'horizontal',
|
||||
disable_css: 'true'
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<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="field is-grouped">
|
||||
<div class="control has-icons-left is-expanded">
|
||||
<input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</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="columns">
|
||||
<div class="column is-3">
|
||||
<div id="about" class="content">
|
||||
<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>.
|
||||
|
||||
<div class="twitter-container">
|
||||
<a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div id="share" class="content">
|
||||
<div>
|
||||
<strong>Support</strong> and share the love!
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Bulma v0.5.0: a modern CSS framework based on Flexbox" data-url="http://bulma.io/versions/0.5.0" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
|
||||
|
||||
<form class="paypal-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="http://bulma.io/versions/0.5.0/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
|
||||
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
|
||||
</form>
|
||||
|
||||
<div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div id="sister">
|
||||
<p>
|
||||
More <strong>helpful</strong> tools:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://cssreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/css-reference-logo.png" alt="CSS Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://htmlreference.io">
|
||||
<img src="http://bulma.io/versions/0.5.0/images/html-reference-logo.png" alt="HTML Reference logo">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="tsp">
|
||||
<small>
|
||||
Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<br>
|
||||
Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="http://bulma.io/versions/0.5.0/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="http://bulma.io/versions/0.5.0/lib/main.js"></script>
|
||||
|
||||
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script async defer type="text/javascript">(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.async = true;
|
||||
js.defer = true;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(function() {
|
||||
window.fnames = new Array();
|
||||
window.ftypes = new Array();
|
||||
fnames[0]='EMAIL';
|
||||
ftypes[0]='email';
|
||||
}());
|
||||
// var $mcj = window.jQuery.noConflict(true);
|
||||
</script>
|
||||
|
||||
<script async defer type="text/javascript">
|
||||
(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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
docs/versions/0.5.0/favicons/android-chrome-192x192.png
Normal file
BIN
docs/versions/0.5.0/favicons/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
docs/versions/0.5.0/favicons/android-chrome-384x384.png
Normal file
BIN
docs/versions/0.5.0/favicons/android-chrome-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
docs/versions/0.5.0/favicons/apple-touch-icon.png
Normal file
BIN
docs/versions/0.5.0/favicons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
9
docs/versions/0.5.0/favicons/browserconfig.xml
Normal file
9
docs/versions/0.5.0/favicons/browserconfig.xml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/favicons/mstile-150x150.png?v=201701041855"/>
|
||||
<TileColor>#00d1b2</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
BIN
docs/versions/0.5.0/favicons/favicon-16x16.png
Normal file
BIN
docs/versions/0.5.0/favicons/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
docs/versions/0.5.0/favicons/favicon-32x32.png
Normal file
BIN
docs/versions/0.5.0/favicons/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
docs/versions/0.5.0/favicons/favicon.ico
Normal file
BIN
docs/versions/0.5.0/favicons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
17
docs/versions/0.5.0/favicons/manifest.json
Normal file
17
docs/versions/0.5.0/favicons/manifest.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "\/favicons\/android-chrome-192x192.png?v=201701041855",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png"
|
||||
},
|
||||
{
|
||||
"src": "\/favicons\/android-chrome-384x384.png?v=201701041855",
|
||||
"sizes": "384x384",
|
||||
"type": "image\/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#00d1b2",
|
||||
"display": "standalone"
|
||||
}
|
||||
BIN
docs/versions/0.5.0/favicons/mstile-150x150.png
Normal file
BIN
docs/versions/0.5.0/favicons/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
19
docs/versions/0.5.0/favicons/safari-pinned-tab.svg
Normal file
19
docs/versions/0.5.0/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="480.000000pt" height="480.000000pt" viewBox="0 0 480.000000 480.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,480.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M1756 4200 l-598 -598 -58 -408 c-32 -225 -61 -427 -64 -449 -3 -22
|
||||
-12 -85 -20 -140 -8 -55 -17 -118 -20 -140 -3 -22 -13 -89 -21 -150 -9 -60
|
||||
-18 -123 -20 -140 -3 -16 -23 -156 -45 -310 -21 -154 -42 -300 -45 -325 l-5
|
||||
-45 749 -748 c523 -522 754 -746 763 -741 7 4 413 275 902 601 l890 593 -595
|
||||
594 c-327 327 -594 600 -594 606 0 6 200 211 444 456 l445 444 -740 740 c-406
|
||||
407 -746 745 -754 750 -12 7 -147 -122 -614 -590z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 946 B |
BIN
docs/versions/0.5.0/images/blog/metro-ui-css-grid-tiles.png
Normal file
BIN
docs/versions/0.5.0/images/blog/metro-ui-css-grid-tiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
BIN
docs/versions/0.5.0/images/bulma-banner.png
Normal file
BIN
docs/versions/0.5.0/images/bulma-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
docs/versions/0.5.0/images/bulma-icon.png
Normal file
BIN
docs/versions/0.5.0/images/bulma-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
docs/versions/0.5.0/images/bulma-logo.png
Normal file
BIN
docs/versions/0.5.0/images/bulma-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/versions/0.5.0/images/bulma-type-white.png
Normal file
BIN
docs/versions/0.5.0/images/bulma-type-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
docs/versions/0.5.0/images/bulma-type.png
Normal file
BIN
docs/versions/0.5.0/images/bulma-type.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/versions/0.5.0/images/css-reference-logo.png
Normal file
BIN
docs/versions/0.5.0/images/css-reference-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
docs/versions/0.5.0/images/customize-after.png
Normal file
BIN
docs/versions/0.5.0/images/customize-after.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
docs/versions/0.5.0/images/customize-before.png
Normal file
BIN
docs/versions/0.5.0/images/customize-before.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
docs/versions/0.5.0/images/extensions/bulma-badge.png
Normal file
BIN
docs/versions/0.5.0/images/extensions/bulma-badge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
docs/versions/0.5.0/images/extensions/bulma-pageloader.png
Normal file
BIN
docs/versions/0.5.0/images/extensions/bulma-pageloader.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
docs/versions/0.5.0/images/extensions/bulma-ribbon.png
Normal file
BIN
docs/versions/0.5.0/images/extensions/bulma-ribbon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/versions/0.5.0/images/extensions/bulma-steps.png
Normal file
BIN
docs/versions/0.5.0/images/extensions/bulma-steps.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/versions/0.5.0/images/extensions/bulma-timeline.png
Normal file
BIN
docs/versions/0.5.0/images/extensions/bulma-timeline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
docs/versions/0.5.0/images/extensions/bulma-tooltip.png
Normal file
BIN
docs/versions/0.5.0/images/extensions/bulma-tooltip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/versions/0.5.0/images/html-reference-logo.png
Normal file
BIN
docs/versions/0.5.0/images/html-reference-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
docs/versions/0.5.0/images/jgthms.png
Normal file
BIN
docs/versions/0.5.0/images/jgthms.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/versions/0.5.0/images/paypal-donate.png
Normal file
BIN
docs/versions/0.5.0/images/paypal-donate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
docs/versions/0.5.0/images/placeholders/1280x960.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/1280x960.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/versions/0.5.0/images/placeholders/128x128.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
docs/versions/0.5.0/images/placeholders/16x16.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/versions/0.5.0/images/placeholders/24x24.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/24x24.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/versions/0.5.0/images/placeholders/256x256.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
BIN
docs/versions/0.5.0/images/placeholders/300x225.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/300x225.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
docs/versions/0.5.0/images/placeholders/32x32.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
docs/versions/0.5.0/images/placeholders/480x320.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/480x320.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
docs/versions/0.5.0/images/placeholders/480x480.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/480x480.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/versions/0.5.0/images/placeholders/48x48.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/48x48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
BIN
docs/versions/0.5.0/images/placeholders/640x320.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/640x320.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/versions/0.5.0/images/placeholders/640x360.png
Normal file
BIN
docs/versions/0.5.0/images/placeholders/640x360.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue