mirror of
https://github.com/jgthms/bulma
synced 2026-03-16 18:44:28 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
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>
|
||||
2
docs/_includes/docs/color/black-bis.html
Normal file
2
docs/_includes/docs/color/black-bis.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 7%);"></span>
|
||||
<code>hsl(0, 0%, 7%)</code>
|
||||
2
docs/_includes/docs/color/black-ter.html
Normal file
2
docs/_includes/docs/color/black-ter.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 14%);"></span>
|
||||
<code>hsl(0, 0%, 14%)</code>
|
||||
2
docs/_includes/docs/color/black.html
Normal file
2
docs/_includes/docs/color/black.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 4%);"></span>
|
||||
<code>hsl(0, 0%, 4%)</code>
|
||||
2
docs/_includes/docs/color/blue-dark.html
Normal file
2
docs/_includes/docs/color/blue-dark.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(217, 71%, 45%);"></span>
|
||||
<code>hsl(217, 71%, 45%)</code>
|
||||
2
docs/_includes/docs/color/blue-light.html
Normal file
2
docs/_includes/docs/color/blue-light.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(219, 70%, 96%);"></span>
|
||||
<code>hsl(219, 70%, 96%)</code>
|
||||
2
docs/_includes/docs/color/blue.html
Normal file
2
docs/_includes/docs/color/blue.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(217, 71%, 53%);"></span>
|
||||
<code>hsl(217, 71%, 53%)</code>
|
||||
2
docs/_includes/docs/color/cyan-dark.html
Normal file
2
docs/_includes/docs/color/cyan-dark.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(204, 71%, 39%);"></span>
|
||||
<code>hsl(204, 71%, 39%)</code>
|
||||
2
docs/_includes/docs/color/cyan-light.html
Normal file
2
docs/_includes/docs/color/cyan-light.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(206, 70%, 96%);"></span>
|
||||
<code>hsl(206, 70%, 96%)</code>
|
||||
2
docs/_includes/docs/color/cyan.html
Normal file
2
docs/_includes/docs/color/cyan.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(204, 86%, 53%);"></span>
|
||||
<code>hsl(204, 86%, 53%)</code>
|
||||
2
docs/_includes/docs/color/green-dark.html
Normal file
2
docs/_includes/docs/color/green-dark.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(141, 53%, 31%);"></span>
|
||||
<code>hsl(141, 53%, 31%)</code>
|
||||
2
docs/_includes/docs/color/green-light.html
Normal file
2
docs/_includes/docs/color/green-light.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(142, 52%, 96%);"></span>
|
||||
<code>hsl(142, 52%, 96%)</code>
|
||||
2
docs/_includes/docs/color/green.html
Normal file
2
docs/_includes/docs/color/green.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(141, 71%, 48%);"></span>
|
||||
<code>hsl(141, 71%, 48%)</code>
|
||||
2
docs/_includes/docs/color/grey-dark.html
Normal file
2
docs/_includes/docs/color/grey-dark.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 29%);"></span>
|
||||
<code>hsl(0, 0%, 29%)</code>
|
||||
2
docs/_includes/docs/color/grey-darker.html
Normal file
2
docs/_includes/docs/color/grey-darker.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 21%);"></span>
|
||||
<code>hsl(0, 0%, 21%)</code>
|
||||
2
docs/_includes/docs/color/grey-light.html
Normal file
2
docs/_includes/docs/color/grey-light.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 71%);"></span>
|
||||
<code>hsl(0, 0%, 71%)</code>
|
||||
2
docs/_includes/docs/color/grey-lighter.html
Normal file
2
docs/_includes/docs/color/grey-lighter.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 86%);"></span>
|
||||
<code>hsl(0, 0%, 86%)</code>
|
||||
2
docs/_includes/docs/color/grey.html
Normal file
2
docs/_includes/docs/color/grey.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 48%);"></span>
|
||||
<code>hsl(0, 0%, 48%)</code>
|
||||
2
docs/_includes/docs/color/orange.html
Normal file
2
docs/_includes/docs/color/orange.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(14, 100%, 53%);"></span>
|
||||
<code>hsl(14, 100%, 53%)</code>
|
||||
2
docs/_includes/docs/color/purple.html
Normal file
2
docs/_includes/docs/color/purple.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(271, 100%, 71%);"></span>
|
||||
<code>hsl(271, 100%, 71%)</code>
|
||||
2
docs/_includes/docs/color/red-dark.html
Normal file
2
docs/_includes/docs/color/red-dark.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(348, 86%, 43%);"></span>
|
||||
<code>hsl(348, 86%, 43%)</code>
|
||||
2
docs/_includes/docs/color/red-light.html
Normal file
2
docs/_includes/docs/color/red-light.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(347, 90%, 96%);"></span>
|
||||
<code>hsl(347, 90%, 96%)</code>
|
||||
2
docs/_includes/docs/color/red.html
Normal file
2
docs/_includes/docs/color/red.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(348, 100%, 61%);"></span>
|
||||
<code>hsl(348, 100%, 61%)</code>
|
||||
2
docs/_includes/docs/color/turquoise-dark.html
Normal file
2
docs/_includes/docs/color/turquoise-dark.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(171, 100%, 29%);"></span>
|
||||
<code>hsl(171, 100%, 29%)</code>
|
||||
2
docs/_includes/docs/color/turquoise-light.html
Normal file
2
docs/_includes/docs/color/turquoise-light.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(171, 100%, 96%);"></span>
|
||||
<code>hsl(171, 100%, 96%)</code>
|
||||
2
docs/_includes/docs/color/turquoise.html
Normal file
2
docs/_includes/docs/color/turquoise.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(171, 100%, 41%);"></span>
|
||||
<code>hsl(171, 100%, 41%)</code>
|
||||
2
docs/_includes/docs/color/white-bis.html
Normal file
2
docs/_includes/docs/color/white-bis.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 98%);"></span>
|
||||
<code>hsl(0, 0%, 98%)</code>
|
||||
2
docs/_includes/docs/color/white-ter.html
Normal file
2
docs/_includes/docs/color/white-ter.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 96%);"></span>
|
||||
<code>hsl(0, 0%, 96%)</code>
|
||||
2
docs/_includes/docs/color/white.html
Normal file
2
docs/_includes/docs/color/white.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(0, 0%, 100%);"></span>
|
||||
<code>hsl(0, 0%, 100%)</code>
|
||||
2
docs/_includes/docs/color/yellow-dark.html
Normal file
2
docs/_includes/docs/color/yellow-dark.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(48, 100%, 29%);"></span>
|
||||
<code>hsl(48, 100%, 29%)</code>
|
||||
2
docs/_includes/docs/color/yellow-light.html
Normal file
2
docs/_includes/docs/color/yellow-light.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(48, 100%, 96%);"></span>
|
||||
<code>hsl(48, 100%, 96%)</code>
|
||||
2
docs/_includes/docs/color/yellow.html
Normal file
2
docs/_includes/docs/color/yellow.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(48, 100%, 67%);"></span>
|
||||
<code>hsl(48, 100%, 67%)</code>
|
||||
120
docs/_includes/docs/components/breakpoints-table.html
Normal file
120
docs/_includes/docs/components/breakpoints-table.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th style="width: 20%;">
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification is-primary">mobile</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification is-primary">tablet</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification is-primary">desktop</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification is-primary">widescreen</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-primary">fullhd</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-primary">tablet-only</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-primary">desktop-only</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-primary">widescreen-only</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification is-primary">touch</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification is-primary">until-widescreen</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification is-primary">until-fullhd</p>
|
||||
</td>
|
||||
<td colspan="1">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
10
docs/_includes/docs/components/call.html
Normal file
10
docs/_includes/docs/components/call.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<div class="bd-call bd-theme-{{ 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>
|
||||
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>
|
||||
28
docs/_includes/docs/components/links.html
Normal file
28
docs/_includes/docs/components/links.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<nav class="bd-links">
|
||||
{% if include.category_id %}
|
||||
{% assign category_id = include.category_id %}
|
||||
{% assign category_links = site.data.links.categories[category_id] %}
|
||||
{% else %}
|
||||
{% assign category_links = site.data.links.categories %}
|
||||
{% endif %}
|
||||
|
||||
{% for link_id in category_links %}
|
||||
{% if include.category_id %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
{% else %}
|
||||
{% assign thingy = link_id[0] %}
|
||||
{% assign link = site.data.links.by_id[thingy] %}
|
||||
{% endif %}
|
||||
{%
|
||||
include docs/elements/link.html
|
||||
path=link.path
|
||||
color=link.color
|
||||
icon_brand=link.icon_brand
|
||||
icon_regular=link.icon_regular
|
||||
icon=link.icon
|
||||
name=link.name
|
||||
subtitle=link.subtitle
|
||||
new=link.new
|
||||
%}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
23
docs/_includes/docs/components/logos-item.html
Normal file
23
docs/_includes/docs/components/logos-item.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<div
|
||||
{% if include.unsplash %}
|
||||
class="bd-logos-item"
|
||||
style="background-image: url(https://source.unsplash.com/{{ include.unsplash }}/480x480)"
|
||||
{% else %}
|
||||
class="bd-logos-item is-transparent"
|
||||
{% endif %}
|
||||
>
|
||||
<img src="{{ site.url }}/assets/brand/{{ include.asset }}.svg">
|
||||
|
||||
<div class="bd-logos-download">
|
||||
<div class="has-text-centered">
|
||||
<div class="buttons are-centered">
|
||||
<a class="button is-primary is-light is-small" href="{{ site.url }}/assets/{{ include.asset }}.png">
|
||||
PNG
|
||||
</a>
|
||||
<a class="button is-primary is-light is-small" href="{{ site.url }}/assets/{{ include.asset }}.svg">
|
||||
SVG
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
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>
|
||||
64
docs/_includes/docs/components/spacing-table.html
Normal file
64
docs/_includes/docs/components/spacing-table.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<table class="bd-spacing-table table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property</th>
|
||||
<th>Shortcut</th>
|
||||
<th colspan="8">Classes ↓</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="2">Values →</th>
|
||||
{% for value in include.values %}
|
||||
<th><code>{{ value[1] }}</code></th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for shortcut in include.shortcuts %}
|
||||
{% for direction in include.directions %}
|
||||
{% if direction[0] == 'all' %}
|
||||
<tr>
|
||||
<td><code>{{ shortcut[0] }}</code></td>
|
||||
<td><code>{{ shortcut[1] }}</code></td>
|
||||
{% for value in include.values %}
|
||||
<td><code>{{ shortcut[1] }}-{{ value[0] }}</code></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
|
||||
<td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
|
||||
{% for value in include.values %}
|
||||
<td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ shortcut[0] }}-left</code> <small>and</small> <br>
|
||||
<code>{{ shortcut[0] }}-right</code>
|
||||
</td>
|
||||
<td><code>{{ shortcut[1] }}{{ include.horizontal }}</code></td>
|
||||
{% for value in include.values %}
|
||||
<td><code>{{ shortcut[1] }}{{ include.horizontal }}-{{ value[0] }}</code></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
|
||||
{% if include.vertical %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ shortcut[0] }}-top</code> <small>and</small> <br>
|
||||
<code>{{ shortcut[0] }}-bottom</code>
|
||||
</td>
|
||||
<td><code>{{ shortcut[1] }}{{ include.vertical }}</code></td>
|
||||
{% for value in include.values %}
|
||||
<td><code>{{ shortcut[1] }}{{ include.vertical }}-{{ value[0] }}</code></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
17
docs/_includes/docs/components/tabs.html
Normal file
17
docs/_includes/docs/components/tabs.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<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>
|
||||
{% 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/docs/components/variables-row.html
Normal file
7
docs/_includes/docs/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>
|
||||
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>
|
||||
592
docs/_includes/docs/content/comparison.html
Normal file
592
docs/_includes/docs/content/comparison.html
Normal file
@@ -0,0 +1,592 @@
|
||||
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Grid system
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/columns/basics/">
|
||||
columns
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#grid" target="_blank">
|
||||
row
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/columns/basics/">
|
||||
column
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#grid" target="_blank">
|
||||
col
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/layout/tiles/">
|
||||
tile
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Form
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/form/general/">
|
||||
field
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/form/general/">
|
||||
field is-grouped
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#btn-groups" target="_blank">
|
||||
button groups
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/form/general/">
|
||||
field is-grouped
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#input-groups" target="_blank">
|
||||
input groups
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/form/general/">
|
||||
control
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#forms" target="_blank">
|
||||
form-group
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/form/general/">
|
||||
label
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#forms" target="_blank">
|
||||
label
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/form/input/">
|
||||
input
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#forms" target="_blank">
|
||||
form-control
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/form/textarea/">
|
||||
textarea
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#forms" target="_blank">
|
||||
form-control
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/form/select/">
|
||||
select
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/form/checkbox/">
|
||||
checkbox
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#forms" target="_blank">
|
||||
checkbox
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/form/radio/">
|
||||
radio
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#forms" target="_blank">
|
||||
radio
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/form/file/">
|
||||
file
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/button/">
|
||||
button is-static
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#forms" target="_blank">
|
||||
form-control-static
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Elements
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/elements/box/">
|
||||
box
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/button/">
|
||||
button
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#buttons" target="_blank">
|
||||
button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/elements/content/">
|
||||
content
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/delete/">
|
||||
delete
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#helper-classes-close" target="_blank">
|
||||
close
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/icon/">
|
||||
icon
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#glyphicons" target="_blank">
|
||||
glyphicon
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/image/">
|
||||
image
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#thumbnails" target="_blank">
|
||||
thumbnails
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/image/">
|
||||
image is-16by9
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#responsive-embed" target="_blank">
|
||||
responsive embed
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/notification/">
|
||||
notification
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#alerts" target="_blank">
|
||||
alerts
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/progress/">
|
||||
progress
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#progress" target="_blank">
|
||||
progress bars
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/table/">
|
||||
table
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#tables" target="_blank">
|
||||
table
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/tag/">
|
||||
tag
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#labels" target="_blank">
|
||||
labels
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/tag/">
|
||||
tag is-rounded
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#badges" target="_blank">
|
||||
badges
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/title/">
|
||||
title
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#type" target="_blank">
|
||||
h1 .. h6
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/elements/title/">
|
||||
subtitle
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#type" target="_blank">
|
||||
h1 .. h6
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="bd-is-unique">
|
||||
<a href="https://getbootstrap.com/css/#type-lists" target="_blank">
|
||||
lists
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="bd-is-unique">
|
||||
<a href="https://getbootstrap.com/css/#caret" target="_blank">
|
||||
caret
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Components
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
breadcrumb
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#breadcrumbs" target="_blank">
|
||||
breadcrumbs
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/card/">
|
||||
card
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
card
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/dropdown/">
|
||||
dropdown
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#btn-dropdowns" target="_blank">
|
||||
dropdowns
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/layout/level/">
|
||||
level
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="bd-is-unique">
|
||||
<a href="https://getbootstrap.com/components/#list-group" target="_blank">
|
||||
list group
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/layout/media-object/">
|
||||
media object
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#media" target="_blank">
|
||||
media object
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/components/menu/">
|
||||
menu
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/message/">
|
||||
message
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#panels" target="_blank">
|
||||
panels
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/modal/">
|
||||
modal
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/javascript/#modals" target="_blank">
|
||||
modal
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/navbar/">
|
||||
navbar
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#navbar" target="_blank">
|
||||
navbar
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="bd-is-unique">
|
||||
<a href="https://getbootstrap.com/components/#page-header" target="_blank">
|
||||
page header
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/pagination/">
|
||||
pagination
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#pagination" target="_blank">
|
||||
pagination
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/components/panel/">
|
||||
panel
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/components/tabs/">
|
||||
tabs
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#navs" target="_blank">
|
||||
navs
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="bd-is-unique">
|
||||
<a href="https://getbootstrap.com/components/#wells" target="_blank">
|
||||
wells
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2">
|
||||
Layout
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/layout/container/">
|
||||
container
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/css/#overview-container" target="_blank">
|
||||
container
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{{ site.url }}/documentation/layout/hero/">
|
||||
hero
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://getbootstrap.com/components/#jumbotron" target="_blank">
|
||||
jumbotron
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/layout/section/">
|
||||
section
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/layout/footer/">
|
||||
footer
|
||||
</a>
|
||||
</td>
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
111
docs/_includes/docs/content/klmn.html
Normal file
111
docs/_includes/docs/content/klmn.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<div id="klmn" class="bd-klmn">
|
||||
<div class="bd-klmn-gaps">
|
||||
<strong class="bd-klmn-label">
|
||||
Gap:
|
||||
<code id="klmnValue" class="bd-klmn-value"></code>
|
||||
</strong>
|
||||
{% for i in (0..8) %}
|
||||
<a class="bd-klmn-gap" data-value="{{ i }}">
|
||||
is-{{ i }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="bd-klmn-lead">
|
||||
<div class="columns is-variable bd-klmn-columns">
|
||||
<div class="column is-3">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Side
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-variable bd-klmn-columns">
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-variable bd-klmn-columns">
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
5
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
6
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
7
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
8
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
9
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
10
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
11
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
12
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ site.url }}/lib/klmn.js"></script>
|
||||
19
docs/_includes/docs/content/pro.html
Normal file
19
docs/_includes/docs/content/pro.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<article class="media bd-pro bd-is-{{ include.type }}">
|
||||
<aside class="media-left">
|
||||
<span class="icon">
|
||||
<i class="{% if include.icon_brand %}fab{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
|
||||
</span>
|
||||
</aside>
|
||||
<div class="media-content">
|
||||
<p class="title is-5 pro-title">
|
||||
{{ include.title }}
|
||||
</p>
|
||||
<div class="bd-pro-content">
|
||||
{{ include.content | markdownify }}
|
||||
|
||||
{% if include.title == 'No JavaScript' %}
|
||||
{% include docs/elements/tw.html tweet_id="860885116909998080" modifier='bd-is-grey' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
8
docs/_includes/docs/elements/anchor-bis.html
Normal file
8
docs/_includes/docs/elements/anchor-bis.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<h4 id="{{ include.name | slugify }}" class="title is-5 is-spaced bd-anchor-title">
|
||||
<span class="bd-anchor-name">
|
||||
{{ include.name }}
|
||||
</span>
|
||||
<a class="bd-anchor-link" href="#{{ include.name | slugify }}">
|
||||
#
|
||||
</a>
|
||||
</h4>
|
||||
13
docs/_includes/docs/elements/anchor.html
Normal file
13
docs/_includes/docs/elements/anchor.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title {{ include.class }}">
|
||||
<span class="bd-anchor-name">
|
||||
{{ include.name }}
|
||||
</span>
|
||||
<a class="bd-anchor-link" href="#{{ include.name | slugify }}">
|
||||
#
|
||||
</a>
|
||||
{% if include.tag %}
|
||||
<span class="tag is-success">
|
||||
{{ include.tag }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</h3>
|
||||
19
docs/_includes/docs/elements/backers-group.html
Normal file
19
docs/_includes/docs/elements/backers-group.html
Normal file
@@ -0,0 +1,19 @@
|
||||
{% if site.data.backers[include.tier].size > 0 or site.data.github[include.tier].size > 0 %}
|
||||
<div class="bd-backers-heading">
|
||||
<h2>{{ include.title }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="bd-backers-group">
|
||||
<ul class="bd-backers-list bd-is-patreon">
|
||||
{% for pt in site.data.backers[include.tier] reversed %}
|
||||
{% 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 docs/elements/github-item.html sponsor=gh %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
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>
|
||||
16
docs/_includes/docs/elements/flexbox-helper-table.html
Normal file
16
docs/_includes/docs/elements/flexbox-helper-table.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Property: Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for value in include.values %}
|
||||
<tr>
|
||||
<td><code>is-{{ include.property }}-{{ value }}</code></td>
|
||||
<td><code>{{ include.property }}: {{ value }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
8
docs/_includes/docs/elements/github-item.html
Normal file
8
docs/_includes/docs/elements/github-item.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<li>
|
||||
<span class="icon-text">
|
||||
<span>{{ include.sponsor }}</span>
|
||||
<a class="icon" href="https://github.com/{{ include.sponsor }}" target="_blank" rel="nofollow">
|
||||
<i class="fab fa-github-alt"></i>
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
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>
|
||||
14
docs/_includes/docs/elements/new-tag.html
Normal file
14
docs/_includes/docs/elements/new-tag.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% assign current_version_value = site.data.meta.version | remove: "." | plus: 0 %}
|
||||
{% assign tag_version_value = include.version | remove: "." | plus: 0 %}
|
||||
|
||||
<div class="tags has-addons">
|
||||
{% if tag_version_value > current_version_value %}
|
||||
<span class="tag is-warning is-light">Coming soon!</span>
|
||||
{% elsif tag_version_value == current_version_value %}
|
||||
<span class="tag">New!</span>
|
||||
<span class="tag is-success">{{ include.version }}</span>
|
||||
{% else %}
|
||||
<span class="tag">Since</span>
|
||||
<span class="tag is-info">{{ include.version }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
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>
|
||||
17
docs/_includes/docs/elements/patreon-item.html
Normal file
17
docs/_includes/docs/elements/patreon-item.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<li>
|
||||
<p>{{ include.backer.name }}</p>
|
||||
|
||||
{% if include.backer.twitter != "" %}
|
||||
<a class="icon-text bd-is-twitter" href="https://twitter.com/{{ include.backer.twitter }}" target="_blank" rel="nofollow">
|
||||
<span class="icon"><i class="fab fa-twitter"></i></span>
|
||||
<span>{{ include.backer.twitter }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if include.backer.discord != "" %}
|
||||
<span class="icon-text bd-is-discord">
|
||||
<span class="icon"><i class="fab fa-discord"></i></span>
|
||||
<span>{{ include.backer.discord }}</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
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)" %}
|
||||
1
docs/_includes/docs/elements/snippet-inline.html
Normal file
1
docs/_includes/docs/elements/snippet-inline.html
Normal file
@@ -0,0 +1 @@
|
||||
<div class="bd-snippet-inline">{% highlight sass %}{{ include.content }}{% endhighlight %}</div>
|
||||
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>
|
||||
13
docs/_includes/docs/elements/tw-button.html
Normal file
13
docs/_includes/docs/elements/tw-button.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<a class="bd-tw-button bd-fat-button button is-twitter"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="{{ include.href }}">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>
|
||||
{{ include.label }}
|
||||
</span>
|
||||
</a>
|
||||
71
docs/_includes/docs/elements/tw.html
Normal file
71
docs/_includes/docs/elements/tw.html
Normal file
@@ -0,0 +1,71 @@
|
||||
{% assign tweet = site.data.love.tweets_by_id[include.tweet_id] %}
|
||||
{% assign twUrl = "https://twitter.com/" | append: tweet.username | append: "/status/" | append: tweet.id %}
|
||||
|
||||
<article
|
||||
data-likes="{{ tweet.hearts }}"
|
||||
data-id="{{ tweet.id }}"
|
||||
class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
|
||||
<header class="bd-tw-header">
|
||||
<a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
|
||||
<figure class="bd-tw-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">
|
||||
{{ tweet.fullname }}
|
||||
</strong>
|
||||
<span class="bd-tw-username">
|
||||
@{{ tweet.username }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="bd-tw-content">
|
||||
{{ tweet.content }}
|
||||
</div>
|
||||
|
||||
<p class="bd-tw-date">
|
||||
<a href="{{ twUrl }}" target="_blank">
|
||||
{{ tweet.date }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<ul class="bd-tw-actions">
|
||||
<li class="bd-tw-action is-reply">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
|
||||
<div class="bd-tw-icon"></div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="bd-tw-action is-retweet">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
|
||||
<div class="bd-tw-icon"></div>
|
||||
{% if tweet.retweets != 0 %}
|
||||
<span class="bd-tw-action-stat">
|
||||
{{ tweet.retweets }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="bd-tw-action is-heart">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&ref_src=twsrc%5Etfw&ref_url=http%3A%2F%2Fbulma.io%2F&original_referer=http%3A%2F%2Fbulma.io%2F&tw_i={{ tweet.id }}&tw_p=tweetembed" target="_blank">
|
||||
<div class="bd-tw-icon"></div>
|
||||
{% if tweet.hearts != 0 %}
|
||||
<span class="bd-tw-action-stat">
|
||||
{{ tweet.hearts }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% if include.drawing_id %}
|
||||
{% include docs/elements/drawing.html
|
||||
id=include.drawing_id
|
||||
width=include.drawing_width
|
||||
height=include.drawing_height
|
||||
%}
|
||||
{% endif %}
|
||||
</article>
|
||||
23
docs/_includes/docs/examples/navbar-basic.html
Normal file
23
docs/_includes/docs/examples/navbar-basic.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-dark">Github</a>
|
||||
<a class="button is-link">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
62
docs/_includes/docs/examples/navbar-bottom.html
Normal file
62
docs/_includes/docs/examples/navbar-bottom.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<nav id="navbarBottom" class="navbar is-fixed-bottom has-shadow is-hidden">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
{% 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>
|
||||
<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
|
||||
<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"
|
||||
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-primary" 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>
|
||||
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>
|
||||
62
docs/_includes/docs/examples/navbar.html
Normal file
62
docs/_includes/docs/examples/navbar.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<nav class="navbar{% if include.transparent %} is-transparent{% endif %}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
<div class="navbar-burger js-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>
|
||||
<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>
|
||||
<hr class="navbar-divider">
|
||||
<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>
|
||||
|
||||
<div class="navbar-end">
|
||||
<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"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" 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>
|
||||
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>
|
||||
26
docs/_includes/docs/menu-link.html
Normal file
26
docs/_includes/docs/menu-link.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
|
||||
<a
|
||||
class="
|
||||
bd-menu-link
|
||||
{% if include.has_sublist %}
|
||||
js-sublist-link
|
||||
has-sublist
|
||||
{% endif %}
|
||||
{% if include.link_id != nil and current_link_id == include.link_id %}
|
||||
is-active
|
||||
{% endif %}
|
||||
"
|
||||
href="{{ site.url }}{{ include.link.path }}"
|
||||
data-current-link-id="{{ current_link_id }}"
|
||||
data-name="{{ include.link.name }}"
|
||||
data-size="{{ include.sublist_size }}"
|
||||
>
|
||||
<span class="bd-menu-link-name">{{ include.link.name }}</span>
|
||||
|
||||
{% if include.has_sublist %}
|
||||
<span class="icon is-small">
|
||||
<i class="fa-solid fa-angle-right"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
7
docs/_includes/docs/menu-list.html
Normal file
7
docs/_includes/docs/menu-list.html
Normal file
@@ -0,0 +1,7 @@
|
||||
{% assign category_size = site.data.links.categories[include.category_id] | size %}
|
||||
|
||||
<ul class="bd-menu-list js-menu-list" style="--size: {{ category_size }}">
|
||||
{% for link_id in site.data.links.categories[include.category_id] %}
|
||||
{% include docs/menu-item.html link_id=link_id %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
65
docs/_includes/docs/menu.html
Normal file
65
docs/_includes/docs/menu.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<div class="bd-menu">
|
||||
<div class="bd-menu-section is-start">
|
||||
{% include docs/menu-heading.html icon="fa-solid fa-arrow-right" label="Start Here" %}
|
||||
{% include docs/menu-list.html category_id="start" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-features">
|
||||
{% include docs/menu-heading.html icon="fa-solid fa-medal" label="Features" %}
|
||||
{% include docs/menu-list.html category_id="features" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-sass">
|
||||
{% include docs/menu-heading.html icon="fa-brands fa-sass" label="Sass Tools" %}
|
||||
{% include docs/menu-list.html category_id="sass" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-custom">
|
||||
{% include docs/menu-heading.html icon="fa-solid fa-palette" label="Customization" %}
|
||||
{% include docs/menu-list.html category_id="customize" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-library">
|
||||
{% include docs/menu-heading.html icon="fa-solid fa-code" label="CSS Library" %}
|
||||
|
||||
{% assign columns_size = site.data.links.categories.columns | size %}
|
||||
{% assign grid_size = site.data.links.categories.grid | size %}
|
||||
{% assign layout_size = site.data.links.categories.layout | size %}
|
||||
{% assign form_size = site.data.links.categories.form | size %}
|
||||
{% assign elements_size = site.data.links.categories.elements | size %}
|
||||
{% assign components_size = site.data.links.categories.components | size %}
|
||||
|
||||
<ul
|
||||
id="js-library-menu"
|
||||
class="bd-menu-list bd-menu-library-list js-menu-list {% if page.doc-library %}is-open{% endif %}"
|
||||
style="
|
||||
--size: 5;
|
||||
{% if page.doc-tab == "columns" %}
|
||||
--sublist-size: {{ columns_size }}
|
||||
{% elsif page.doc-tab == "grid" %}
|
||||
--sublist-size: {{ grid_size }}
|
||||
{% elsif page.doc-tab == "layout" %}
|
||||
--sublist-size: {{ layout_size }}
|
||||
{% elsif page.doc-tab == "form" %}
|
||||
--sublist-size: {{ form_size }}
|
||||
{% elsif page.doc-tab == "elements" %}
|
||||
--sublist-size: {{ elements_size }}
|
||||
{% elsif page.doc-tab == "components" %}
|
||||
--sublist-size: {{ components_size }}
|
||||
{% endif %}
|
||||
"
|
||||
>
|
||||
{% include docs/menu-item.html link_id="elements" sublist_id="elements" %}
|
||||
{% include docs/menu-item.html link_id="components" sublist_id="components" %}
|
||||
{% include docs/menu-item.html link_id="form" sublist_id="form" %}
|
||||
{% include docs/menu-item.html link_id="columns" sublist_id="columns" %}
|
||||
{% include docs/menu-item.html link_id="grid" sublist_id="grid" %}
|
||||
{% include docs/menu-item.html link_id="layout" sublist_id="layout" %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-utilities">
|
||||
{% include docs/menu-heading.html icon="fa-brands fa-css3" label="CSS Helpers" %}
|
||||
{% include docs/menu-list.html category_id="helpers" %}
|
||||
</div>
|
||||
</div>
|
||||
12
docs/_includes/docs/modals/example-js-modal.html
Normal file
12
docs/_includes/docs/modals/example-js-modal.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div id="modal-js-example" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="box">
|
||||
<p>Modal JS example</p>
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
9
docs/_includes/docs/modals/example-modal-bis.html
Normal file
9
docs/_includes/docs/modals/example-modal-bis.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<div id="modal-bis" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/assets/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
53
docs/_includes/docs/modals/example-modal-ter.html
Normal file
53
docs/_includes/docs/modals/example-modal-ter.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<div id="modal-ter" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="content">
|
||||
<h1>Hello World</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||
<h2>Second level</h2>
|
||||
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
|
||||
<ul>
|
||||
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||||
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||||
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
<h3>Third level</h3>
|
||||
<p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
|
||||
<ol>
|
||||
<li>Donec blandit a lorem id convallis.</li>
|
||||
<li>Cras gravida arcu at diam gravida gravida.</li>
|
||||
<li>Integer in volutpat libero.</li>
|
||||
<li>Donec a diam tellus.</li>
|
||||
<li>Aenean nec tortor orci.</li>
|
||||
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
||||
<li>Vivamus maximus ultricies pulvinar.</li>
|
||||
</ol>
|
||||
<blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
|
||||
<p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
|
||||
<p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
|
||||
<p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
|
||||
<h4>Fourth level</h4>
|
||||
<p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
|
||||
<p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
|
||||
<p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
|
||||
<h5>Fifth level</h5>
|
||||
<p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
|
||||
<h6>Sixth level</h6>
|
||||
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<div class="buttons">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
39
docs/_includes/docs/modals/example-modal.html
Normal file
39
docs/_includes/docs/modals/example-modal.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla
|
||||
egestas. Nullam condimentum luctus turpis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item" aria-label="retweet">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-retweet" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="like">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
41
docs/_includes/docs/snippets/custom-page.html
Normal file
41
docs/_includes/docs/snippets/custom-page.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Hello Bulma!</title>
|
||||
<link rel="stylesheet" href="my-bulma-project.css">
|
||||
</head>
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Bulma</h1>
|
||||
<p class="subtitle">
|
||||
Modern CSS framework based on
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
|
||||
>Flexbox</a
|
||||
>
|
||||
</p>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">Primary</a>
|
||||
<a class="button is-link">Link</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
26
docs/_includes/docs/snippets/customized.html
Normal file
26
docs/_includes/docs/snippets/customized.html
Normal file
@@ -0,0 +1,26 @@
|
||||
@use "sass:color";
|
||||
|
||||
// Set your brand colors
|
||||
$purple: #8a4d76;
|
||||
$pink: #fa7c91;
|
||||
$brown: #757763;
|
||||
$beige-light: #d0d1cd;
|
||||
$beige-lighter: #eff0eb;
|
||||
|
||||
// Path to Bulma's sass folder
|
||||
@use "path/to/bulma/sass" with (
|
||||
$family-primary: '"Nunito", sans-serif',
|
||||
$grey-dark: $brown,
|
||||
$grey-light: $beige-light,
|
||||
$primary: $purple,
|
||||
$link: $pink,
|
||||
$control-border-width: 2px,
|
||||
$input-h: color.hue($beige-lighter),
|
||||
$input-s: color.saturation($beige-lighter),
|
||||
$input-background-l: color.lightness($beige-lighter),
|
||||
$input-border-l: color.lightness($beige-lighter),
|
||||
$input-shadow: none
|
||||
);
|
||||
|
||||
// Import the Google Font
|
||||
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
|
||||
21
docs/_includes/docs/snippets/getting-started.html
Normal file
21
docs/_includes/docs/snippets/getting-started.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Hello Bulma!</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Hello World
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
My first website with <strong>Bulma</strong>!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
35
docs/_includes/docs/snippets/responsive-buttons.html
Normal file
35
docs/_includes/docs/snippets/responsive-buttons.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{% assign sizes = "default,small,normal,medium,large" | split: "," %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Fixed size</th>
|
||||
<th>Responsive size <small class="has-text-grey has-text-weight-normal">(resize window to see in action)</small></th>
|
||||
<th>Code</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for size in sizes %}
|
||||
{% capture responsive_code %}
|
||||
<button class="button {% unless size == 'default' %}is-{{ size }} {% endunless %}is-responsive">
|
||||
{{ size | capitalize }}
|
||||
</button>
|
||||
{% endcapture %}
|
||||
<tr>
|
||||
<td>{{ size | capitalize }}</td>
|
||||
<td>
|
||||
<button class="button is-{{ size }}">
|
||||
{{ size | capitalize }}
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
{{ responsive_code }}
|
||||
</td>
|
||||
<td>
|
||||
{% highlight html %}{{ responsive_code }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
24
docs/_includes/docs/subnav/subnav-columns.html
Normal file
24
docs/_includes/docs/subnav/subnav-columns.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'basics' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Basics
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'sizes' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/sizes/">
|
||||
Sizes
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
|
||||
Nesting
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
|
||||
Gap
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
|
||||
Options
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
36
docs/_includes/docs/subnav/subnav-components.html
Normal file
36
docs/_includes/docs/subnav/subnav-components.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'card' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/card/">
|
||||
Card
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'dropdown' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/dropdown/">
|
||||
Dropdown
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'menu' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/menu/">
|
||||
Menu
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'message' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/message/">
|
||||
Message
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'panel' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/panel/">
|
||||
Panel
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'tabs' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/tabs/">
|
||||
Tabs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
39
docs/_includes/docs/subnav/subnav-elements.html
Normal file
39
docs/_includes/docs/subnav/subnav-elements.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'box' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
|
||||
Box
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'button' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/button/">
|
||||
Button
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'content' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/content/">
|
||||
Content
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/">
|
||||
Delete
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'icon' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/icon/">
|
||||
Icon
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'image' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/image/">
|
||||
Image
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'notification' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/notification/">
|
||||
Notification
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'progress' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/progress/">
|
||||
Progress
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'table' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/table/">
|
||||
Table
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'tag' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/tag/">
|
||||
Tag
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'title' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/title/">
|
||||
Title
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
48
docs/_includes/docs/subnav/subnav-form.html
Normal file
48
docs/_includes/docs/subnav/subnav-form.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a
|
||||
class="navbar-item is-tab {% if page.doc-subtab == 'general' %}is-active{% endif %}"
|
||||
href="{{ site.url }}/documentation/form/general/"
|
||||
>
|
||||
General
|
||||
</a>
|
||||
<a
|
||||
class="navbar-item is-tab {% if page.doc-subtab == 'input' %}is-active{% endif %}"
|
||||
href="{{ site.url }}/documentation/form/input/"
|
||||
>
|
||||
Input
|
||||
</a>
|
||||
<a
|
||||
class="navbar-item is-tab {% if page.doc-subtab == 'textarea' %}is-active{% endif %}"
|
||||
href="{{ site.url }}/documentation/form/textarea/"
|
||||
>
|
||||
Textarea
|
||||
</a>
|
||||
<a
|
||||
class="navbar-item is-tab {% if page.doc-subtab == 'select' %}is-active{% endif %}"
|
||||
href="{{ site.url }}/documentation/form/select/"
|
||||
>
|
||||
Select
|
||||
</a>
|
||||
<a
|
||||
class="navbar-item is-tab {% if page.doc-subtab == 'checkbox' %}is-active{% endif %}"
|
||||
href="{{ site.url }}/documentation/form/checkbox/"
|
||||
>
|
||||
Checkbox
|
||||
</a>
|
||||
<a
|
||||
class="navbar-item is-tab {% if page.doc-subtab == 'radio' %}is-active{% endif %}"
|
||||
href="{{ site.url }}/documentation/form/radio/"
|
||||
>
|
||||
Radio
|
||||
</a>
|
||||
<a
|
||||
class="navbar-item is-tab {% if page.doc-subtab == 'file' %}is-active{% endif %}"
|
||||
href="{{ site.url }}/documentation/form/file/"
|
||||
>
|
||||
File
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
11
docs/_includes/docs/subnav/subnav-grid.html
Normal file
11
docs/_includes/docs/subnav/subnav-grid.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'tiles' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/tiles/">
|
||||
Tiles
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
27
docs/_includes/docs/subnav/subnav-layout.html
Normal file
27
docs/_includes/docs/subnav/subnav-layout.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
|
||||
Container
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'level' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/level/">
|
||||
Level
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'media-object' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/media-object/">
|
||||
Media Object
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'hero' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/hero/">
|
||||
Hero
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'section' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/section/">
|
||||
Section
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'footer' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/footer/">
|
||||
Footer
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'tiles' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/tiles/">
|
||||
Tiles
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
21
docs/_includes/docs/subnav/subnav-modifiers.html
Normal file
21
docs/_includes/docs/subnav/subnav-modifiers.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modifiers/">
|
||||
Syntax
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/helpers/">
|
||||
Helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
|
||||
Responsive helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'color-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/color-helpers/">
|
||||
Color helpers
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'typography-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/typography-helpers/">
|
||||
Typography helpers
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
33
docs/_includes/docs/subnav/subnav-overview.html
Normal file
33
docs/_includes/docs/subnav/subnav-overview.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<nav class="navbar has-shadow">
|
||||
<div class="container">
|
||||
<div class="navbar-tabs">
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
|
||||
Start
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'customize' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/customize/">
|
||||
Customize
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'colors' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/colors/">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
|
||||
Functions
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
|
||||
Mixins
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user