mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Do elements
This commit is contained in:
Jeremy Thomas
parent
e75fd365e3
commit
f0074aa339
@ -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"]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<section class="section bd-typo">
|
||||
<div class="container">
|
||||
<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">
|
||||
@ -12,5 +11,4 @@
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -41,6 +41,7 @@ route: documentation
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{% if previous_link or next_link %}
|
||||
<nav class="bd-prev-next">
|
||||
{% if previous_link %}
|
||||
<a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
|
||||
@ -62,6 +63,7 @@ route: documentation
|
||||
</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">
|
||||
|
||||
@ -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,4 +1,5 @@
|
||||
.native-js
|
||||
border-top: 2px solid $background
|
||||
display: none
|
||||
font-size: 1rem
|
||||
opacity: 0
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
.bd-typo
|
||||
margin-top: 3rem
|
||||
|
||||
.bd-has-text-rss
|
||||
color: $rss
|
||||
|
||||
|
||||
@ -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
8
docs/documentation.html
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Documentation
|
||||
subtitle: "Everything you need to <strong>create a website</strong> with Bulma"
|
||||
layout: documentation
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
---
|
||||
@ -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 %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -10,9 +10,9 @@ breadcrumb:
|
||||
- components
|
||||
- components-dropdown
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: false
|
||||
- variables: true
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture dropdown_example %}
|
||||
|
||||
@ -10,9 +10,9 @@ breadcrumb:
|
||||
- components
|
||||
- components-menu
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: false
|
||||
- variables: true
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture menu_example %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -10,9 +10,9 @@ breadcrumb:
|
||||
- components
|
||||
- components-navbar
|
||||
meta:
|
||||
- colors: true
|
||||
- sizes: false
|
||||
- variables: true
|
||||
colors: true
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture navbar_example %}
|
||||
|
||||
@ -10,9 +10,9 @@ breadcrumb:
|
||||
- components
|
||||
- components-pagination
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: true
|
||||
- variables: true
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture pagination_example %}
|
||||
|
||||
@ -10,9 +10,9 @@ breadcrumb:
|
||||
- components
|
||||
- components-panel
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: false
|
||||
- variables: true
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture panel_example %}
|
||||
|
||||
@ -10,9 +10,9 @@ breadcrumb:
|
||||
- components
|
||||
- components-tabs
|
||||
meta:
|
||||
- colors: false
|
||||
- sizes: true
|
||||
- variables: true
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture tabs_example %}
|
||||
|
||||
@ -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
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=box_example more=true %}
|
||||
{% include snippet.html content=box_example more=true %}
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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,24 +111,7 @@ doc-subtab: content
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<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
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<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><p></code> paragraphs</li>
|
||||
@ -129,16 +122,16 @@ doc-subtab: content
|
||||
<li><code><table></code> <code><tr></code> <code><th></code> <code><td></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>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=content_example %}
|
||||
{% include snippet.html content=content_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
<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>
|
||||
@ -151,8 +144,8 @@ doc-subtab: content
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
</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>
|
||||
@ -165,8 +158,8 @@ doc-subtab: content
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
</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>
|
||||
@ -179,9 +172,6 @@ doc-subtab: content
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=cross_example %}
|
||||
{% include snippet.html content=cross_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
It comes in <strong>4 sizes</strong>:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=cross_sizes_example %}
|
||||
{% include snippet.html content=cross_sizes_example %}
|
||||
|
||||
{% include anchor.html name="Combinations" %}
|
||||
{% include anchor.html name="Combinations" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=cross_elements_example %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include snippet.html content=cross_elements_example %}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Icon
|
||||
subtitle: 'Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.'
|
||||
fontawesome4: true
|
||||
iconic: true
|
||||
ionicons: true
|
||||
@ -7,6 +8,15 @@ mdi: true
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: icon
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-icon
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture icon_example %}
|
||||
@ -48,63 +58,64 @@ doc-subtab: icon
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-elements.html %}
|
||||
{% capture stacked_medium %}
|
||||
<span class="icon is-medium">
|
||||
<span class="fa-stack">
|
||||
<i class="fas fa-circle fa-stack-2x"></i>
|
||||
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Icons</h1>
|
||||
<h2 class="subtitle">
|
||||
Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=true
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
{% capture stacked_large %}
|
||||
<span class="icon is-large">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fas fa-camera fa-stack-1x"></i>
|
||||
<i class="fas fa-ban fa-stack-2x has-text-danger"></i>
|
||||
</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to "jump" on page load.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block bd-icon-size">
|
||||
<div class="block bd-icon-size">
|
||||
{% include snippet.html content=icon_example %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
Since icon fonts are simply <strong>text</strong>, you can use the <a href="/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=icon_color_example %}
|
||||
{% include snippet.html content=icon_color_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="https://fontawesome.com/how-to-use/svg-with-js#additional-styling" target="_blank">additional sizes</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container class</th>
|
||||
@ -270,11 +281,11 @@ doc-subtab: icon
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Font Awesome variations" %}
|
||||
{% include anchor.html name="Font Awesome variations" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
Font Awesome also provides modifier classes for:
|
||||
</p>
|
||||
@ -295,9 +306,9 @@ doc-subtab: icon
|
||||
stacked icons
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
@ -388,12 +399,7 @@ doc-subtab: icon
|
||||
Stacked
|
||||
</td>
|
||||
<td>
|
||||
{% highlight html %}<span class="icon is-medium">
|
||||
<span class="fa-stack">
|
||||
<i class="fas fa-circle fa-stack-2x"></i>
|
||||
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</span>{% endhighlight %}
|
||||
{% highlight html %}{{ stacked_medium }}{% endhighlight %}
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
@ -406,12 +412,7 @@ doc-subtab: icon
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% highlight html %}<span class="icon is-large">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fas fa-camera fa-stack-1x"></i>
|
||||
<i class="fas fa-ban fa-stack-2x has-text-danger"></i>
|
||||
</span>
|
||||
</span>{% endhighlight %}
|
||||
{% highlight html %}{{ stacked_large }}{% endhighlight %}
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
@ -423,17 +424,17 @@ doc-subtab: icon
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Material Design Icons" %}
|
||||
{% include anchor.html name="Material Design Icons" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container class</th>
|
||||
@ -625,9 +626,9 @@ doc-subtab: icon
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
MDI also provides modifier classes for:
|
||||
</p>
|
||||
@ -639,9 +640,9 @@ doc-subtab: icon
|
||||
rotated & flipped icons
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
@ -747,17 +748,17 @@ doc-subtab: icon
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Open Iconic" %}
|
||||
{% include anchor.html name="Open Iconic" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container class</th>
|
||||
@ -845,17 +846,17 @@ doc-subtab: icon
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Ionicons" %}
|
||||
{% include anchor.html name="Ionicons" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container class</th>
|
||||
@ -943,9 +944,6 @@ doc-subtab: icon
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
@ -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,36 +35,19 @@ dimensions:
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-elements.html %}
|
||||
|
||||
<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
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=image %}
|
||||
{% include snippet.html content=image %}
|
||||
|
||||
{% include anchor.html name="Fixed square images" %}
|
||||
{% include anchor.html name="Fixed square images" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
{% for dimension in page.dimensions %}
|
||||
<tr>
|
||||
@ -64,23 +57,23 @@ dimensions:
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Retina images" %}
|
||||
{% include anchor.html name="Retina images" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% include snippet.html content=retina_image %}
|
||||
{% include snippet.html content=retina_image %}
|
||||
|
||||
{% include anchor.html name="Responsive images with ratios" %}
|
||||
{% include anchor.html name="Responsive images with ratios" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<table id="images" class="table is-bordered">
|
||||
<table id="images" class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>image is-square</code></td>
|
||||
@ -162,14 +155,11 @@ dimensions:
|
||||
<td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
|
||||
<td>1 by 3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
@ -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' %}
|
||||
|
||||
@ -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' %}
|
||||
|
||||
@ -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,22 +315,7 @@ 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">
|
||||
<div class="content">
|
||||
<p>You simply need to attach a single <code>.table</code> CSS class on a <code><table></code> with the following structure:</p>
|
||||
<ul>
|
||||
<li>
|
||||
@ -354,13 +349,13 @@ doc-subtab: table
|
||||
<p>
|
||||
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
|
||||
</p>
|
||||
</div>
|
||||
</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" %}
|
||||
{% include anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Add <strong>borders</strong> to all the cells.</p>
|
||||
</div>
|
||||
@ -383,9 +378,9 @@ doc-subtab: table
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Add <strong>stripes</strong> to the table.</p>
|
||||
</div>
|
||||
@ -424,9 +419,9 @@ doc-subtab: table
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Make the cells <strong>narrower</strong>.</p>
|
||||
</div>
|
||||
@ -465,9 +460,9 @@ doc-subtab: table
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>You can add a <strong>hover effect</strong> on each row</p>
|
||||
</div>
|
||||
@ -506,9 +501,9 @@ doc-subtab: table
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>You can have a <strong>fullwidth</strong> table.</p>
|
||||
</div>
|
||||
@ -547,9 +542,9 @@ doc-subtab: table
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>You can <strong>combine</strong> all five modifiers.</p>
|
||||
</div>
|
||||
@ -588,9 +583,6 @@ doc-subtab: table
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
@ -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,22 +189,7 @@ 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="columns">
|
||||
<div class="column is-4">
|
||||
By default, a <strong>tag</strong> is a 1.5rem high label.
|
||||
</div>
|
||||
@ -206,11 +201,11 @@ doc-subtab: tag
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ tag }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
Like with buttons, there are <strong>10 different colors</strong> available.
|
||||
</div>
|
||||
@ -267,11 +262,11 @@ doc-subtab: tag
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ tags_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
And <strong>2 additional</strong> sizes.
|
||||
</div>
|
||||
@ -290,11 +285,11 @@ doc-subtab: tag
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Modifiers" %}
|
||||
{% include anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
@ -304,9 +299,9 @@ doc-subtab: tag
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ rounded }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
@ -316,11 +311,11 @@ doc-subtab: tag
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ is_delete }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Combinations" %}
|
||||
{% include anchor.html name="Combinations" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
You can append a <strong>delete button</strong>.
|
||||
</div>
|
||||
@ -347,11 +342,11 @@ doc-subtab: tag
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ delete }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="List of tags" %}
|
||||
{% include anchor.html name="List of tags" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -365,9 +360,9 @@ doc-subtab: tag
|
||||
<div class="column">
|
||||
{% highlight html %}{{ tags }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -381,9 +376,9 @@ doc-subtab: tag
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -397,9 +392,9 @@ doc-subtab: tag
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ tags_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -413,9 +408,9 @@ doc-subtab: tag
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -429,9 +424,9 @@ doc-subtab: tag
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -445,8 +440,6 @@ doc-subtab: tag
|
||||
<div class="column">
|
||||
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
@ -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,24 +60,7 @@ 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="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>There are <strong>2 types</strong> of heading:</p>
|
||||
@ -88,11 +81,11 @@ doc-subtab: title
|
||||
<div class="column">
|
||||
{% highlight html %}{{ default }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>There are <strong>6 sizes</strong> available:</p>
|
||||
</div>
|
||||
@ -107,9 +100,9 @@ doc-subtab: title
|
||||
<div class="column">
|
||||
{% highlight html %}{{ title_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column"></div>
|
||||
<div class="column">
|
||||
<p class="subtitle is-1">Subtitle 1</p>
|
||||
@ -122,11 +115,11 @@ doc-subtab: title
|
||||
<div class="column">
|
||||
{% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<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>
|
||||
@ -150,11 +143,11 @@ doc-subtab: title
|
||||
<div class="column">
|
||||
{% highlight html %}{{ combine }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<div class="columns">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -180,9 +173,6 @@ doc-subtab: title
|
||||
<div class="column">
|
||||
{% highlight html %}{{ spaced }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user