mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add heading
This commit is contained in:
Jeremy Thomas
parent
741e9d2d40
commit
93b7fb2fd4
@ -4,7 +4,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
|
||||
|
||||
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ site.fontawesome }}">
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
|
||||
|
||||
5
docs/_includes/heading.html
Normal file
5
docs/_includes/heading.html
Normal file
@ -0,0 +1,5 @@
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="{{ include.name | downcase }}" class="title" style="padding-top: 1.5rem;">
|
||||
{{ include.name }}
|
||||
</h3>
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="field is-grouped">
|
||||
<div id="meta" class="field is-grouped">
|
||||
|
||||
{% if include.new %}
|
||||
<div class="control">
|
||||
|
||||
@ -2,6 +2,23 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Dropdowns
|
||||
|
||||
const $metalinks = getAll('#meta a');
|
||||
|
||||
if ($metalinks.length > 0) {
|
||||
$metalinks.forEach($el => {
|
||||
$el.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const target = $el.getAttribute('href');
|
||||
const $target = document.getElementById(target.substring(1));
|
||||
$target.scrollIntoView(true);
|
||||
window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
|
||||
const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
|
||||
|
||||
if ($dropdowns.length > 0) {
|
||||
|
||||
@ -232,11 +232,7 @@ variables:
|
||||
|
||||
{% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h3>
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||
|
||||
@ -225,11 +225,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="colors" class="title" style="padding-top: 1.5rem;">
|
||||
Colors
|
||||
</h3>
|
||||
{% include heading.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
@ -240,11 +236,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h3>
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
@ -418,11 +418,7 @@ variables:
|
||||
</div>
|
||||
{% highlight html %}{{tabs_icons_example}}{% endhighlight %}
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h3>
|
||||
{% include heading.html name="Sizes" %}
|
||||
<div class="content">
|
||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Box
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: box
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Button
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: button
|
||||
@ -416,11 +417,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="colors" class="title" style="padding-top: 1.5rem;">
|
||||
Colors
|
||||
</h3>
|
||||
{% include heading.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
@ -440,11 +437,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="sizes" class="title" style="padding-top: 1.5rem;">
|
||||
Sizes
|
||||
</h3>
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Content
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: content
|
||||
@ -37,6 +38,18 @@ variables:
|
||||
value: $text-strong
|
||||
---
|
||||
|
||||
{% capture content_pre %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello World</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
|
||||
</body>
|
||||
</html>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture content_example %}
|
||||
<div class="content">
|
||||
<h1>Hello World</h1>
|
||||
@ -74,15 +87,7 @@ variables:
|
||||
<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>
|
||||
<pre><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello World</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
|
||||
</body>
|
||||
</html></pre>
|
||||
<pre>{{ content_pre }}</pre>
|
||||
<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>
|
||||
<table>
|
||||
<thead>
|
||||
@ -137,6 +142,12 @@ variables:
|
||||
<h2 class="subtitle">
|
||||
A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -159,9 +170,8 @@ variables:
|
||||
|
||||
{% highlight html %}{{content_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
<div class="content">
|
||||
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
||||
</div>
|
||||
@ -208,7 +218,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html element=true %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,44 +1,13 @@
|
||||
---
|
||||
title: Delete
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: delete
|
||||
---
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Delete</h1>
|
||||
<h2 class="subtitle">
|
||||
A versatile <strong>delete</strong> cross
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% capture cross_example %}
|
||||
<a class="delete"></a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
On its own, it's a simple circle with a cross:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{cross_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture cross_sizes_example %}
|
||||
<a class="delete is-small"></a>
|
||||
@ -46,21 +15,6 @@ doc-subtab: delete
|
||||
<a class="delete is-medium"></a>
|
||||
<a class="delete is-large"></a>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
It comes in <strong>4 sizes</strong>:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_sizes_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{cross_sizes_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture cross_elements_example %}
|
||||
<div class="block">
|
||||
@ -85,21 +39,79 @@ doc-subtab: delete
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_elements_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{{cross_elements_example}}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Delete</h1>
|
||||
<h2 class="subtitle">
|
||||
A versatile <strong>delete</strong> cross
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=true
|
||||
variables=false
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
On its own, it's a simple circle with a cross:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{cross_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
It comes in <strong>4 sizes</strong>:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_sizes_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{cross_sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="combinations" class="title" style="padding-top: 1.5rem;">
|
||||
Combinations
|
||||
</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
|
||||
</p>
|
||||
</div>
|
||||
{{cross_elements_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{cross_elements_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Form
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: form
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Icon
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: icon
|
||||
@ -28,6 +29,12 @@ variables:
|
||||
<h2 class="subtitle">
|
||||
Bulma is compatible with <strong><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></strong> icons.
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -45,9 +52,7 @@ variables:
|
||||
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>
|
||||
|
||||
@ -1,12 +1,33 @@
|
||||
---
|
||||
title: Image
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: image
|
||||
dimensions:
|
||||
- 16
|
||||
- 24
|
||||
- 32
|
||||
- 48
|
||||
- 64
|
||||
- 96
|
||||
- 128
|
||||
variables:
|
||||
- name: $dimensions
|
||||
value: 16 24 32 48 64 96 128
|
||||
---
|
||||
|
||||
{% capture image %}
|
||||
<figure class="image is-128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture retina_image %}
|
||||
<figure class="image is-128x128">
|
||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
@ -15,6 +36,12 @@ variables:
|
||||
<h2 class="subtitle">
|
||||
A container for <strong>responsive images</strong>
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -28,11 +55,7 @@ variables:
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<figure class="image is-128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</figure>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ image }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -43,41 +66,13 @@ variables:
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>image is-16x16</code></td>
|
||||
<td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
|
||||
<td>16x16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-24x24</code></td>
|
||||
<td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
|
||||
<td>24x24px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-32x32</code></td>
|
||||
<td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
|
||||
<td>32x32px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-48x48</code></td>
|
||||
<td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
|
||||
<td>48x48px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-64x64</code></td>
|
||||
<td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
|
||||
<td>64x64px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-96x96</code></td>
|
||||
<td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
|
||||
<td>96x96px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-128x128</code></td>
|
||||
<td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
|
||||
<td>128x128px</td>
|
||||
</tr>
|
||||
{% for dimension in page.dimensions %}
|
||||
<tr>
|
||||
<td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
|
||||
<td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
|
||||
<td>{{ dimension }}x{{ dimension }}px</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -93,11 +88,7 @@ variables:
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<figure class="image is-128x128">
|
||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||
</figure>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ retina_image }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Notification
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: notification
|
||||
@ -11,53 +12,16 @@ variables:
|
||||
value: 1.25rem 2.5rem 1.25rem 1.5rem
|
||||
---
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Notifications</h1>
|
||||
<h2 class="subtitle">
|
||||
Bold <strong>notification</strong> blocks, to alert your users of something
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="notification">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
<div class="notification is-primary">
|
||||
<button class="delete"></button>
|
||||
Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
<div class="notification is-info">
|
||||
<button class="delete"></button>
|
||||
Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
<div class="notification is-success">
|
||||
<button class="delete"></button>
|
||||
Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
<div class="notification is-warning">
|
||||
<button class="delete"></button>
|
||||
Warning lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
<div class="notification is-danger">
|
||||
<button class="delete"></button>
|
||||
Danger lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}
|
||||
{% capture notification %}
|
||||
<div class="notification">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture notification_colors %}
|
||||
<div class="notification is-primary">
|
||||
<button class="delete"></button>
|
||||
Primar lorem ipsum dolor sit amet, consectetur
|
||||
@ -92,7 +56,42 @@ variables:
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Notifications</h1>
|
||||
<h2 class="subtitle">
|
||||
Bold <strong>notification</strong> blocks, to alert your users of something
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=true
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{ notification }}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ notification }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{ notification_colors }}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ notification_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Progess Bar
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: progress
|
||||
@ -9,6 +10,25 @@ variables:
|
||||
value: $text
|
||||
---
|
||||
|
||||
{% capture progress %}
|
||||
<progress class="progress" value="15" max="100">15%</progress>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture progress_colors %}
|
||||
<progress class="progress is-primary" value="30" max="100">30%</progress>
|
||||
<progress class="progress is-info" value="45" max="100">45%</progress>
|
||||
<progress class="progress is-success" value="60" max="100">60%</progress>
|
||||
<progress class="progress is-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress is-danger" value="90" max="100">90%</progress>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture progress_sizes %}
|
||||
<progress class="progress is-small" value="15" max="100">15%</progress>
|
||||
<progress class="progress" value="30" max="100">30%</progress>
|
||||
<progress class="progress is-medium" value="45" max="100">45%</progress>
|
||||
<progress class="progress is-large" value="60" max="100">60%</progress>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
@ -17,41 +37,33 @@ variables:
|
||||
<h2 class="subtitle">
|
||||
Native HTML <strong>progress</strong> bars
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=true
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="example">
|
||||
<progress class="progress" value="15" max="100">15%</progress>
|
||||
<progress class="progress is-primary" value="30" max="100">30%</progress>
|
||||
<progress class="progress is-info" value="45" max="100">45%</progress>
|
||||
<progress class="progress is-success" value="60" max="100">60%</progress>
|
||||
<progress class="progress is-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress is-danger" value="90" max="100">90%</progress>
|
||||
{{ progress }}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<progress class="progress" value="15" max="100">15%</progress>
|
||||
<progress class="progress is-primary" value="30" max="100">30%</progress>
|
||||
<progress class="progress is-info" value="45" max="100">45%</progress>
|
||||
<progress class="progress is-success" value="60" max="100">60%</progress>
|
||||
<progress class="progress is-warning" value="75" max="100">75%</progress>
|
||||
<progress class="progress is-danger" value="90" max="100">90%</progress>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ progress }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include heading.html name="Colors" %}
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
<div class="example">
|
||||
<progress class="progress is-small" value="15" max="100">15%</progress>
|
||||
<progress class="progress" value="30" max="100">30%</progress>
|
||||
<progress class="progress is-medium" value="45" max="100">45%</progress>
|
||||
<progress class="progress is-large" value="60" max="100">60%</progress>
|
||||
{{ progress_colors }}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<progress class="progress is-small" value="15" max="100">15%</progress>
|
||||
<progress class="progress" value="30" max="100">30%</progress>
|
||||
<progress class="progress is-medium" value="45" max="100">45%</progress>
|
||||
<progress class="progress is-large" value="60" max="100">60%</progress>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ progress_colors }}{% endhighlight %}
|
||||
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="example">
|
||||
{{ progress_sizes }}
|
||||
</div>
|
||||
{% highlight html %}{{ progress_sizes }}{% endhighlight %}
|
||||
|
||||
{% include variables.html element=true %}
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Table
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: table
|
||||
@ -343,6 +344,12 @@ variables:
|
||||
<div class="container">
|
||||
<h1 class="title">Tables</h1>
|
||||
<h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=false
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Tags
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: tag
|
||||
@ -32,6 +33,10 @@ variables:
|
||||
<span class="tag is-info is-large">Large</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture rounded %}
|
||||
<span class="tag is-rounded">Rounded</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture delete %}
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
@ -55,6 +60,12 @@ variables:
|
||||
<h2 class="subtitle">
|
||||
Small <strong>tag labels</strong> to insert anywhere
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=true
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
@ -72,6 +83,8 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
Like with buttons, there are <strong>9 different colors</strong> available.
|
||||
@ -126,6 +139,8 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
And <strong>2 additional</strong> sizes.
|
||||
@ -147,6 +162,22 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
You can add the <code>is-rounded</code> modifier to make a <strong>rounded</strong> tag.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
{{ rounded }}
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ rounded }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Combinations" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
You can also append a <strong>delete button</strong>.
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Title and Subtitle
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: title
|
||||
@ -74,12 +75,28 @@ variables:
|
||||
<h2 class="subtitle">
|
||||
Simple <strong>headings</strong> to add depth to your page
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>There are <strong>2 types</strong> of heading:</p>
|
||||
<div class="content">
|
||||
<p>There are <strong>2 types</strong> of heading:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.title</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.subtitle</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="title">Title</p>
|
||||
@ -90,7 +107,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Checkbox
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: checkbox
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Form controls
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: general
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Input
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: input
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Radio button
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: radio
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Select
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: select
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Textarea
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: textarea
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Columns powered by Flexbox
|
||||
layout: documentation
|
||||
doc-tab: grid
|
||||
doc-subtab: columns
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Tiles powered by Flexbox
|
||||
layout: documentation
|
||||
doc-tab: grid
|
||||
doc-subtab: tiles
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Container
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: container
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Footer
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: footer
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Hero
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: hero
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Section
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: section
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Helpers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: helpers
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Responsive helpers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: responsive-helpers
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Modifiers syntax
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: syntax
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Typography helpers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: typography-helpers
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: CSS classes
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: classes
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Customize Bulma
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: customize
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Functions
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: functions
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Mixins
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Modularity
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: modular
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Responsiveness
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: responsiveness
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Get started with Bulma
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: start
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Variables
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: variables
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Extensions
|
||||
layout: default
|
||||
route: extensions
|
||||
extensions:
|
||||
|
||||
@ -4,6 +4,23 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Dropdowns
|
||||
|
||||
var $metalinks = getAll('#meta a');
|
||||
|
||||
if ($metalinks.length > 0) {
|
||||
$metalinks.forEach(function ($el) {
|
||||
$el.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
var target = $el.getAttribute('href');
|
||||
var $target = document.getElementById(target.substring(1));
|
||||
$target.scrollIntoView(true);
|
||||
window.history.replaceState(null, document.title, '' + window.location.origin + window.location.pathname + target);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
|
||||
var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
|
||||
|
||||
if ($dropdowns.length > 0) {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Thank you
|
||||
layout: default
|
||||
route: index
|
||||
---
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Versions
|
||||
layout: default
|
||||
route: versions
|
||||
---
|
||||
|
||||
Loading…
Reference in New Issue
Block a user