# Meta
-title: "Bulma: a modern CSS framework based on Flexbox"
-description: "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free."
env: "production"
# Build
--- /dev/null
+{
+ "title": "Bulma: a modern CSS framework based on Flexbox",
+ "description": "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
+ "documentation": "/documentation/overview/start/",
+ "download": "https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip",
+ "github": "https://github.com/jgthms/bulma",
+ "twitter": "https://twitter.com/jgthms",
+ "version": "0.6.2",
+ "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
+ "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf"
+}
\ No newline at end of file
--- /dev/null
+<section id="bulma-book" class="bd-book-banner hero is-medium">
+ <div class="bd-book-pattern"></div>
+ <div class="hero-body">
+ <div class="container">
+ <div class="bd-book-columns">
+ <div class="bd-book-column bd-is-cover">
+ {% include book-cover.html %}
+ </div>
+ <div class="bd-book-column bd-is-content">
+ {% include book-content.html %}
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
\ No newline at end of file
--- /dev/null
+<div class="bd-book-content">
+ <header class="block bd-book-header">
+ <strong class="tag is-success">New!</strong>
+ <h3 class="title">The official Bulma book! 😲</h3>
+ <p class="subtitle is-6 has-text-grey">by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,<br>Mikko Lauhakari, Aslam Shah and David Berning</p>
+ </header>
+ <div class="block bd-book-description is-size-5">
+ <p>A <strong>step-by-step guide</strong> that teaches you how to build a <strong>web interface from scratch</strong> using Bulma.</p>
+ </div>
+ <div class="bd-book-tags">
+ <div class="field is-grouped is-grouped-multiline">
+ <div class="control">
+ <span class="tag is-white has-text-grey is-paddingless">Formats included:</span>
+ </div>
+ <div class="control">
+ <div class="tags has-addons">
+ <strong class="tag has-text-danger">PDF</strong>
+ <strong class="tag has-text-info">Epub</strong>
+ <strong class="tag has-text-success">Mobi</strong>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="block bd-book-buttons">
+ <div class="buttons">
+ <a class="button is-danger is-large" href="{{ site.data.meta.book_url }}" target="_blank" rel="nofollow">
+ <span>
+ <strong>Buy</strong> the book
+ </span>
+ </a>
+ <a class="button is-light is-large" href="{{ site.data.meta.book_sample }}" target="_blank" rel="nofollow">
+ <span>
+ <span>Get</span>
+ <strong>free sample</strong>
+ </span>
+ </a>
+ </div>
+ </div>
+</div>
--- /dev/null
+<div class="bd-book-cover">
+ <a href="{{ site.data.meta.book_url }}" target="_blank">
+ {%
+ include elements/responsive-image.html
+ path="book/book-cover"
+ extension="png"
+ alt="The official Bulma book cover"
+ width="300"
+ height="380"
+ %}
+ </a>
+</div>
\ No newline at end of file
{% if site.deprecated %}
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
<p>
- You are viewing the deprecated <strong>{{site.version}}</strong> version of the website.
+ You are viewing the deprecated <strong>{{site.data.meta.version}}</strong> version of the website.
<a href="/">Click here to view the latest version</a>
</p>
</div>
--- /dev/null
+<img
+ src="{{ site.url }}/images/{{ include.path }}.{{ include.extension }}"
+ srcset="{{ site.url }}/images/{{ include.path }}.{{ include.extension }} 1x,
+ {{ site.url }}/images/{{ include.path }}@2x.{{ include.extension }} 2x"
+ alt="{{ include.alt }}"
+ width="{{ include.width }}"
+ height="{{ include.height }}">
data-social-action="tweet"
data-social-target="{{ site.url }}"
target="_blank"
- href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&hashtags=bulmaio&url={{ site.url }}&via=jgthms">
+ href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&hashtags=bulmaio&url={{ site.url }}&via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
+{% include book-banner.html %}
+
{% include bsa.html %}
{% include newsletter.html %}
<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="https://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
<div class="twitter-container">
- <a href="{{ site.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
+ <a href="{{ site.data.meta.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
</div>
<p id="alternative">
<a href="{{ site.url }}/alternative-to-bootstrap/">An alternative to <strong>Bootstrap</strong></a>
<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="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
+ <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
<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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/{{ site.version }}/css/bulma.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/{{ site.data.meta.version }}/css/bulma.min.css">
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
</head>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+ <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
- <title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}{% endif %}</title>
+ <title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.data.meta.title }}{% endif %}</title>
{% if page.fontawesome4 %}
<link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
- <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
+ <link rel="alternate" type="application/rss+xml" title="{{ site.data.meta.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
<meta property="og:url" content="{{ site.url }}">
<meta property="og:type" content="website">
<meta property="og:title" content="{{ page.title | replace: ' ', ' ' }}">
<meta name="twitter:title" content="{{ page.title | replace: ' ', ' ' }}">
{% else %}
- <meta property="og:title" content="{{ site.title }}">
- <meta name="twitter:title" content="{{ site.title }}">
+ <meta property="og:title" content="{{ site.data.meta.title }}">
+ <meta name="twitter:title" content="{{ site.data.meta.title }}">
{% endif %}
{% if page.share_description %}
<meta property="og:description" content="{{ page.content | strip_html | truncate: 400, '…' }}">
<meta name="twitter:description" content="{{ page.content | strip_html | truncate: 400, '…' }}">
{% else %}
- <meta property="og:description" content="{{ site.description }}">
- <meta name="twitter:description" content="{{ site.description }}">
+ <meta property="og:description" content="{{ site.data.meta.description }}">
+ <meta name="twitter:description" content="{{ site.data.meta.description }}">
{% endif %}
{% if page.share_image %}
<nav class="nav">
<div class="nav-left">
<a class="nav-item is-brand" href="{{ site.url }}">
- <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+ <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
</div>
<div class="nav-center">
- <a class="nav-item" href="{{ site.github }}">
+ <a class="nav-item" href="{{ site.data.meta.github }}">
<span class="icon">
<i class="fab fa-github"></i>
</span>
</a>
- <a class="nav-item" href="{{ site.twitter }}">
+ <a class="nav-item" href="{{ site.data.meta.twitter }}">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>Templates</span>
<span class="tag is-small is-success">New!</span>
</a>
- <a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
+ <a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
Documentation
</a>
<a class="nav-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
data-social-action="tweet"
data-social-target="{{ site.url }}"
target="_blank"
- href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
+ href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&url={{ site.url }}&via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
</a>
</p>
<p class="control">
- <a class="button is-primary" href="{{ site.download }}">
+ <a class="button is-primary" href="{{ site.data.meta.download }}">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<pre id="npm" class="intro-npm"><code>{{ npmInstall }}</code><code id="npmCopy" class="intro-npm-copy" data-clipboard-text="{{ npmInstall }}">copy</code></pre>
<nav class="intro-buttons">
- <a class="button is-primary is-large" href="{{ site.download }}">
+ <a class="button is-primary is-large" href="{{ site.data.meta.download }}">
<span>
<strong>Download</strong>
- <small>v{{ site.version }}</small>
+ <small>v{{ site.data.meta.version }}</small>
</span>
</a>
- <a class="button is-light is-large" href="{{ site.documentation }}">
+ <a class="button is-light is-large" href="{{ site.data.meta.documentation }}">
<span>
<span>View</span>
<strong>docs</strong>
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
- <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+ <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
- <a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
+ <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github"></i>
</span>
</a>
- <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
+ <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fab fa-lg fa-twitter"></i>
</span>
<div id="navMenu{{ include.id }}" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
- <a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
+ <a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
Docs
</a>
<div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
- <a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.documentation }}">
+ <a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
Overview
</a>
<a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
<div class="navbar-item">
<div>
<p class="is-size-6-desktop">
- <strong>{{ site.version }}</strong>
+ <strong>{{ site.data.meta.version }}</strong>
</p>
{{#unless site.deprecated}}
<small>
</div>
<div class="navbar-end">
- <a class="navbar-item is-hidden-desktop-only" href="{{ site.github }}" target="_blank">
+ <a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github"></i>
</span>
</a>
- <a class="navbar-item is-hidden-desktop-only" href="{{ site.twitter }}" target="_blank">
+ <a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fab fa-lg fa-twitter"></i>
</span>
{% include elements/tw-button.html label="Tweet" %}
</p>
<p class="control">
- <a class="button is-primary" href="{{ site.download }}">
+ <a class="button is-primary" href="{{ site.data.meta.download }}">
<span class="icon">
<i class="fas fa-download"></i>
</span>
--- /dev/null
+<nav class="navbar has-shadow">
+ <div class="container">
+ <div class="navbar-tabs">
+ <a class="navbar-item is-tab {% if page.doc-subtab == 'basics' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
+ Basics
+ </a>
+ <a class="navbar-item is-tab {% if page.doc-subtab == 'sizes' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/sizes/">
+ Sizes
+ </a>
+ <a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/responsiveness/">
+ Responsiveness
+ </a>
+ <a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
+ Nesting
+ </a>
+ <a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
+ Gap
+ </a>
+ <a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
+ Options
+ </a>
+ </div>
+ </div>
+</nav>
const navbarTopEl = document.getElementById('navbar');
const navbarBottomEl = document.getElementById('navbarBottom');
const fixBottomEl = document.getElementById('navbarFixBottom');
- const fixBottomElIcon = fixBottomEl.querySelector('.fa');
+ const fixBottomElText = document.getElementById('navbarFixBottomText');
let fixedBottom = false;
fixBottomEl.addEventListener('click', event => {
if (fixedBottom) {
fixBottomEl.className = 'button is-success';
- fixBottomElIcon.className = 'far fa-check-square';
+ fixBottomElText.innerHTML = 'Hide';
rootEl.classList.add('has-navbar-fixed-bottom');
navbarBottomEl.classList.remove('is-hidden');
} else {
fixBottomEl.className = 'button is-link';
- fixBottomElIcon.className = 'far fa-square';
+ fixBottomElText.innerHTML = 'Show';
rootEl.classList.remove('has-navbar-fixed-bottom');
navbarBottomEl.classList.add('is-hidden');
}
<nav class="tabs is-boxed">
<ul>
<li {% if page.doc-tab == 'overview' %}class="is-active"{% endif %}>
- <a href="{{ site.documentation }}">Overview</a>
+ <a href="{{ site.data.meta.documentation }}">Overview</a>
</li>
<li {% if page.doc-tab == 'modifiers' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/modifiers/syntax">Modifiers</a>
--- /dev/null
+$book-beige: #FFEDD7
+
+.bd-book-banner
+ background-color: $white
+ position: relative
+
+.bd-book-pattern
+ +overlay
+ background-image: url("/images/hab/lightpaperfibers_@2X.png")
+ background-repeat: repeat
+ background-size: 250px 150px
+ &::after
+ +overlay
+ background-color: rgba($book-beige, 0.1)
+ content: ""
+ display: block
+
+.bd-book-header
+ position: relative
+
+.bd-book-cover
+ img
+ display: block
+
+.bd-book-content
+ background-color: $white
+ box-shadow: 0 40px 40px -20px rgba($black, 0.1)
+ max-width: 520px
+ padding: 3rem
+
+.bd-book-description
+ max-width: 340px
+
+.bd-book-tags
+ margin-bottom: 3rem
+ .tags
+ .tag
+ margin-right: 1px
+
+.bd-book-columns
+ align-items: center
+ display: flex
+ justify-content: center
+ margin-left: auto
+ margin-right: auto
+ max-width: 1080px
+
++mobile
+ .bd-book-columns
+ flex-direction: column
+
++tablet
+ .bd-book-columns
+ justify-content: space-around
+ .bd-book-header
+ .tag
+ position: absolute
+ right: calc(100% + 1.25rem)
+ top: 0.5rem
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+ <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
<title>Bulma: an alternative to Bootstrap</title>
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
- <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
+ <link rel="alternate" type="application/rss+xml" title="{{ site.data.meta.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
<meta property="og:url" content="{{site.url}}">
<meta property="og:type" content="website">
- <meta property="og:title" content="{{site.title}}">
+ <meta property="og:title" content="{{site.data.meta.title}}">
<meta property="og:image" content="{{site.url}}/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="{{site.description}}">
+ <meta property="og:description" content="{{site.data.meta.description}}">
<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="{{site.title}}">
+ <meta name="twitter:title" content="{{site.data.meta.title}}">
<meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png">
- <meta name="twitter:description" content="{{site.description}}">
+ <meta name="twitter:description" content="{{site.data.meta.description}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201701041855">
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
- <title>{{ site.title | xml_escape }}</title>
- <description>{% if site.description %}{{ site.description | xml_escape }}{% endif %}</description>
+ <title>{{ site.data.meta.title | xml_escape }}</title>
+ <description>{% if site.data.meta.description %}{{ site.data.meta.description | xml_escape }}{% endif %}</description>
<link>{{ site.url }}</link>
<id>{{ site.url }}</id>
<updated>{{ site.time | date_to_xmlschema }}</updated>
<author>
- <name>{{ site.title }}</name>
+ <name>{{ site.data.meta.title }}</name>
<email>bbxdesign@gmail.com</email>
</author>
<atom:link href="{{ site.url }}/atom.xml" rel="self" type="application/rss+xml" />
@import "./_sass/klmn"
@import "./_sass/patreon"
@import "./_sass/sponsors"
+@import "./_sass/book"
width: 200px;
}
+.bd-book-banner {
+ background-color: white;
+ position: relative;
+}
+
+.bd-book-pattern {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ background-image: url("/images/hab/lightpaperfibers_@2X.png");
+ background-repeat: repeat;
+ background-size: 250px 150px;
+}
+
+.bd-book-pattern::after {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ background-color: rgba(255, 237, 215, 0.1);
+ content: "";
+ display: block;
+}
+
+.bd-book-header {
+ position: relative;
+}
+
+.bd-book-cover img {
+ display: block;
+}
+
+.bd-book-content {
+ background-color: white;
+ -webkit-box-shadow: 0 40px 40px -20px rgba(10, 10, 10, 0.1);
+ box-shadow: 0 40px 40px -20px rgba(10, 10, 10, 0.1);
+ max-width: 520px;
+ padding: 3rem;
+}
+
+.bd-book-description {
+ max-width: 340px;
+}
+
+.bd-book-tags {
+ margin-bottom: 3rem;
+}
+
+.bd-book-tags .tags .tag {
+ margin-right: 1px;
+}
+
+.bd-book-columns {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1080px;
+}
+
+@media screen and (max-width: 768px) {
+ .bd-book-columns {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+}
+
+@media screen and (min-width: 769px), print {
+ .bd-book-columns {
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+ }
+ .bd-book-header .tag {
+ position: absolute;
+ right: calc(100% + 1.25rem);
+ top: 0.5rem;
+ }
+}
+
/*# sourceMappingURL=bulma-docs.css.map */
\ No newline at end of file
</div>
{% endcapture %}
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
<section class="section">
<div class="container">
doc-subtab: nesting
---
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-columns.html %}
+{% include subnav/subnav-columns.html %}
<section class="section">
<div class="container">
doc-subtab: breadcrumb
---
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
{% capture breadcrumb_example %}
<nav class="breadcrumb" aria-label="breadcrumbs">
</div>
{% endcapture %}
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
</aside>
{% endcapture %}
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
{% endfor %}
{% endcapture %}
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
doc-subtab: nav
---
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
doc-subtab: navbar
---
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
{% capture navbar_example %}
{% include examples/navbar.html id="Default" %}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
- <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+ <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
<div class="navbar-burger">
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
{% capture navbar_dropdown_default_example %}
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
- <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+ <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
<div class="navbar-item has-dropdown is-active">
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
{% capture navbar_dropdown_boxed_example %}
<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
- <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+ <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
<div class="navbar-item has-dropdown is-active">
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
{% capture navbar_dropdown_item_active_example %}
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item">
- <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+ <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
<div class="navbar-item has-dropdown is-active">
</a>
<hr class="navbar-divider">
<div class="navbar-item">
- Version {{ site.version }}
+ Version {{ site.data.meta.version }}
</div>
</div>
</div>
<div id="navbarToggles" class="buttons">
<a id="navbarFixBottom" class="button is-link">
- <span class="icon">
- <i class="far fa-square"></i>
- </span>
- <span>Show <strong>bottom</strong> navbar</span>
+ <span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
</a>
</div>
</nav>
{% endcapture %}
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
</nav>
{% endcapture %}
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-components.html %}
+{% include subnav/subnav-components.html %}
<section class="section">
<div class="container">
doc-subtab: box
---
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
{% capture box_example %}
<div class="box">
</div>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
</article>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
</span>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
</figure>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
{% endfor %}
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
<progress class="progress is-large" value="60" max="100">60%</progress>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
</table>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
{% capture tags_blog_addons %}
<div class="field is-grouped is-grouped-multiline">
<p class="subtitle is-5">Subtitle 5</p>
{% endcapture %}
-{% include subnav-elements.html %}
+{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
</label>
{% endcapture %}
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
<section class="section">
<div class="container">
<div class="content">
<p>
- You can use <a href="{{ site.github | append: '/blob/master/sass/elements/form.sass#L25,L36' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+ You can use <a href="{{ site.data.meta.github | append: '/blob/master/sass/elements/form.sass#L25,L36' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
</p>
</div>
</div>
{% endcapture %}
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
<section class="section">
<div class="container">
<div class="content">
<p>
- You can use <a href="{{ site.github | append: '/blob/master/sass/elements/form.sass#L1,L23' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+ You can use <a href="{{ site.data.meta.github | append: '/blob/master/sass/elements/form.sass#L1,L23' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
</p>
</div>
</div>
{% endcapture %}
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-form.html %}
+{% include subnav/subnav-form.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-grid.html %}
+{% include subnav/subnav-grid.html %}
<section class="section">
<div class="container">
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/layout/tiles/">
-{% include subnav-grid.html %}
+{% include subnav/subnav-grid.html %}
<section class="section">
<div class="container">
</div>
{% endcapture %}
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
doc-subtab: footer
---
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
{% capture footer_example %}
<footer class="footer">
doc-subtab: hero
---
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
</nav>
{% endcapture %}
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
</article>
{% endcapture %}
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
doc-subtab: section
---
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
doc-subtab: tiles
---
-{% include subnav-layout.html %}
+{% include subnav/subnav-layout.html %}
<section class="section">
<div class="container">
doc-subtab: helpers
---
-{% include subnav-modifiers.html %}
+{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
</td>
{% endcapture %}
-{% include subnav-modifiers.html %}
+{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
doc-subtab: syntax
---
-{% include subnav-modifiers.html %}
+{% include subnav/subnav-modifiers.html %}
{% capture button_example %}
<a class="button">
</td>
{% endcapture %}
-{% include subnav-modifiers.html %}
+{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
doc-subtab: classes
---
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
- danger
---
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
@import "../bulma";
{% endcapture %}
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
doc-subtab: functions
---
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
doc-subtab: mixins
---
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
doc-subtab: modular
---
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
- fullhd
---
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
{% include anchor.html name="Breakpoints" %}
- {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.github %}
- {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.github %}
+ {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
+ {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
<div class="content">
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
doc-subtab: start
---
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
doc-subtab: variables
---
-{% include subnav-overview.html %}
+{% include subnav/subnav-overview.html %}
<section class="section">
<div class="container">
<p class="title is-4" style="margin-top: 0.5em;"><strong>Modern</strong></p>
<p class="subtitle">Built with <strong>Flexbox</strong></p>
</a>
- <a class="column has-text-centered" href="{{ site.github }}">
+ <a class="column has-text-centered" href="{{ site.data.meta.github }}">
<span class="icon is-large">
<i class="fab fa-3x fa-github"></i>
</span>
<div class="container">
<p class="title has-text-centered">Get started</p>
<div class="hero-buttons">
- <a class="button is-link is-large" href="{{ site.documentation }}">
+ <a class="button is-link is-large" href="{{ site.data.meta.documentation }}">
<span class="icon">
<i class="fas fa-book"></i>
</span>
<span>Check the <strong>docs</strong></span>
</a>
- <a class="button is-black is-large" href="{{ site.github }}">
+ <a class="button is-black is-large" href="{{ site.data.meta.github }}">
<span class="icon">
<i class="fab fa-github"></i>
</span>
var navbarTopEl = document.getElementById('navbar');
var navbarBottomEl = document.getElementById('navbarBottom');
var fixBottomEl = document.getElementById('navbarFixBottom');
- var fixBottomElIcon = fixBottomEl.querySelector('.fa');
+ var fixBottomElText = document.getElementById('navbarFixBottomText');
var fixedBottom = false;
fixBottomEl.addEventListener('click', function (event) {
if (fixedBottom) {
fixBottomEl.className = 'button is-success';
- fixBottomElIcon.className = 'far fa-check-square';
+ fixBottomElText.innerHTML = 'Hide';
rootEl.classList.add('has-navbar-fixed-bottom');
navbarBottomEl.classList.remove('is-hidden');
} else {
fixBottomEl.className = 'button is-link';
- fixBottomElIcon.className = 'far fa-square';
+ fixBottomElText.innerHTML = 'Show';
rootEl.classList.remove('has-navbar-fixed-bottom');
navbarBottomEl.classList.add('is-hidden');
}