mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add Bulma book
This commit is contained in:
Jeremy Thomas
parent
56e63c9afa
commit
7c9f0a76dc
@ -1,7 +1,5 @@
|
||||
# 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
|
||||
|
||||
11
docs/_data/meta.json
Normal file
11
docs/_data/meta.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
15
docs/_includes/book-banner.html
Normal file
15
docs/_includes/book-banner.html
Normal file
@ -0,0 +1,15 @@
|
||||
<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>
|
||||
39
docs/_includes/book-content.html
Normal file
39
docs/_includes/book-content.html
Normal file
@ -0,0 +1,39 @@
|
||||
<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>
|
||||
12
docs/_includes/book-cover.html
Normal file
12
docs/_includes/book-cover.html
Normal file
@ -0,0 +1,12 @@
|
||||
<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>
|
||||
@ -1,7 +1,7 @@
|
||||
{% 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>
|
||||
|
||||
7
docs/_includes/elements/responsive-image.html
Normal file
7
docs/_includes/elements/responsive-image.html
Normal file
@ -0,0 +1,7 @@
|
||||
<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 }}">
|
||||
@ -3,7 +3,7 @@
|
||||
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>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
{% include book-banner.html %}
|
||||
|
||||
{% include bsa.html %}
|
||||
|
||||
{% include newsletter.html %}
|
||||
@ -9,7 +11,7 @@
|
||||
<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>
|
||||
@ -24,7 +26,7 @@
|
||||
<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>
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<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>
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<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 }}">
|
||||
@ -21,7 +21,7 @@
|
||||
<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">
|
||||
@ -42,8 +42,8 @@
|
||||
<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 %}
|
||||
@ -53,8 +53,8 @@
|
||||
<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 %}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<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>
|
||||
@ -32,7 +32,7 @@
|
||||
<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/">
|
||||
@ -48,7 +48,7 @@
|
||||
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>
|
||||
@ -56,7 +56,7 @@
|
||||
</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>
|
||||
|
||||
@ -18,13 +18,13 @@
|
||||
<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>
|
||||
|
||||
@ -5,16 +5,16 @@
|
||||
|
||||
<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>
|
||||
@ -30,11 +30,11 @@
|
||||
<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/">
|
||||
@ -59,7 +59,7 @@
|
||||
<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>
|
||||
@ -214,12 +214,12 @@
|
||||
</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>
|
||||
@ -243,7 +243,7 @@
|
||||
{% 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>
|
||||
|
||||
24
docs/_includes/subnav/subnav-columns.html
Normal file
24
docs/_includes/subnav/subnav-columns.html
Normal file
@ -0,0 +1,24 @@
|
||||
<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>
|
||||
@ -4,7 +4,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
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 => {
|
||||
@ -12,12 +12,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ route: documentation
|
||||
<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>
|
||||
|
||||
59
docs/_sass/book.sass
Normal file
59
docs/_sass/book.sass
Normal file
@ -0,0 +1,59 @@
|
||||
$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
|
||||
@ -52,30 +52,30 @@ bootstrap:
|
||||
<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">
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
<?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" />
|
||||
|
||||
@ -26,3 +26,4 @@ $fortyfour: #5f45bb
|
||||
@import "./_sass/klmn"
|
||||
@import "./_sass/patreon"
|
||||
@import "./_sass/sponsors"
|
||||
@import "./_sass/book"
|
||||
|
||||
@ -13474,4 +13474,95 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
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 */
|
||||
@ -22,7 +22,7 @@ doc-subtab: basics
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-columns.html %}
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -79,7 +79,7 @@ doc-subtab: gap
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-columns.html %}
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: columns
|
||||
doc-subtab: nesting
|
||||
---
|
||||
|
||||
{% include subnav-columns.html %}
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -83,7 +83,7 @@ doc-subtab: options
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-columns.html %}
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -37,7 +37,7 @@ doc-subtab: responsiveness
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-columns.html %}
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -95,7 +95,7 @@ doc-subtab: sizes
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-columns.html %}
|
||||
{% include subnav/subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: components
|
||||
doc-subtab: breadcrumb
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
{% capture breadcrumb_example %}
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
|
||||
@ -89,7 +89,7 @@ doc-subtab: card
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -188,7 +188,7 @@ doc-subtab: dropdown
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -42,7 +42,7 @@ doc-subtab: menu
|
||||
</aside>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -108,7 +108,7 @@ doc-subtab: message
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -46,7 +46,7 @@ doc-subtab: modal
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -4,7 +4,7 @@ doc-tab: components
|
||||
doc-subtab: nav
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: components
|
||||
doc-subtab: navbar
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
{% capture navbar_example %}
|
||||
{% include examples/navbar.html id="Default" %}
|
||||
@ -31,7 +31,7 @@ doc-subtab: navbar
|
||||
<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">
|
||||
@ -154,7 +154,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -186,7 +186,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -218,7 +218,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -252,7 +252,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -276,7 +276,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -341,7 +341,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -353,7 +353,7 @@ doc-subtab: navbar
|
||||
{% 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">
|
||||
@ -373,7 +373,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -394,7 +394,7 @@ doc-subtab: navbar
|
||||
{% 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">
|
||||
@ -414,7 +414,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -435,7 +435,7 @@ doc-subtab: navbar
|
||||
{% 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">
|
||||
@ -455,7 +455,7 @@ doc-subtab: navbar
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
Version {{ site.version }}
|
||||
Version {{ site.data.meta.version }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -829,10 +829,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@ -149,7 +149,7 @@ doc-subtab: pagination
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -73,7 +73,7 @@ doc-subtab: panel
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -344,7 +344,7 @@ doc-subtab: tabs
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-components.html %}
|
||||
{% include subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: elements
|
||||
doc-subtab: box
|
||||
---
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
{% capture box_example %}
|
||||
<div class="box">
|
||||
|
||||
@ -448,7 +448,7 @@ doc-subtab: button
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -101,7 +101,7 @@ doc-subtab: content
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -40,7 +40,7 @@ doc-subtab: delete
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -48,7 +48,7 @@ doc-subtab: icon
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -25,7 +25,7 @@ dimensions:
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -25,7 +25,7 @@ doc-subtab: notification
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -25,7 +25,7 @@ doc-subtab: progress
|
||||
<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">
|
||||
|
||||
@ -305,7 +305,7 @@ doc-subtab: table
|
||||
</table>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -124,7 +124,7 @@ doc-subtab: tag
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
{% capture tags_blog_addons %}
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
|
||||
@ -50,7 +50,7 @@ doc-subtab: title
|
||||
<p class="subtitle is-5">Subtitle 5</p>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -26,7 +26,7 @@ doc-subtab: checkbox
|
||||
</label>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
{% include subnav/subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -527,7 +527,7 @@ variables_keys:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
{% include subnav/subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
@ -743,7 +743,7 @@ variables_keys:
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@ -795,7 +795,7 @@ variables_form_keys:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
{% include subnav/subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -239,7 +239,7 @@ variables_keys:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
{% include subnav/subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
@ -490,7 +490,7 @@ variables_keys:
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@ -48,7 +48,7 @@ doc-subtab: radio
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
{% include subnav/subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -270,7 +270,7 @@ doc-subtab: select
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
{% include subnav/subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -123,7 +123,7 @@ doc-subtab: textarea
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
{% include subnav/subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -327,7 +327,7 @@ doc-subtab: columns
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-grid.html %}
|
||||
{% include subnav/subnav-grid.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -7,7 +7,7 @@ doc-subtab: tiles
|
||||
|
||||
<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">
|
||||
|
||||
@ -38,7 +38,7 @@ doc-subtab: container
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: layout
|
||||
doc-subtab: footer
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
{% capture footer_example %}
|
||||
<footer class="footer">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: layout
|
||||
doc-subtab: hero
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -118,7 +118,7 @@ doc-subtab: level
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -156,7 +156,7 @@ doc-subtab: media-object
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: layout
|
||||
doc-subtab: section
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: layout
|
||||
doc-subtab: tiles
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
{% include subnav/subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: modifiers
|
||||
doc-subtab: helpers
|
||||
---
|
||||
|
||||
{% include subnav-modifiers.html %}
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -52,7 +52,7 @@ doc-subtab: responsive-helpers
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-modifiers.html %}
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: modifiers
|
||||
doc-subtab: syntax
|
||||
---
|
||||
|
||||
{% include subnav-modifiers.html %}
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
|
||||
{% capture button_example %}
|
||||
<a class="button">
|
||||
|
||||
@ -49,7 +49,7 @@ doc-subtab: typography-helpers
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-modifiers.html %}
|
||||
{% include subnav/subnav-modifiers.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: overview
|
||||
doc-subtab: classes
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -16,7 +16,7 @@ colors:
|
||||
- danger
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -49,7 +49,7 @@ $colors: map-merge($colors, $addColors);
|
||||
@import "../bulma";
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: overview
|
||||
doc-subtab: functions
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: overview
|
||||
doc-subtab: modular
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -11,7 +11,7 @@ variables_keys:
|
||||
- fullhd
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
@ -34,8 +34,8 @@ variables_keys:
|
||||
|
||||
{% 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>
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: overview
|
||||
doc-subtab: start
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
@ -5,7 +5,7 @@ doc-tab: overview
|
||||
doc-subtab: variables
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
BIN
docs/images/book/book-cover.png
Normal file
BIN
docs/images/book/book-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
docs/images/book/book-cover@2x.png
Normal file
BIN
docs/images/book/book-cover@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
docs/images/hab/lightpaperfibers_@2X.png
Normal file
BIN
docs/images/hab/lightpaperfibers_@2X.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
@ -39,7 +39,7 @@ fixed_navbar: true
|
||||
<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>
|
||||
@ -480,13 +480,13 @@ fixed_navbar: true
|
||||
<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>
|
||||
|
||||
@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
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) {
|
||||
@ -14,12 +14,12 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user