mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
10
docs/_includes/about/author.html
Normal file
10
docs/_includes/about/author.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<h4 class="bd-footer-title">
|
||||
<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" target="_blank">Jeremy Thomas</a>.
|
||||
</h4>
|
||||
|
||||
<div class="bd-footer-iframe">
|
||||
<a href="https://twitter.com/jgthms" class="button is-twitter" data-related="jgthms:Creator of Bulma">
|
||||
<span class="icon"><i class="fa-brands fa-twitter"></i></span>
|
||||
<span>Follow @jgthms</span>
|
||||
</a>
|
||||
</div>
|
||||
15
docs/_includes/about/share.html
Normal file
15
docs/_includes/about/share.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<h4 class="bd-footer-title">
|
||||
<strong>Share</strong> on social media
|
||||
</h4>
|
||||
|
||||
<div class="bd-footer-iframe">
|
||||
<a href="https://twitter.com/share" class="button is-twitter" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma">
|
||||
<span class="icon"><i class="fa-brands fa-twitter"></i></span>
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
|
||||
<a class="button is-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fbulma.io">
|
||||
<span class="icon"><i class="fa-brands fa-facebook"></i></span>
|
||||
<span>Facebook</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,15 +0,0 @@
|
||||
<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>
|
||||
@@ -1,59 +0,0 @@
|
||||
<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>
|
||||
@@ -1,12 +0,0 @@
|
||||
<div class="bd-book-cover">
|
||||
<a href="{{ site.data.meta.book_url }}" target="_blank">
|
||||
{%
|
||||
include elements/responsive-image-2x.html
|
||||
path="book/book-cover"
|
||||
extension="jpg"
|
||||
alt="The official Bulma book cover"
|
||||
width="504"
|
||||
height="661"
|
||||
%}
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,14 +0,0 @@
|
||||
<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>
|
||||
@@ -1 +0,0 @@
|
||||
<span class="tag">>= {{ site.data.breakpoints.desktop.from }}px</span>
|
||||
@@ -1 +0,0 @@
|
||||
<span class="tag">>= {{ site.data.breakpoints.fullhd.from }}px</span>
|
||||
@@ -1 +0,0 @@
|
||||
<span class="tag">< {{ site.data.breakpoints.desktop.from }}px</span>
|
||||
@@ -1 +0,0 @@
|
||||
<span class="tag">>= {{ site.data.breakpoints.widescreen.from }}px</span>
|
||||
@@ -1,8 +0,0 @@
|
||||
<div id="anchorsReference" class="bd-anchors-reference"></div>
|
||||
<nav id="anchors" class="bd-anchors bd-is-empty">
|
||||
<p class="bd-anchors-title">
|
||||
On this page
|
||||
</p>
|
||||
|
||||
<ul class="bd-anchors-list"></ul>
|
||||
</nav>
|
||||
@@ -1,36 +0,0 @@
|
||||
<div class="bd-breadcrumb">
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
{% for key in page.breadcrumb %}
|
||||
{% assign link = site.data.links.by_id[key] %}
|
||||
<li{% if forloop.last %} class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{% if previous_link or next_link %}
|
||||
<nav class="bd-prev-next">
|
||||
{% if previous_link %}
|
||||
<a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
|
||||
←
|
||||
</a>
|
||||
{% else %}
|
||||
<span>
|
||||
←
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if next_link %}
|
||||
<a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
|
||||
→
|
||||
</a>
|
||||
{% else %}
|
||||
<span>
|
||||
→
|
||||
</span>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,76 +0,0 @@
|
||||
<nav id="categories" class="bd-categories">
|
||||
<div class="bd-categories-filter">
|
||||
<input id="categoriesFilter" class="input is-small" type="text" name="" placeholder="Filter links" style="border-radius: 0.5em;">
|
||||
<span class="bd-key">f</span>
|
||||
</div>
|
||||
|
||||
{% for category_id in site.data.links.categoryIds %}
|
||||
{% assign category_links = site.data.links.categories[category_id] %}
|
||||
{% assign category_link = site.data.links.by_id[category_id] %}
|
||||
|
||||
{% if category_id == 'overview' %}
|
||||
<p class="bd-category-group">
|
||||
Guides
|
||||
</p>
|
||||
{% elsif category_id == 'columns' %}
|
||||
<p class="bd-category-group">
|
||||
CSS Library
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="bd-category {% if category_id == current_category %}is-current{% endif %}">
|
||||
<header class="bd-category-header">
|
||||
<a
|
||||
class="
|
||||
bd-category-name
|
||||
{% if category_id == current_link_id %}is-active{% endif %}
|
||||
"
|
||||
href="{{ site.url }}{{ category_link.path }}"
|
||||
data-name="{{ category_link.name }}"
|
||||
>
|
||||
<strong class="bd-name">{{ category_link.name }}</strong>
|
||||
</a>
|
||||
|
||||
<button class="bd-category-toggle icon">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<ul class="bd-category-list">
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a
|
||||
href="{{ site.url }}{{ link.path }}"
|
||||
data-name="{{ link.name }}"
|
||||
>
|
||||
<span class="bd-name">{{ link.name }}</span>
|
||||
|
||||
{% if link.new %}
|
||||
<span class="ml-1 tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<p
|
||||
id="categoriesNoResults"
|
||||
class="
|
||||
bd-categories-no-results
|
||||
has-background-primary-light
|
||||
is-size-7
|
||||
has-text-primary-dark
|
||||
has-text-centered
|
||||
p-3
|
||||
">
|
||||
There are no results.
|
||||
<br>
|
||||
<button class="button is-primary is-small">Reset search <span class="bd-key">esc</span></button>
|
||||
</p>
|
||||
</nav>
|
||||
@@ -1,16 +0,0 @@
|
||||
{%
|
||||
include components/hero.html
|
||||
color="basic"
|
||||
title=page.title
|
||||
subtitle=subtitle
|
||||
%}
|
||||
|
||||
<div class="bd-docs-body">
|
||||
<div class="bd-docs-content bd-content algolia-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include components/pagination.html %}
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
</div>
|
||||
@@ -1,28 +0,0 @@
|
||||
<nav class="bd-docs">
|
||||
{% for category in site.data.links.categories %}
|
||||
{% assign category_id = category[0] %}
|
||||
{% assign category_links = category[1] %}
|
||||
{% assign category_link = site.data.links.by_id[category_id] %}
|
||||
|
||||
<article class="bd-doc">
|
||||
<h2 class="bd-doc-title title is-5">
|
||||
<a href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="bd-doc-content">
|
||||
<ul class="bd-doc-list">
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
@@ -1,13 +0,0 @@
|
||||
<figure class="bd-figure" style="{{ include.style }}">
|
||||
{%
|
||||
include elements/responsive-image-2x.html
|
||||
path=include.path
|
||||
extension=include.extension
|
||||
alt=include.alt
|
||||
width=include.width
|
||||
height=include.height
|
||||
%}
|
||||
<figcaption>
|
||||
{{ include.caption }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
@@ -1,35 +0,0 @@
|
||||
{% include elements/anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use <a href="{{ site.data.meta.github | append: '/blob/master/sass/form/shared.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>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for key in page.variables_keys %}
|
||||
{% assign variable = site.data.variables.elements.form.vars[key] %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1,29 +0,0 @@
|
||||
<div class="bd-heading">
|
||||
<span class="icon has-text-{{ include.color }} is-size-2-widescreen">
|
||||
<i class="{{ include.icon }}"></i>
|
||||
</span>
|
||||
|
||||
<h2 class="title has-text-black mb-0 is-size-2-widescreen">
|
||||
{{ include.title }}
|
||||
</h2>
|
||||
|
||||
<div class="subtitle mb-0 mt-0 is-size-4-widescreen">
|
||||
{{ include.subtitle }}
|
||||
</div>
|
||||
|
||||
<a class="button bd-fat-button is-{{ include.color }} is-light is-size-4-widescreen" href="{{ include.href }}">
|
||||
{% if include.button_icon_before %}
|
||||
<span class="icon">
|
||||
<i class="{{ include.button_icon_before }}"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
<span>
|
||||
{{ include.button_label }}
|
||||
</span>
|
||||
{% if include.button_icon_after %}
|
||||
<span class="icon">
|
||||
<i class="{{ include.button_icon_after }}"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,11 +0,0 @@
|
||||
<div class="bd-index-buttons hero-buttons">
|
||||
<a
|
||||
class="button is-large is-primary is-light"
|
||||
href="{{ site.url }}{{ include.href }}"
|
||||
>
|
||||
{{ include.content }}
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
{% 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>
|
||||
@@ -1,15 +0,0 @@
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
|
||||
<nav class="bd-categories">
|
||||
{% for link_id in site.data.links.more %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
|
||||
<div class="bd-category">
|
||||
<header class="bd-category-header">
|
||||
<a class="bd-category-name {% if link_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}">
|
||||
<strong>{{ link.name }}</strong>
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
@@ -1,82 +0,0 @@
|
||||
{% assign currentLinkId = page.breadcrumb | last %}
|
||||
|
||||
{% assign currentCategoryIndex = page.breadcrumb | size | minus: 2 %}
|
||||
{% assign currentCategoryId = page.breadcrumb[currentCategoryIndex] %}
|
||||
|
||||
{% assign sameCategoryIds = site.data.links.categories[currentCategoryId] %}
|
||||
{% assign categorySize = sameCategoryIds | size %}
|
||||
{% assign lastIndex = categorySize | minus: 1 %}
|
||||
|
||||
{% for categoryId in site.data.links.categoryIds %}
|
||||
{% if categoryId == currentCategoryId %}
|
||||
{% assign prevCategoryIndex = forloop.index0 | minus: 1 %}
|
||||
{% assign nextCategoryIndex = forloop.index0 | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for linkId in sameCategoryIds %}
|
||||
{% if linkId == currentLinkId %}
|
||||
{% assign prevIndex = forloop.index0 | minus: 1 %}
|
||||
{% assign nextIndex = forloop.index0 | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Previous link -->
|
||||
<!-- If first index in list -->
|
||||
{% if prevIndex == -1 %}
|
||||
{% assign prevCategoryId = site.data.links.categoryIds[prevCategoryIndex] %}
|
||||
{% assign prevCategoryLinks = site.data.links.categories[prevCategoryId] %}
|
||||
{% assign prevCategorySize = prevCategoryLinks | size %}
|
||||
{% assign prevLastIndex = prevCategorySize | minus: 1 %}
|
||||
{% assign prevLinkId = prevCategoryLinks[prevLastIndex] %}
|
||||
{% else %}
|
||||
{% assign prevCategoryId = currentCategoryId %}
|
||||
{% assign prevLinkId = sameCategoryIds[prevIndex] %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Next link -->
|
||||
<!-- If last index in list -->
|
||||
{% if nextIndex == categorySize %}
|
||||
{% assign nextCategoryId = site.data.links.categoryIds[nextCategoryIndex] %}
|
||||
{% assign nextCategory = site.data.links.categories[nextCategoryId] %}
|
||||
{% assign nextLinkId = nextCategory[0] %}
|
||||
{% else %}
|
||||
{% assign nextCategoryId = currentCategoryId %}
|
||||
{% assign nextLinkId = sameCategoryIds[nextIndex] %}
|
||||
{% endif %}
|
||||
|
||||
{% unless page.hide_pagination %}
|
||||
{% if prevLinkId or nextLinkId %}
|
||||
<nav class="bd-docs-pagination bd-pagination-links">
|
||||
{% if prevLinkId %}
|
||||
{% assign prevLink = site.data.links.by_id[prevLinkId] %}
|
||||
<a
|
||||
class="button bd-fat-button is-primary is-light bd-pagination-prev"
|
||||
href="{{ site.url }}{{ prevLink.path }}"
|
||||
title="{{ prevLink.name }}"
|
||||
>
|
||||
<i>←</i>
|
||||
<span>
|
||||
<em>{{ prevCategoryId }}:</em>
|
||||
<strong>{{ prevLink.name }}</strong>
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if nextLinkId %}
|
||||
{% assign nextLink = site.data.links.by_id[nextLinkId] %}
|
||||
<a
|
||||
class="button bd-fat-button is-primary is-light bd-pagination-next"
|
||||
href="{{ site.url }}{{ nextLink.path }}"
|
||||
title="{{ nextLink.name }}"
|
||||
>
|
||||
<span>
|
||||
<em>{{ nextCategoryId }}:</em>
|
||||
<strong>{{ nextLink.name }}</strong>
|
||||
</span>
|
||||
<i>→</i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
@@ -1,9 +0,0 @@
|
||||
<div class="columns">
|
||||
<div class="column is-4-tablet is-3-desktop">
|
||||
{% include elements/anchor.html name=include.title %}
|
||||
</div>
|
||||
|
||||
<div class="column is-offset-1 is-7-tablet is-8-desktop">
|
||||
{{ include.content }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,49 +0,0 @@
|
||||
{% capture content %}
|
||||
{% assign anchor_name = include.anchor_name | default: 'Variables' %}
|
||||
{% assign tab = include.tab | default: page.doc-tab %}
|
||||
{% assign subtab = include.subtab | default: page.doc-subtab %}
|
||||
{% assign type = include.type | default: tab %}
|
||||
{% assign data = include.data | default: site.data.variables[tab][subtab] %}
|
||||
{% assign variables = include.variables | default: data.list %}
|
||||
{% assign table_class = include.table_class | default: 'is-bordered' %}
|
||||
|
||||
You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
{% endcapture %}
|
||||
|
||||
{% capture variables_size %}{{ variables | size }}{% endcapture %}
|
||||
{% capture variables_keys_size %}{{ include.variables_keys | size }}{% endcapture %}
|
||||
|
||||
{% if variables_size != '0' or variables_keys_size != '0' %}
|
||||
<div class="bd-vars">
|
||||
{% include elements/anchor.html name=anchor_name %}
|
||||
|
||||
<div class="bd-var bd-is-head">
|
||||
<div class="bd-var-name">
|
||||
Name
|
||||
</div>
|
||||
<div class="bd-var-type">
|
||||
Type
|
||||
</div>
|
||||
<div class="bd-var-value">
|
||||
Value
|
||||
</div>
|
||||
<div class="bd-var-computed-value">
|
||||
Computed Value
|
||||
</div>
|
||||
<div class="bd-var-computed-type">
|
||||
Computed Type
|
||||
</div>
|
||||
</div>
|
||||
{% if include.variables_keys %}
|
||||
{% for key in include.variables_keys %}
|
||||
{% assign variable = site.data.variables[include.folder][include.file].by_name[key] %}
|
||||
{% include components/variables-row.html variable=variable %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for variable_name in variables %}
|
||||
{% assign variable = data.by_name[variable_name] %}
|
||||
{% include components/variables-row.html variable=variable %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
1
docs/_includes/docs/bp/desktop.html
Normal file
1
docs/_includes/docs/bp/desktop.html
Normal file
@@ -0,0 +1 @@
|
||||
<code>>= {{ site.data.breakpoints.desktop.from }}px</code>
|
||||
1
docs/_includes/docs/bp/fullhd.html
Normal file
1
docs/_includes/docs/bp/fullhd.html
Normal file
@@ -0,0 +1 @@
|
||||
<code>>= {{ site.data.breakpoints.fullhd.from }}px</code>
|
||||
1
docs/_includes/docs/bp/touch.html
Normal file
1
docs/_includes/docs/bp/touch.html
Normal file
@@ -0,0 +1 @@
|
||||
<code>< {{ site.data.breakpoints.desktop.from }}px</code>
|
||||
1
docs/_includes/docs/bp/widescreen.html
Normal file
1
docs/_includes/docs/bp/widescreen.html
Normal file
@@ -0,0 +1 @@
|
||||
<code>>= {{ site.data.breakpoints.widescreen.from }}px</code>
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="bd-call bd-is-{{ include.color }}">
|
||||
<div class="bd-call bd-theme-{{ include.color }}">
|
||||
<div class="bd-call-body">
|
||||
<p class="bd-call-text">
|
||||
{{ include.text }}
|
||||
39
docs/_includes/docs/components/heading.html
Normal file
39
docs/_includes/docs/components/heading.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<div class="bd-heading">
|
||||
<div class="bd-heading-icon">
|
||||
{% if include.icon %}
|
||||
<span class="icon is-medium">
|
||||
<i class="{{ include.icon }} fa-lg"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="bd-heading-title">
|
||||
<h2 class="title">
|
||||
{{ include.title }}
|
||||
</h2>
|
||||
|
||||
<div class="subtitle">
|
||||
{{ include.subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-heading-button">
|
||||
{% if include.button_label %}
|
||||
<a class="button is-{{ include.color }} is-soft" href="{{ include.href }}">
|
||||
{% if include.button_icon_before %}
|
||||
<span class="icon">
|
||||
<i class="{{ include.button_icon_before }}"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
<span>
|
||||
{{ include.button_label }}
|
||||
</span>
|
||||
{% if include.button_icon_after %}
|
||||
<span class="icon">
|
||||
<i class="{{ include.button_icon_after }}"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -14,7 +14,7 @@
|
||||
{% assign link = site.data.links.by_id[thingy] %}
|
||||
{% endif %}
|
||||
{%
|
||||
include elements/link.html
|
||||
include docs/elements/link.html
|
||||
path=link.path
|
||||
color=link.color
|
||||
icon_brand=link.icon_brand
|
||||
@@ -6,7 +6,7 @@
|
||||
class="bd-logos-item is-transparent"
|
||||
{% endif %}
|
||||
>
|
||||
<img src="{{ site.url }}/assets/{{ include.asset }}.svg">
|
||||
<img src="{{ site.url }}/assets/brand/{{ include.asset }}.svg">
|
||||
|
||||
<div class="bd-logos-download">
|
||||
<div class="has-text-centered">
|
||||
95
docs/_includes/docs/components/pagination.html
Normal file
95
docs/_includes/docs/components/pagination.html
Normal file
@@ -0,0 +1,95 @@
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
|
||||
{% assign current_category_index = page.breadcrumb | size | minus: 2 %}
|
||||
{% assign current_category_id = page.breadcrumb[current_category_index] %}
|
||||
|
||||
{% assign same_category_ids = site.data.links.categories[current_category_id] %}
|
||||
{% assign category_size = same_category_ids | size %}
|
||||
{% assign last_index = category_size | minus: 1 %}
|
||||
|
||||
{% for category_id in site.data.links.pagination_category_ids %}
|
||||
{% if category_id == current_category_id %}
|
||||
{% assign prev_category_index = forloop.index0 | minus: 1 %}
|
||||
{% assign next_category_index = forloop.index0 | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for link_id in same_category_ids %}
|
||||
{% if link_id == current_link_id %}
|
||||
{% assign prev_index = forloop.index0 | minus: 1 %}
|
||||
{% assign next_index = forloop.index0 | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Previous link -->
|
||||
<!-- If first index in list -->
|
||||
{% if prev_index == -1 %}
|
||||
{% assign prev_category_id = site.data.links.pagination_category_ids[prev_category_index] %}
|
||||
{% assign prev_category_links = site.data.links.categories[prev_category_id] %}
|
||||
{% assign prev_category_size = prev_category_links | size %}
|
||||
{% assign prev_last_index = prev_category_size | minus: 1 %}
|
||||
{% assign prev_link_id = prev_category_links[prev_last_index] %}
|
||||
{% else %}
|
||||
{% assign prev_category_id = current_category_id %}
|
||||
{% assign prev_link_id = same_category_ids[prev_index] %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Next link -->
|
||||
<!-- If last index in list -->
|
||||
{% if next_index == category_size %}
|
||||
{% assign next_category_id = site.data.links.pagination_category_ids[next_category_index] %}
|
||||
{% assign next_category_ = site.data.links.categories[next_category_id] %}
|
||||
{% assign next_link_id = next_category_[0] %}
|
||||
{% else %}
|
||||
{% assign next_category_id = current_category_id %}
|
||||
{% assign next_link_id = same_category_ids[next_index] %}
|
||||
{% endif %}
|
||||
|
||||
{% assign prev_theme = prev_category_id %}
|
||||
{% assign next_theme = next_category_id %}
|
||||
|
||||
{% assign library_category_ids = 'columns,components,elements,form,layout' | split: ',' %}
|
||||
|
||||
{% if library_category_ids contains prev_category_id %}
|
||||
{% assign prev_theme = 'library' %}
|
||||
{% endif %}
|
||||
|
||||
{% if library_category_ids contains next_category_id %}
|
||||
{% assign next_theme = 'library' %}
|
||||
{% endif %}
|
||||
|
||||
{% unless page.hide_pagination %}
|
||||
{% if prev_link_id or next_link_id %}
|
||||
<nav class="bd-docs-pagination bd-pagination-links">
|
||||
{% if prev_link_id %}
|
||||
{% assign prev_link = site.data.links.by_id[prev_link_id] %}
|
||||
<a
|
||||
class="bd-pagination-button bd-pagination-prev bd-theme-{{ prev_theme }}"
|
||||
href="{{ site.url }}{{ prev_link.path }}"
|
||||
title="{{ prev_link.name }}"
|
||||
>
|
||||
<i>←</i>
|
||||
<span>
|
||||
<em>{{ prev_category_id }}:</em>
|
||||
<strong>{{ prev_link.name }}</strong>
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if next_link_id %}
|
||||
{% assign next_link = site.data.links.by_id[next_link_id] %}
|
||||
<a
|
||||
class="bd-pagination-button bd-pagination-next bd-theme-{{ next_theme }}"
|
||||
href="{{ site.url }}{{ next_link.path }}"
|
||||
title="{{ next_link.name }}"
|
||||
>
|
||||
<span>
|
||||
<em>{{ next_category_id }}:</em>
|
||||
<strong>{{ next_link.name }}</strong>
|
||||
</span>
|
||||
<i>→</i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
7
docs/_includes/docs/components/single-color-row.html
Normal file
7
docs/_includes/docs/components/single-color-row.html
Normal file
@@ -0,0 +1,7 @@
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-{{ include.color }});"></span></td>
|
||||
<td><code>--bulma-{{ include.color }}</code> as <strong>{{ include.label }}</strong></td>
|
||||
<td class="{{ include.classname }}">The quick brown fox jumps over the lazy dog</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="bd-tabs">
|
||||
<div class="bd-tabs js-tabs">
|
||||
<nav class="bd-tabs-nav">
|
||||
<button class="bd-is-active">{{ include.button_a | escape }}</button>
|
||||
<button>{{ include.button_b | escape }}</button>
|
||||
@@ -8,16 +8,10 @@
|
||||
</nav>
|
||||
|
||||
<div class="bd-tabs-items">
|
||||
<div class="bd-tabs-item bd-is-active">
|
||||
{{ include.item_a }}
|
||||
</div>
|
||||
<div class="bd-tabs-item">
|
||||
{{ include.item_b }}
|
||||
</div>
|
||||
<div class="bd-tabs-item bd-is-active">{{ include.item_a }}</div>
|
||||
<div class="bd-tabs-item">{{ include.item_b }}</div>
|
||||
{% if include.item_c %}
|
||||
<div class="bd-tabs-item">
|
||||
{{ include.item_c }}
|
||||
</div>
|
||||
<div class="bd-tabs-item">{{ include.item_c }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
48
docs/_includes/docs/components/variables.html
Normal file
48
docs/_includes/docs/components/variables.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% assign tab = include.tab | default: page.doc-tab %}
|
||||
{% assign subtab = include.subtab | default: page.doc-subtab %}
|
||||
{% assign data = include.data | default: site.data.variables[tab][subtab] %}
|
||||
{% assign sass_vars = include.data | default: data["sass-vars"] %}
|
||||
{% assign css_vars = include.data | default: data["css-vars"] %}
|
||||
|
||||
<div class="bd-vars-table block table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-sass"><i class="fa-brands fa-sass"></i></span>
|
||||
<span>Sass Variable</span>
|
||||
</div>
|
||||
</th>
|
||||
{% unless include.hide_css_vars %}
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-link"><i class="fa-brands fa-css3"></i></span>
|
||||
<span>CSS Variable</span>
|
||||
</div>
|
||||
</th>
|
||||
{% endunless %}
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-success"><i class="fa-solid fa-code"></i></span>
|
||||
<span>Value</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for sass_var in sass_vars %}
|
||||
{% unless sass_var["value"] == "dv.$colors" %}
|
||||
<tr>
|
||||
<td class="bd-theme-sass">{% highlight sass %}${{ sass_var["name"] }}{% endhighlight %}</td>
|
||||
{% unless include.hide_css_vars %}
|
||||
<td class="bd-theme-code">{% highlight css %}var(--bulma-{{ sass_var["css-var"] }}){% endhighlight %}</td>
|
||||
{% endunless %}
|
||||
<td class="bd-theme-docs">{% highlight css %}{{ sass_var["value"] }}{% endhighlight %}</td>
|
||||
</tr>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -12,7 +12,7 @@
|
||||
{{ include.content | markdownify }}
|
||||
|
||||
{% if include.title == 'No JavaScript' %}
|
||||
{% include elements/tw.html tweet_id="860885116909998080" modifier='bd-is-grey' %}
|
||||
{% include docs/elements/tw.html tweet_id="860885116909998080" modifier='bd-is-grey' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
<h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
|
||||
<h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title {{ include.class }}">
|
||||
<span class="bd-anchor-name">
|
||||
{{ include.name }}
|
||||
</span>
|
||||
@@ -6,13 +6,13 @@
|
||||
<div class="bd-backers-group">
|
||||
<ul class="bd-backers-list bd-is-patreon">
|
||||
{% for pt in site.data.backers[include.tier] reversed %}
|
||||
{% include elements/patreon-item.html backer=pt %}
|
||||
{% include docs/elements/patreon-item.html backer=pt %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<ul class="bd-backers-list bd-is-github">
|
||||
{% for gh in site.data.github[include.tier] reversed %}
|
||||
{% include elements/github-item.html sponsor=gh %}
|
||||
{% include docs/elements/github-item.html sponsor=gh %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
30
docs/_includes/docs/elements/background-foreground-row.html
Normal file
30
docs/_includes/docs/elements/background-foreground-row.html
Normal file
@@ -0,0 +1,30 @@
|
||||
{% if include.color %}
|
||||
{% assign name = include.color | prepend: '-' %}
|
||||
{% else %}
|
||||
{% assign name = '' %}
|
||||
{% endif %}
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Background</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>--bulma-primary{{ name }}</code>
|
||||
</td>
|
||||
<td rowspan="2" style="vertical-align: middle;">
|
||||
<span
|
||||
class="bd-color-swatch"
|
||||
style="--background: var(--bulma-primary{{ name }}); --color: var(--bulma-primary{{ name }}-invert);"
|
||||
>
|
||||
bulma-primary{{ name }}-invert <strong>on</strong> bulma-primary{{ name }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Foreground</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>--bulma-primary{{ name }}-invert</code>
|
||||
</td>
|
||||
</tr>
|
||||
1
docs/_includes/docs/elements/color-swatch.html
Normal file
1
docs/_includes/docs/elements/color-swatch.html
Normal file
@@ -0,0 +1 @@
|
||||
{% if include.text %}<span class="bd-color-swatch" style="--background: {{ include.background }}; --color: {{ include.color }};">{{ include.text }}</span>{% else %}<span class="bd-color-swatch" style="--background: {{ include.background }};"></span>{% endif %}
|
||||
3
docs/_includes/docs/elements/drawing.html
Normal file
3
docs/_includes/docs/elements/drawing.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="bd-drawing bd-is-{{ include.id }}" style="--width: {{ include.width }}; --height: {{ include.height }};">
|
||||
{% include svg/drawings/{{ include.id }}.svg %}
|
||||
</div>
|
||||
35
docs/_includes/docs/elements/link.html
Normal file
35
docs/_includes/docs/elements/link.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<a class="bd-link" href="{{ site.url }}{{ include.path }}">
|
||||
{% if include.surtitle %}
|
||||
<p class="bd-link-surtitle">
|
||||
{{ include.surtitle }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<header class="bd-link-header">
|
||||
{% if include.icon %}
|
||||
<span class="icon bd-link-icon">
|
||||
<i
|
||||
class="{{ include.icon }} fa-lg"
|
||||
></i>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="bd-link-counter"></span>
|
||||
{% endif %}
|
||||
|
||||
<h4 class="bd-link-title algolia-lvl1">
|
||||
{{ include.name }}
|
||||
</h4>
|
||||
</header>
|
||||
|
||||
<div class="bd-link-body">
|
||||
<div class="bd-link-subtitle">
|
||||
{{ include.subtitle }}
|
||||
</div>
|
||||
|
||||
{% if include.more %}
|
||||
<div class="bd-link-more">
|
||||
{{ include.more }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
30
docs/_includes/docs/elements/palette-class-row.html
Normal file
30
docs/_includes/docs/elements/palette-class-row.html
Normal file
@@ -0,0 +1,30 @@
|
||||
{% assign name = include.color %}
|
||||
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
<span class="bd-color-swatch" style="--background: var(--bulma-{{ name }})"></span>
|
||||
</td>
|
||||
<td rowspan="2">
|
||||
<code>--bulma-{{ name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>has-text-{{ name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="has-text-{{ name }}">Hello World</span>
|
||||
</td>
|
||||
<td>
|
||||
<code>has-background-{{ name }}</code>
|
||||
</td>
|
||||
<td class="has-background-{{ name }} has-text-{{ name }}-invert">
|
||||
Hello World
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="padding: 0; --hl-radius: 0; width: 10em; overflow: hidden;">
|
||||
{% highlight html -%}
|
||||
<span class="has-text-{{ name }}">Color</span>
|
||||
<span class="has-background-{{ name }}">Background</span>
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
1
docs/_includes/docs/elements/primary-colors.html
Normal file
1
docs/_includes/docs/elements/primary-colors.html
Normal file
@@ -0,0 +1 @@
|
||||
{% include docs/elements/color-swatch.html background="var(--bulma-text)" %}{% include docs/elements/color-swatch.html background="var(--bulma-link)" %}{% include docs/elements/color-swatch.html background="var(--bulma-primary)" %}{% include docs/elements/color-swatch.html background="var(--bulma-success)" %}{% include docs/elements/color-swatch.html ackground="var(--bulma-info)" %}{% include docs/elements/color-swatch.html background="var(--bulma-warning)" %}{% include docs/elements/color-swatch.html background="var(--bulma-danger)" %}
|
||||
45
docs/_includes/docs/elements/snippet.html
Normal file
45
docs/_includes/docs/elements/snippet.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<div
|
||||
class="
|
||||
bd-snippet
|
||||
{% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
|
||||
{% if include.fullwidth %}bd-is-fullwidth{% endif %}
|
||||
{% if include.clipped %}bd-is-clipped{% endif %}
|
||||
{% if include.size %}bd-is-size-{{ include.size }}{% endif %}
|
||||
"
|
||||
>
|
||||
{% unless include.no_example %}
|
||||
<div class="bd-snippet-example">
|
||||
<p class="bd-snippet-title">
|
||||
<span class="bd-snippet-tag bd-is-example">Example</span>
|
||||
</p>
|
||||
|
||||
<div class="bd-snippet-preview">
|
||||
{% if include.wrapper %}
|
||||
<div class="{{ include.wrapper }}">
|
||||
{{ include.content }}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ include.content }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
<div class="bd-snippet-source bd-theme-html">
|
||||
<p class="bd-snippet-title">
|
||||
<span class="bd-snippet-tag bd-is-html">HTML</span>
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="
|
||||
bd-snippet-code
|
||||
{% unless include.clipped %}bd-highlight-full{% endunless %}
|
||||
{% if include.more %}bd-is-more bd-is-more-clipped{% endif %}
|
||||
"
|
||||
>
|
||||
{% highlight html -%}
|
||||
{{- include.content -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
6
docs/_includes/docs/elements/sponsor-button.html
Normal file
6
docs/_includes/docs/elements/sponsor-button.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<a class="button is-patreon"
|
||||
href="{{ site.url }}{{ site.data.links.by_id.sponsor.path }}">
|
||||
<span>
|
||||
Become a sponsor
|
||||
</span>
|
||||
</a>
|
||||
8
docs/_includes/docs/elements/step.html
Normal file
8
docs/_includes/docs/elements/step.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<tr>
|
||||
<td style="width: 20rem;">
|
||||
{{ include.content | markdownify }}
|
||||
</td>
|
||||
<td>
|
||||
<img src="/assets/{{ include.image }}" alt="Step" width="{{ include.width | divided_by: 2 }}" height="{{ include.height | divided_by: 2 }}">
|
||||
</td>
|
||||
</tr>
|
||||
@@ -8,7 +8,7 @@
|
||||
<header class="bd-tw-header">
|
||||
<a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
|
||||
<figure class="bd-tw-avatar">
|
||||
<img class="lazyload" src="{{ tweet.avatar }}">
|
||||
<img src="{{ tweet.avatar }}" onError="this.onerror=null;this.src='/assets/images/twitter/default-twitter.png';">
|
||||
</figure>
|
||||
<div class="bd-tw-name">
|
||||
<strong class="bd-tw-fullname">
|
||||
@@ -62,7 +62,7 @@
|
||||
</ul>
|
||||
|
||||
{% if include.drawing_id %}
|
||||
{% include elements/drawing.html
|
||||
{% include docs/elements/drawing.html
|
||||
id=include.drawing_id
|
||||
width=include.drawing_width
|
||||
height=include.drawing_height
|
||||
@@ -1,47 +1,30 @@
|
||||
<nav id="navbarBottom" class="navbar is-fixed-bottom has-shadow is-hidden">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
<div class="navbar-burger" data-target="navbarExample{{ include.id }}">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navbarExample{{ include.id }}" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/"> Home </a>
|
||||
<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/"> Docs </a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/"> Overview </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/"> Modifiers </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/"> Columns </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/"> Layout </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/"> Form </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/"> Elements </a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/"> Components </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,13 +33,18 @@
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms">
|
||||
<a
|
||||
class="bd-tw-button button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>
|
||||
Tweet
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
62
docs/_includes/docs/examples/navbar-color.html
Normal file
62
docs/_includes/docs/examples/navbar-color.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<nav class="navbar is-{{ include.color }}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
{% include svg/bulma-current.svg %}
|
||||
</a>
|
||||
<div class="navbar-burger js-burger" data-target="navMenuColor{{ include.color }}-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuColor{{ include.color }}-example" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/"> Docs </a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/"> Overview </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/"> Modifiers </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/"> Columns </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/"> Layout </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/"> Form </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/"> Elements </a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/"> Components </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a
|
||||
class="bd-tw-button button is-{{ include.color }} is-soft"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-{{ include.color }} is-light" href="{{ site.data.meta.download }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,9 +1,10 @@
|
||||
<nav class="navbar{% if include.transparent %} is-transparent{% endif %}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
<div class="navbar-burger" data-target="navbarExample{{ include.id }}">
|
||||
<div class="navbar-burger js-burger" data-target="navbarExample{{ include.id }}">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
@@ -12,36 +13,18 @@
|
||||
|
||||
<div id="navbarExample{{ include.id }}" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/"> Docs </a>
|
||||
<div class="navbar-dropdown{% if include.boxed %} is-boxed{% endif %}">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/"> Overview </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/"> Modifiers </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/"> Columns </a>
|
||||
<a class="navbar-item is-selected" href="{{ site.url }}/documentation/layout/container/"> Layout </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/"> Form </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/"> Elements </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/components/breadcrumb/"> Components </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,13 +33,18 @@
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms">
|
||||
<a
|
||||
class="bd-tw-button button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>
|
||||
Tweet
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
30
docs/_includes/docs/hero.html
Normal file
30
docs/_includes/docs/hero.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<section class="bd-hero is-{{ include.variant }}">
|
||||
<div class="bd-hero-body">
|
||||
<h1 class="bd-hero-title">
|
||||
{{ include.title }}
|
||||
</h1>
|
||||
|
||||
<hr class="bd-hr">
|
||||
|
||||
<h2 class="bd-hero-subtitle">
|
||||
{{ include.subtitle }}
|
||||
</h2>
|
||||
|
||||
{% if include.prints %}
|
||||
<div class="bd-hero-prints">
|
||||
{% for print in include.prints %}
|
||||
<a class="bd-hero-print icon-text">
|
||||
<span class="icon">
|
||||
<i class="{{ print.icon }}"></i>
|
||||
</span>
|
||||
<span>{{ print.label }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="bd-hero-carbon">
|
||||
{% include website/carbon.html %}
|
||||
</div>
|
||||
</section>
|
||||
6
docs/_includes/docs/menu-heading.html
Normal file
6
docs/_includes/docs/menu-heading.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<h3 class="bd-menu-heading js-menu-heading">
|
||||
<span class="icon">
|
||||
<i class="{{ include.icon }}"></i>
|
||||
</span>
|
||||
<strong>{{ include.label }}</strong>
|
||||
</h3>
|
||||
30
docs/_includes/docs/menu-item.html
Normal file
30
docs/_includes/docs/menu-item.html
Normal file
@@ -0,0 +1,30 @@
|
||||
{% assign link = site.data.links.by_id[include.link_id] %}
|
||||
{% assign has_sublist = include.sublist_id != nil %}
|
||||
{% assign sublist_size = site.data.links.categories[include.sublist_id] | size %}
|
||||
{% assign current_category = page['doc-tab'] %}
|
||||
{% assign is_current = current_category == include.sublist_id %}
|
||||
|
||||
<li>
|
||||
{%
|
||||
include docs/menu-link.html
|
||||
link=link
|
||||
link_id=include.link_id
|
||||
has_sublist=has_sublist
|
||||
sublist_size=sublist_size
|
||||
is_current=is_current
|
||||
%}
|
||||
|
||||
{% if has_sublist %}
|
||||
<ul
|
||||
class="bd-menu-sublist {% if current_category == include.sublist_id %}is-open{% endif %}"
|
||||
style="--subsize: {{ sublist_size }}"
|
||||
>
|
||||
{% for sublink_id in site.data.links.categories[include.sublist_id] %}
|
||||
{% assign sublink = site.data.links.by_id[sublink_id] %}
|
||||
<li>
|
||||
{% include docs/menu-link.html link=sublink link_id=sublink_id %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user