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

Do elements

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-09 14:15:31 +01:00
parent e75fd365e3
commit f0074aa339
30 changed files with 1966 additions and 1986 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/_data/links.json
View File

@ -40,10 +40,50 @@
"name": "Elements",
"path": "/documentation/elements"
},
"button": {
"elements-box": {
"name": "Box",
"path": "/documentation/elements/box"
},
"elements-button": {
"name": "Button",
"path": "/documentation/elements/button"
},
"elements-content": {
"name": "Content",
"path": "/documentation/elements/content"
},
"elements-delete": {
"name": "Delete",
"path": "/documentation/elements/delete"
},
"elements-icon": {
"name": "Icon",
"path": "/documentation/elements/icon"
},
"elements-image": {
"name": "Image",
"path": "/documentation/elements/image"
},
"elements-notification": {
"name": "Notification",
"path": "/documentation/elements/notification"
},
"elements-progress": {
"name": "Progress bars",
"path": "/documentation/elements/progress"
},
"elements-table": {
"name": "Table",
"path": "/documentation/elements/table"
},
"elements-tag": {
"name": "Tag",
"path": "/documentation/elements/tag"
},
"elements-title": {
"name": "Title",
"path": "/documentation/elements/title"
},
"components": {
"name": "Components",
"path": "/documentation/components"
@ -91,6 +131,7 @@
},
"order": {
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
"elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
}
}

30
docs/_includes/elements/improve-page.html
View File

@ -1,16 +1,14 @@
<section class="section bd-typo">
<div class="container">
<p class="has-text-grey-light">
<a href="{{ site.url }}/made-with-bulma/">
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
</a>
<br>
This page is <strong class="has-text-grey">open source</strong>.
Noticed a typo? Or something unclear?
<br>
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
Improve this page on GitHub
</a>
</p>
</div>
</section>
<div class="bd-typo">
<p class="has-text-grey-light">
<a href="{{ site.url }}/made-with-bulma/">
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
</a>
<br>
This page is <strong class="has-text-grey">open source</strong>.
Noticed a typo? Or something unclear?
<br>
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
Improve this page on GitHub
</a>
</p>
</div>

51
docs/_layouts/documentation.html
View File

@ -41,27 +41,29 @@ route: documentation
</ul>
</nav>
<nav class="bd-prev-next">
{% if previous_link %}
<a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
←
</a>
{% else %}
<span>
←
</span>
{% endif %}
{% if previous_link or next_link %}
<nav class="bd-prev-next">
{% if previous_link %}
<a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
←
</a>
{% else %}
<span>
←
</span>
{% endif %}
{% if next_link %}
<a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
→
</a>
{% else %}
<span>
→
</span>
{% endif %}
</nav>
{% if next_link %}
<a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
→
</a>
{% else %}
<span>
→
</span>
{% endif %}
</nav>
{% endif %}
</div>
<header class="bd-header">
@ -71,6 +73,15 @@ route: documentation
<p class="subtitle is-4">
{{ page.subtitle }}
</p>
{% if page.meta %}
{%
include meta.html
colors=page.meta.colors
sizes=page.meta.sizes
variables=page.meta.variables
%}
{% endif %}
</header>
<div class="bd-content">

3
docs/_sass/main.sass
View File

@ -81,6 +81,7 @@
.bd-main
padding: 0 3rem
.bd-lead
padding: 3rem 3rem 3rem 0
margin-left: -3rem
padding: 3rem
.bd-side
padding: 3rem 0 3rem 1.5rem

1
docs/_sass/native.sass
View File

@ -1,4 +1,5 @@
.native-js
border-top: 2px solid $background
display: none
font-size: 1rem
opacity: 0

3
docs/_sass/specific.sass
View File

@ -1,3 +1,6 @@
.bd-typo
margin-top: 3rem
.bd-has-text-rss
color: $rss

11
docs/css/bulma-docs.css
View File

@ -34,7 +34,7 @@
width: 0.5em;
}
.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child), .bd-snippet:not(:last-child), .bd-callout:not(:last-child) {
margin-bottom: 1.5rem;
}
@ -4545,7 +4545,6 @@ a.box:active {
.table {
background-color: white;
color: #363636;
margin-bottom: 1.5rem;
}
.table td,
@ -9592,7 +9591,8 @@ label.panel-block:hover {
padding: 0 3rem;
}
.bd-lead {
padding: 3rem 3rem 3rem 0;
margin-left: -3rem;
padding: 3rem;
}
.bd-side {
padding: 3rem 0 3rem 1.5rem;
@ -10391,6 +10391,10 @@ svg {
text-decoration: underline;
}
.bd-typo {
margin-top: 3rem;
}
.bd-has-text-rss {
color: #f26522;
}
@ -12330,6 +12334,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
}
.native-js {
border-top: 2px solid whitesmoke;
display: none;
font-size: 1rem;
opacity: 0;

8
docs/documentation.html Normal file
View File

@ -0,0 +1,8 @@
---
title: Documentation
subtitle: "Everything you need to <strong>create a website</strong> with Bulma"
layout: documentation
breadcrumb:
- home
- documentation
---

7
docs/documentation/components/breadcrumb.html
View File

@ -10,10 +10,9 @@ breadcrumb:
- components
- components-breadcrumb
meta:
- since: "0.4.3"
- variables: true
- colors: false
- sizes: true
variables: true
colors: false
sizes: true
---
{% capture breadcrumb_example %}

8
docs/documentation/components/card.html
View File

@ -1,6 +1,6 @@
---
title: Card
subtile: "An all-around flexible and composable component"
subtitle: "An all-around flexible and composable component"
layout: documentation
doc-tab: components
doc-subtab: card
@ -10,9 +10,9 @@ breadcrumb:
- components
- components-card
meta:
- variables: true
- colors: false
- sizes: false
variables: true
colors: false
sizes: false
---
{% capture card_example %}

6
docs/documentation/components/dropdown.html
View File

@ -10,9 +10,9 @@ breadcrumb:
- components
- components-dropdown
meta:
- colors: false
- sizes: false
- variables: true
colors: false
sizes: false
variables: true
---
{% capture dropdown_example %}

6
docs/documentation/components/menu.html
View File

@ -10,9 +10,9 @@ breadcrumb:
- components
- components-menu
meta:
- colors: false
- sizes: false
- variables: true
colors: false
sizes: false
variables: true
---
{% capture menu_example %}

8
docs/documentation/components/message.html
View File

@ -4,15 +4,15 @@ subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your pa
layout: documentation
doc-tab: components
doc-subtab: message
meta:
- colors: true
- sizes: true
- variables: true
breadcrumb:
- home
- documentation
- components
- components-message
meta:
colors: true
sizes: true
variables: true
---
{% capture message_example %}

8
docs/documentation/components/modal.html
View File

@ -4,15 +4,15 @@ subtitle: "A classic <strong>modal</strong> overlay, in which you can include <e
layout: documentation
doc-tab: components
doc-subtab: modal
meta:
- colors: false
- sizes: false
- variables: true
breadcrumb:
- home
- documentation
- components
- components-modal
meta:
colors: false
sizes: false
variables: true
---
{% capture modal %}

6
docs/documentation/components/navbar.html
View File

@ -10,9 +10,9 @@ breadcrumb:
- components
- components-navbar
meta:
- colors: true
- sizes: false
- variables: true
colors: true
sizes: false
variables: true
---
{% capture navbar_example %}

6
docs/documentation/components/pagination.html
View File

@ -10,9 +10,9 @@ breadcrumb:
- components
- components-pagination
meta:
- colors: false
- sizes: true
- variables: true
colors: false
sizes: true
variables: true
---
{% capture pagination_example %}

6
docs/documentation/components/panel.html
View File

@ -10,9 +10,9 @@ breadcrumb:
- components
- components-panel
meta:
- colors: false
- sizes: false
- variables: true
colors: false
sizes: false
variables: true
---
{% capture panel_example %}

6
docs/documentation/components/tabs.html
View File

@ -10,9 +10,9 @@ breadcrumb:
- components
- components-tabs
meta:
- colors: false
- sizes: true
- variables: true
colors: false
sizes: true
variables: true
---
{% capture tabs_example %}

48
docs/documentation/elements/box.html
View File

@ -1,12 +1,20 @@
---
title: Box
subtitle: "A white <strong>box</strong> to contain other elements"
layout: documentation
doc-tab: elements
doc-subtab: box
breadcrumb:
- home
- documentation
- elements
- elements-box
meta:
colors: false
sizes: false
variables: true
---
{% include subnav/subnav-elements.html %}
{% capture box_example %}
<div class="box">
<article class="media">
@ -47,32 +55,14 @@ doc-subtab: box
</div>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Box</h1>
<h2 class="subtitle">
A white <strong>box</strong> to contain other elements
</h2>
{%
include meta.html
colors=false
sizes=false
variables=true
%}
<div class="content">
<p>
The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
<br>
For example, you can include a media object:
</p>
</div>
<hr>
{% include snippet.html content=box_example more=true %}
<div class="content">
<p>
The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
<br>
For example, you can include a media object:
</p>
</div>
{% include snippet.html content=box_example more=true %}
{% include variables.html type='element' %}
</div>
</section>
{% include variables.html type='element' %}

8
docs/documentation/elements/button.html
View File

@ -8,11 +8,11 @@ breadcrumb:
- home
- documentation
- elements
- button
- elements-button
meta:
- colors: true
- sizes: true
- variables: true
colors: true
sizes: true
variables: true
---
{% capture button_example %}

150
docs/documentation/elements/content.html
View File

@ -1,8 +1,18 @@
---
title: Content
subtitle: "A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available"
layout: documentation
doc-tab: elements
doc-subtab: content
breadcrumb:
- home
- documentation
- elements
- elements-content
meta:
colors: false
sizes: true
variables: true
---
{% capture content_pre %}
@ -101,87 +111,67 @@ doc-subtab: content
</div>
{% endcapture %}
{% include subnav/subnav-elements.html %}
<div class="content">
<p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
<ul>
<li><code>&lt;p&gt;</code> paragraphs</li>
<li><code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> <code>&lt;dl&gt;</code> lists</li>
<li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> headings</li>
<li><code>&lt;blockquote&gt;</code> quotes</li>
<li><code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code></li>
<li><code>&lt;table&gt;</code> <code>&lt;tr&gt;</code> <code>&lt;th&gt;</code> <code>&lt;td&gt;</code> tables</li>
</ul>
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
</div>
<section class="section">
<div class="container">
<h1 class="title">Content</h1>
<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
%}
{% include snippet.html content=content_example %}
<hr>
<div class="content">
<p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
<ul>
<li><code>&lt;p&gt;</code> paragraphs</li>
<li><code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> <code>&lt;dl&gt;</code> lists</li>
<li><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> headings</li>
<li><code>&lt;blockquote&gt;</code> quotes</li>
<li><code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code></li>
<li><code>&lt;table&gt;</code> <code>&lt;tr&gt;</code> <code>&lt;th&gt;</code> <code>&lt;td&gt;</code> tables</li>
</ul>
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
</div>
{% include snippet.html content=content_example %}
{% include anchor.html name="Sizes" %}
<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>
<div class="bd-example">
<div class="content is-small">
<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>
</div>
</div>
<div class="bd-example">
<div class="content is-medium">
<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>
</div>
</div>
<div class="bd-example">
<div class="content is-large">
<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>
</div>
</div>
{% include variables.html type='element' %}
{% include anchor.html name="Sizes" %}
<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>
<div class="bd-example">
<div class="content is-small">
<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>
</div>
</section>
</div>
<div class="bd-example">
<div class="content is-medium">
<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>
</div>
</div>
<div class="bd-example">
<div class="content is-large">
<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>
</div>
</div>
{% include variables.html type='element' %}

76
docs/documentation/elements/delete.html
View File

@ -1,8 +1,18 @@
---
title: Delete
subtitle: "A versatile <strong>delete</strong> cross"
layout: documentation
doc-tab: elements
doc-subtab: delete
breadcrumb:
- home
- documentation
- elements
- elements-delete
meta:
colors: false
sizes: true
variables: false
---
{% capture cross_example %}
@ -40,53 +50,33 @@ doc-subtab: delete
</article>
{% endcapture %}
{% include subnav/subnav-elements.html %}
<div class="content">
<p>
The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
</p>
<p>
On its own, it's a simple circle with a cross:
</p>
</div>
<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
%}
{% include snippet.html content=cross_example %}
<hr>
{% include anchor.html name="Sizes" %}
<div class="content">
<p>
The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
</p>
<p>
On its own, it's a simple circle with a cross:
</p>
</div>
<div class="content">
<p>
It comes in <strong>4 sizes</strong>:
</p>
</div>
{% include snippet.html content=cross_example %}
{% include snippet.html content=cross_sizes_example %}
{% include anchor.html name="Sizes" %}
{% include anchor.html name="Combinations" %}
<div class="content">
<p>
It comes in <strong>4 sizes</strong>:
</p>
</div>
<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>
{% include snippet.html content=cross_sizes_example %}
{% include anchor.html name="Combinations" %}
<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>
{% include snippet.html content=cross_elements_example %}
</div>
</section>
{% include snippet.html content=cross_elements_example %}

1776
docs/documentation/elements/icon.html
View File

File diff suppressed because it is too large Load Diff

262
docs/documentation/elements/image.html
View File

@ -1,5 +1,6 @@
---
title: Image
subtitle: "A container for <strong>responsive images</strong>"
layout: documentation
doc-tab: elements
doc-subtab: image
@ -11,6 +12,15 @@ dimensions:
- 64
- 96
- 128
breadcrumb:
- home
- documentation
- elements
- elements-image
meta:
colors: false
sizes: false
variables: true
---
{% capture image %}
@ -25,151 +35,131 @@ dimensions:
</figure>
{% endcapture %}
{% include subnav/subnav-elements.html %}
<div class="content">
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
</div>
<section class="section">
<div class="container">
<h1 class="title">Images</h1>
<h2 class="subtitle">
A container for <strong>responsive images</strong>
</h2>
{%
include meta.html
colors=false
sizes=false
variables=true
%}
{% include snippet.html content=image %}
<hr>
{% include anchor.html name="Fixed square images" %}
<div class="content">
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
</div>
<div class="content">
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
</div>
{% include snippet.html content=image %}
<table class="table is-bordered">
<tbody>
{% 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>
{% include anchor.html name="Fixed square images" %}
{% include anchor.html name="Retina images" %}
<div class="content">
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
</div>
<div class="content">
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
</div>
<table class="table is-bordered">
<tbody>
{% 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>
{% include snippet.html content=retina_image %}
{% include anchor.html name="Retina images" %}
{% include anchor.html name="Responsive images with ratios" %}
<div class="content">
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
</div>
<div class="content">
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
</div>
{% include snippet.html content=retina_image %}
<table id="images" class="table is-bordered">
<tbody>
<tr>
<td><code>image is-square</code></td>
<td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>Square (or 1 by 1)</td>
</tr>
<tr>
<td><code>image is-1by1</code></td>
<td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>1 by 1</td>
</tr>
<tr>
<td><code>image is-5by4</code></td>
<td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
<td>5 by 4</td>
</tr>
<tr>
<td><code>image is-4by3</code></td>
<td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
<td>4 by 3</td>
</tr>
<tr>
<td><code>image is-3by2</code></td>
<td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
<td>3 by 2</td>
</tr>
<tr>
<td><code>image is-5by3</code></td>
<td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
<td>5 by 3</td>
</tr>
<tr>
<td><code>image is-16by9</code></td>
<td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
<td>16 by 9</td>
</tr>
<tr>
<td><code>image is-2by1</code></td>
<td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
<td>2 by 1</td>
</tr>
<tr>
<td><code>image is-3by1</code></td>
<td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
<td>3 by 1</td>
</tr>
<tr>
<td><code>image is-4by5</code></td>
<td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
<td>4 by 5</td>
</tr>
<tr>
<td><code>image is-3by4</code></td>
<td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
<td>3 by 4</td>
</tr>
<tr>
<td><code>image is-2by3</code></td>
<td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
<td>2 by 3</td>
</tr>
<tr>
<td><code>image is-3by5</code></td>
<td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
<td>3 by 5</td>
</tr>
<tr>
<td><code>image is-9by16</code></td>
<td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
<td>9 by 16</td>
</tr>
<tr>
<td><code>image is-1by2</code></td>
<td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
<td>1 by 2</td>
</tr>
<tr>
<td><code>image is-1by3</code></td>
<td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
<td>1 by 3</td>
</tr>
</tbody>
</table>
{% include anchor.html name="Responsive images with ratios" %}
<div class="content">
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
</div>
<div class="content">
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
</div>
<table id="images" class="table is-bordered">
<tbody>
<tr>
<td><code>image is-square</code></td>
<td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>Square (or 1 by 1)</td>
</tr>
<tr>
<td><code>image is-1by1</code></td>
<td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>1 by 1</td>
</tr>
<tr>
<td><code>image is-5by4</code></td>
<td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
<td>5 by 4</td>
</tr>
<tr>
<td><code>image is-4by3</code></td>
<td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
<td>4 by 3</td>
</tr>
<tr>
<td><code>image is-3by2</code></td>
<td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
<td>3 by 2</td>
</tr>
<tr>
<td><code>image is-5by3</code></td>
<td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
<td>5 by 3</td>
</tr>
<tr>
<td><code>image is-16by9</code></td>
<td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
<td>16 by 9</td>
</tr>
<tr>
<td><code>image is-2by1</code></td>
<td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
<td>2 by 1</td>
</tr>
<tr>
<td><code>image is-3by1</code></td>
<td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
<td>3 by 1</td>
</tr>
<tr>
<td><code>image is-4by5</code></td>
<td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
<td>4 by 5</td>
</tr>
<tr>
<td><code>image is-3by4</code></td>
<td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
<td>3 by 4</td>
</tr>
<tr>
<td><code>image is-2by3</code></td>
<td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
<td>2 by 3</td>
</tr>
<tr>
<td><code>image is-3by5</code></td>
<td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
<td>3 by 5</td>
</tr>
<tr>
<td><code>image is-9by16</code></td>
<td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
<td>9 by 16</td>
</tr>
<tr>
<td><code>image is-1by2</code></td>
<td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
<td>1 by 2</td>
</tr>
<tr>
<td><code>image is-1by3</code></td>
<td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
<td>1 by 3</td>
</tr>
</tbody>
</table>
<div class="content">
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
</div>
{% include variables.html type='element' %}
</div>
</section>
{% include variables.html type='element' %}

38
docs/documentation/elements/notification.html
View File

@ -1,8 +1,18 @@
---
title: Notification
subtitle: "Bold <strong>notification</strong> blocks, to alert your users of something"
layout: documentation
doc-tab: elements
doc-subtab: notification
breadcrumb:
- home
- documentation
- elements
- elements-notification
meta:
colors: true
sizes: false
variables: true
---
{% capture notification %}
@ -25,30 +35,10 @@ doc-subtab: notification
{% endfor %}
{% endcapture %}
{% include subnav/subnav-elements.html %}
{% include snippet.html content=notification %}
<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
%}
{% include anchor.html name="Colors" %}
<hr>
{% include snippet.html content=notification_colors %}
{% include snippet.html content=notification %}
{% include anchor.html name="Colors" %}
{% include snippet.html content=notification_colors %}
{% include variables.html type='element' %}
</div>
</section>
{% include variables.html type='element' %}

42
docs/documentation/elements/progress.html
View File

@ -1,8 +1,18 @@
---
title: Progress Bar
subtitle: "Native HTML <strong>progress</strong> bars"
layout: documentation
doc-tab: elements
doc-subtab: progress
breadcrumb:
- home
- documentation
- elements
- elements-progress
meta:
colors: true
sizes: true
variables: true
---
{% capture progress %}
@ -25,34 +35,14 @@ doc-subtab: progress
<progress class="progress is-large" value="60" max="100">60%</progress>
{% endcapture %}
{% include subnav/subnav-elements.html %}
{% include snippet.html content=progress %}
<section class="section">
<div class="container">
<h1 class="title">Progress bars</h1>
<h2 class="subtitle">
Native HTML <strong>progress</strong> bars
</h2>
{%
include meta.html
colors=true
sizes=true
variables=true
%}
{% include anchor.html name="Colors" %}
<hr>
{% include snippet.html content=progress_colors %}
{% include snippet.html content=progress %}
{% include anchor.html name="Sizes" %}
{% include anchor.html name="Colors" %}
{% include snippet.html content=progress_sizes %}
{% include snippet.html content=progress_colors %}
{% include anchor.html name="Sizes" %}
{% include snippet.html content=progress_sizes %}
{% include variables.html type='element' %}
</div>
</section>
{% include variables.html type='element' %}

538
docs/documentation/elements/table.html
View File

@ -1,8 +1,18 @@
---
title: Table
subtitle: "The inevitable HTML <strong>table</strong>, with special case cells"
layout: documentation
doc-tab: elements
doc-subtab: table
breadcrumb:
- home
- documentation
- elements
- elements-table
meta:
colors: false
sizes: false
variables: true
---
{% capture table_example %}
@ -305,292 +315,274 @@ doc-subtab: table
</table>
{% endcapture %}
{% include subnav/subnav-elements.html %}
<section class="section">
<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>
<div class="content">
<p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
<div class="content">
<p>You simply need to attach a single <code>.table</code> CSS class on a <code>&lt;table&gt;</code> with the following structure:</p>
<ul>
<li>
<code>table</code> the main <strong>container</strong>
<ul>
<li>
<code>table</code> the main <strong>container</strong>
<code>thead</code> the optional <strong>top</strong> part of the table
</li>
<li>
<code>tfoot</code> the optional <strong>bottom</strong> part of the table
</li>
<li>
<code>tbody</code> the main <strong>content</strong> of the table
<ul>
<li>
<code>thead</code> the optional <strong>top</strong> part of the table
</li>
<li>
<code>tfoot</code> the optional <strong>bottom</strong> part of the table
</li>
<li>
<code>tbody</code> the main <strong>content</strong> of the table
<code>tr</code> each table <strong>row</strong>
<ul>
<li>
<code>tr</code> each table <strong>row</strong>
<ul>
<li>
<code>th</code> a table cell <strong>heading</strong>
</li>
<li>
<code>td</code> a table <strong>cell</strong>
</li>
</ul>
<code>th</code> a table cell <strong>heading</strong>
</li>
<li>
<code>td</code> a table <strong>cell</strong>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
</p>
</div>
</li>
</ul>
<p>
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
</p>
</div>
{% include snippet.html content=table_example horizontal=true more=true %}
{% include snippet.html content=table_example horizontal=true more=true %}
{% include anchor.html name="Modifiers" %}
<div class="columns">
<div class="column">
<p>Add <strong>borders</strong> to all the cells.</p>
</div>
<div class="column">
<code>table is-bordered</code>
</div>
<div class="column is-half">
<table class="table is-bordered">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>Add <strong>stripes</strong> to the table.</p>
</div>
<div class="column">
<code>table is-striped</code>
</div>
<div class="column is-half">
<table class="table is-striped">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>Make the cells <strong>narrower</strong>.</p>
</div>
<div class="column">
<code>table is-narrow</code>
</div>
<div class="column is-half">
<table class="table is-narrow">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can add a <strong>hover effect</strong> on each row</p>
</div>
<div class="column">
<code>table is-hoverable</code>
</div>
<div class="column is-half">
<table class="table is-hoverable">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can have a <strong>fullwidth</strong> table.</p>
</div>
<div class="column">
<code>table is-fullwidth</code>
</div>
<div class="column is-half">
<table class="table is-fullwidth">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can <strong>combine</strong> all five modifiers.</p>
</div>
<div class="column">
<code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
</div>
<div class="column is-half">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
{% include variables.html type='element' %}
{% include anchor.html name="Modifiers" %}
<div class="columns">
<div class="column">
<p>Add <strong>borders</strong> to all the cells.</p>
</div>
</section>
<div class="column">
<code>table is-bordered</code>
</div>
<div class="column is-half">
<table class="table is-bordered">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>Add <strong>stripes</strong> to the table.</p>
</div>
<div class="column">
<code>table is-striped</code>
</div>
<div class="column is-half">
<table class="table is-striped">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>Make the cells <strong>narrower</strong>.</p>
</div>
<div class="column">
<code>table is-narrow</code>
</div>
<div class="column is-half">
<table class="table is-narrow">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can add a <strong>hover effect</strong> on each row</p>
</div>
<div class="column">
<code>table is-hoverable</code>
</div>
<div class="column is-half">
<table class="table is-hoverable">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can have a <strong>fullwidth</strong> table.</p>
</div>
<div class="column">
<code>table is-fullwidth</code>
</div>
<div class="column is-half">
<table class="table is-fullwidth">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="columns">
<div class="column">
<p>You can <strong>combine</strong> all five modifiers.</p>
</div>
<div class="column">
<code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
</div>
<div class="column is-half">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</tbody>
</table>
</div>
</div>
{% include variables.html type='element' %}

533
docs/documentation/elements/tag.html
View File

@ -1,8 +1,18 @@
---
title: Tags
subtitle: "Small <strong>tag labels</strong> to insert anywhere"
layout: documentation
doc-tab: elements
doc-subtab: tag
breadcrumb:
- home
- documentation
- elements
- elements-tag
meta:
colors: true
sizes: true
variables: true
---
{% capture tag %}
@ -179,274 +189,257 @@ doc-subtab: tag
</div>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Tags</h1>
<h2 class="subtitle">
Small <strong>tag labels</strong> to insert anywhere
</h2>
{%
include meta.html
colors=true
sizes=true
variables=true
%}
<hr>
<div class="columns">
<div class="column is-4">
By default, a <strong>tag</strong> is a 1.5rem high label.
</div>
<div class="column is-2">
<span class="tag">
Tag label
</span>
</div>
<div class="column is-6">
{% highlight html %}{{ tag }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Colors" %}
<div class="columns">
<div class="column is-4">
Like with buttons, there are <strong>10 different colors</strong> available.
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-black">
Black
</span>
</p>
<p class="field">
<span class="tag is-dark">
Dark
</span>
</p>
<p class="field">
<span class="tag is-light">
Light
</span>
</p>
<p class="field">
<span class="tag is-white">
White
</span>
</p>
<p class="field">
<span class="tag is-primary">
Primary
</span>
</p>
<p class="field">
<span class="tag is-link">
Link
</span>
</p>
<p class="field">
<span class="tag is-info">
Info
</span>
</p>
<p class="field">
<span class="tag is-success">
Success
</span>
</p>
<p class="field">
<span class="tag is-warning">
Warning
</span>
</p>
<span class="tag is-danger">
Danger
</span>
</div>
<div class="column is-6">
{% highlight html %}{{ tags_colors }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Sizes" %}
<div class="columns">
<div class="column is-4">
And <strong>2 additional</strong> sizes.
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-primary is-medium">
Medium
</span>
</p>
<p class="field">
<span class="tag is-info is-large">
Large
</span>
</p>
</div>
<div class="column is-6">
{% highlight html %}{{ sizes }}{% endhighlight %}
</div>
</div>
{% include anchor.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>
<div class="columns">
<div class="column is-4">
You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
</div>
<div class="column is-2">
{{ is_delete }}
</div>
<div class="column is-6">
{% highlight html %}{{ is_delete }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Combinations" %}
<div class="columns">
<div class="column is-4">
You can append a <strong>delete button</strong>.
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span>
</p>
<p class="field">
<span class="tag is-warning is-medium">
Hello
<button class="delete is-small"></button>
</span>
</p>
<p class="field">
<span class="tag is-danger is-large">
World
<button class="delete"></button>
</span>
</p>
</div>
<div class="column is-6">
{% highlight html %}{{ delete }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="List of tags" %}
<div class="columns">
<div class="column">
<div class="content">
<p>
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
</p>
</div>
<div class="bd-example">
{{ tags }}
</div>
</div>
<div class="column">
{% highlight html %}{{ tags }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
</p>
</div>
<div class="bd-example">
{{ tags_multiple }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
</p>
</div>
<div class="bd-example">
{{ tags_addons }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ tags_addons }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
</p>
</div>
<div class="bd-example">
{{ tags_delete_addons }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
</p>
</div>
<div class="bd-example">
{{ tags_field_addons }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
This can be useful for a long list of <strong>blog tags</strong>.
</p>
</div>
<div class="bd-example">
{{ tags_blog_addons }}
</div>
</div>
<div class="column">
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
</div>
</div>
{% include variables.html type='element' %}
<div class="columns">
<div class="column is-4">
By default, a <strong>tag</strong> is a 1.5rem high label.
</div>
</section>
<div class="column is-2">
<span class="tag">
Tag label
</span>
</div>
<div class="column is-6">
{% highlight html %}{{ tag }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Colors" %}
<div class="columns">
<div class="column is-4">
Like with buttons, there are <strong>10 different colors</strong> available.
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-black">
Black
</span>
</p>
<p class="field">
<span class="tag is-dark">
Dark
</span>
</p>
<p class="field">
<span class="tag is-light">
Light
</span>
</p>
<p class="field">
<span class="tag is-white">
White
</span>
</p>
<p class="field">
<span class="tag is-primary">
Primary
</span>
</p>
<p class="field">
<span class="tag is-link">
Link
</span>
</p>
<p class="field">
<span class="tag is-info">
Info
</span>
</p>
<p class="field">
<span class="tag is-success">
Success
</span>
</p>
<p class="field">
<span class="tag is-warning">
Warning
</span>
</p>
<span class="tag is-danger">
Danger
</span>
</div>
<div class="column is-6">
{% highlight html %}{{ tags_colors }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Sizes" %}
<div class="columns">
<div class="column is-4">
And <strong>2 additional</strong> sizes.
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-primary is-medium">
Medium
</span>
</p>
<p class="field">
<span class="tag is-info is-large">
Large
</span>
</p>
</div>
<div class="column is-6">
{% highlight html %}{{ sizes }}{% endhighlight %}
</div>
</div>
{% include anchor.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>
<div class="columns">
<div class="column is-4">
You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
</div>
<div class="column is-2">
{{ is_delete }}
</div>
<div class="column is-6">
{% highlight html %}{{ is_delete }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Combinations" %}
<div class="columns">
<div class="column is-4">
You can append a <strong>delete button</strong>.
</div>
<div class="column is-2">
<p class="field">
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span>
</p>
<p class="field">
<span class="tag is-warning is-medium">
Hello
<button class="delete is-small"></button>
</span>
</p>
<p class="field">
<span class="tag is-danger is-large">
World
<button class="delete"></button>
</span>
</p>
</div>
<div class="column is-6">
{% highlight html %}{{ delete }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="List of tags" %}
<div class="columns">
<div class="column">
<div class="content">
<p>
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
</p>
</div>
<div class="bd-example">
{{ tags }}
</div>
</div>
<div class="column">
{% highlight html %}{{ tags }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
</p>
</div>
<div class="bd-example">
{{ tags_multiple }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
</p>
</div>
<div class="bd-example">
{{ tags_addons }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ tags_addons }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
</p>
</div>
<div class="bd-example">
{{ tags_delete_addons }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
</p>
</div>
<div class="bd-example">
{{ tags_field_addons }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
This can be useful for a long list of <strong>blog tags</strong>.
</p>
</div>
<div class="bd-example">
{{ tags_blog_addons }}
</div>
</div>
<div class="column">
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
</div>
</div>
{% include variables.html type='element' %}

258
docs/documentation/elements/title.html
View File

@ -1,8 +1,18 @@
---
title: Title and Subtitle
subtitle: "Simple <strong>headings</strong> to add depth to your page"
layout: documentation
doc-tab: elements
doc-subtab: title
breadcrumb:
- home
- documentation
- elements
- elements-title
meta:
colors: false
sizes: true
variables: true
---
{% capture default %}
@ -50,139 +60,119 @@ doc-subtab: title
<p class="subtitle is-5">Subtitle 5</p>
{% endcapture %}
{% include subnav/subnav-elements.html %}
<section class="section">
<div class="container">
<h1 class="title">Titles</h1>
<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">
<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>
<p class="subtitle">Subtitle</p>
</div>
<div class="column">
{% highlight html %}{{ default }}{% endhighlight %}
</div>
<div class="columns">
<div class="column">
<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>
{% include anchor.html name="Sizes" %}
<div class="columns">
<div class="column">
<p>There are <strong>6 sizes</strong> available:</p>
</div>
<div class="column">
<p class="title is-1">Title 1</p>
<p class="title is-2">Title 2</p>
<p class="title is-3">Title 3 (default size)</p>
<p class="title is-4">Title 4</p>
<p class="title is-5">Title 5</p>
<p class="title is-6">Title 6</p>
</div>
<div class="column">
{% highlight html %}{{ title_sizes }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column"></div>
<div class="column">
<p class="subtitle is-1">Subtitle 1</p>
<p class="subtitle is-2">Subtitle 2</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="subtitle is-5">Subtitle 5 (default size)</p>
<p class="subtitle is-6">Subtitle 6</p>
</div>
<div class="column">
{% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="content">
<p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
<p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
</div>
</div>
<div class="column">
<div class="block">
<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
</div>
<div class="block">
<p class="title is-2">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
</div>
<div class="block">
<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
</div>
</div>
<div class="column">
{% highlight html %}{{ combine }}{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="content">
<p>
<span class="tag is-success">New!</span>
</p>
<p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
</div>
</div>
<div class="column">
<div class="block">
<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
</div>
<div class="block">
<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
</div>
<div class="block">
<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
</div>
</div>
<div class="column">
{% highlight html %}{{ spaced }}{% endhighlight %}
</div>
</div>
{% include variables.html type='element' %}
</div>
</section>
<div class="column">
<p class="title">Title</p>
<p class="subtitle">Subtitle</p>
</div>
<div class="column">
{% highlight html %}{{ default }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Sizes" %}
<div class="columns">
<div class="column">
<p>There are <strong>6 sizes</strong> available:</p>
</div>
<div class="column">
<p class="title is-1">Title 1</p>
<p class="title is-2">Title 2</p>
<p class="title is-3">Title 3 (default size)</p>
<p class="title is-4">Title 4</p>
<p class="title is-5">Title 5</p>
<p class="title is-6">Title 6</p>
</div>
<div class="column">
{% highlight html %}{{ title_sizes }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column"></div>
<div class="column">
<p class="subtitle is-1">Subtitle 1</p>
<p class="subtitle is-2">Subtitle 2</p>
<p class="subtitle is-3">Subtitle 3</p>
<p class="subtitle is-4">Subtitle 4</p>
<p class="subtitle is-5">Subtitle 5 (default size)</p>
<p class="subtitle is-6">Subtitle 6</p>
</div>
<div class="column">
{% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="content">
<p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
<p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
</div>
</div>
<div class="column">
<div class="block">
<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
</div>
<div class="block">
<p class="title is-2">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
</div>
<div class="block">
<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
</div>
</div>
<div class="column">
{% highlight html %}{{ combine }}{% endhighlight %}
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="content">
<p>
<span class="tag is-success">New!</span>
</p>
<p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
</div>
</div>
<div class="column">
<div class="block">
<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
</div>
<div class="block">
<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>
</div>
<div class="block">
<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
</div>
</div>
<div class="column">
{% highlight html %}{{ spaced }}{% endhighlight %}
</div>
</div>
{% include variables.html type='element' %}

2
sass/elements/table.sass
View File

@ -20,9 +20,9 @@ $table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default
.table
+block
background-color: $table-background-color
color: $table-color
margin-bottom: 1.5rem
td,
th
border: $table-cell-border