+ The .box element is simply a container with a shadow, a border, a radius, and some padding.
+
+ For example, you can include a media object:
+
+
-
+{% include snippet.html content=box_example more=true %}
-
-
- The .box element is simply a container with a shadow, a border, a radius, and some padding.
-
- For example, you can include a media object:
-
-
-
- {% include snippet.html content=box_example more=true %}
-
- {% include variables.html type='element' %}
-
-
-
+{% include variables.html type='element' %}
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index 122a2147..fdf2341d 100644
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -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 %}
diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html
index 60a87137..01a0067a 100644
--- a/docs/documentation/elements/content.html
+++ b/docs/documentation/elements/content.html
@@ -1,8 +1,18 @@
---
title: Content
+subtitle: "A single class to handle WYSIWYG generated content, where only HTML tags 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
{% endcapture %}
-{% include subnav/subnav-elements.html %}
+
+
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:
+
+
<p> paragraphs
+
<ul><ol><dl> lists
+
<h1> to <h6> headings
+
<blockquote> quotes
+
<em> and <strong>
+
<table><tr><th><td> tables
+
+
This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.
+
-
-
-
Content
-
- A single class to handle WYSIWYG generated content, where only HTML tags are available
-
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:
-
-
<p> paragraphs
-
<ul><ol><dl> lists
-
<h1> to <h6> headings
-
<blockquote> quotes
-
<em> and <strong>
-
<table><tr><th><td> tables
-
-
This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.
-
-
- {% include snippet.html content=content_example %}
-
- {% include anchor.html name="Sizes" %}
-
-
-
You can use the is-small, is-medium and is-large modifiers to change the font size.
-
-
-
-
Hello World
-
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.
-
Second level
-
Curabitur accumsan turpis pharetra augue tincidunt 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.
-
-
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
-
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
-
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-
Ut non enim metus.
-
-
-
-
-
-
Hello World
-
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.
-
Second level
-
Curabitur accumsan turpis pharetra augue tincidunt 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.
-
-
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
-
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
-
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-
Ut non enim metus.
-
-
-
-
-
-
Hello World
-
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.
-
Second level
-
Curabitur accumsan turpis pharetra augue tincidunt 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.
-
-
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
-
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
-
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-
Ut non enim metus.
-
-
-
-
- {% include variables.html type='element' %}
+{% include anchor.html name="Sizes" %}
+
+
You can use the is-small, is-medium and is-large modifiers to change the font size.
+
+
+
+
Hello World
+
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.
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt 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.
+
+
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+
Ut non enim metus.
+
-
+
+
+
+
Hello World
+
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.
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt 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.
+
+
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+
Ut non enim metus.
+
+
+
+
+
+
Hello World
+
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.
+
Second level
+
Curabitur accumsan turpis pharetra augue tincidunt 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.
+
+
In fermentum leo eu lectus mollis, quis dictum mi aliquet.
+
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
- The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.
-
-
-
- {% include snippet.html content=icon_example %}
-
-
-
-
- The yellow background is only here for demonstration purposes, to highlight the icon container's area.
-
-
-
-
-
-
- By default, the icon container will take up exactly1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.
-
-
- {% include anchor.html name="Colors" %}
-
-
-
- Since icon fonts are simply text, you can use the text color modifiers to change the icon's color.
-
-
-
- {% include snippet.html content=icon_color_example %}
-
- {% include anchor.html name="Sizes" %}
-
-
-
- The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes.
-
+ The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.
-
- {% include anchor.html name="Open Iconic" %}
-
-
-
- Here is how the icon container can be used with Open Iconic.
-
-
-
-
-
-
-
Container class
-
Container size
-
Iconic class
-
Icon size
-
Result
-
-
-
-
-
- icon is-small
-
-
- 1rem x 1rem
-
-
- oi [data-glyph=puzzle-piece]
-
-
- 1em
-
-
-
-
-
-
-
-
-
- icon
-
-
- 1.5rem x 1.5rem
-
-
- oi [data-glyph=puzzle-piece]
-
-
- 1em
-
-
-
-
-
-
-
-
-
- icon is-medium
-
-
- 2rem x 2rem
-
-
- oi [data-glyph=puzzle-piece]
-
-
- 1em
-
-
-
-
-
-
-
-
-
- icon is-large
-
-
- 3rem x 3rem
-
-
- oi [data-glyph=puzzle-piece]
-
-
- 1em
-
-
-
-
-
-
-
-
-
-
- {% include anchor.html name="Ionicons" %}
-
-
-
- Here is how the icon container can be used with Ionicons.
-
-
-
-
-
-
-
Container class
-
Container size
-
Ionicon class
-
Icon size
-
Result
-
-
-
-
-
- icon is-small
-
-
- 1rem x 1rem
-
-
- ion-ionic
-
-
- 1em
-
-
-
-
-
-
-
-
-
- icon
-
-
- 1.5rem x 1.5rem
-
-
- ion-ionic
-
-
- 1em
-
-
-
-
-
-
-
-
-
- icon is-medium
-
-
- 2rem x 2rem
-
-
- ion-ionic
-
-
- 1em
-
-
-
-
-
-
-
-
-
- icon is-large
-
-
- 3rem x 3rem
-
-
- ion-ionic
-
-
- 1em
-
-
-
-
-
-
-
-
-
-
- {% include variables.html type='element' %}
+
+ {% include snippet.html content=icon_example %}
+
+
+
+ The yellow background is only here for demonstration purposes, to highlight the icon container's area.
-
+
+
+
+
+
+ By default, the icon container will take up exactly1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.
+
+
+{% include anchor.html name="Colors" %}
+
+
+
+ Since icon fonts are simply text, you can use the text color modifiers to change the icon's color.
+
+
+
+{% include snippet.html content=icon_color_example %}
+
+{% include anchor.html name="Sizes" %}
+
+
+
+ The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes.
+
+
+
+
+
+
+
Container class
+
Container size
+
Font Awesome 5 class
+
Icon size
+
Result
+
+
+
+
+
+ icon is-small
+
+
+ 1rem x 1rem
+
+
+ fas
+
+
+ 1em
+
+
+
+
+
+
+
+
+
+ icon
+
+
+ 1.5rem x 1.5rem
+
+
+ fas
+
+
+ 1em
+
+
+
+
+
+
+
+
+
+ fas fa-lg
+
+
+ 1.33em
+
+
+
+
+
+
+
+
+
+ icon is-medium
+
+
+ 2rem x 2rem
+
+
+ fas
+
+
+ 1em
+
+
+
+
+
+
+
+
+
+ fas fa-lg
+
+
+ 1.33em
+
+
+
+
+
+
+
+
+
+ fas fa-2x
+
+
+ 2em
+
+
+
+
+
+
+
+
+
+ icon is-large
+
+
+ 3rem x 3rem
+
+
+ fas
+
+
+ 1em
+
+
+
+
+
+
+
+
+
+ fas fa-lg
+
+
+ 1.33em
+
+
+
+
+
+
+
+
+
+ fas fa-2x
+
+
+ 2em
+
+
+
+
+
+
+
+
+
+ fas fa-3x
+
+
+ 3em
+
+
+
+
+
+
+
+
+
+
+{% include anchor.html name="Font Awesome variations" %}
+
+
+
+ Font Awesome also provides modifier classes for:
+
Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.
+
-
-
-
Images
-
- A container for responsive images
-
- {%
- include meta.html
- colors=false
- sizes=false
- variables=true
- %}
+{% include snippet.html content=image %}
-
+{% include anchor.html name="Fixed square images" %}
-
-
Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.
-
+
+
There are 7 dimensions to choose from, useful for avatars:
+
- {% include snippet.html content=image %}
+
+
+ {% for dimension in page.dimensions %}
+
+
image is-{{ dimension }}x{{ dimension }}
+
+
{{ dimension }}x{{ dimension }}px
+
+ {% endfor %}
+
+
- {% include anchor.html name="Fixed square images" %}
+{% include anchor.html name="Retina images" %}
-
-
There are 7 dimensions to choose from, useful for avatars:
-
+
+
Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.
+
-
-
- {% for dimension in page.dimensions %}
-
-
image is-{{ dimension }}x{{ dimension }}
-
-
{{ dimension }}x{{ dimension }}px
-
- {% endfor %}
-
-
+{% include snippet.html content=retina_image %}
- {% include anchor.html name="Retina images" %}
+{% include anchor.html name="Responsive images with ratios" %}
-
-
Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.
-
+
+
If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):
+
- {% include snippet.html content=retina_image %}
+
+
+
+
image is-square
+
+
Square (or 1 by 1)
+
+
+
image is-1by1
+
+
1 by 1
+
+
+
image is-5by4
+
+
5 by 4
+
+
+
image is-4by3
+
+
4 by 3
+
+
+
image is-3by2
+
+
3 by 2
+
+
+
image is-5by3
+
+
5 by 3
+
+
+
image is-16by9
+
+
16 by 9
+
+
+
image is-2by1
+
+
2 by 1
+
+
+
image is-3by1
+
+
3 by 1
+
+
+
image is-4by5
+
+
4 by 5
+
+
+
image is-3by4
+
+
3 by 4
+
+
+
image is-2by3
+
+
2 by 3
+
+
+
image is-3by5
+
+
3 by 5
+
+
+
image is-9by16
+
+
9 by 16
+
+
+
image is-1by2
+
+
1 by 2
+
+
+
image is-1by3
+
+
1 by 3
+
+
+
- {% include anchor.html name="Responsive images with ratios" %}
+
+
The .image container will take up the whole width while maintaining the perfect ratio.
+
-
-
If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):
-
-
-
-
-
-
image is-square
-
-
Square (or 1 by 1)
-
-
-
image is-1by1
-
-
1 by 1
-
-
-
image is-5by4
-
-
5 by 4
-
-
-
image is-4by3
-
-
4 by 3
-
-
-
image is-3by2
-
-
3 by 2
-
-
-
image is-5by3
-
-
5 by 3
-
-
-
image is-16by9
-
-
16 by 9
-
-
-
image is-2by1
-
-
2 by 1
-
-
-
image is-3by1
-
-
3 by 1
-
-
-
image is-4by5
-
-
4 by 5
-
-
-
image is-3by4
-
-
3 by 4
-
-
-
image is-2by3
-
-
2 by 3
-
-
-
image is-3by5
-
-
3 by 5
-
-
-
image is-9by16
-
-
9 by 16
-
-
-
image is-1by2
-
-
1 by 2
-
-
-
image is-1by3
-
-
1 by 3
-
-
-
-
-
-
The .image container will take up the whole width while maintaining the perfect ratio.
-
-
- {% include variables.html type='element' %}
-
-
-
+{% include variables.html type='element' %}
diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index 3078b595..4164f233 100644
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -1,8 +1,18 @@
---
title: Notification
+subtitle: "Bold notification 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 %}
-
-
-
Notifications
-
- Bold notification blocks, to alert your users of something
-
- {%
- include meta.html
- colors=true
- sizes=false
- variables=true
- %}
+{% include anchor.html name="Colors" %}
-
+{% 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' %}
-
-
-
+{% include variables.html type='element' %}
diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index 7e48d809..44d7d270 100644
--- a/docs/documentation/elements/progress.html
+++ b/docs/documentation/elements/progress.html
@@ -1,8 +1,18 @@
---
title: Progress Bar
+subtitle: "Native HTML progress 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
{% endcapture %}
-{% include subnav/subnav-elements.html %}
+{% include snippet.html content=progress %}
-
-
-
Progress bars
-
- Native HTML progress bars
-
- {%
- include meta.html
- colors=true
- sizes=true
- variables=true
- %}
+{% include anchor.html name="Colors" %}
-
+{% 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' %}
-
-
-
+{% include variables.html type='element' %}
diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html
index 1bfda503..1d801df7 100644
--- a/docs/documentation/elements/table.html
+++ b/docs/documentation/elements/table.html
@@ -1,8 +1,18 @@
---
title: Table
+subtitle: "The inevitable HTML table, 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
{% endcapture %}
-{% include subnav/subnav-elements.html %}
-
-
-
-
Tables
-
The inevitable HTML table, with special case cells
-
- 
