+
+
{{ page.subtitle }}
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 6b252601..a2603258 100644
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -5,6 +5,25 @@ route: documentation
{% include navbar.html id="Documentation" %}
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign category_links = site.data.links.order[page.doc-tab] %}
+
+{% for link_id in category_links %}
+ {% if link_id == current_link_id %}
+ {% unless forloop.first %}
+ {% assign previous_index = forloop.index0 | minus: 1 %}
+ {% assign previous_link_id = category_links[previous_index] %}
+ {% assign previous_link = site.data.links.by_id[previous_link_id] %}
+ {% endunless %}
+
+ {% unless forloop.last %}
+ {% assign next_index = forloop.index0 | plus: 1 %}
+ {% assign next_link_id = category_links[next_index] %}
+ {% assign next_link = site.data.links.by_id[next_link_id] %}
+ {% endunless %}
+ {% endif %}
+{% endfor %}
+
@@ -13,27 +32,43 @@ route: documentation
{{ page.title }}
-
{{ content }}
+
+ {% include elements/improve-page.html %}
Building a columns layout with Bulma is very simple:
+columns containercolumn elements as you wantEach column will have an equal width, no matter the number of columns.
+Building a columns layout with Bulma is very simple:
-columns containercolumn elements as you wantEach column will have an equal width, no matter the number of columns.
-First column
-Second column
-Third column
-Fourth column
-First column
Second column
+Third column
+Fourth column
+
+ 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.
-
- 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
-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
-
- 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.
-
+ 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
+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
+
+ 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.
+
- 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. +
+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.
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
-
- 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:
-
- is-half
- is-narrow
-
- Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes):
-
- is-narrow
- First Column
-
- is-narrow
- Our Second Column
-
- is-narrow
- Third Column
-
- is-narrow
- The Fourth Column
-
- is-narrow
- Fifth Column
-
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
Auto
+
+ 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:
+
+ is-half
+ is-narrow
+
+ Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes):
+
+ is-narrow
+ First Column
+
+ is-narrow
+ Our Second Column
+
+ is-narrow
+ Third Column
+
+ is-narrow
+ The Fourth Column
+
+ is-narrow
+ Fifth Column
+
+ 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:
+
- 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:
-
1
-2
-3
-4
-
- If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container:
-
1
-2
-3
-4
-You can define a column size for each viewport size: mobile, tablet, and desktop.
-
- is-half-mobile
- is-one-third-tablet
- is-one-quarter-desktop
-
1
-1
-1
-1
-1
2
+3
+4
+
+ If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container:
+
1
+2
+3
+4
+You can define a column size for each viewport size: mobile, tablet, and desktop.
+
+ is-half-mobile
+ is-one-third-tablet
+ is-one-quarter-desktop
+
1
+1
+1
+1
+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.
+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
+
+ 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
-
- is-one-quarter
-
Auto
-Auto
-
- is-one-fifth
-
Auto
-Auto
-As the grid can be divided into 12 columns, there are size classes for each division:
+is-2is-3is-4is-5is-6is-7is-8is-9is-10is-11is-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-2is-3is-4is-5is-6is-7is-8is-9is-10is-11
+ 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
+
+ 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
-
- is-4
- is-offset-8
-
- 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.
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.
-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.
+As for the size modifiers, you can have narrow columns for different breakpoints:
+is-narrow-mobile
+ is-narrow-tablet
+ is-narrow-desktop
+