+ {% highlight html %}{{ button_rounded_example }}{% endhighlight %}
+
+
+
+{% include anchor.html name="States" %}
+
+
Normal
+
+{% include snippet.html content=button_normal_example %}
+
+
Hover
+
+{% include snippet.html content=button_hover_example %}
+
+
Focus
+
+{% include snippet.html content=button_focus_example %}
+
+
Active
+
+{% include snippet.html content=button_active_example %}
+
+
Loading
+
+
+
+
+ {{button_loading_example}}
+
+
+
+
+ Since the loading spinner is implemented using the :after pseudo-element, it is not supported by the <input type="submit"> element.
+
+
+
+
+
+ {% highlight html %}{{button_loading_example}}{% endhighlight %}
+
+
+
+
+ Static
+
+
+
+
- The button is an essential element of any design. It's meant to look and behave as an interactive element of your page.
+ You can create a non-interactive button by using the is-static modifier. This is useful to align a text label with an input, for example when using form addons.
+ {{button_static_example}}
+
+
+ {% highlight html %}{{button_static_example}}{% endhighlight %}
+
+
- {% include snippet.html content=button_example %}
+
Disabled
+
+
+
+ {{button_disabled_example}}
+
+
+
+
The is-disabled CSS class has been deprecated in favor of the disabled HTML attribute. Learn more
+
+
+
+
+ {% highlight html %}{{button_disabled_example}}{% endhighlight %}
+
+
+
+
With Font Awesome icons
+
+{% include snippet.html content=button_fa_example clipped=true %}
+
+
+
- The .button class can be used on:
+ If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon.
+
+
+ {{button_only_icon_example}}
+
+
+ {% highlight html %}{{button_only_icon_example}}{% endhighlight %}
+
+
+
+{% include anchor.html name="Button group" %}
+
+
+
If you want to group buttons together on a single line, use the is-grouped modifier on the field container:
+
+
+{% include snippet.html content=button_group_example %}
+
+{% include anchor.html name="Button addons" %}
+
+
+
If you want to use buttons as addons, use the has-addons modifier on the field container:
+
+
+{% include snippet.html content=button_addons_example %}
+
+{% include anchor.html name="Button group with addons" %}
+
+
+
You can group together addons as well:
+
+
+{% include snippet.html content=button_group_addons_example %}
+
+{% include anchor.html name="List of buttons" %}
+
+{% include elements/new-tag.html version="0.6.1" %}
+
+
+
+
+
+ You can now create a list of buttons with the .buttons container.
+
+
+
+ {{ buttons }}
+
+
+
+ {% highlight html %}{{ buttons }}{% endhighlight %}
+
+
+
+
+
+
+
+ If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
+
+
+
+ {{ buttons_multiple }}
+
+
+
+ {% highlight html %}{{ buttons_multiple }}{% endhighlight %}
+
+
+
+
+
+
+
+ You can attach buttons together with the .has-addons modifier.
+
+
+
+ {{ buttons_addons }}
+
+
+
+ {% highlight html %}{{ buttons_addons }}{% endhighlight %}
+
+
+
+
+
+
+
+ Use the is-centered or the is-right modifiers to alter the alignment.
+
+ You can use any modifier class on each button to differentiate them. Make sure to add the is-selected modifier as well to make sure the selected button is above its siblings.
+
+
+
+ {{ buttons_addons_selected }}
+
+
+
+ {% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
+
+
+
+
+
+
Difference between form groups and list of buttons
+
+
+
+
+ While this list of buttons style can be achieved with either field is-grouped or the new buttons class, there are a few differences:
- <a> anchor links
+ buttons has a simpler markup
- <button> form buttons
+ buttons can only contain button elements
- <input type="submit"> submit inputs
+ field is-grouped can contain any type of control inputs
- <input type="reset"> reset inputs
+ field is-grouped can be forced to fit all controls on a single line
+
+
+ with field is-grouped you can expand one of the controls
+
+ Basically, if you only want a list of buttons, using buttons is recommended. If you need more control on the styling and the elements, use a form group.
+
-
- {% include snippet.html content=button_tags_example %}
-
- {% include anchor.html name="Colors" %}
-
- {% include snippet.html content=button_colors_a_example %}
-
- {% include snippet.html content=button_colors_b_example %}
-
- {% include anchor.html name="Sizes" %}
-
- {% include snippet.html content=button_sizes_example %}
-
- {% include anchor.html name="Styles" %}
-
-
Outlined
-
- {% include snippet.html content=button_outlined_example %}
-
-
Inverted (the text color becomes the background color, and vice-versa)
-
-
-
-
- {{button_inverted_example}}
-
-
-
- {% highlight html %}{{button_inverted_example}}{% endhighlight %}
-
-
-
-
Invert Outlined (the invert color becomes the text and border colors)
-
-
-
-
- {{button_inverted_outlined_example}}
-
-
-
- {% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
-
- {% highlight html %}{{ button_rounded_example }}{% endhighlight %}
-
-
-
- {% include anchor.html name="States" %}
-
-
Normal
-
- {% include snippet.html content=button_normal_example %}
-
-
Hover
-
- {% include snippet.html content=button_hover_example %}
-
-
Focus
-
- {% include snippet.html content=button_focus_example %}
-
-
Active
-
- {% include snippet.html content=button_active_example %}
-
-
Loading
-
-
-
-
- {{button_loading_example}}
-
-
-
-
- Since the loading spinner is implemented using the :after pseudo-element, it is not supported by the <input type="submit"> element.
-
-
-
-
-
- {% highlight html %}{{button_loading_example}}{% endhighlight %}
-
-
-
-
- Static
-
-
-
-
-
-
- You can create a non-interactive button by using the is-static modifier. This is useful to align a text label with an input, for example when using form addons.
-
-
- {{button_static_example}}
-
-
- {% highlight html %}{{button_static_example}}{% endhighlight %}
-
-
-
-
Disabled
-
-
-
-
- {{button_disabled_example}}
-
-
-
-
The is-disabled CSS class has been deprecated in favor of the disabled HTML attribute. Learn more
-
-
-
-
- {% highlight html %}{{button_disabled_example}}{% endhighlight %}
-
-
-
-
With Font Awesome icons
-
- {% include snippet.html content=button_fa_example clipped=true %}
-
-
-
-
-
- If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon.
-
-
- {{button_only_icon_example}}
-
-
- {% highlight html %}{{button_only_icon_example}}{% endhighlight %}
-
-
-
- {% include anchor.html name="Button group" %}
-
-
-
If you want to group buttons together on a single line, use the is-grouped modifier on the field container:
-
-
- {% include snippet.html content=button_group_example %}
-
- {% include anchor.html name="Button addons" %}
-
-
-
If you want to use buttons as addons, use the has-addons modifier on the field container:
-
-
- {% include snippet.html content=button_addons_example %}
-
- {% include anchor.html name="Button group with addons" %}
-
-
-
You can group together addons as well:
-
-
- {% include snippet.html content=button_group_addons_example %}
-
- {% include anchor.html name="List of buttons" %}
-
- {% include elements/new-tag.html version="0.6.1" %}
-
-
-
-
-
- You can now create a list of buttons with the .buttons container.
-
-
-
- {{ buttons }}
-
-
-
- {% highlight html %}{{ buttons }}{% endhighlight %}
-
-
-
-
-
-
-
- If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
-
-
-
- {{ buttons_multiple }}
-
-
-
- {% highlight html %}{{ buttons_multiple }}{% endhighlight %}
-
-
-
-
-
-
-
- You can attach buttons together with the .has-addons modifier.
-
-
-
- {{ buttons_addons }}
-
-
-
- {% highlight html %}{{ buttons_addons }}{% endhighlight %}
-
-
-
-
-
-
-
- Use the is-centered or the is-right modifiers to alter the alignment.
-
- You can use any modifier class on each button to differentiate them. Make sure to add the is-selected modifier as well to make sure the selected button is above its siblings.
-
-
-
- {{ buttons_addons_selected }}
-
-
-
- {% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
-
-
-
-
-
-
Difference between form groups and list of buttons
-
-
-
-
- While this list of buttons style can be achieved with either field is-grouped or the new buttons class, there are a few differences:
-
-
-
- buttons has a simpler markup
-
-
- buttons can only contain button elements
-
-
- field is-grouped can contain any type of control inputs
-
-
- field is-grouped can be forced to fit all controls on a single line
-
-
- with field is-grouped you can expand one of the controls
-
-
-
- Basically, if you only want a list of buttons, using buttons is recommended. If you need more control on the styling and the elements, use a form group.
-
{% endcapture %}
-{% include subnav/subnav-columns.html %}
+
+
Building a columns layout with Bulma is very simple:
+
+
Add a columns container
+
Add as many column elements as you want
+
+
Each column will have an equal width, no matter the number of columns.
+
-
-
-
Columns
-
A simple way to build responsive columns
-
-
-
Building a columns layout with Bulma is very simple:
-
-
Add a columns container
-
Add as many column elements as you want
-
-
Each column will have an equal width, no matter the number of columns.
-
-
-
-
-
First column
-
-
-
Second column
-
-
-
Third column
-
-
-
Fourth column
-
-
-
-
- {% highlight html %}{{ columns }}{% endhighlight %}
-
+
+
+
First column
-
+
+
Second column
+
+
+
Third column
+
+
+
Fourth column
+
+
+
+
+ {% highlight html %}{{ columns }}{% endhighlight %}
+
diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html
index 7a24977b..727dbfb0 100644
--- a/docs/documentation/columns/gap.html
+++ b/docs/documentation/columns/gap.html
@@ -1,8 +1,14 @@
---
title: Columns gap
+subtitle: Customize the gap between the columns
layout: documentation
doc-tab: columns
doc-subtab: gap
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-gap
---
{% capture columns_default_gap %}
@@ -79,146 +85,134 @@ doc-subtab: gap
{% endcapture %}
-{% include subnav/subnav-columns.html %}
+{% include anchor.html name="Default gap" %}
-
-
-
Columns gap
-
- Customize the gap between the columns
-
+
+
+ Each column has a gap equal to the variable$column-gap, which has a default value of 0.75rem.
+
+ Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default.
+
- Each column has a gap equal to the variable$column-gap, which has a default value of 0.75rem.
-
- Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default.
-
-
+{% include anchor.html name="Gapless" %}
- {{ columns_default_gap }}
-
- {% include anchor.html name="Gapless" %}
-
-
-
- If you want to remove the space between the columns, add the is-gapless modifier on the columns container:
-
-
-
-
-
-
First column
-
-
-
Second column
-
-
-
Third column
-
-
-
Fourth column
-
-
-
-
- {% highlight html %}{{ columns_gapless }}{% endhighlight %}
-
-
-
-
You can combine it with the is-multiline modifier:
-
-
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-half
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
Auto
-
-
-
-
- {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
-
-
- {% include anchor.html name="Variable gap" %}
-
-
-
-
- Experimental
-
-
-
-
-
- New
- 0.5.2
-
-
-
-
-
-
- You can specify a custom column gap by appending one of 9 modifiers on the .columns container.
-
-
-
- is-0 will remove any gap (similar to is-gapless)
-
-
- is-3 is the default value, equivalent to the 0.75rem value
-
-
- is-8 is the maximum gap of 2rem
-
-
-
- Additionally, .is-variable should be added on the .columns container.
-
-
-
- {% include klmn.html %}
-
-
-
-
- This feature is only available in browsers that support CSS Variables:
-
-
-
-
-
-
-
- If your Sass setup doesn't support CSS Variables, you can disable this feature by setting $variable-columns to false.
-
-
-
+
+
+ If you want to remove the space between the columns, add the is-gapless modifier on the columns container:
+
+
+
+
+
First column
-
+
+
Second column
+
+
+
Third column
+
+
+
Fourth column
+
+
+
+
+ {% highlight html %}{{ columns_gapless }}{% endhighlight %}
+
+
+
+
You can combine it with the is-multiline modifier:
+
+
+
+
+
is-one-quarter
+
+
+
is-one-quarter
+
+
+
is-one-quarter
+
+
+
is-one-quarter
+
+
+
is-half
+
+
+
is-one-quarter
+
+
+
is-one-quarter
+
+
+
is-one-quarter
+
+
+
Auto
+
+
+
+
+ {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
+
+
+{% include anchor.html name="Variable gap" %}
+
+
+
+
+ Experimental
+
+
+
+
+
+ New
+ 0.5.2
+
+
+
+
+
+
+ You can specify a custom column gap by appending one of 9 modifiers on the .columns container.
+
+
+
+ is-0 will remove any gap (similar to is-gapless)
+
+
+ is-3 is the default value, equivalent to the 0.75rem value
+
+
+ is-8 is the maximum gap of 2rem
+
+
+
+ Additionally, .is-variable should be added on the .columns container.
+
+
+
+{% include klmn.html %}
+
+
+
+
+ This feature is only available in browsers that support CSS Variables:
+
+
+
+
+
+
+
+ If your Sass setup doesn't support CSS Variables, you can disable this feature by setting $variable-columns to false.
+
+
+
diff --git a/docs/documentation/columns/nesting.html b/docs/documentation/columns/nesting.html
index 7c66cc6e..64cf551c 100644
--- a/docs/documentation/columns/nesting.html
+++ b/docs/documentation/columns/nesting.html
@@ -1,79 +1,75 @@
---
title: Nesting columns
+subtitle: "A simple way to build responsive columns"
layout: documentation
doc-tab: columns
doc-subtab: nesting
+breadcrumb:
+- home
+- documentation
+- columns
+- columns-nesting
---
-{% include subnav/subnav-columns.html %}
-
-
-
-
Nesting columns
-
A simple way to build responsive columns
-
-
-
-
- You can nest columns to have more flexibility in your design. You only need to follow this structure:
-
+
+
+ You can nest columns to have more flexibility in your design. You only need to follow this structure:
+
+
+
+ columns: top-level columns container
- columns: top-level columns container
+ column
- column
+ columns: nested columns
- columns: nested columns
-
-
- column and so on…
-
-
+ column and so on…
-
- The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.
-
-
+
+
+
+ The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.
+
+
-
+
+
+
First column
+
-
First column
-
-
-
First nested column
-
-
-
Second nested column
-
-
+
First nested column
-
Second column
-
-
-
50%
-
-
-
Auto
-
-
-
Auto
-
-
+
Second nested column
-
-
-
- Multiline columns will also have a gap between each line.
-
-
-
+
+
Second column
+
+
+
50%
+
+
+
Auto
+
+
+
Auto
+
+
+
+
+
+
+
+ Multiline columns will also have a gap between each line.
+
{% endcapture %}
-{% include subnav/subnav-columns.html %}
+{% include anchor.html name="Multiline" %}
-
-
-
Column options
-
- Design different types of column layouts
-
+
+
Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.
+
- {% include anchor.html name="Multiline" %}
-
-
-
Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.
-
-
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-half
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
Auto
-
-
-
- {% highlight html %}{{ columns_multiline }}{% endhighlight %}
-
- {% include anchor.html name="Centering columns" %}
-
-
-
- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element:
-
+
+{% highlight html %}{{ columns_multiline }}{% endhighlight %}
+
+{% include anchor.html name="Centering columns" %}
+
+
+
+ While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element:
+
{% endcapture %}
-{% include subnav/subnav-columns.html %}
+{% include anchor.html name="Mobile columns" %}
-
-
-
Columns responsiveness
-
- Handle different column layouts for each breakpoint
-
+
+
+ By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
+
+ If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:
+
+
- {% include anchor.html name="Mobile columns" %}
-
-
-
- By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
-
- If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:
-
{% endcapture %}
-{% include subnav/subnav-columns.html %}
+
+
If you want to change the size of a single column, you can use one of the following classes:
+
+
+ is-three-quarters
+
+
+ is-two-thirds
+
+
+ is-half
+
+
+ is-one-third
+
+
+ is-one-quarter
+
+
+
The other columns will fill up the remaining space automatically.
+
-
-
-
Column sizes
-
- Define the size of each column individually
-
+{% include elements/new-tag.html version="0.6.1" %}
-
+
+
You can now use the following multiples of 20% as well:
+
+
+ is-four-fifths
+
+
+ is-three-fifths
+
+
+ is-two-fifths
+
+
+ is-one-fifth
+
+
+
-
-
If you want to change the size of a single column, you can use one of the following classes:
-
-
- is-three-quarters
-
-
- is-two-thirds
-
-
- is-half
-
-
- is-one-third
-
-
- is-one-quarter
-
-
-
The other columns will fill up the remaining space automatically.
-
+
+
+
+ is-four-fifths
+
+
+
+
Auto
+
+
+
Auto
+
+
- {% include elements/new-tag.html version="0.6.1" %}
+
+
+
+ is-three-quarters
+
+
+
+
Auto
+
+
+
Auto
+
+
-
-
You can now use the following multiples of 20% as well:
-
-
- is-four-fifths
-
-
- is-three-fifths
-
-
- is-two-fifths
-
-
- is-one-fifth
-
-
-
+
+
+
+ is-two-thirds
+
+
+
+
Auto
+
+
+
Auto
+
+
-
-
-
- is-four-fifths
-
-
-
-
Auto
-
-
-
Auto
-
-
+
+
+
+ is-three-fifths
+
+
+
+
Auto
+
+
+
Auto
+
+
-
-
-
- is-three-quarters
-
-
-
-
Auto
-
-
-
Auto
-
-
+
+
+
+ is-half
+
+
+
+
Auto
+
+
+
Auto
+
+
-
-
-
- is-two-thirds
-
-
-
-
Auto
-
-
-
Auto
-
-
+
+
+
+ is-two-fifths
+
+
+
+
Auto
+
+
+
Auto
+
+
-
-
-
- is-three-fifths
-
-
-
-
Auto
-
-
-
Auto
-
-
+
+
+
+ is-one-third
+
+
+
+
Auto
+
+
+
Auto
+
+
-
-
-
- is-half
-
-
-
-
Auto
-
-
-
Auto
-
-
+
+
+
+ is-one-quarter
+
+
+
+
Auto
+
+
+
Auto
+
+
-
-
-
- is-two-fifths
-
-
-
-
Auto
-
-
-
Auto
-
-
+
+
+
+ is-one-fifth
+
+
+
+
Auto
+
+
+
Auto
+
+
-
-
-
- is-one-third
-
-
-
-
Auto
-
-
-
Auto
-
-
+
+ {% highlight html %}{{ columns_sizes }}{% endhighlight %}
+
-
-
-
- is-one-quarter
-
-
-
-
Auto
-
-
-
Auto
-
-
+{% include anchor.html name="12 columns system" %}
-
-
-
- is-one-fifth
-
-
-
-
Auto
-
-
-
Auto
-
-
+
+
As the grid can be divided into 12 columns, there are size classes for each division:
+
+
is-2
+
is-3
+
is-4
+
is-5
+
is-6
+
is-7
+
is-8
+
is-9
+
is-10
+
is-11
+
+
-
- {% highlight html %}{{ columns_sizes }}{% endhighlight %}
-
+
+
Naming convention
+
Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.
+
- {% include anchor.html name="12 columns system" %}
+
+
+
is-2
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+
+
is-3
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+
+
is-4
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+
+
is-5
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+
+
is-6
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+
+
is-7
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+
+
is-8
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+
+
is-9
+
+
+
1
+
+
+
1
+
+
+
1
+
+
+
+
+
is-10
+
+
+
1
+
+
+
1
+
+
+
+
+
is-11
+
+
+
1
+
+
-
-
As the grid can be divided into 12 columns, there are size classes for each division:
-
-
is-2
-
is-3
-
is-4
-
is-5
-
is-6
-
is-7
-
is-8
-
is-9
-
is-10
-
is-11
-
-
+{% include anchor.html name="Offset" %}
-
-
Naming convention
-
Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.
-
+
+
+ While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x:
+
+
-
-
-
is-2
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-3
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-4
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-5
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-6
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-7
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-8
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-9
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-10
-
-
-
1
-
-
-
1
-
-
-
-
-
is-11
-
-
-
1
-
-
+
+
+
+ is-half
+ is-offset-one-quarter
+
+
+
- {% include anchor.html name="Offset" %}
+
+
+
+ is-three-fifths
+ is-offset-one-fifth
+
+
+
-
-
- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x:
-
-
+
+
+
+ is-4
+ is-offset-8
+
+
+
-
-
-
- is-half
- is-offset-one-quarter
-
-
-
+
+
+
+ is-11
+ is-offset-1
+
+
+
-
-
-
- is-three-fifths
- is-offset-one-fifth
-
-
-
+
+ {% highlight html %}{{ columns_offset }}{% endhighlight %}
+
-
-
-
- is-4
- is-offset-8
-
-
-
+{% include anchor.html name="Narrow column" %}
-
-
-
- is-11
- is-offset-1
-
-
-
+
+
If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.
+
-
- {% highlight html %}{{ columns_offset }}{% endhighlight %}
-
-
- {% include anchor.html name="Narrow column" %}
-
-
-
If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.
-
-
-
-
-
-
Narrow column
-
This column is only 200px wide.
-
-
-
-
-
Flexible column
-
This column will take up the remaining space available.
-
-
-
-
-
- {% highlight html %}{{ columns_narrow }}{% endhighlight %}
-
-
-
-
As for the size modifiers, you can have narrow columns for different breakpoints:
-
-
- is-narrow-mobile
-
-
- is-narrow-tablet
-
-
- is-narrow-desktop
-
-
+
+
+
+
Narrow column
+
This column is only 200px wide.
-
+
+
+
Flexible column
+
This column will take up the remaining space available.
+
+
+
+
+
+ {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+
+
+
+
As for the size modifiers, you can have narrow columns for different breakpoints:
- The dropdown component is a container for a dropdown button and a dropdown menu.
-
+
+
+ The dropdown component is a container for a dropdown button and a dropdown menu.
+
+
+
+ dropdown the main container
- dropdown the main container
+ dropdown-trigger the container for a button
+
+
+ dropdown-menu the toggable menu, hidden by default
- dropdown-trigger the container for a button
-
-
- dropdown-menu the toggable menu, hidden by default
+ dropdown-content the dropdown box, with a white background and a shadow
- dropdown-content the dropdown box, with a white background and a shadow
-
-
- dropdown-item each single item of the dropdown, which can either be a a or a div
-
-
- dropdown-divider a horizontal line to separate dropdown items
-
-
+ dropdown-item each single item of the dropdown, which can either be a a or a div
+
+
+ dropdown-divider a horizontal line to separate dropdown items
-
+
+
+
-
-
- {{dropdown_example}}
-
-
- {% highlight html %}{{dropdown_example}}{% endhighlight %}
-
-
+
+
+ {{dropdown_example}}
+
+
+ {% highlight html %}{{dropdown_example}}{% endhighlight %}
+
+
- {% include anchor.html name="Dropdown content" %}
+{% include anchor.html name="Dropdown content" %}
-
-
- While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content.
-
-
+
+
+ While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content.
+
+
-
-
- {{dropdown_content_example}}
-
-
- {% highlight html %}{{dropdown_content_example}}{% endhighlight %}
-
-
+
+
+ {{dropdown_content_example}}
+
+
+ {% highlight html %}{{dropdown_content_example}}{% endhighlight %}
+
+
- {% include anchor.html name="Hoverable or Toggable" %}
+{% include anchor.html name="Hoverable or Toggable" %}
-
-
- The dropdown component has 2 additional modifiers
-
-
-
- is-hoverable: the dropdown will show up when hovering the dropdown-trigger
-
-
- is-active: the dropdown will show up all the time
-
-
-
+
+
+ The dropdown component has 2 additional modifiers
+
+
+
+ is-hoverable: the dropdown will show up when hovering the dropdown-trigger
+
+
+ is-active: the dropdown will show up all the time
+
+
+
-
-
- While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.
-
-
+
+
+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.
+
-
+{% include variables.html type='component' %}
diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html
index 9e320ed7..c9ef7440 100644
--- a/docs/documentation/components/message.html
+++ b/docs/documentation/components/message.html
@@ -1,8 +1,18 @@
---
title: Message
+subtitle: "Colored message blocks, to emphasize part of your page"
layout: documentation
doc-tab: components
doc-subtab: message
+meta:
+- colors: true
+- sizes: true
+- variables: true
+breadcrumb:
+- home
+- documentation
+- components
+- components-message
---
{% capture message_example %}
@@ -108,48 +118,28 @@ doc-subtab: message
{% endfor %}
{% endcapture %}
-{% include subnav/subnav-components.html %}
+{% include snippet.html content=message_example %}
-
-
-
Messages
-
- Colored message blocks, to emphasize part of your page
-
- {%
- include meta.html
- colors=true
- sizes=true
- variables=true
- %}
+{% include anchor.html name="Colors" %}
-
+{% include snippet.html content=message_colors_example %}
- {% include snippet.html content=message_example %}
+{% include anchor.html name="Message body only" %}
- {% include anchor.html name="Colors" %}
+
+
You can omit the message header:
+
- {% include snippet.html content=message_colors_example %}
+{% include snippet.html content=message_body_example %}
- {% include anchor.html name="Message body only" %}
+{% include anchor.html name="Sizes" %}
-
-
You can omit the message header:
-
+{% include snippet.html content=message_small %}
- {% include snippet.html content=message_body_example %}
+{% include snippet.html content=message_normal %}
- {% include anchor.html name="Sizes" %}
+{% include snippet.html content=message_medium %}
- {% include snippet.html content=message_small %}
+{% include snippet.html content=message_large %}
- {% include snippet.html content=message_normal %}
-
- {% include snippet.html content=message_medium %}
-
- {% include snippet.html content=message_large %}
-
- {% include variables.html type='component' %}
-
-
-
+{% include variables.html type='component' %}
diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html
index 30cd3e1a..c044eb6e 100644
--- a/docs/documentation/components/modal.html
+++ b/docs/documentation/components/modal.html
@@ -1,8 +1,18 @@
---
title: Modal
+subtitle: "A classic modal overlay, in which you can include any content you want"
layout: documentation
doc-tab: components
doc-subtab: modal
+meta:
+- colors: false
+- sizes: false
+- variables: true
+breadcrumb:
+- home
+- documentation
+- components
+- components-modal
---
{% capture modal %}
@@ -46,91 +56,73 @@ doc-subtab: modal
{% endcapture %}
-{% include subnav/subnav-components.html %}
-
-
-
-
Modal
-
A classic modal overlay, in which you can include any content you want
The new navbar replaces the deprecated nav component, whose documentation you can still access temporarily here.
-
-
-
-
-
- The navbar component is a responsive and versatile horizontal navigation bar with the following structure:
-
+
+
+ The navbar component is a responsive and versatile horizontal navigation bar with the following structure:
+
+
+
+ navbar the main container
- navbar the main container
+ navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons
- navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons
-
-
- navbar-burger the hamburger icon, which toggles the navbar menu on touch devices
-
-
+ navbar-burger the hamburger icon, which toggles the navbar menu on touch devices
+
+
+
+
+ navbar-menu the right side, hidden on touch devices, visible on desktop
+
+
+ navbar-start the left part of the menu, which appears next to the navbar brand on desktop
- navbar-menu the right side, hidden on touch devices, visible on desktop
+ navbar-end the right part of the menu, which appears at the end of the navbar
- navbar-start the left part of the menu, which appears next to the navbar brand on desktop
-
-
- navbar-end the right part of the menu, which appears at the end of the navbar
+ navbar-item each single item of the navbar, which can either be an a or a div
- navbar-item each single item of the navbar, which can either be an a or a div
+ navbar-link a link as the sibling of a dropdown, with an arrow
+
+
+ navbar-dropdown the dropdown menu, which can include navbar items and dividers
- navbar-link a link as the sibling of a dropdown, with an arrow
-
-
- navbar-dropdown the dropdown menu, which can include navbar items and dividers
-
-
- navbar-divider a horizontal line to separate navbar items
-
-
+ navbar-divider a horizontal line to separate navbar items
@@ -595,538 +583,538 @@ document.addEventListener('DOMContentLoaded', function () {
-
+
+
+
- {% include anchor.html name="Navbar brand" %}
+{% include anchor.html name="Navbar brand" %}
+
+
+ The navbar-brand is the left side of the navbar. It can contain:
+
+
+
+ a number of navbar-item
+
+
+ the navbar-burger as last child
+
+
+
+
+{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
+
+
+
+ The navbar brand is always visible: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.
+
+
+
+
+ {{navbar_brand_items_example}}
+
+
+{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
+
+
+
+ On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
+
+
+
+{% include anchor.html name="Navbar burger" %}
+
+
+
+ The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand.
+
+
+{% include anchor.html name="Navbar menu" %}
+
+
+
+ The navbar-menu is the counterpart of the navbar brand. As such, it must appear as a direct child of navbar, as a sibling of navbar-brand.
+
+
+
+{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
+
+
+
+ The navbar-menu is hidden on touch devices {% include bp/touch.html %}. You need to add the modifier class is-active to display it.
+
+
+
+{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
+
+
+
+ On desktop {% include bp/desktop.html %}, the navbar-menu will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
+
+
+
+ navbar-start
+
+
+ navbar-end
+
+
+
+
+
+
+
+
Javascript toggle
+
- The navbar-brand is the left side of the navbar. It can contain:
+ The Bulma package does not come with any JavaScript.
+
+ Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu.
-
- {% highlight html %}{{navbar_brand_example}}{% endhighlight %}
-
-
-
- The navbar brand is always visible: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.
-
-
-
-
- {{navbar_brand_items_example}}
-
-
- {% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
-
-
-
- On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
-
-
-
- {% include anchor.html name="Navbar burger" %}
-
-
-
- The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand.
-
-
- {% include anchor.html name="Navbar menu" %}
-
-
-
- The navbar-menu is the counterpart of the navbar brand. As such, it must appear as a direct child of navbar, as a sibling of navbar-brand.
-
-
-
- {% highlight html %}{{navbar_menu_example}}{% endhighlight %}
-
-
-
- The navbar-menu is hidden on touch devices {% include bp/touch.html %}. You need to add the modifier class is-active to display it.
-
-
-
- {% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
-
-
-
- On desktop {% include bp/desktop.html %}, the navbar-menu will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
-
-
-
- navbar-start
-
-
- navbar-end
-
-
-
-
-
-
-
-
Javascript toggle
-
-
-
- The Bulma package does not come with any JavaScript.
-
- Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu.
-
-
- {% include anchor.html name="Navbar start and navbar end" %}
-
-
-
- The navbar-start and navbar-end are the two direct and only children of the navbar-menu.
-
-
- On desktop {% include bp/desktop.html %}:
-
-
-
- navbar-start will appear on the left
-
-
- navbar-end will appear on the right
-
-
-
- Each of them can contain any number of navbar-item.
-
-
-
- {% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
-
- {% include anchor.html name="Navbar item" %}
-
-
-
- A navbar-item is a repeatable element that can be:
-
-
-
- a navigation link
- {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
-
-
- a container for the brand logo
- {% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
-
-
- the parent of a dropdown menu
- {% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
-
-
- a child of a navbar dropdown
- {% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
-
-
- a container for almost anything you want, like a field
-
- {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
-
-
-
-
- It can either be an anchor tag <a> or a <div>, as a direct child of either:
-
-
-
- navbar
-
-
- navbar-brand
-
-
- navbar-start
-
-
- navbar-end
-
-
- navbar-dropdown
-
-
-
- You can add the modifier class is-expanded to turn it into a full-width element.
-
-
-
- {% include anchor.html name="Transparent navbar" %}
-
-
-
- To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifier on the navbar component. This will remove any hover or active background from the navbar items.
-
-
-
- {% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
-
- {% include anchor.html name="Fixed navbar" %}
-
- {% include elements/new-tag.html version="0.6.1" %}
-
-
-
- You can now fix the navbar to either the top or bottom of the page. This is a 2-step process:
-
-
-
- Add either is-fixed-top or is-fixed-bottom to the navbar component
- {% highlight html %}{% endhighlight %}
-
-
- Add the corresponding has-navbar-fixed-top or has-navbar-fixed-bottom modifier to either <html> or <body> element to provide the appropriate padding to the page
- {% highlight html %}{% endhighlight %}
-
-
- {% include anchor.html name="Dropdown menu" %}
-
-
-
- To create a dropdown menu, you will need 4 elements:
-
-
-
- navbar-item with the has-dropdown modifier
-
-
- navbar-link which contains the dropdown arrow
-
-
- navbar-dropdown which can contain instances of navbar-item and navbar-divider
-
-
-
-
-
-
-
- {{ navbar_dropdown_example }}
-
-
-
-
- {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
-
-
-
-
- Show/hide the dropdown with either CSS or JavaScript
-
-
-
-
- The navbar-dropdown is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. How the dropdown is displayed on desktop depends on the parent's class.
-
-
- The navbar-item with the has-dropdown modifier, has 2 additional modifiers
-
-
-
- is-hoverable: the dropdown will show up when hovering the parent navbar-item
-
-
- is-active: the dropdown will show up all the time
-
-
-
-
-
-
- While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.
-
- {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
-
-
-
-
- Dropup
-
-
- {% include elements/new-tag.html version="0.6.1" %}
-
-
-
- If you're using a navbar at the bottom, like the fixed bottom navbar, you might want to use a dropup menu. Simply add the has-dropdown and has-dropdown-up modifiers to the parent navbar-item.
-
- {% include examples/navbar-color.html color="primary" %}
-
-
-
- {% include examples/navbar-color.html color="link" %}
-
-
-
- {% include examples/navbar-color.html color="info" %}
-
-
-
- {% include examples/navbar-color.html color="success" %}
-
-
-
- {% include examples/navbar-color.html color="warning" light=true %}
-
-
-
- {% include examples/navbar-color.html color="danger" %}
-
-
-
- {% include examples/navbar-color.html color="black" %}
-
-
-
- {% include examples/navbar-color.html color="dark" %}
-
-
-
- {% include examples/navbar-color.html color="light" light=true %}
-
-
-
- {% include examples/navbar-color.html color="white" light=true %}
-
-
- {% include variables.html type='component' %}
-
-
+
+
+{% include anchor.html name="Navbar start and navbar end" %}
+
+
+
+ The navbar-start and navbar-end are the two direct and only children of the navbar-menu.
+
+
+ On desktop {% include bp/desktop.html %}:
+
+
+
+ navbar-start will appear on the left
+
+
+ navbar-end will appear on the right
+
+
+
+ Each of them can contain any number of navbar-item.
+
+
+
+{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
+
+{% include anchor.html name="Navbar item" %}
+
+
+
+ A navbar-item is a repeatable element that can be:
+
+
+
+ a navigation link
+ {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
+
+
+ a container for the brand logo
+ {% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
+
+
+ the parent of a dropdown menu
+ {% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
+
+
+ a child of a navbar dropdown
+ {% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
+
+
+ a container for almost anything you want, like a field
+
+ {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
+
+
+
+
+ It can either be an anchor tag <a> or a <div>, as a direct child of either:
+
+
+
+ navbar
+
+
+ navbar-brand
+
+
+ navbar-start
+
+
+ navbar-end
+
+
+ navbar-dropdown
+
+
+
+ You can add the modifier class is-expanded to turn it into a full-width element.
+
+
+
+{% include anchor.html name="Transparent navbar" %}
+
+
+
+ To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifier on the navbar component. This will remove any hover or active background from the navbar items.
+
+
+
+{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
+
+{% include anchor.html name="Fixed navbar" %}
+
+{% include elements/new-tag.html version="0.6.1" %}
+
+
+
+ You can now fix the navbar to either the top or bottom of the page. This is a 2-step process:
+
+
+
+ Add either is-fixed-top or is-fixed-bottom to the navbar component
+ {% highlight html %}{% endhighlight %}
+
+
+ Add the corresponding has-navbar-fixed-top or has-navbar-fixed-bottom modifier to either <html> or <body> element to provide the appropriate padding to the page
+ {% highlight html %}{% endhighlight %}
+
+
+{% include anchor.html name="Dropdown menu" %}
+
+
+
+ To create a dropdown menu, you will need 4 elements:
+
+
+
+ navbar-item with the has-dropdown modifier
+
+
+ navbar-link which contains the dropdown arrow
+
+
+ navbar-dropdown which can contain instances of navbar-item and navbar-divider
+
+
+
+
+
+
+
+ {{ navbar_dropdown_example }}
+
+
+
+
+ {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
+
+
+
+
+ Show/hide the dropdown with either CSS or JavaScript
+
+
+
+
+ The navbar-dropdown is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. How the dropdown is displayed on desktop depends on the parent's class.
+
+
+ The navbar-item with the has-dropdown modifier, has 2 additional modifiers
+
+
+
+ is-hoverable: the dropdown will show up when hovering the parent navbar-item
+
+
+ is-active: the dropdown will show up all the time
+
+
+
+
+
+
+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.
+
+ {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
+
+
+
+
+ Dropup
+
+
+{% include elements/new-tag.html version="0.6.1" %}
+
+
+
+ If you're using a navbar at the bottom, like the fixed bottom navbar, you might want to use a dropup menu. Simply add the has-dropdown and has-dropdown-up modifiers to the parent navbar-item.
+
- The pagination component consists of several elements:
-
+
+
+ The pagination component consists of several elements:
+
+
+
+ pagination-previous and pagination-next for incremental navigation
+
+
+ pagination-list which displays page items:
- pagination-previous and pagination-next for incremental navigation
+ pagination-link for the page numbers
- pagination-list which displays page items:
-
-
- pagination-link for the page numbers
-
-
- pagination-ellipsis for range separators
-
-
+ pagination-ellipsis for range separators
-
- All elements are optional so you can compose your pagination as you wish.
-
-
+
+
+
+ All elements are optional so you can compose your pagination as you wish.
+
+
- {% include snippet.html content=pagination_example horizontal=true more=true %}
+{% include snippet.html content=pagination_example horizontal=true more=true %}
-
-
- You can disable some links if they are not active, or change the amount of page numbers available.
-
-
+
+
+ You can disable some links if they are not active, or change the amount of page numbers available.
+
+
- {% include snippet.html content=pagination_options_example horizontal=true more=true %}
+{% include snippet.html content=pagination_options_example horizontal=true more=true %}
-
-
- By default on tablet, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers.
-
-
+
+
+ By default on tablet, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers.
+
+
- {% include snippet.html content=pagination_centered_example horizontal=true more=true %}
+{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
- {% include snippet.html content=pagination_right_example horizontal=true more=true %}
+{% include snippet.html content=pagination_right_example horizontal=true more=true %}
- {% include anchor.html name="Styles" %}
+{% include anchor.html name="Styles" %}
- {% include elements/new-tag.html version="0.6.2" %}
+{% include elements/new-tag.html version="0.6.2" %}
-
- Add the is-rounded modifier to have rounded pagination items.
-
+
+ Add the is-rounded modifier to have rounded pagination items.
+
- {% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
+{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
- {% include anchor.html name="Sizes" %}
+{% include anchor.html name="Sizes" %}
-
- The pagination comes in 3 additional sizes.
- You only need to append the modifieris-small, is-medium, or is-large to the pagination component.
-
+
+ The pagination comes in 3 additional sizes.
+ You only need to append the modifieris-small, is-medium, or is-large to the pagination component.
+
- {% include snippet.html content=pagination_small_example horizontal=true more=true %}
+{% include snippet.html content=pagination_small_example horizontal=true more=true %}
- {% include snippet.html content=pagination_medium_example horizontal=true more=true %}
+{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
- {% include snippet.html content=pagination_large_example horizontal=true more=true %}
+{% include snippet.html content=pagination_large_example horizontal=true more=true %}
- {% include variables.html type='component' %}
-
-
+ 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
{{ derived_vars.background.name }}: {{ derived_vars.background.value }}: a general background color
+
{{ derived_vars.link.name }}: {{ derived_vars.link.value }}: the links use the primary color
+
{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}: the primary font family is the sans-serif one
- Derived variables where variables are calculated from the values set in the previous file. For example, you can have:
+ Lists and maps which are collections of already defined variables:
-
- Primary colors derived from the initial variables:
-
- {% capture custom_message %}
- These are variables with a value that references another variable.
- {% endcapture %}
- {%
- include variables.html
- anchor_name = 'Derived variables'
- data = derived_variables
- custom_message = custom_message
- table_class = 'is-bordered is-striped'
- %}
+{% capture custom_message %}
+ These are variables with a value that references another variable.
+{% endcapture %}
+{%
+ include variables.html
+ anchor_name = 'Derived variables'
+ data = derived_variables
+ custom_message = custom_message
+ table_class = 'is-bordered is-striped'
+%}
- {% capture custom_message %}
- You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how.
- {% endcapture %}
- {%
- include variables.html
- anchor_name = 'Generic variables'
- tab = 'base'
- subtab = 'generic'
- custom_message = custom_message
- table_class = 'is-bordered is-striped'
- %}
-
-
-
+{% capture custom_message %}
+ You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how.
+{% endcapture %}
+{%
+ include variables.html
+ anchor_name = 'Generic variables'
+ tab = 'base'
+ subtab = 'generic'
+ custom_message = custom_message
+ table_class = 'is-bordered is-striped'
+%}
From 5ffedabb070a16df14032960035a349a3ab327b8 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas
Date: Mon, 9 Apr 2018 17:59:04 +0100
Subject: [PATCH 11/56] Add docs menu
---
docs/_data/links.json | 2 +-
docs/_layouts/documentation.html | 36 +++++++++++++++++++--
docs/_sass/main.sass | 40 ++++++++++++++++++++++-
docs/css/bulma-docs.css | 54 ++++++++++++++++++++++++++++++--
4 files changed, 125 insertions(+), 7 deletions(-)
diff --git a/docs/_data/links.json b/docs/_data/links.json
index 16512a1d..3469a7bd 100644
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@@ -249,7 +249,7 @@
"path": "/documentation/components/tabs"
}
},
- "order": {
+ "categories": {
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 07626370..68434cc9 100644
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -5,8 +5,9 @@ route: documentation
{% include navbar.html id="Documentation" %}
+{% assign current_category = page.doc-tab %}
{% assign current_link_id = page.breadcrumb | last %}
-{% assign category_links = site.data.links.order[page.doc-tab] %}
+{% assign category_links = site.data.links.categories[current_category] %}
{% for link_id in category_links %}
{% if link_id == current_link_id %}
@@ -98,9 +99,38 @@ route: documentation
-
\ No newline at end of file
+
diff --git a/docs/_includes/book-content.html b/docs/_includes/book/book-content.html
similarity index 98%
rename from docs/_includes/book-content.html
rename to docs/_includes/book/book-content.html
index e6cf82eb..1c9c8db6 100644
--- a/docs/_includes/book-content.html
+++ b/docs/_includes/book/book-content.html
@@ -7,7 +7,7 @@
{% if include.show_cover %}
- {% include book-cover.html %}
+ {% include book/book-cover.html %}
{% endif %}
diff --git a/docs/_includes/book-cover.html b/docs/_includes/book/book-cover.html
similarity index 100%
rename from docs/_includes/book-cover.html
rename to docs/_includes/book/book-cover.html
diff --git a/docs/_includes/book-modal.html b/docs/_includes/book/book-modal.html
similarity index 78%
rename from docs/_includes/book-modal.html
rename to docs/_includes/book/book-modal.html
index 182ab0bd..a99d164f 100644
--- a/docs/_includes/book-modal.html
+++ b/docs/_includes/book/book-modal.html
@@ -3,12 +3,12 @@
- {% include book-cover.html %}
+ {% include book/book-cover.html %}
- {% include book-content.html show_cover=true %}
+ {% include book/book-content.html show_cover=true %}
-
\ No newline at end of file
+
diff --git a/docs/_includes/comparison.html b/docs/_includes/content/comparison.html
similarity index 100%
rename from docs/_includes/comparison.html
rename to docs/_includes/content/comparison.html
diff --git a/docs/_includes/klmn.html b/docs/_includes/content/klmn.html
similarity index 100%
rename from docs/_includes/klmn.html
rename to docs/_includes/content/klmn.html
diff --git a/docs/_includes/pro.html b/docs/_includes/content/pro.html
similarity index 100%
rename from docs/_includes/pro.html
rename to docs/_includes/content/pro.html
diff --git a/docs/_includes/anchor.html b/docs/_includes/elements/anchor.html
similarity index 100%
rename from docs/_includes/anchor.html
rename to docs/_includes/elements/anchor.html
diff --git a/docs/_includes/bsa.html b/docs/_includes/elements/bsa.html
similarity index 100%
rename from docs/_includes/bsa.html
rename to docs/_includes/elements/bsa.html
diff --git a/docs/_includes/carbon.html b/docs/_includes/elements/carbon.html
similarity index 100%
rename from docs/_includes/carbon.html
rename to docs/_includes/elements/carbon.html
diff --git a/docs/_includes/meta.html b/docs/_includes/elements/meta.html
similarity index 100%
rename from docs/_includes/meta.html
rename to docs/_includes/elements/meta.html
diff --git a/docs/_includes/patreon.html b/docs/_includes/elements/patreon.html
similarity index 100%
rename from docs/_includes/patreon.html
rename to docs/_includes/elements/patreon.html
diff --git a/docs/_includes/snippet.html b/docs/_includes/elements/snippet.html
similarity index 100%
rename from docs/_includes/snippet.html
rename to docs/_includes/elements/snippet.html
diff --git a/docs/_includes/tw.html b/docs/_includes/elements/tw.html
similarity index 100%
rename from docs/_includes/tw.html
rename to docs/_includes/elements/tw.html
diff --git a/docs/_includes/tws.html b/docs/_includes/elements/tws.html
similarity index 67%
rename from docs/_includes/tws.html
rename to docs/_includes/elements/tws.html
index 6aaf83cf..55e5d3cd 100644
--- a/docs/_includes/tws.html
+++ b/docs/_includes/elements/tws.html
@@ -1,24 +1,24 @@
- {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include elements/tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include elements/tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include tw.html tweet=tweet%}
- {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include elements/tw.html tweet=tweet%}
+ {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include elements/tw.html tweet=tweet%}
diff --git a/docs/_includes/variables.html b/docs/_includes/elements/variables.html
similarity index 97%
rename from docs/_includes/variables.html
rename to docs/_includes/elements/variables.html
index de0d3e7a..786164ab 100644
--- a/docs/_includes/variables.html
+++ b/docs/_includes/elements/variables.html
@@ -24,7 +24,7 @@
{% endcapture %}
-{% include anchor.html name=anchor_name %}
+{% include elements/anchor.html name=anchor_name %}
{{ content | strip }}
diff --git a/docs/_includes/deprecated.html b/docs/_includes/global/deprecated.html
similarity index 100%
rename from docs/_includes/deprecated.html
rename to docs/_includes/global/deprecated.html
diff --git a/docs/_includes/footer.html b/docs/_includes/global/footer.html
similarity index 94%
rename from docs/_includes/footer.html
rename to docs/_includes/global/footer.html
index bff37d9c..05be9bfd 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/global/footer.html
@@ -1,10 +1,10 @@
-{% include native.html %}
+{% include global/native.html %}
-{% include book-banner.html %}
+{% include book/book-banner.html %}
-{% include sponsors.html %}
+{% include global/sponsors.html %}
-{% include newsletter.html %}
+{% include global/newsletter.html %}
-{% include book-modal.html %}
+{% include book/book-modal.html %}
-{% include scripts.html %}
+{% include global/scripts.html %}
diff --git a/docs/_includes/fortyfour.html b/docs/_includes/global/fortyfour.html
similarity index 100%
rename from docs/_includes/fortyfour.html
rename to docs/_includes/global/fortyfour.html
diff --git a/docs/_includes/head.html b/docs/_includes/global/head.html
similarity index 100%
rename from docs/_includes/head.html
rename to docs/_includes/global/head.html
diff --git a/docs/_includes/native.html b/docs/_includes/global/native.html
similarity index 100%
rename from docs/_includes/native.html
rename to docs/_includes/global/native.html
diff --git a/docs/_includes/navbar.html b/docs/_includes/global/navbar.html
similarity index 100%
rename from docs/_includes/navbar.html
rename to docs/_includes/global/navbar.html
diff --git a/docs/_includes/newsletter.html b/docs/_includes/global/newsletter.html
similarity index 100%
rename from docs/_includes/newsletter.html
rename to docs/_includes/global/newsletter.html
diff --git a/docs/_includes/scripts.html b/docs/_includes/global/scripts.html
similarity index 100%
rename from docs/_includes/scripts.html
rename to docs/_includes/global/scripts.html
diff --git a/docs/_includes/sponsors.html b/docs/_includes/global/sponsors.html
similarity index 100%
rename from docs/_includes/sponsors.html
rename to docs/_includes/global/sponsors.html
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
deleted file mode 100644
index fa63e9db..00000000
--- a/docs/_includes/header.html
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
- {% include carbon.html %}
+ {% include elements/carbon.html %}
@@ -135,7 +135,7 @@ bootstrap:
{% for pro in page.bulma %}
{%
- include pro.html
+ include content/pro.html
type=pro.type
icon=pro.icon
icon_brand=pro.icon_brand
@@ -156,7 +156,7 @@ bootstrap:
{% for pro in page.bootstrap %}
{%
- include pro.html
+ include content/pro.html
type=pro.type
icon=pro.icon
icon_brand=pro.icon_brand
@@ -198,13 +198,13 @@ bootstrap:
- {% include comparison.html %}
+ {% include content/comparison.html %}
- {% include footer.html %}
+ {% include global/footer.html %}
diff --git a/docs/backers.html b/docs/backers.html
index d8fa9762..ff917940 100644
--- a/docs/backers.html
+++ b/docs/backers.html
@@ -4,7 +4,7 @@ layout: default
route: backers
---
-{% include navbar.html id="BackersNavbar" %}
+{% include global/navbar.html id="BackersNavbar" %}
@@ -19,7 +19,7 @@ route: backers
- {% include carbon.html %}
+ {% include elements/carbon.html %}
diff --git a/docs/blog.html b/docs/blog.html
index fe865409..1576f033 100644
--- a/docs/blog.html
+++ b/docs/blog.html
@@ -6,7 +6,7 @@ breadcrumb:
- blog
---
-{% include navbar.html id="Blog" %}
+{% include global/navbar.html id="Blog" %}
@@ -31,7 +31,7 @@ breadcrumb:
- {% include carbon.html %}
+ {% include elements/carbon.html %}
diff --git a/docs/bulma-start.html b/docs/bulma-start.html
index ff7d2452..24055c6c 100644
--- a/docs/bulma-start.html
+++ b/docs/bulma-start.html
@@ -7,7 +7,7 @@ github_url: https://github.com/jgthms/bulma-start
npm_url: https://www.npmjs.com/package/bulma-start
---
-{% include navbar.html id="BulmaStartHero" %}
+{% include global/navbar.html id="BulmaStartHero" %}
{% endcapture %}
-{% include anchor.html name="Multiline" %}
+{% include elements/anchor.html name="Multiline" %}
Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.
@@ -126,7 +126,7 @@ breadcrumb:
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
-{% include anchor.html name="Centering columns" %}
+{% include elements/anchor.html name="Centering columns" %}
-{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
+{% include elements/snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
-{% include anchor.html name="Alternative separators" %}
+{% include elements/anchor.html name="Alternative separators" %}
You can choose between 4 additional separators: has-arrow-separatorhas-bullet-separatorhas-dot-separator and has-succeeds-separator.
-{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
+{% include elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
-{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
+{% include elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
-{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
+{% include elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
-{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
+{% include elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
You can choose between 3 additional sizes: is-smallis-medium and is-large.
-{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
+{% include elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
-{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
+{% include elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
-{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
+{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html
index dbed0f12..7534c9b3 100644
--- a/docs/documentation/components/card.html
+++ b/docs/documentation/components/card.html
@@ -178,4 +178,4 @@ meta:
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html
index 76e0909e..9cfb01ad 100644
--- a/docs/documentation/components/dropdown.html
+++ b/docs/documentation/components/dropdown.html
@@ -238,7 +238,7 @@ meta:
-{% include anchor.html name="Dropdown content" %}
+{% include elements/anchor.html name="Dropdown content" %}
@@ -255,7 +255,7 @@ meta:
-{% include anchor.html name="Hoverable or Toggable" %}
+{% include elements/anchor.html name="Hoverable or Toggable" %}
@@ -286,7 +286,7 @@ meta:
-{% include anchor.html name="Right aligned" %}
+{% include elements/anchor.html name="Right aligned" %}
@@ -314,7 +314,7 @@ meta:
-{% include anchor.html name="Dropup" %}
+{% include elements/anchor.html name="Dropup" %}
@@ -331,4 +331,4 @@ meta:
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html
index 476de2e4..c5d3c1ce 100644
--- a/docs/documentation/components/menu.html
+++ b/docs/documentation/components/menu.html
@@ -51,6 +51,6 @@ meta:
{% endcapture %}
-{% include snippet.html content=menu_example size="one-third" %}
+{% include elements/snippet.html content=menu_example size="one-third" %}
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html
index 90aa3f05..b595b33d 100644
--- a/docs/documentation/components/message.html
+++ b/docs/documentation/components/message.html
@@ -117,28 +117,28 @@ meta:
{% endfor %}
{% endcapture %}
-{% include snippet.html content=message_example %}
+{% include elements/snippet.html content=message_example %}
-{% include anchor.html name="Colors" %}
+{% include elements/anchor.html name="Colors" %}
-{% include snippet.html content=message_colors_example %}
+{% include elements/snippet.html content=message_colors_example %}
-{% include anchor.html name="Message body only" %}
+{% include elements/anchor.html name="Message body only" %}
You can omit the message header:
-{% include snippet.html content=message_body_example %}
+{% include elements/snippet.html content=message_body_example %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
-{% include snippet.html content=message_small %}
+{% include elements/snippet.html content=message_small %}
-{% include snippet.html content=message_normal %}
+{% include elements/snippet.html content=message_normal %}
-{% include snippet.html content=message_medium %}
+{% include elements/snippet.html content=message_medium %}
-{% include snippet.html content=message_large %}
+{% include elements/snippet.html content=message_large %}
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html
index 9bf7a2f9..0d36d6ad 100644
--- a/docs/documentation/components/modal.html
+++ b/docs/documentation/components/modal.html
@@ -121,7 +121,7 @@ meta:
{% highlight html %}{{ modal_card }}{% endhighlight %}
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index ac5759be..b893836f 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -586,7 +586,7 @@ document.addEventListener('DOMContentLoaded', function () {
-{% include anchor.html name="Navbar brand" %}
+{% include elements/anchor.html name="Navbar brand" %}
@@ -622,7 +622,7 @@ document.addEventListener('DOMContentLoaded', function () {
-{% include anchor.html name="Navbar burger" %}
+{% include elements/anchor.html name="Navbar burger" %}
@@ -654,7 +654,7 @@ document.addEventListener('DOMContentLoaded', function () {
-{% include anchor.html name="Navbar menu" %}
+{% include elements/anchor.html name="Navbar menu" %}
@@ -705,7 +705,7 @@ document.addEventListener('DOMContentLoaded', function () {
-{% include anchor.html name="Navbar start and navbar end" %}
+{% include elements/anchor.html name="Navbar start and navbar end" %}
@@ -729,7 +729,7 @@ document.addEventListener('DOMContentLoaded', function () {
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
-{% include anchor.html name="Navbar item" %}
+{% include elements/anchor.html name="Navbar item" %}
@@ -784,7 +784,7 @@ document.addEventListener('DOMContentLoaded', function () {
-{% include anchor.html name="Transparent navbar" %}
+{% include elements/anchor.html name="Transparent navbar" %}
@@ -792,9 +792,9 @@ document.addEventListener('DOMContentLoaded', function () {
-{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
+{% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
-{% include anchor.html name="Fixed navbar" %}
+{% include elements/anchor.html name="Fixed navbar" %}
{% include elements/new-tag.html version="0.6.1" %}
@@ -822,7 +822,7 @@ document.addEventListener('DOMContentLoaded', function () {
-{% include anchor.html name="Dropdown menu" %}
+{% include elements/anchor.html name="Dropdown menu" %}
@@ -1048,7 +1048,7 @@ document.addEventListener('DOMContentLoaded', function () {
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
-{% include anchor.html name="Colors" %}
+{% include elements/anchor.html name="Colors" %}
New!
@@ -1115,5 +1115,5 @@ document.addEventListener('DOMContentLoaded', function () {
{% include examples/navbar-color.html color="white" light=true %}
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html
index 7ba7a630..b1dbe225 100644
--- a/docs/documentation/components/pagination.html
+++ b/docs/documentation/components/pagination.html
@@ -183,7 +183,7 @@ meta:
-{% include snippet.html content=pagination_example horizontal=true more=true %}
+{% include elements/snippet.html content=pagination_example horizontal=true more=true %}
@@ -191,7 +191,7 @@ meta:
-{% include snippet.html content=pagination_options_example horizontal=true more=true %}
+{% include elements/snippet.html content=pagination_options_example horizontal=true more=true %}
@@ -199,11 +199,11 @@ meta:
-{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
+{% include elements/snippet.html content=pagination_centered_example horizontal=true more=true %}
-{% include snippet.html content=pagination_right_example horizontal=true more=true %}
+{% include elements/snippet.html content=pagination_right_example horizontal=true more=true %}
-{% include anchor.html name="Styles" %}
+{% include elements/anchor.html name="Styles" %}
{% include elements/new-tag.html version="0.6.2" %}
@@ -211,19 +211,19 @@ meta:
Add the is-rounded modifier to have rounded pagination items.
-{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
+{% include elements/snippet.html content=pagination_rounded_example horizontal=true more=true %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
The pagination comes in 3 additional sizes.
You only need to append the modifieris-small, is-medium, or is-large to the pagination component.
-{% include snippet.html content=pagination_small_example horizontal=true more=true %}
+{% include elements/snippet.html content=pagination_small_example horizontal=true more=true %}
-{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
+{% include elements/snippet.html content=pagination_medium_example horizontal=true more=true %}
-{% include snippet.html content=pagination_large_example horizontal=true more=true %}
+{% include elements/snippet.html content=pagination_large_example horizontal=true more=true %}
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html
index 2695e45f..9fa379ad 100644
--- a/docs/documentation/components/panel.html
+++ b/docs/documentation/components/panel.html
@@ -108,6 +108,6 @@ meta:
-{% include snippet.html content=panel_example size="one-third" %}
+{% include elements/snippet.html content=panel_example size="one-third" %}
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
index fef4f7d3..afe949c5 100644
--- a/docs/documentation/components/tabs.html
+++ b/docs/documentation/components/tabs.html
@@ -358,11 +358,11 @@ meta:
The default tabs style has a single border at the bottom.
-{% include snippet.html content=tabs_example horizontal=true %}
+{% include elements/snippet.html content=tabs_example horizontal=true %}
-{% include snippet.html content=tabs_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_example horizontal=true more=true %}
-{% include anchor.html name="Alignment" %}
+{% include elements/anchor.html name="Alignment" %}
@@ -370,44 +370,44 @@ meta:
-{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_centered_example horizontal=true more=true %}
-{% include snippet.html content=tabs_right_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_right_example horizontal=true more=true %}
-{% include anchor.html name="Icons" %}
+{% include elements/anchor.html name="Icons" %}
-{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
-{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
You can choose between 3 additional sizes: is-smallis-medium and is-large.
-{% include snippet.html content=tabs_small_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_small_example horizontal=true more=true %}
-{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_medium_example horizontal=true more=true %}
-{% include snippet.html content=tabs_large_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_large_example horizontal=true more=true %}
-{% include anchor.html name="Styles" %}
+{% include elements/anchor.html name="Styles" %}
If you want a more classic style with borders, just append the is-boxed modifier.
-{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_boxed_example horizontal=true more=true %}
If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier.
-{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_toggle_example horizontal=true more=true %}
{% include elements/new-tag.html version="0.6.2" %}
@@ -415,26 +415,26 @@ meta:
If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded.
-{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
If you want the tabs to take up the whole width available, use is-fullwidth.
-{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
-{% include anchor.html name="Combining" %}
+{% include elements/anchor.html name="Combining" %}
You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.
-{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
-{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
-{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
-{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
+{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
-{% include variables.html type='component' %}
+{% include elements/variables.html type='component' %}
diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html
index fc21761a..2368ed41 100644
--- a/docs/documentation/elements/box.html
+++ b/docs/documentation/elements/box.html
@@ -62,6 +62,6 @@ meta:
-{% include snippet.html content=box_example more=true %}
+{% include elements/snippet.html content=box_example more=true %}
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index da566aec..e57add8d 100644
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -463,7 +463,7 @@ meta:
-{% include snippet.html content=button_example %}
+{% include elements/snippet.html content=button_example %}
@@ -485,23 +485,23 @@ meta:
-{% include snippet.html content=button_tags_example %}
+{% include elements/snippet.html content=button_tags_example %}
-{% include anchor.html name="Colors" %}
+{% include elements/anchor.html name="Colors" %}
-{% include snippet.html content=button_colors_a_example %}
+{% include elements/snippet.html content=button_colors_a_example %}
-{% include snippet.html content=button_colors_b_example %}
+{% include elements/snippet.html content=button_colors_b_example %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
-{% include snippet.html content=button_sizes_example %}
+{% include elements/snippet.html content=button_sizes_example %}
-{% include anchor.html name="Styles" %}
+{% include elements/anchor.html name="Styles" %}
Outlined
-{% include snippet.html content=button_outlined_example %}
+{% include elements/snippet.html content=button_outlined_example %}
Inverted (the text color becomes the background color, and vice-versa)
@@ -541,23 +541,23 @@ meta:
-{% include anchor.html name="States" %}
+{% include elements/anchor.html name="States" %}
Normal
-{% include snippet.html content=button_normal_example %}
+{% include elements/snippet.html content=button_normal_example %}
Hover
-{% include snippet.html content=button_hover_example %}
+{% include elements/snippet.html content=button_hover_example %}
Focus
-{% include snippet.html content=button_focus_example %}
+{% include elements/snippet.html content=button_focus_example %}
Active
-{% include snippet.html content=button_active_example %}
+{% include elements/snippet.html content=button_active_example %}
Loading
@@ -617,7 +617,7 @@ meta:
With Font Awesome icons
-{% include snippet.html content=button_fa_example clipped=true %}
+{% include elements/snippet.html content=button_fa_example clipped=true %}
@@ -633,31 +633,31 @@ meta:
-{% include anchor.html name="Button group" %}
+{% include elements/anchor.html name="Button group" %}
If you want to group buttons together on a single line, use the is-grouped modifier on the field container:
-{% include snippet.html content=button_group_example %}
+{% include elements/snippet.html content=button_group_example %}
-{% include anchor.html name="Button addons" %}
+{% include elements/anchor.html name="Button addons" %}
If you want to use buttons as addons, use the has-addons modifier on the field container:
-{% include snippet.html content=button_addons_example %}
+{% include elements/snippet.html content=button_addons_example %}
-{% include anchor.html name="Button group with addons" %}
+{% include elements/anchor.html name="Button group with addons" %}
You can group together addons as well:
-{% include snippet.html content=button_group_addons_example %}
+{% include elements/snippet.html content=button_group_addons_example %}
-{% include anchor.html name="List of buttons" %}
+{% include elements/anchor.html name="List of buttons" %}
{% include elements/new-tag.html version="0.6.1" %}
@@ -775,4 +775,4 @@ meta:
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html
index 331c5522..675a47e2 100644
--- a/docs/documentation/elements/content.html
+++ b/docs/documentation/elements/content.html
@@ -123,9 +123,9 @@ meta:
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 elements/snippet.html content=content_example %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
You can use the is-small, is-medium and is-large modifiers to change the font size.
@@ -173,4 +173,4 @@ meta:
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html
index 3332f9f6..666904d8 100644
--- a/docs/documentation/elements/delete.html
+++ b/docs/documentation/elements/delete.html
@@ -58,9 +58,9 @@ meta:
-{% include snippet.html content=cross_example %}
+{% include elements/snippet.html content=cross_example %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
@@ -68,9 +68,9 @@ meta:
-{% include snippet.html content=cross_sizes_example %}
+{% include elements/snippet.html content=cross_sizes_example %}
-{% include anchor.html name="Combinations" %}
+{% include elements/anchor.html name="Combinations" %}
@@ -78,4 +78,4 @@ meta:
-{% include snippet.html content=cross_elements_example %}
+{% include elements/snippet.html content=cross_elements_example %}
diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index c5ee6ab8..3ba2ff5b 100644
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -82,7 +82,7 @@ meta:
- {% include snippet.html content=icon_example %}
+ {% include elements/snippet.html content=icon_example %}
@@ -97,7 +97,7 @@ meta:
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" %}
+{% include elements/anchor.html name="Colors" %}
@@ -105,9 +105,9 @@ meta:
-{% include snippet.html content=icon_color_example %}
+{% include elements/snippet.html content=icon_color_example %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
@@ -283,7 +283,7 @@ meta:
-{% include anchor.html name="Font Awesome variations" %}
+{% include elements/anchor.html name="Font Awesome variations" %}
@@ -426,7 +426,7 @@ meta:
-{% include anchor.html name="Material Design Icons" %}
+{% include elements/anchor.html name="Material Design Icons" %}
@@ -750,7 +750,7 @@ meta:
-{% include anchor.html name="Open Iconic" %}
+{% include elements/anchor.html name="Open Iconic" %}
@@ -848,7 +848,7 @@ meta:
-{% include anchor.html name="Ionicons" %}
+{% include elements/anchor.html name="Ionicons" %}
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.
-{% include snippet.html content=image %}
+{% include elements/snippet.html content=image %}
-{% include anchor.html name="Fixed square images" %}
+{% include elements/anchor.html name="Fixed square images" %}
There are 7 dimensions to choose from, useful for avatars:
@@ -58,15 +58,15 @@ meta:
-{% include anchor.html name="Retina images" %}
+{% include elements/anchor.html name="Retina images" %}
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.
-{% include snippet.html content=retina_image %}
+{% include elements/snippet.html content=retina_image %}
-{% include anchor.html name="Responsive images with ratios" %}
+{% include elements/anchor.html name="Responsive images with ratios" %}
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):
@@ -161,4 +161,4 @@ meta:
The .image container will take up the whole width while maintaining the perfect ratio.
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index de251176..d3ceb3b3 100644
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -34,10 +34,10 @@ meta:
{% endfor %}
{% endcapture %}
-{% include snippet.html content=notification %}
+{% include elements/snippet.html content=notification %}
-{% include anchor.html name="Colors" %}
+{% include elements/anchor.html name="Colors" %}
-{% include snippet.html content=notification_colors %}
+{% include elements/snippet.html content=notification_colors %}
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index 51b4bafb..ee0320a2 100644
--- a/docs/documentation/elements/progress.html
+++ b/docs/documentation/elements/progress.html
@@ -34,14 +34,14 @@ meta:
{% endcapture %}
-{% include snippet.html content=progress %}
+{% include elements/snippet.html content=progress %}
-{% include anchor.html name="Colors" %}
+{% include elements/anchor.html name="Colors" %}
-{% include snippet.html content=progress_colors %}
+{% include elements/snippet.html content=progress_colors %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
-{% include snippet.html content=progress_sizes %}
+{% include elements/snippet.html content=progress_sizes %}
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html
index 16d64d49..d5b7d4cf 100644
--- a/docs/documentation/elements/table.html
+++ b/docs/documentation/elements/table.html
@@ -350,9 +350,9 @@ meta:
-{% include snippet.html content=table_example horizontal=true more=true %}
+{% include elements/snippet.html content=table_example horizontal=true more=true %}
-{% include anchor.html name="Modifiers" %}
+{% include elements/anchor.html name="Modifiers" %}
@@ -584,4 +584,4 @@ meta:
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html
index a130a066..07443454 100644
--- a/docs/documentation/elements/tag.html
+++ b/docs/documentation/elements/tag.html
@@ -202,7 +202,7 @@ meta:
-{% include anchor.html name="Colors" %}
+{% include elements/anchor.html name="Colors" %}
@@ -263,7 +263,7 @@ meta:
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
@@ -286,7 +286,7 @@ meta:
-{% include anchor.html name="Modifiers" %}
+{% include elements/anchor.html name="Modifiers" %}
@@ -312,7 +312,7 @@ meta:
-{% include anchor.html name="Combinations" %}
+{% include elements/anchor.html name="Combinations" %}
@@ -343,7 +343,7 @@ meta:
-{% include anchor.html name="List of tags" %}
+{% include elements/anchor.html name="List of tags" %}
@@ -441,4 +441,4 @@ meta:
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html
index 4a170168..55614e8e 100644
--- a/docs/documentation/elements/title.html
+++ b/docs/documentation/elements/title.html
@@ -82,7 +82,7 @@ meta:
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
@@ -174,4 +174,4 @@ meta:
-{% include variables.html type='element' %}
+{% include elements/variables.html type='element' %}
diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html
index 268d6610..ad028553 100644
--- a/docs/documentation/form/file.html
+++ b/docs/documentation/form/file.html
@@ -572,9 +572,9 @@ meta:
-{% include snippet.html content=file %}
+{% include elements/snippet.html content=file %}
-{% include anchor.html name="Modifiers" %}
+{% include elements/anchor.html name="Modifiers" %}
@@ -656,7 +656,7 @@ meta:
-{% include anchor.html name="Colors" %}
+{% include elements/anchor.html name="Colors" %}
@@ -671,9 +671,9 @@ meta:
-{% include snippet.html content=file_colors clipped=true %}
+{% include elements/snippet.html content=file_colors clipped=true %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
@@ -692,15 +692,15 @@ meta:
-{% include snippet.html content=file_sizes clipped=true %}
+{% include elements/snippet.html content=file_sizes clipped=true %}
-{% include snippet.html content=file_sizes_name clipped=true %}
+{% include elements/snippet.html content=file_sizes_name clipped=true %}
-{% include snippet.html content=file_sizes_boxed clipped=true %}
+{% include elements/snippet.html content=file_sizes_boxed clipped=true %}
-{% include snippet.html content=file_sizes_boxed_name clipped=true %}
+{% include elements/snippet.html content=file_sizes_boxed_name clipped=true %}
-{% include anchor.html name="Alignment" %}
+{% include elements/anchor.html name="Alignment" %}
@@ -716,11 +716,11 @@ meta:
-{% include snippet.html content=file_centered %}
+{% include elements/snippet.html content=file_centered %}
-{% include snippet.html content=file_right %}
+{% include elements/snippet.html content=file_right %}
-{% include anchor.html name="JavaScript" %}
+{% include elements/anchor.html name="JavaScript" %}
@@ -730,7 +730,7 @@ meta:
-{% include anchor.html name="Variables" %}
+{% include elements/anchor.html name="Variables" %}
diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index c7da8696..0c68ba33 100644
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -816,9 +816,9 @@ variables_form_keys:
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
-{% include snippet.html content=example more=true %}
+{% include elements/snippet.html content=example more=true %}
-{% include anchor.html name="Form field" %}
+{% include elements/anchor.html name="Form field" %}
The field container is a simple container for:
@@ -829,15 +829,15 @@ variables_form_keys:
-{% include snippet.html content=field_example %}
+{% include elements/snippet.html content=field_example %}
This container allows form fields to be spaced consistently.
-{% include snippet.html content=fields_example %}
+{% include elements/snippet.html content=fields_example %}
-{% include anchor.html name="Form control" %}
+{% include elements/anchor.html name="Form control" %}
The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:
@@ -849,14 +849,14 @@ variables_form_keys:
-{% include snippet.html content=control_input_example %}
+{% include elements/snippet.html content=control_input_example %}
-{% include snippet.html content=control_select_example %}
+{% include elements/snippet.html content=control_select_example %}
-{% include snippet.html content=control_button_example %}
+{% include elements/snippet.html content=control_button_example %}
-{% include anchor.html name="With icons" %}
+{% include elements/anchor.html name="With icons" %}
You can append one of 2 modifiers on a control:
@@ -880,7 +880,7 @@ variables_form_keys:
The size of the input will define the size of the icon container.
-{% include snippet.html content=icons_example clipped=true %}
+{% include elements/snippet.html content=icons_example clipped=true %}
@@ -888,7 +888,7 @@ variables_form_keys:
-{% include snippet.html content=select_icons_example %}
+{% include elements/snippet.html content=select_icons_example %}
@@ -896,21 +896,21 @@ variables_form_keys:
-{% include snippet.html content=has_icons_small_example %}
+{% include elements/snippet.html content=has_icons_small_example %}
-{% include snippet.html content=has_icons_normal_example clipped=true %}
+{% include elements/snippet.html content=has_icons_normal_example clipped=true %}
-{% include snippet.html content=has_icons_medium_example clipped=true %}
+{% include elements/snippet.html content=has_icons_medium_example clipped=true %}
-{% include snippet.html content=has_icons_large_example clipped=true %}
+{% include elements/snippet.html content=has_icons_large_example clipped=true %}
-{% include anchor.html name="Form addons" %}
+{% include elements/anchor.html name="Form addons" %}
If you want to attach controls together, use the has-addons modifier on the field container:
-{% include snippet.html content=addons_example %}
+{% include elements/snippet.html content=addons_example %}
You can attach inputs, buttons, and dropdowns only.
-{% include snippet.html content=addons_static_example %}
+{% include elements/snippet.html content=addons_static_example %}
Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):
-{% include snippet.html content=addons_expanded_example horizontal=true more=true %}
+{% include elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.
-{% include snippet.html content=addons_expanded_fullwidth_example %}
+{% include elements/snippet.html content=addons_expanded_fullwidth_example %}
Use the has-addons-centered or the has-addons-right modifiers to alter the alignment.
-{% include snippet.html content=addons_center_example %}
+{% include elements/snippet.html content=addons_center_example %}
-{% include snippet.html content=addons_right_example %}
+{% include elements/snippet.html content=addons_right_example %}
-{% include anchor.html name="Form group" %}
+{% include elements/anchor.html name="Form group" %}
@@ -950,16 +950,16 @@ variables_form_keys:
-{% include snippet.html content=group_example %}
+{% include elements/snippet.html content=group_example %}
Use the is-grouped-centered or the is-grouped-right modifiers to alter the alignment.
-{% include snippet.html content=group_centered_example %}
+{% include elements/snippet.html content=group_centered_example %}
-{% include snippet.html content=group_right_example %}
+{% include elements/snippet.html content=group_right_example %}
@@ -967,7 +967,7 @@ variables_form_keys:
-{% include snippet.html content=group_expanded_example %}
+{% include elements/snippet.html content=group_expanded_example %}
@@ -975,7 +975,7 @@ variables_form_keys:
-{% include snippet.html content=group_multiline_example clipped=true %}
+{% include elements/snippet.html content=group_multiline_example clipped=true %}
@@ -990,7 +990,7 @@ variables_form_keys:
-{% include anchor.html name="Horizontal form" %}
+{% include elements/anchor.html name="Horizontal form" %}
If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:
@@ -1005,7 +1005,7 @@ variables_form_keys:
You can use is-grouped or has-addons for the child elements.
-{% include snippet.html content=horizontal_form_example horizontal=true more=true %}
+{% include elements/snippet.html content=horizontal_form_example horizontal=true more=true %}
@@ -1027,9 +1027,9 @@ variables_form_keys:
-{% include snippet.html content=field_label_example horizontal=true more=true %}
+{% include elements/snippet.html content=field_label_example horizontal=true more=true %}
-{% include anchor.html name="Variables" %}
+{% include elements/anchor.html name="Variables" %}
{% endcapture %}
-{% include snippet.html content=textarea_example %}
+{% include elements/snippet.html content=textarea_example %}
@@ -140,33 +140,33 @@ meta:
-{% include snippet.html content=textarea_rows_example %}
+{% include elements/snippet.html content=textarea_rows_example %}
-{% include anchor.html name="Colors" %}
+{% include elements/anchor.html name="Colors" %}
-{% include snippet.html content=colors_example %}
+{% include elements/snippet.html content=colors_example %}
-{% include anchor.html name="Sizes" %}
+{% include elements/anchor.html name="Sizes" %}
-{% include snippet.html content=sizes_example %}
+{% include elements/snippet.html content=sizes_example %}
-{% include anchor.html name="States" %}
+{% include elements/anchor.html name="States" %}
Normal
-{% include snippet.html content=normal_example %}
+{% include elements/snippet.html content=normal_example %}
Hover
-{% include snippet.html content=hover_example %}
+{% include elements/snippet.html content=hover_example %}
Focus
-{% include snippet.html content=focus_example %}
+{% include elements/snippet.html content=focus_example %}
Loading
-{% include snippet.html content=loading_example %}
+{% include elements/snippet.html content=loading_example %}
@@ -184,7 +184,7 @@ meta:
Disabled
-{% include snippet.html content=disabled_example %}
+{% include elements/snippet.html content=disabled_example %}
Readonly
@@ -199,4 +199,4 @@ meta:
-{% include snippet.html content=readonly_example %}
+{% include elements/snippet.html content=readonly_example %}
diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html
index 4ccd2441..47e8b946 100644
--- a/docs/documentation/grid/columns.html
+++ b/docs/documentation/grid/columns.html
@@ -360,7 +360,7 @@ doc-subtab: columns
{% highlight html %}{{ columns }}{% endhighlight %}
- {% include anchor.html name="Sizes" %}
+ {% include elements/anchor.html name="Sizes" %}
If you want to change the size of a single column, you can use one the following classes:
@@ -685,7 +685,7 @@ doc-subtab: columns
- {% include anchor.html name="Offset" %}
+ {% include elements/anchor.html name="Offset" %}
@@ -722,7 +722,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_offset }}{% endhighlight %}
- {% include anchor.html name="Centering columns" %}
+ {% include elements/anchor.html name="Centering columns" %}
@@ -782,7 +782,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
- {% include anchor.html name="Responsiveness" %}
+ {% include elements/anchor.html name="Responsiveness" %}
By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
@@ -857,7 +857,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
- {% include anchor.html name="Nesting" %}
+ {% include elements/anchor.html name="Nesting" %}
@@ -918,7 +918,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_nesting }}{% endhighlight %}
- {% include anchor.html name="Multiline" %}
+ {% include elements/anchor.html name="Multiline" %}
Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.
@@ -955,7 +955,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
- {% include anchor.html name="Gapless" %}
+ {% include elements/anchor.html name="Gapless" %}
If you want to remove the space between the columns, add the is-gapless modifier on the columns container:
@@ -1018,7 +1018,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
- {% include anchor.html name="Narrow column" %}
+ {% include elements/anchor.html name="Narrow column" %}
If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.
diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html
index 4d2d3132..4e840d09 100644
--- a/docs/documentation/layout/footer.html
+++ b/docs/documentation/layout/footer.html
@@ -27,8 +27,8 @@ breadcrumb:
{% include layout/main-close.html %}
-{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
+{% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
{% include layout/main-open.html %}
-{% include variables.html %}
+{% include elements/variables.html %}
diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html
index 004de36c..197e2946 100644
--- a/docs/documentation/layout/hero.html
+++ b/docs/documentation/layout/hero.html
@@ -648,9 +648,9 @@ breadcrumb:
{% endcapture %}
- {% include snippet.html content=heroNavbarA horizontal=true more=true %}
- {% include snippet.html content=heroNavbarB horizontal=true more=true %}
- {% include snippet.html content=heroNavbarC horizontal=true more=true %}
+ {% include elements/snippet.html content=heroNavbarA horizontal=true more=true %}
+ {% include elements/snippet.html content=heroNavbarB horizontal=true more=true %}
+ {% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
{% include layout/main-open.html %}
diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html
index 2d453639..19124925 100644
--- a/docs/documentation/layout/level.html
+++ b/docs/documentation/layout/level.html
@@ -185,22 +185,22 @@ breadcrumb:
-{% include snippet.html content=nav_example horizontal=true more=true %}
+{% include elements/snippet.html content=nav_example horizontal=true more=true %}
-{% include anchor.html name="Centered level" %}
+{% include elements/anchor.html name="Centered level" %}
If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container.
-{% include snippet.html content=nav_centered_example horizontal=true more=true %}
+{% include elements/snippet.html content=nav_centered_example horizontal=true more=true %}
-{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
+{% include elements/snippet.html content=nav_centered_bis_example horizontal=true more=true %}
-{% include anchor.html name="Mobile level" %}
+{% include elements/anchor.html name="Mobile level" %}
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container.
-{% include snippet.html content=nav_mobile_example horizontal=true more=true %}
+{% include elements/snippet.html content=nav_mobile_example horizontal=true more=true %}
diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html
index 5bd3fb00..ad78477e 100644
--- a/docs/documentation/layout/media-object.html
+++ b/docs/documentation/layout/media-object.html
@@ -200,18 +200,18 @@ breadcrumb:
-{% include snippet.html content=media_example horizontal=true more=true %}
+{% include elements/snippet.html content=media_example horizontal=true more=true %}
You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.
-{% include snippet.html content=media_bis_example horizontal=true more=true %}
+{% include elements/snippet.html content=media_bis_example horizontal=true more=true %}
-{% include anchor.html name="Nesting" %}
+{% include elements/anchor.html name="Nesting" %}
You can nest media objects up to 3 levels deep.
-{% include snippet.html content=media_nested_example horizontal=true more=true %}
+{% include elements/snippet.html content=media_nested_example horizontal=true more=true %}
diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html
index ea865f79..393c7620 100644
--- a/docs/documentation/layout/section.html
+++ b/docs/documentation/layout/section.html
@@ -33,4 +33,4 @@ breadcrumb:
You can use the modifiers is-medium and is-large to change the spacing.
-{% include variables.html %}
+{% include elements/variables.html %}
diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html
index 1bc38352..dbd3bebb 100644
--- a/docs/documentation/layout/tiles.html
+++ b/docs/documentation/layout/tiles.html
@@ -440,7 +440,7 @@ tile is-ancestor
{% highlight html %}{{ tile_empty }}{% endhighlight %}
-{% include anchor.html name="Example" %}
+{% include elements/anchor.html name="Example" %}
@@ -492,7 +492,7 @@ tile is-ancestor
{% highlight html %}{{ tile_default }}{% endhighlight %}
-{% include anchor.html name="Modifiers" %}
+{% include elements/anchor.html name="Modifiers" %}
The tile element has 16 modifiers:
@@ -521,7 +521,7 @@ tile is-ancestor
-{% include anchor.html name="How it works: Nesting" %}
+{% include elements/anchor.html name="How it works: Nesting" %}
Everything is a tile! To create a grid of tiles, you only need to nesttile elements.
@@ -606,7 +606,7 @@ tile is-ancestor
{% highlight html %}{{ tile_lorem }}{% endhighlight %}
-{% include anchor.html name="Nesting requirements" %}
+{% include elements/anchor.html name="Nesting requirements" %}
@@ -682,7 +682,7 @@ tile is-ancestor
{% highlight html %}{{ tile_any_content }}{% endhighlight %}
-{% include anchor.html name="3 columns" %}
+{% include elements/anchor.html name="3 columns" %}
@@ -777,7 +777,7 @@ tile is-ancestor
{% highlight html %}{{ tile_3_columns }}{% endhighlight %}
-{% include anchor.html name="4 columns" %}
+{% include elements/anchor.html name="4 columns" %}
-{% include anchor.html name="Code requirements" %}
+{% include elements/anchor.html name="Code requirements" %}
@@ -109,7 +109,7 @@ breadcrumb:
-{% include anchor.html name="Starter template" %}
+{% include elements/anchor.html name="Starter template" %}
@@ -118,10 +118,10 @@ breadcrumb:
- {% highlight html %}{% include getting-started.html %}{% endhighlight %}
+ {% highlight html %}{% include snippets/getting-started.html %}{% endhighlight %}
-{% include anchor.html name="bulma-start" %}
+{% include elements/anchor.html name="bulma-start" %}
-{% include anchor.html name="Initial variables" %}
+{% include elements/anchor.html name="Initial variables" %}
@@ -94,7 +94,7 @@ breadcrumb:
These are variables with a value that references another variable.
{% endcapture %}
{%
- include variables.html
+ include elements/variables.html
anchor_name = 'Derived variables'
data = derived_variables
custom_message = custom_message
@@ -105,7 +105,7 @@ breadcrumb:
You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how.
{% endcapture %}
{%
- include variables.html
+ include elements/variables.html
anchor_name = 'Generic variables'
tab = 'base'
subtab = 'generic'
diff --git a/docs/expo.html b/docs/expo.html
index 11d56640..350bb265 100644
--- a/docs/expo.html
+++ b/docs/expo.html
@@ -5,6 +5,9 @@ share_image: "/images/expo/bulma-expo-share.png"
share_description: "Get inspired! The Bulma Expo is a curated collection of the most beautiful websites designed with Bulma. It showcases how you can easily customize Bulma for your own personal or business needs."
layout: default
route: expo
+breadcrumb:
+- home
+- expo
other:
- name: Apache BookKeeper
url: https://lucperkins.github.io/bookkeeper/
@@ -139,76 +142,79 @@ websites:
{% endcapture %}
-{% include navbar.html id="ExpoHero" %}
+{% include global/navbar.html id="Expo" %}
-
-
-
-
-
-
- Expo
-
-
- How people used Bulma to design beautiful websites 😍
-
-
-
- {% include carbon.html %}
+
+
+
+
+ {% include components/breadcrumb.html %}
+
+
+
+
+ Expo
+
+
+ How people used Bulma to design beautiful websites 😍
+
While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
+ If you want smaller divisions, you can always nest columns.
+
+
+ {% highlight html %}{{ columns }}{% endhighlight %}
+
A simple block with an image that will solve 90% of your UI problems
+
+
+
+
+
+
+
+
+
+
+
+
+
+ John Smith @johnsmith 31m
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+
+
+
+
+
+
+
Tall tile
+
With even more content
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
+
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
+
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
+
+
+
+
+
+ {% highlight html %}{{ tiles }}{% endhighlight %}
+
+
+
diff --git a/docs/_includes/index/tws.html b/docs/_includes/index/tws.html
new file mode 100644
index 00000000..de1cf176
--- /dev/null
+++ b/docs/_includes/index/tws.html
@@ -0,0 +1,3 @@
+
+ {% include elements/tws.html %}
+
diff --git a/docs/_includes/index/usual.html b/docs/_includes/index/usual.html
new file mode 100644
index 00000000..c7a4b07a
--- /dev/null
+++ b/docs/_includes/index/usual.html
@@ -0,0 +1,12 @@
+
+
As the grid can be divided into 12 columns, there are size classes for each division:
-
-
is-2
-
is-3
-
is-4
-
is-5
-
is-6
-
is-7
-
is-8
-
is-9
-
is-10
-
is-11
-
-
-
-
Naming
-
Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.
-
-
-
-
-
is-2
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-3
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-4
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-5
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-6
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-7
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-8
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-9
-
-
-
1
-
-
-
1
-
-
-
1
-
-
-
-
-
is-10
-
-
-
1
-
-
-
1
-
-
-
-
-
is-11
-
-
-
1
-
-
-
- {% include elements/anchor.html name="Offset" %}
-
-
-
- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x:
-
-
-
-
-
-
- is-half
- is-offset-one-quarter
-
-
-
-
-
-
-
- is-4
- is-offset-8
-
-
-
-
-
-
-
- is-11
- is-offset-1
-
-
-
-
- {% highlight html %}{{ columns_offset }}{% endhighlight %}
-
- {% include elements/anchor.html name="Centering columns" %}
-
-
-
- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element:
-
If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.
-
- {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
-
- {% include elements/anchor.html name="Nesting" %}
-
-
-
- You can nest columns to have more flexibility in your design. You only need to follow this structure:
-
-
-
- columns: top-level columns container
-
-
- column
-
-
- columns: nested columns
-
-
- column and so on…
-
-
-
-
-
-
-
-
-
- The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.
-
-
-
-
-
-
First column
-
-
-
First nested column
-
-
-
Second nested column
-
-
-
-
-
Second column
-
-
-
50%
-
-
-
Auto
-
-
-
Auto
-
-
-
-
-
- {% highlight html %}{{ columns_nesting }}{% endhighlight %}
-
- {% include elements/anchor.html name="Multiline" %}
-
-
-
Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.
-
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-half
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
Auto
-
-
-
- {% highlight html %}{{ columns_multiline }}{% endhighlight %}
-
- {% include elements/anchor.html name="Gapless" %}
-
-
-
If you want to remove the space between the columns, add the is-gapless modifier on the columns container:
-
-
-
-
First column
-
-
-
Second column
-
-
-
Third column
-
-
-
Fourth column
-
-
- {% highlight html %}{{ columns_gapless }}{% endhighlight %}
-
-
You can combine it with the is-multiline modifier:
-
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-half
-
-
-
is-one-quarter
-
-
-
is-one-quarter
-
-
-
is-two-fifths
-
-
-
is-one-fifth
-
-
-
is-two-fifths
-
-
-
is-one-quarter
-
-
-
Auto
-
-
- {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
-
- {% include elements/anchor.html name="Narrow column" %}
-
-
-
If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.
-
-
-
-
-
Narrow column
-
This column is only 200px wide.
-
-
-
-
-
Flexible column
-
This column will take up the remaining space available.
-
-
-
- {% highlight html %}{{ columns_narrow }}{% endhighlight %}
-
-
As for the size modifiers, you can have narrow columns for different breakpoints:
A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids
-
-
-
-
-
To build intricate 2-dimensional layouts, you only need a single element: the tile:
-
-
-{% highlight html %}
-
-
-
-{% endhighlight %}
-
-
-
-
Example
-
-
-
-
-
-
Vertical...
-
Top tile
-
-
-
...tiles
-
Bottom tile
-
-
-
-
-
Middle tile
-
With an image
-
-
-
-
-
-
-
-
-
Wide tile
-
Aligned with the right tile
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
-
Tall tile
-
With even more content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
-
-
-
-
-
-
-{% highlight html %}
-
-
-
-
-
-
Vertical...
-
Top tile
-
-
-
...tiles
-
Bottom tile
-
-
-
-
-
Middle tile
-
With an image
-
-
-
-
-
-
-
-
-
Wide tile
-
Aligned with the right tile
-
-
-
-
-
-
-
-
-
-
Tall tile
-
With even more content
-
-
-
-
-
-
-
-{% endhighlight %}
-
-
-
-
Modifiers
-
-
-
The tile element has 16 modifiers:
-
-
- 3 contextual modifiers
-
-
is-ancestor
-
is-parent
-
is-child
-
-
-
- 1 directional modifier
-
-
is-vertical
-
-
-
- 12 horizontal size modifiers
-
-
from is-1
-
to is-12
-
-
-
-
-
-
-
-
How it works: Nesting
-
-
Everything is a tile! To create a grid of tiles, you only need to nesttile elements.
-
-
-
-
-
Start with an ancestor tile that will wrap all other tiles:
-
-
-{% highlight html %}
-
-
-
-{% endhighlight %}
-
-
-
-
-
-
Add tile elements that will distribute themselves horizontally:
-
-
-{% highlight html %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
-
-
-
-
-
- You can resize any tile according to a 12 column grid.
-
- For example, is-4 will take up 1/3 of the horizontal space:
-
-
-
-{% highlight html %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
-
-
-
-
-
If you want to stack tiles vertically, add is-vertical on the parent tile:
-
-
-{% highlight html %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
-
-
-
-
-
-
As soon as you want to add content to a tile, just:
-
-
add any class you want, like box
-
add the is-child modifier on the tile
-
add the is-parent modifier on the parent tile
-
-
-
-
-{% highlight html %}
-
-
-
-
One
-
-
-
Two
-
-
-
-
-
Three
-
-
-
-{% endhighlight %}
-
-
-
-
-
-
-
One
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
Two
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
Three
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
-
-
-
-
-{% highlight html %}
-
-
-
-
One
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
Two
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
Three
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
-
Tall column
-
With even more content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
-
-
-
-
-
-
-{% highlight html %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-
-
-
-
3 columns
-
-
-
-
-
Hello World
-
What is up?
-
-
-
-
-
Foo
-
Bar
-
-
-
-
-
Third column
-
With some content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
-
-
-
Vertical tiles
-
Top box
-
-
-
Vertical tiles
-
Bottom box
-
-
-
-
-
Middle box
-
With an image
-
-
-
-
-
-
-
-
-
Wide column
-
Aligned with the right column
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
-
Tall column
-
With even more content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
-
-
-
-
-
-
-
-
-
Side column
-
With some content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
Main column
-
With some content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-{% highlight html %}
-
-
-
-
Hello World
-
What is up?
-
-
-
-
-
Foo
-
Bar
-
-
-
-
-
Third column
-
With some content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
-
-
-
-
Vertical tiles
-
Top box
-
-
-
Vertical tiles
-
Bottom box
-
-
-
-
-
Middle box
-
With an image
-
-
-
-
-
-
-
-
-
Wide column
-
Aligned with the right column
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
-
Tall column
-
With even more content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
-
-
-
-
-
-
-
-
-
-
Side column
-
With some content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
Main column
-
With some content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-{% endhighlight %}
-
-
-
-
4 columns
-
-
-
-
-
One
-
Subtitle
-
-
-
-
-
Two
-
Subtitle
-
-
-
-
-
Three
-
Subtitle
-
-
-
-
-
Four
-
Subtitle
-
-
-
-
-
-
-
-
-
Five
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
-
-
-
-
-
-
-
Six
-
Subtitle
-
-
-
-
-
Seven
-
Subtitle
-
-
-
-
-
-
Eight
-
Subtitle
-
-
-
-
-
-
-
-
Nine
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
Ten
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
-
-
Eleven
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
-
-
-
-
-
-
-
-
-
Twelve
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
-
-
-
-
-
-
Thirteen
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
Fourteen
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
-
-
-
-
-
-{% highlight html %}
-
-
-
-
One
-
Subtitle
-
-
-
-
-
Two
-
Subtitle
-
-
-
-
-
Three
-
Subtitle
-
-
-
-
-
Four
-
Subtitle
-
-
-
-
-
-
-
-
-
-
Five
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
-
-
-
-
-
-
-
Six
-
Subtitle
-
-
-
-
-
Seven
-
Subtitle
-
-
-
-
-
-
Eight
-
Subtitle
-
-
-
-
-
-
-
-
Nine
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
Ten
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
-
-
Eleven
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
-
-
-
-
-
-
-
-
-
-
Twelve
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
-
-
-
-
-
-
Thirteen
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
Fourteen
-
Subtitle
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.
While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
- If you want smaller divisions, you can always nest columns.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
-
-
-
-
-
-
Tall tile
-
With even more content
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.
-
Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.
-
Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.
A simple block with an image that will solve 90% of your UI problems
-
-
-
-
-
-
-
-
-
-
-
-
-
- John Smith @johnsmith 31m
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-
+ This interactive tool works better on larger screens! That's because Bulma columns are vertical by default. I recommend revisiting this page later when you're on desktop. 😉
+
+ {% highlight html %}{{ columns }}{% endhighlight %}
+
+
+
Info
While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
If you want smaller divisions, you can always nest columns.
-
- {% highlight html %}{{ columns }}{% endhighlight %}
-
+ John Smith @johnsmith 31m
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+
+
+ Lorem ipsum dolor sit amet, consectetur
+ adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet,
+ consectetur adipiscing elit
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
+
+ John Smith @johnsmith 31m
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+