mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Add Bulma book
This commit is contained in:
Jeremy Thomas
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>
|
||||
Reference in New Issue
Block a user