mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 03:14:30 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<div id="anchorsReference" class="bd-anchors-reference"></div>
|
||||
<nav id="anchors" class="bd-anchors">
|
||||
<nav id="anchors" class="bd-anchors bd-is-empty">
|
||||
<p class="bd-anchors-title">
|
||||
On this page
|
||||
</p>
|
||||
|
||||
10
docs/_includes/components/call.html
Normal file
10
docs/_includes/components/call.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<div class="bd-call bd-is-{{ include.color }}">
|
||||
<div class="bd-call-body">
|
||||
<p class="bd-call-text">
|
||||
{{ include.text }}
|
||||
</p>
|
||||
<p class="bd-call-button">
|
||||
{{ include.button }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,27 +1,54 @@
|
||||
<nav id="categories" class="bd-categories">
|
||||
{% for category in site.data.links.categories %}
|
||||
{% assign category_id = category[0] %}
|
||||
{% assign category_links = category[1] %}
|
||||
<div class="bd-categories-filter">
|
||||
<input id="categoriesFilter" class="input is-small" type="text" name="" placeholder="Filter links">
|
||||
<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] %}
|
||||
|
||||
<div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
|
||||
{% comment %}
|
||||
{% if category_id == 'overview' %}
|
||||
<p class="bd-category-group">
|
||||
Learn
|
||||
</p>
|
||||
{% elsif category_id == 'columns' %}
|
||||
<p class="bd-category-group">
|
||||
Style
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
|
||||
<div class="bd-category {% if category_id == current_category %}is-current{% endif %}">
|
||||
<header class="bd-category-header">
|
||||
<a class="bd-category-toggle">
|
||||
<span class="icon">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
<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 }}">
|
||||
{{ link.name }}
|
||||
<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!
|
||||
@@ -33,10 +60,19 @@
|
||||
</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>
|
||||
|
||||
{% unless page.hide_fortyfour %}
|
||||
{% include global/fortyfour.html %}
|
||||
{% endunless %}
|
||||
|
||||
{% include global/side-sponsor.html %}
|
||||
|
||||
16
docs/_includes/components/docs-body.html
Normal file
16
docs/_includes/components/docs-body.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{%
|
||||
include components/hero.html
|
||||
color="basic"
|
||||
title=page.title
|
||||
subtitle=subtitle
|
||||
%}
|
||||
|
||||
<div class="bd-docs-body">
|
||||
<div class="bd-docs-content bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
{% include components/pagination.html %}
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
</div>
|
||||
29
docs/_includes/components/heading.html
Normal file
29
docs/_includes/components/heading.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<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>
|
||||
34
docs/_includes/components/hero.html
Normal file
34
docs/_includes/components/hero.html
Normal file
@@ -0,0 +1,34 @@
|
||||
{% capture hero_body %}
|
||||
<div class="bd-hero-body">
|
||||
<div class="bd-hero-heading">
|
||||
<h1 class="title">
|
||||
{% if include.icon %}
|
||||
<span class="icon">
|
||||
<i class="{{ include.icon }}"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
{{ include.title | markdownify }}
|
||||
</h1>
|
||||
<div class="subtitle is-4">
|
||||
{{ include.subtitle | markdownify }}
|
||||
</div>
|
||||
{{ include.content }}
|
||||
</div>
|
||||
|
||||
<div class="bd-hero-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</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>
|
||||
82
docs/_includes/components/pagination.html
Normal file
82
docs/_includes/components/pagination.html
Normal file
@@ -0,0 +1,82 @@
|
||||
{% 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 %}
|
||||
23
docs/_includes/components/tabs.html
Normal file
23
docs/_includes/components/tabs.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<div class="bd-tabs">
|
||||
<nav class="bd-tabs-nav">
|
||||
<button class="bd-is-active">{{ include.button_a | escape }}</button>
|
||||
<button>{{ include.button_b | escape }}</button>
|
||||
{% if include.button_c %}
|
||||
<button>{{ include.button_c | escape }}</button>
|
||||
{% endif %}
|
||||
</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>
|
||||
{% if include.item_c %}
|
||||
<div class="bd-tabs-item">
|
||||
{{ include.item_c }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
7
docs/_includes/components/variables-row.html
Normal file
7
docs/_includes/components/variables-row.html
Normal file
@@ -0,0 +1,7 @@
|
||||
<div class="bd-var bd-is-body">
|
||||
<div class="bd-var-name">{% highlight css %}{{ include.variable.name }}{% endhighlight %}</div>
|
||||
<div class="bd-var-type bd-is-{{ include.variable.type }}">{{ include.variable.type }}</div>
|
||||
<div class="bd-var-value">{% highlight css %}{{ include.variable.value }}{% endhighlight %}</div>
|
||||
<div class="bd-var-computed-value">{% highlight css %}{{ include.variable.computed_value }}{% endhighlight %}</div>
|
||||
<div class="bd-var-computed-type bd-is-{{ include.variable.computed_type }}">{{ include.variable.computed_type }}</div>
|
||||
</div>
|
||||
49
docs/_includes/components/variables.html
Normal file
49
docs/_includes/components/variables.html
Normal file
@@ -0,0 +1,49 @@
|
||||
{% 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="Variables" %}
|
||||
|
||||
<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 %}
|
||||
Reference in New Issue
Block a user