library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix website transfer includes

Browse Source
This commit is contained in:
Jeremy Thomas 2024-03-21 16:39:38 +00:00
parent 69877a652c
commit ab5b308f88
29 changed files with 444 additions and 890 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/_includes/book/book-banner.html Normal file
View 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/book-cover.html %}
</div>
<div class="bd-book-column bd-is-content">
{% include book/book-content.html show_cover=false %}
</div>
</div>
</div>
</div>
</section>

59
docs/_includes/book/book-content.html Normal file
View File

@ -0,0 +1,59 @@
<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>
{% if include.show_cover %}
<div class="bd-book-inline-cover">
{% include book/book-cover.html %}
</div>
{% endif %}
<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 available:</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 class="control">
<span class="tag is-white has-text-grey is-paddingless">or</span>
</div>
<div class="control">
<div class="tags has-addons">
<strong class="tag has-text-orange">Kindle</strong>
</div>
</div>
</div>
</div>
<div class="block bd-book-buttons">
<div class="buttons">
<a class="button bd-is-bleeding is-large" href="{{ site.data.meta.book_url }}" target="_blank" rel="nofollow">
<span>
<em>PDF + Epub + Mobi</em>
<strong>Buy</strong> from <img src="{{ site.url }}/images/book/bleedingedge-type.png">
</span>
</a>
<a class="button bd-is-amazon is-large" href="{{ site.data.meta.book_amazon }}" target="_blank" rel="nofollow">
<span>
<em>Kindle version</em>
<strong>Buy</strong> from <img src="{{ site.url }}/images/book/amazon-logo.png">
</span>
</a>
</div>
<div class="bd-book-sample">
Or <a href="{{ site.data.meta.book_sample }}" target="_blank" rel="nofollow">
download a free sample</a>!
</div>
</div>
</div>

12
docs/_includes/book/book-cover.html Normal file
View File

@ -0,0 +1,12 @@
<div class="bd-book-cover">
<a href="{{ site.data.meta.book_url }}" target="_blank">
{%
include docs/elements/responsive-image-2x.html
path="book/book-cover"
extension="jpg"
alt="The official Bulma book cover"
width="504"
height="661"
%}
</a>
</div>

14
docs/_includes/book/book-modal.html Normal file
View File

@ -0,0 +1,14 @@
<div id="bookModal" class="bd-book-modal modal">
<div class="bd-book-modal-background"></div>
<div class="modal-content">
<div class="bd-book-modal-columns">
<div class="bd-book-modal-column bd-is-cover">
{% include book/book-cover.html %}
</div>
<div class="bd-book-modal-column bd-is-content">
{% include book/book-content.html show_cover=true %}
</div>
</div>
</div>
<button class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
</div>

30
docs/_includes/docs/components/hero.html Normal file
View File

@ -0,0 +1,30 @@
{% capture hero_body %}
<div class="bd-hero-body">
<div class="bd-hero-heading">
<h1 class="title algolia-lvl0">
{% if include.icon %}
<span class="icon">
<i class="{{ include.icon }}"></i>
</span>
{% endif %}
{{ include.title | markdownify }}
</h1>
<div class="subtitle is-4 algolia-lvl1">
{{ include.subtitle | markdownify }}
</div>
{{ include.content }}
</div>
</div>
{% endcapture %}
<section class="hero bd-hero bd-is-{{ include.color }}">
<div class="hero-body">
{% if page.fullwidth %}
{{ hero_body }}
{% else %}
<div class="container">
{{ hero_body }}
</div>
{% endif %}
</div>
</section>

16
docs/_includes/docs/elements/backers-paragraph.html Normal file
View File

@ -0,0 +1,16 @@
{% if site.data.backers[include.tier].size > 0 or site.data.github[include.tier].size > 0 %}
<h2>{{ include.title }}</h2>
<ul>
{% for pt in site.data.backers[include.tier] reversed %}
<li>
{{ pt.name }}
</li>
{% endfor %}
{% for gh in site.data.github[include.tier] reversed %}
<li>
{{ gh }}
</li>
{% endfor %}
</ul>
{% endif %}

9
docs/_includes/docs/elements/banner.html Normal file
View File

@ -0,0 +1,9 @@
<section class="bd-banner bd-is-{{ include.color }}">
<div class="bd-banner-body">
<p class="bd-banner-title">
{{ include.title }}
</p>
{{ include.more }}
</div>
</section>

34
docs/_includes/docs/elements/post.html Normal file
View File

@ -0,0 +1,34 @@
{% assign date = post.date | date: "%B %-d" %}
{% assign title = post.title | markdownify %}
{% assign introduction = post.introduction | markdownify %}
<div class="bd-post {% if post.featured %}is-featured{% endif %}">
<a class="bd-post-link" href="{{ site.url }}{{ post.url }}" style="--color: var(--{{ post.color }});">
<div class="bd-post-body">
<figure class="icon">
<i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
</figure>
<div class="bd-post-content">
<h2 class="title">
{{ title }}
</h2>
<div class="subtitle">
{{ introduction }}
</div>
</div>
</div>
{% if post.image %}
<figure class="bd-post-image">
<img
src="https://source.unsplash.com/{{ post.image }}/400x240"
srcset="https://source.unsplash.com/{{ post.image }}/400x240 1x,
https://source.unsplash.com/{{ post.image }}/800x480 2x"
alt="{{ post.alt }}"
width="400"
height="240">
</figure>
{% endif %}
</a>
</div>

7
docs/_includes/docs/elements/responsive-image-2x.html Normal file
View 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 }}">

8
docs/_includes/docs/elements/responsive-image.html Normal file
View File

@ -0,0 +1,8 @@
<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,
{{ site.url }}/images/{{ include.path }}@3x.{{ include.extension }} 3x"
alt="{{ include.alt }}"
width="{{ include.width }}"
height="{{ include.height }}">

6
docs/_includes/docs/elements/rss-button.html Normal file
View File

@ -0,0 +1,6 @@
<a class="button is-rss" href="{{ site.url }}/atom.xml">
<span class="icon">
<i class="fas fa-rss"></i>
</span>
<span>Subscribe</span>
</a>

61
docs/_includes/global/header.html
View File

@ -4,14 +4,12 @@
</a> </a>
<nav id="js-nav" class="bd-nav"> <nav id="js-nav" class="bd-nav">
{% for link_id in site.data.links.navbar %} {% for link_id in site.data.links.navbar %} {% include global/nav-item.html
{% include global/nav-item.html link_id=link_id %} link_id=link_id %} {% endfor %}
{% endfor %}
<div class="bd-nav-icons"> <div class="bd-nav-icons">
{% for link_id in site.data.links.navbar_icons %} {% for link_id in site.data.links.navbar_icons %} {% include
{% include global/nav-item.html link_id=link_id %} global/nav-item.html link_id=link_id %} {% endfor %}
{% endfor %}
<button class="bd-nav-item is-search is-icon"> <button class="bd-nav-item is-search is-icon">
<span class="icon"> <span class="icon">
@ -19,20 +17,27 @@
</span> </span>
</button> </button>
<button class="bd-nav-item is-icon is-ellipsis js-burger" data-target="js-more"> <button
class="bd-nav-item is-icon is-ellipsis js-burger"
data-target="js-more"
>
<span class="icon"> <span class="icon">
<i class="fa-solid fa-ellipsis fa-lg"></i> <i class="fa-solid fa-ellipsis fa-lg"></i>
</span> </span>
</button> </button>
<div id="js-more" class="bd-nav-menu is-more js-menu"> <div id="js-more" class="bd-nav-menu is-more js-menu">
{% for link_id in site.data.links.navbar_more %} {% for link_id in site.data.links.navbar_more %} {% include
{% include global/nav-item.html link_id=link_id %} global/nav-item.html link_id=link_id %} {% endfor %}
{% endfor %}
</div> </div>
</div> </div>
<a class="button is-primary bd-nav-mobile-download"> Download </a> <a
class="button is-primary bd-nav-mobile-download"
href="{{ site.data.meta.download }}"
>
Download
</a>
</nav> </nav>
<div class="bd-nav-themes"> <div class="bd-nav-themes">
@ -53,21 +58,33 @@
</button> </button>
<div id="js-themes" class="bd-nav-menu is-cycles js-menu js-themes"> <div id="js-themes" class="bd-nav-menu is-cycles js-menu js-themes">
<button data-scheme="light" class="bd-nav-item is-sun" aria-label="Light mode"> <button
data-scheme="light"
class="bd-nav-item is-sun"
aria-label="Light mode"
>
<span class="icon"> <span class="icon">
<i class="fas fa-sun" aria-hidden="true"></i> <i class="fas fa-sun" aria-hidden="true"></i>
</span> </span>
<span>Light</span> <span>Light</span>
</button> </button>
<button data-scheme="dark" class="bd-nav-item is-moon" aria-label="Dark mode"> <button
data-scheme="dark"
class="bd-nav-item is-moon"
aria-label="Dark mode"
>
<span class="icon"> <span class="icon">
<i class="fas fa-moon" aria-hidden="true"></i> <i class="fas fa-moon" aria-hidden="true"></i>
</span> </span>
<span>Dark</span> <span>Dark</span>
</button> </button>
<button data-scheme="system" class="bd-nav-item is-system" aria-label="System mode"> <button
data-scheme="system"
class="bd-nav-item is-system"
aria-label="System mode"
>
<span class="icon"> <span class="icon">
<i class="fas fa-display" aria-hidden="true"></i> <i class="fas fa-display" aria-hidden="true"></i>
</span> </span>
@ -76,19 +93,27 @@
</div> </div>
</div> </div>
<div class="bd-nav-search"> <div class="bd-nav-search is-hidden">
<button class="bd-nav-item is-search-desktop is-icon js-burger" data-target="js-search"> <button
class="bd-nav-item is-search-desktop is-icon js-burger"
data-target="js-search"
>
<span class="icon"> <span class="icon">
<i class="fa-solid fa-magnifying-glass fa-lg"></i> <i class="fa-solid fa-magnifying-glass fa-lg"></i>
</span> </span>
</button> </button>
<div id="js-search" class="bd-nav-menu is-search js-menu"> <div id="js-search" class="bd-nav-menu is-search js-menu">
<input id="form-search" class="input" type="text" placeholder="Search"> <input id="form-search" class="input" type="text" placeholder="Search" />
</div> </div>
</div> </div>
<a class="button is-primary bd-nav-desktop-download"> Download </a> <a
class="button is-primary bd-nav-desktop-download"
href="{{ site.data.meta.download }}"
>
Download
</a>
<button class="navbar-burger bd-nav-burger js-burger" data-target="js-nav"> <button class="navbar-burger bd-nav-burger js-burger" data-target="js-nav">
<span></span> <span></span>

97
docs/_includes/global/navbar.html Normal file
View File

@ -0,0 +1,97 @@
<nav id="navbar" class="bd-navbar navbar">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
<a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: var(--github);">
<i class="fab fa-lg fa-github-alt"></i>
</span>
</a>
<a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: var(--twitter);">
<i class="fab fa-lg fa-twitter"></i>
</span>
</a>
<div class="navbar-item bd-navbar-mobile-sponsor-icon">
<a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-outlined is-small">
<span class="icon">
<i class="fas fa-thumbs-up"></i>
</span>
<span>Sponsor</span>
</a>
</div>
<button id="searchIcon" class="navbar-item bd-navbar-search-icon bd-navbar-search-mobile-icon">
<span class="icon">
<i class="fas fa-lg fa-search"></i>
</span>
</button>
<button id="navbarBurger" class="navbar-burger" data-target="navMenu{{ include.id }}">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div id="navMenu{{ include.id }}" class="navbar-menu">
{% include global/navbar-start.html id="navbarStartOriginal" version="original" %}
<div class="navbar-end">
<a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: var(--github);">
<i class="fab fa-lg fa-github-alt"></i>
</span>
</a>
<a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: var(--twitter);">
<i class="fab fa-lg fa-twitter"></i>
</span>
</a>
<div class="navbar-item bd-navbar-sponsor-button is-hidden-desktop">
<a class="button is-sponsor is-light">
<span class="icon is-small">
<i class="fas fa-thumbs-up"></i>
</span>
</a>
</div>
<div class="navbar-item bd-navbar-download-button is-hidden-touch">
<a class="button is-primary mr-3" href="{{ site.data.meta.download }}">
<span class="icon is-hidden-touch is-hidden-desktop-only">
<i class="fas fa-download"></i>
</span>
<span>Download</span>
</a>
<a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-light">
<span class="icon is-small is-hidden-touch is-hidden-desktop-only">
<i class="fas fa-thumbs-up"></i>
</span>
<span>
Sponsor
</span>
</a>
</div>
</div>
</div>
<div id="search" class="bd-search">
<p class="control has-icons-left">
<input id="algoliaSearch" class="input is-rounded" type="text" placeholder="Search the docs">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
</p>
</div>
</nav>
<div class="bd-navbar bd-is-clone">
{% include global/navbar-start.html id="navbarStartClone" version="clone" %}
</div>

18
docs/_includes/home/intro.html
View File

@ -108,13 +108,14 @@
<div class="bd-home-intro-body"> <div class="bd-home-intro-body">
<div class="bd-home-intro-content"> <div class="bd-home-intro-content">
<h1 class="bd-home-title js-animated"> <h1 class="bd-home-title js-animated">
The Modern<br> The Modern<br />
CSS Framework CSS Framework
</h1> </h1>
<p class="bd-home-tagline"> <p class="bd-home-tagline">
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily Bulma is a free, open source framework that provides ready-to-use
combine to build responsive web interfaces. frontend components that you can easily combine to build responsive web
interfaces.
</p> </p>
<span class="thing bd-home-knowledge"> <span class="thing bd-home-knowledge">
@ -123,13 +124,16 @@
</span> </span>
<div class="bd-home-buttons buttons is-centered"> <div class="bd-home-buttons buttons is-centered">
<span class="button is-primary"> <a
class="button is-primary"
href="{{ site.url }}{{ site.data.meta.documentation }}"
>
<strong>Get Started</strong> <strong>Get Started</strong>
</span> </a>
<span class="button"> <a class="button" href="{{ site.data.meta.download }}">
<strong>Download</strong> <strong>Download</strong>
</span> </a>
</div> </div>
<div class="bd-home-features things"> <div class="bd-home-features things">

4
docs/_layouts/post.html Normal file
View File

@ -0,0 +1,4 @@
---
layout: default
route: blog
---

34
docs/_posts/2018-04-13-website-redesign.md
View File

@ -35,7 +35,7 @@ Just see for yourself!
</div> </div>
</div> </div>
{% include elements/anchor.html name="Navbar" %} {% include docs/elements/anchor.html name="Navbar" %}
The **navbar** has been updated with a lighter markup and cleaner design: The **navbar** has been updated with a lighter markup and cleaner design:
@ -47,7 +47,7 @@ The **navbar** has been updated with a lighter markup and cleaner design:
This doesn't affect the current navbars. There's actually a new modifier called `is-spaced` that was created for this new navbar. Documentation coming soon! This doesn't affect the current navbars. There's actually a new modifier called `is-spaced` that was created for this new navbar. Documentation coming soon!
{% include elements/anchor.html name="Customize example" %} {% include docs/elements/anchor.html name="Customize example" %}
On the homepage, there's a new [**customization** section with a live example](/#customize): On the homepage, there's a new [**customization** section with a live example](/#customize):
@ -57,7 +57,7 @@ On the homepage, there's a new [**customization** section with a live example](/
</a> </a>
</figure> </figure>
{% include elements/anchor.html name="Breadcrumb" %} {% include docs/elements/anchor.html name="Breadcrumb" %}
<figure> <figure>
<a href="{{ site.url }}/images/blog/v7/breadcrumb.png"> <a href="{{ site.url }}/images/blog/v7/breadcrumb.png">
@ -69,16 +69,16 @@ A **breadcrumb** is now visible at the top of each page, to easily navigate up a
This has led to the creation of new **intermediate pages**: This has led to the creation of new **intermediate pages**:
* [documentation](/documentation) - [documentation](/documentation)
* [documentation/modifiers](/documentation/modifiers) - [documentation/modifiers](/documentation/modifiers)
* [documentation/columns](/documentation/columns) - [documentation/columns](/documentation/columns)
* [documentation/layout](/documentation/layout) - [documentation/layout](/documentation/layout)
* [documentation/form](/documentation/form) - [documentation/form](/documentation/form)
* [documentation/elements](/documentation/elements) - [documentation/elements](/documentation/elements)
* [documentation/components](/documentation/components) - [documentation/components](/documentation/components)
* [more](/more) - [more](/more)
{% include elements/anchor.html name="Links" %} {% include docs/elements/anchor.html name="Links" %}
These intermediate pages have new **link boxes** that help dive into each sub-category: These intermediate pages have new **link boxes** that help dive into each sub-category:
@ -88,7 +88,7 @@ These intermediate pages have new **link boxes** that help dive into each sub-ca
</a> </a>
</figure> </figure>
{% include elements/anchor.html name="Previous/Next" %} {% include docs/elements/anchor.html name="Previous/Next" %}
Next to the breadcrumb, you can easily navigate to the **sibling** pages with the **previous** and **next** links: Next to the breadcrumb, you can easily navigate to the **sibling** pages with the **previous** and **next** links:
@ -106,7 +106,7 @@ These links are also available at the bottom:
</a> </a>
</figure> </figure>
{% include elements/anchor.html name="Categories" %} {% include docs/elements/anchor.html name="Categories" %}
There's a new **sidebar** including a navigation menu with all the categories and sub-categories: There's a new **sidebar** including a navigation menu with all the categories and sub-categories:
@ -116,7 +116,7 @@ There's a new **sidebar** including a navigation menu with all the categories an
</a> </a>
</figure> </figure>
{% include elements/anchor.html name="Scroll spy" %} {% include docs/elements/anchor.html name="Scroll spy" %}
On some pages below the categories, you'll find a new menu called "On this page" which is actually a **scroll spy**: On some pages below the categories, you'll find a new menu called "On this page" which is actually a **scroll spy**:
@ -126,7 +126,7 @@ On some pages below the categories, you'll find a new menu called "On this page"
</a> </a>
</figure> </figure>
{% include elements/anchor.html name="Footer" %} {% include docs/elements/anchor.html name="Footer" %}
The footer has been redesigned as well. Among other things, there's a **sitemap** available: The footer has been redesigned as well. Among other things, there's a **sitemap** available:
@ -136,7 +136,7 @@ The footer has been redesigned as well. Among other things, there's a **sitemap*
</a> </a>
</figure> </figure>
{% include elements/anchor.html name="Code" %} {% include docs/elements/anchor.html name="Code" %}
The Bulma website is built with **Jekyll**. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well. The Bulma website is built with **Jekyll**. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well.

8
docs/_posts/2018-04-14-migration-to-v070.md
View File

@ -13,9 +13,10 @@ While this update is mainly focused on a massive [website redesign](/2018/04/13/
These variable changes are documented here, so you can edit or revert them if needed. These variable changes are documented here, so you can edit or revert them if needed.
{% include elements/anchor.html name="Updated default values" %} {% include docs/elements/anchor.html name="Updated default values" %}
{% for item in site.data.blog.migratingv070.updated %} {% for item in site.data.blog.migratingv070.updated %}
<table class="table is-bordered"> <table class="table is-bordered">
<tbody> <tbody>
<tr> <tr>
@ -46,9 +47,10 @@ These variable changes are documented here, so you can edit or revert them if ne
</table> </table>
{% endfor %} {% endfor %}
{% include elements/anchor.html name="New variables" %} {% include docs/elements/anchor.html name="New variables" %}
{% for item in site.data.blog.migratingv070.new %} {% for item in site.data.blog.migratingv070.new %}
<table class="table is-bordered"> <table class="table is-bordered">
<tbody> <tbody>
<tr> <tr>
@ -75,7 +77,7 @@ These variable changes are documented here, so you can edit or revert them if ne
</table> </table>
{% endfor %} {% endfor %}
{% include elements/anchor.html name="Removed variables" %} {% include docs/elements/anchor.html name="Removed variables" %}
<table class="table is-bordered"> <table class="table is-bordered">
<thead> <thead>

62
docs/_posts/2019-10-15-light-dark-colors.md
View File

@ -12,21 +12,21 @@ alt: "Light and dark clouds"
The new version **[Bulma 0.8.0](https://github.com/jgthms/bulma/releases/tag/0.8.0)** is out! 😃 It comes with several bug fixes and a lot of nice new features: The new version **[Bulma 0.8.0](https://github.com/jgthms/bulma/releases/tag/0.8.0)** is out! 😃 It comes with several bug fixes and a lot of nice new features:
* [Light/Dark colors](#light-dark-colors) - [Light/Dark colors](#light-dark-colors)
* [Better visual look](#better-visual-look) - [Better visual look](#better-visual-look)
* [Panel colors](#panel-colors) - [Panel colors](#panel-colors)
* [Larger form controls](#larger-form-controls) - [Larger form controls](#larger-form-controls)
* [4-value color map](#4-value-color-map) - [4-value color map](#4-value-color-map)
* [Scheme variables for "Dark mode"](#scheme-variables-for-dark-mode) - [Scheme variables for "Dark mode"](#scheme-variables-for-dark-mode)
More in the [Changelog](https://github.com/jgthms/bulma/releases/tag/0.8.0). More in the [Changelog](https://github.com/jgthms/bulma/releases/tag/0.8.0).
{% include elements/anchor.html name="Light/Dark colors" %} {% include docs/elements/anchor.html name="Light/Dark colors" %}
Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions: Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions:
* `findLightColor()` which finds the light version of a color - `findLightColor()` which finds the light version of a color
* `findDarkColor()` which finds the dark version of a color - `findDarkColor()` which finds the dark version of a color
The **light** colors are used by the `button` element: The **light** colors are used by the `button` element:
@ -45,7 +45,7 @@ The **light** and **dark** colors are used by the `message` component, which gen
</a> </a>
</div> </div>
{% include elements/anchor.html name="Better visual look" %} {% include docs/elements/anchor.html name="Better visual look" %}
Some of the Bulma colors have been updated: Some of the Bulma colors have been updated:
@ -60,10 +60,10 @@ Some of the Bulma colors have been updated:
<code>$green</code> <code>$green</code>
</th> </th>
<td> <td>
{% include elements/color-square.html value="hsl(141, 71%, 48%)" %} {% include docs/elements/color-swatch.html background="hsl(141, 71%, 48%)" %}
</td> </td>
<td> <td>
{% include elements/color-square.html value="hsl(141, 53%, 53%)" %} {% include docs/elements/color-swatch.html background="hsl(141, 53%, 53%)" %}
</td> </td>
</tr> </tr>
<tr> <tr>
@ -71,10 +71,10 @@ Some of the Bulma colors have been updated:
<code>$cyan</code> <code>$cyan</code>
</th> </th>
<td> <td>
{% include elements/color-square.html value="hsl(204, 86%, 53%)" %} {% include docs/elements/color-swatch.html background="hsl(204, 86%, 53%)" %}
</td> </td>
<td> <td>
{% include elements/color-square.html value="hsl(204, 71%, 53%)" %} {% include docs/elements/color-swatch.html background="hsl(204, 71%, 53%)" %}
</td> </td>
</tr> </tr>
<tr> <tr>
@ -82,10 +82,10 @@ Some of the Bulma colors have been updated:
<code>$red</code> <code>$red</code>
</th> </th>
<td> <td>
{% include elements/color-square.html value="hsl(348, 100%, 61%)" %} {% include docs/elements/color-swatch.html background="hsl(348, 100%, 61%)" %}
</td> </td>
<td> <td>
{% include elements/color-square.html value="hsl(348, 86%, 61%)" %} {% include docs/elements/color-swatch.html background="hsl(348, 86%, 61%)" %}
</td> </td>
</tr> </tr>
</table> </table>
@ -106,7 +106,7 @@ The <strong>shadows</strong> of the <code>box</code> and <code>card</code> have
</a> </a>
</div> </div>
{% include elements/anchor.html name="Panel colors" %} {% include docs/elements/anchor.html name="Panel colors" %}
<p> <p>
The <a href="{{ site.data.links.by_id.components-panel.path }}">panel component</a> is now available in all <strong>colors</strong>: The <a href="{{ site.data.links.by_id.components-panel.path }}">panel component</a> is now available in all <strong>colors</strong>:
@ -118,7 +118,7 @@ The <strong>shadows</strong> of the <code>box</code> and <code>card</code> have
</a> </a>
</div> </div>
{% include elements/anchor.html name="Larger form controls" %} {% include docs/elements/anchor.html name="Larger form controls" %}
Form controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values: Form controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:
@ -131,7 +131,7 @@ $button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em $button-padding-horizontal: 0.75em
``` ```
{% include elements/anchor.html name="4-value color map" %} {% include docs/elements/anchor.html name="4-value color map" %}
The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map. The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.
@ -139,16 +139,30 @@ If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2,
```scss ```scss
$custom-colors: ( $custom-colors: (
"lime": (lime), "lime": (
"tomato": (tomato, white), lime,
"orange": ($orange, $orange-invert, $orange-light), ),
"lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark) "tomato": (
tomato,
white,
),
"orange": (
$orange,
$orange-invert,
$orange-light,
),
"lavender": (
$lavender,
$lavender-invert,
$lavender-light,
$lavender-dark,
),
); );
``` ```
This is processed by the updated `mergeColorMaps()` Sass function. This is processed by the updated `mergeColorMaps()` Sass function.
{% include elements/anchor.html name='Scheme variables for "Dark mode"' %} {% include docs/elements/anchor.html name='Scheme variables for "Dark mode"' %}
There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter` There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter`
They replace the `$white` and `$black` occurrences in the codebase. They replace the `$white` and `$black` occurrences in the codebase.

12
docs/alternative-to-bootstrap.html
View File

@ -56,10 +56,8 @@ bootstrap:
content: "Bulma has introduced some support for accessibility, but Bootstrap has strong and pervasive compatibility with **WCAG 2.0** guidelines." content: "Bulma has introduced some support for accessibility, but Bootstrap has strong and pervasive compatibility with **WCAG 2.0** guidelines."
--- ---
{% include global/navbar.html id="AlternativeToBootstrap" %}
{% {%
include components/hero.html include docs/components/hero.html
color="bootstrap" color="bootstrap"
icon="fas fa-exchange-alt" icon="fas fa-exchange-alt"
title="Bulma: an **alternative** to Bootstrap" title="Bulma: an **alternative** to Bootstrap"
@ -67,7 +65,7 @@ bootstrap:
%} %}
{% {%
include components/call.html include docs/components/call.html
color="primary" color="primary"
text='Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.' text='Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.'
%} %}
@ -85,7 +83,7 @@ bootstrap:
<div class="bd-pros-list"> <div class="bd-pros-list">
{% for pro in page.bulma %} {% for pro in page.bulma %}
{% {%
include content/pro.html include docs/content/pro.html
type=pro.type type=pro.type
icon=pro.icon icon=pro.icon
icon_brand=pro.icon_brand icon_brand=pro.icon_brand
@ -106,7 +104,7 @@ bootstrap:
<div class="bd-pros-list"> <div class="bd-pros-list">
{% for pro in page.bootstrap %} {% for pro in page.bootstrap %}
{% {%
include content/pro.html include docs/content/pro.html
type=pro.type type=pro.type
icon=pro.icon icon=pro.icon
icon_brand=pro.icon_brand icon_brand=pro.icon_brand
@ -142,7 +140,7 @@ bootstrap:
</tr> </tr>
</tfoot> </tfoot>
<tbody> <tbody>
{% include content/comparison.html %} {% include docs/content/comparison.html %}
</tbody> </tbody>
</table> </table>
</div> </div>

BIN
docs/assets/images/twitter/martin_verbic.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

10
docs/backers-md.html
View File

@ -4,8 +4,8 @@ title: 'Backers via <a href="https://www.patreon.com/jgthms" target="_blank">Pat
layout: bare layout: bare
--- ---
{% include elements/backers-paragraph.html tier="30" title="Generous backers ($30+)" %} {% include docs/elements/backers-paragraph.html tier="30" title="Generous backers ($30+)" %}
{% include elements/backers-paragraph.html tier="500" title="Documentation sponsors ($500+)" %} {% include docs/elements/backers-paragraph.html tier="500" title="Documentation sponsors ($500+)" %}
{% include elements/backers-paragraph.html tier="300" title="Website sponsors ($300+)" %} {% include docs/elements/backers-paragraph.html tier="300" title="Website sponsors ($300+)" %}
{% include elements/backers-paragraph.html tier="100" title="Homepage sponsors ($100+)" %} {% include docs/elements/backers-paragraph.html tier="100" title="Homepage sponsors ($100+)" %}
{% include elements/backers-paragraph.html tier="10" title="Bulma backers ($10+)" %} {% include docs/elements/backers-paragraph.html tier="10" title="Bulma backers ($10+)" %}

8
docs/blog.html
View File

@ -6,13 +6,11 @@ breadcrumb:
- blog - blog
--- ---
{% include global/navbar.html id="Blog" %}
{% capture hero_content %} {% capture hero_content %}
{% include elements/rss-button.html %} {% include docs/elements/rss-button.html %}
{% endcapture %} {% endcapture %}
{% {%
include components/hero.html include docs/components/hero.html
color="primary" color="primary"
icon="fas fa-rss" icon="fas fa-rss"
title="The **official** Bulma **blog**" title="The **official** Bulma **blog**"
@ -24,7 +22,7 @@ breadcrumb:
<div class="bd-posts"> <div class="bd-posts">
{% for post in site.posts %} {% for post in site.posts %}
{% {%
include elements/post.html include docs/elements/post.html
post=post post=post
%} %}
{% endfor %} {% endfor %}

8
docs/bulma-start.html
View File

@ -13,10 +13,8 @@ breadcrumb:
- bulma-start - bulma-start
--- ---
{% include global/navbar.html id="MadeWithBulma" %}
{% {%
include components/hero.html include docs/components/hero.html
color="success" color="success"
icon="fas fa-rocket" icon="fas fa-rocket"
title="The `bulma-start` package" title="The `bulma-start` package"
@ -81,7 +79,7 @@ breadcrumb:
</div> </div>
</div> </div>
{% include elements/anchor.html name="Install" %} {% include docs/elements/anchor.html name="Install" %}
<div class="content"> <div class="content">
<p> <p>
@ -97,7 +95,7 @@ breadcrumb:
>bulma-start README on Github.</a >bulma-start README on Github.</a
> >
{% include elements/anchor.html name="What’s included" %} {% include docs/elements/anchor.html name="What’s included" %}
<div class="content"> <div class="content">
<p> <p>

4
docs/more.html
View File

@ -6,10 +6,8 @@ breadcrumb:
- more - more
--- ---
{% include global/navbar.html id="More" %}
{% {%
include components/hero.html include docs/components/hero.html
color="link" color="link"
icon="fas fa-ellipsis-h" icon="fas fa-ellipsis-h"
title="More about Bulma" title="More about Bulma"

7
docs/playground/responsive-buttons.html
View File

@ -1,7 +0,0 @@
---
layout: playground
---
<section style="padding: 1.5rem;">
{% include snippets/responsive-buttons.html %}
</section>

2
docs/thank-you.html
View File

@ -4,8 +4,6 @@ layout: default
route: index route: index
--- ---
{% include global/navbar.html id="ThankYou" %}
<section class="hero is-large has-text-centered"> <section class="hero is-large has-text-centered">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">

4
docs/the-official-bulma-book.html
View File

@ -5,8 +5,6 @@ layout: default
route: the-official-bulma-book route: the-official-bulma-book
--- ---
{% include global/navbar.html id="Videos" %}
{% capture hero_more %} {% capture hero_more %}
<a class="button is-bleeding" href="{{ site.data.meta.book_url }}" target="_blank"> <a class="button is-bleeding" href="{{ site.data.meta.book_url }}" target="_blank">
<span class="icon"> <span class="icon">
@ -67,7 +65,7 @@ route: the-official-bulma-book
{% endcapture %} {% endcapture %}
{% {%
include elements/banner.html include docs/elements/banner.html
color="bleeding" color="bleeding"
title="<span>The official Bulma <strong>book</strong></span>" title="<span>The official Bulma <strong>book</strong></span>"
more=hero_more more=hero_more

781
docs/tiles.html
View File

@ -1,781 +0,0 @@
---
layout: default
route: tiles
---
<section class="section">
<div class="container">
<h1 class="title">Tiles</h1>
<h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
<div class="content">
<p>To build intricate 2-dimensional, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
</div>
{% highlight html %}
<div class="tile">
<!-- The magical tile element! -->
</div>
{% endhighlight %}
<div class="content">
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
<ul>
<li>
<strong>3 contextual</strong> modifiers
<ul>
<li><code>is-ancestor</code></li>
<li><code>is-parent</code></li>
<li><code>is-child</code></li>
</ul>
</li>
<li>
<strong>1 directional</strong> modifier
<ul>
<li><code>is-vertical</code></li>
</ul>
</li>
<li>
<strong>12 horizontal size</strong> modifiers
<ul>
<li>from <code>is-1</code></li>
<li>to <code>is-12</code></li>
</ul>
</li>
</ul>
</div>
{% include elements/anchor.html name="How it works: Nesting" %}
<div class="content">
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
</div>
<div class="columns">
<div class="column is-one-third">
<p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
</div>
<div class="column is-two-thirds">
{% highlight html %}
<div class="tile is-ancestor">
<!-- All other tile elemnts -->
</div>
{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
</div>
<div class="column is-two-thirds">
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile">
<!-- Add content or other tiles -->
</div>
<div class="tile">
<!-- Add content or other tiles -->
</div>
</div>
{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<p>
You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
<br>
For example, <code>is-4</code> will take up 2/3 of the horizontal space:
</p>
</div>
<div class="column is-two-thirds">
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile is-4">
<!-- 1/3 -->
</div>
<div class="tile">
<!-- This tile will take the rest: 2/3 -->
</div>
</div>
{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
</div>
<div class="column is-two-thirds">
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical">
<div class="tile">
<!-- Top tile -->
</div>
<div class="tile">
<!-- Bottom tile -->
</div>
</div>
<div class="tile">
<!-- This tile will take up the whole vertical space -->
</div>
</div>
{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<div class="content">
<p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
<ul>
<li>add <em>any</em> class you want, like <code>box</code></li>
<li>add the <code>is-child</code> modifier on the tile</li>
<li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
</ul>
</div>
</div>
<div class="column is-two-thirds">
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
</div>
</div>
</div>
{% endhighlight %}
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</div>
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
<div class="tile is-child box">
<p class="title">Two</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">Three</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</div>
{% endhighlight %}
{% include elements/anchor.html name="Nesting requirements" %}
<article class="message is-danger">
<div class="message-header">
3 levels deep at least...
</div>
<div class="message-body">
<div class="content">
<p>You need at least <strong>3 levels</strong> of hierarchy:</p>
{% highlight markdown %}
tile is-ancestor
|
└───tile is-parent
|
└───tile is-child
{% endhighlight %}
</div>
</div>
</article>
<article class="message is-success">
<div class="message-header">
...but more levels if you want!
</div>
<div class="message-body">
<div class="content">
<p>You can however nest tiles more deeply than that, and mix it up!</p>
{% highlight markdown %}
tile is-ancestor
|
├───tile is-vertical is-8
| |
| ├───tile
| | |
| | ├───tile is-parent is-vertical
| | | ├───tile is-child
| | | └───tile is-child
| | |
| | └───tile is-parent
| | └───tile is-child
| |
| └───tile is-parent
| └───tile is-child
|
└───tile is-parent
└───tile is-child
{% endhighlight %}
</div>
</div>
</article>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Top box</p>
</article>
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Bottom box</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Middle box</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Wide column</p>
<p class="subtitle">Aligned with the right column</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Tall column</p>
<p class="subtitle">With even more content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
{% endhighlight %}
{% include elements/anchor.html name="3 columns" %}
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Hello World</p>
<p class="subtitle">What is up?</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Foo</p>
<p class="subtitle">Bar</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Third column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Top box</p>
</article>
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Bottom box</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Middle box</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Wide column</p>
<p class="subtitle">Aligned with the right column</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Tall column</p>
<p class="subtitle">With even more content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Side column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent is-8">
<article class="tile is-child box">
<p class="title">Main column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Hello World</p>
<p class="subtitle">What is up?</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Foo</p>
<p class="subtitle">Bar</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Third column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile">
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Top box</p>
</article>
<article class="tile is-child box">
<p class="title">Vertical tiles</p>
<p class="subtitle">Bottom box</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Middle box</p>
<p class="subtitle">With an image</p>
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/640x480.png">
</figure>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Wide column</p>
<p class="subtitle">Aligned with the right column</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Tall column</p>
<p class="subtitle">With even more content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Side column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent is-8">
<article class="tile is-child box">
<p class="title">Main column</p>
<p class="subtitle">With some content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
{% endhighlight %}
{% include elements/anchor.html name="4 columns" %}
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">One</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Two</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Three</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Four</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-9">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Five</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
</div>
</article>
</div>
<div class="tile is-8 is-vertical">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Six</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Seven</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Eight</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
</div>
<div class="tile">
<div class="tile is-8 is-parent">
<article class="tile is-child box">
<p class="title">Nine</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Ten</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Eleven</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Twelve</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
<div class="tile is-parent is-6">
<article class="tile is-child box">
<p class="title">Thirteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Fourteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
</div>
{% highlight html %}
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">One</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Two</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Three</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Four</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-vertical is-9">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Five</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
</div>
</article>
</div>
<div class="tile is-8 is-vertical">
<div class="tile">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Six</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Seven</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Eight</p>
<p class="subtitle">Subtitle</p>
</article>
</div>
</div>
</div>
<div class="tile">
<div class="tile is-8 is-parent">
<article class="tile is-child box">
<p class="title">Nine</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Ten</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Eleven</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Twelve</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
<div class="tile is-parent is-6">
<article class="tile is-child box">
<p class="title">Thirteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Fourteen</p>
<p class="subtitle">Subtitle</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
</div>
{% endhighlight %}
</div>
</section>

4
docs/videos.html
View File

@ -26,8 +26,6 @@ videos:
no_video: true no_video: true
--- ---
{% include global/navbar.html id="Videos" %}
{% capture hero_content %} {% capture hero_content %}
<a class="button bd-fat-button is-success is-medium" <a class="button bd-fat-button is-success is-medium"
href="{{ site.data.meta.scrimba_url }}" href="{{ site.data.meta.scrimba_url }}"
@ -42,7 +40,7 @@ videos:
{% endcapture %} {% endcapture %}
{% {%
include components/hero.html include docs/components/hero.html
color="videos" color="videos"
icon="fas fa-play-circle" icon="fas fa-play-circle"
title="**Video** tutorials" title="**Video** tutorials"