Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/documentation/columns/basics.html
View File

@@ -1,29 +1,23 @@
---
title: Columns powered by Flexbox
layout: documentation
layout: docs
theme: library
doc-library: true
doc-tab: columns
doc-subtab: basics
breadcrumb:
- home
- documentation
- columns
- columns-basics
- home
- documentation
- columns
- columns-basics
---
{% capture columns %}
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
<div class="column">First column</div>
<div class="column">Second column</div>
<div class="column">Third column</div>
<div class="column">Fourth column</div>
</div>
{% endcapture %}
@@ -33,7 +27,10 @@ breadcrumb:
<li>Add a <code>columns</code> container</li>
<li>Add as many <code>column</code> elements as you want</li>
</ol>
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
<p>
Each column will have an <strong>equal width</strong>, no matter the number
of columns.
</p>
</div>
<div class="columns">
@@ -52,5 +49,5 @@ breadcrumb:
</div>
<div class="bd-highlight-full">
{% highlight html %}{{ columns }}{% endhighlight %}
{% highlight html -%} {{- columns -}} {%- endhighlight %}
</div>

260
docs/documentation/columns/gap.html
View File

@@ -1,129 +1,84 @@
---
title: Columns gap
layout: documentation
layout: docs
theme: library
doc-library: true
doc-tab: columns
doc-subtab: gap
breadcrumb:
- home
- documentation
- columns
- columns-gap
- home
- documentation
- columns
- columns-gap
---
{% capture columns_default_gap %}
<div class="columns">
<div class="column">
<p class="bd-notification is-primary">
Default gap
</p>
<p class="bd-notification is-primary">Default gap</p>
</div>
<div class="column">
<p class="bd-notification is-primary">
Default gap
</p>
<p class="bd-notification is-primary">Default gap</p>
</div>
<div class="column">
<p class="bd-notification is-primary">
Default gap
</p>
<p class="bd-notification is-primary">Default gap</p>
</div>
<div class="column">
<p class="bd-notification is-primary">
Default gap
</p>
<p class="bd-notification is-primary">Default gap</p>
</div>
</div>
{% endcapture %}
{% capture columns_gapless %}
<div class="columns is-gapless">
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
<div class="column">No gap</div>
<div class="column">No gap</div>
<div class="column">No gap</div>
<div class="column">No gap</div>
</div>
{% endcapture %}
{% capture columns_gapless_multiline %}
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-quarter">
is-one-quarter
</div>
<div class="column is-one-quarter">
is-one-quarter
</div>
<div class="column is-one-quarter">
is-one-quarter
</div>
<div class="column is-one-quarter">
is-one-quarter
</div>
<div class="column is-half">
is-half
</div>
<div class="column is-one-quarter">
is-one-quarter
</div>
<div class="column is-one-quarter">
is-one-quarter
</div>
<div class="column is-one-quarter">
is-one-quarter
</div>
<div class="column">
Auto
</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-half">is-half</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column">Auto</div>
</div>
{% endcapture %}
{% capture columns_variable_responsive_gaps %}
<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div class="column">
Column
</div>
<div
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
{% endcapture %}
{% include elements/anchor.html name="Default gap" %}
{% include docs/elements/anchor.html name="Default gap" %}
<div class="content">
<p>
Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a
default value of <code>0.75rem</code>.
<br>
Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of
<code>$column-gap</code>, or <code>1.5rem</code> by default.
</p>
</div>
{{ columns_default_gap }}
{% include elements/anchor.html name="Gapless" %}
{% include docs/elements/anchor.html name="Gapless" %}
<div class="content">
<p>
If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on
the <code>columns</code> container:
</p>
</div>
@@ -143,7 +98,9 @@ breadcrumb:
</div>
<div class="bd-highlight-full">
{% highlight html %}{{ columns_gapless }}{% endhighlight %}
{% highlight html -%}
{{- columns_gapless -}}
{%- endhighlight %}
</div>
<div class="content">
@@ -181,45 +138,36 @@ breadcrumb:
</div>
<div class="bd-highlight-full">
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
{% highlight html -%}
{{- columns_gapless_multiline -}}
{%- endhighlight %}
</div>
{% include elements/anchor.html name="Variable gap" %}
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags">
<span class="tag is-warning">Experimental</span>
</div>
</div>
</div>
{% include docs/elements/anchor.html name="Variable gap" %}
<div class="content">
<p>
You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the
<code>.columns</code> container.
</p>
<ul>
<li>
<code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
</li>
<li>
<code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
</li>
<li>
<code>is-8</code> is the maximum gap of <code>2rem</code>
</li>
<li><code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)</li>
<li><code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value</li>
<li><code>is-8</code> is the maximum gap of <code>2rem</code></li>
</ul>
<p>
Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
</p>
<p>Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.</p>
</div>
{% include content/klmn.html %}
{% include docs/content/klmn.html %}
<div class="message is-warning">
<div class="message-body">
<p>
This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>.
This feature is only available in browsers that support
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables"
>CSS Variables</a
>.
</p>
</div>
</div>
@@ -227,55 +175,61 @@ breadcrumb:
<div class="message is-info">
<div class="message-body">
<p>
If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
If your Sass setup doesn't support CSS Variables, you can
<strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
</p>
</div>
</div>
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
{% if vernum >= 72 %}
{%
include docs/elements/anchor.html name="Breakpoint
based column gaps"
%}
{% include elements/anchor.html name="Breakpoint based column gaps" %}
<div class="content">
<p>You can define a column gap for each viewport size:</p>
<div class="content">
<p>
You can define a column gap for each viewport size:
</p>
<p>For example, here's how it looks with the following modifiers: <code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code></p>
</div>
<div class="bd-highlight-full">
{% highlight html %}{{ columns_variable_responsive_gaps }}{% endhighlight %}
</div>
<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
<div class="column">
<p class="bd-notification is-primary">Column</p>
<p>
For example, here's how it looks with the following modifiers:
<code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
</div>
<div class="message is-info">
<p class="message-body">
If you want to see the difference, resize your browser and see how the <strong>columns gap</strong> varies.
</p>
</div>
<div class="bd-highlight-full">
{% highlight html -%}
{{- columns_variable_responsive_gaps -}}
{%- endhighlight %}
</div>
<div
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>
</div>
<div class="message is-info">
<p class="message-body">
If you want to see the difference, resize your browser and see how the
<strong>columns gap</strong> varies.
</p>
</div>
{% endif %}

37
docs/documentation/columns/nesting.html
View File

@@ -1,18 +1,21 @@
---
title: Nesting columns
layout: documentation
layout: docs
theme: library
doc-library: true
doc-tab: columns
doc-subtab: nesting
breadcrumb:
- home
- documentation
- columns
- columns-nesting
- home
- documentation
- columns
- columns-nesting
---
<div class="content">
<p>
You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
You can <strong>nest</strong> columns to have more flexibility in your
design. You only need to follow this structure:
</p>
<ul>
<li>
@@ -24,9 +27,7 @@ breadcrumb:
<li>
<code>columns</code>: nested columns
<ul>
<li>
<code>column</code> and so on…
</li>
<li><code>column</code> and so on…</li>
</ul>
</li>
</ul>
@@ -35,7 +36,14 @@ breadcrumb:
</li>
</ul>
<p>
The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
The difference with
<a href="{{ site.url }}/documentation/columns/options/#multiline"
>multiline columns</a
>
is the <strong>order</strong> in the HTML code: all the
<strong class="has-text-info">blue</strong> columns appear
<em>before</em> the <strong class="has-text-danger">red</strong> ones.
Resize to a narrower viewport to see the result.
</p>
</div>
@@ -67,16 +75,15 @@ breadcrumb:
</div>
</div>
</div>
{% endcapture %}
{{ columns_nested_example }}
{% endcapture %} {{ columns_nested_example }}
<div class="content">
<p>
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
Multiline columns will also have a <strong>gap</strong> between each
<strong>line</strong>.
</p>
</div>
<div class="bd-highlight-full">
{% highlight html %}{{ columns_nested_example }}{% endhighlight %}
{% highlight html -%} {{- columns_nested_example -}} {%- endhighlight %}
</div>

112
docs/documentation/columns/options.html
View File

@@ -1,13 +1,15 @@
---
title: Column options
layout: documentation
layout: docs
theme: library
doc-library: true
doc-tab: columns
doc-subtab: options
breadcrumb:
- home
- documentation
- columns
- columns-options
- home
- documentation
- columns
- columns-options
---
{% capture columns_vcentered %}
@@ -16,12 +18,13 @@ breadcrumb:
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
<p class="bd-notification is-primary">
Second column with more content. This is so you can see the vertical
alignment.
</p>
</div>
</div>
{% endcapture %}
{% capture columns_multiline %}
{% endcapture %} {% capture columns_multiline %}
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code>
@@ -47,61 +50,57 @@ breadcrumb:
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column">
Auto
</div>
<div class="column">Auto</div>
</div>
{% endcapture %}
{% capture columns_mobile_centered %}
{% endcapture %} {% capture columns_mobile_centered %}
<div class="columns is-mobile is-centered">
<div class="column is-half">
<p class="bd-notification is-primary">
<code class="html">is-half</code><br>
<code class="html">is-half</code><br />
</p>
</div>
</div>
{% endcapture %}
{% capture columns_mobile_multiline_centered %}
{% endcapture %} {% capture columns_mobile_multiline_centered %}
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
<code class="html">is-narrow</code><br />
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
<code class="html">is-narrow</code><br />
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
<code class="html">is-narrow</code><br />
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
<code class="html">is-narrow</code><br />
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
<code class="html">is-narrow</code><br />
Fifth Column
</p>
</div>
</div>
{% endcapture %}
{% include elements/anchor.html name="Vertical alignment" %}
{% endcapture %} {% include docs/elements/anchor.html name="Vertical alignment"
%}
<div class="content">
<p>To align your columns vertically, add the <code>is-vcentered</code> modifier to the <code>columns</code> container.</p>
<p>
To align your columns vertically, add the <code>is-vcentered</code> modifier
to the <code>columns</code> container.
</p>
</div>
<div class="columns is-vcentered">
@@ -109,16 +108,23 @@ breadcrumb:
<p class="bd-notification is-primary">First column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
<p class="bd-notification is-primary">
Second column with more content. This is so you can see the vertical
alignment.
</p>
</div>
</div>
{% highlight html %}{{ columns_vcentered }}{% endhighlight %}
{% include elements/anchor.html name="Multiline" %}
{% highlight html -%} {{- columns_vcentered -}} {%- endhighlight %} {% include
docs/elements/anchor.html name="Multiline" %}
<div class="content">
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements than would fit in a single row.</p>
<p>
Whenever you want to start a new line, you can close a
<code>columns</code> container and start a new one. But you can also add the
<code>is-multiline</code> modifier and add <strong>more</strong> column
elements than would fit in a single row.
</p>
</div>
<div class="columns is-multiline is-mobile">
@@ -151,63 +157,67 @@ breadcrumb:
</div>
</div>
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
{% include elements/anchor.html name="Centering columns" %}
{% highlight html -%} {{- columns_multiline -}} {%- endhighlight %} {% include
docs/elements/anchor.html name="Centering columns" %}
<div class="content">
<p>
While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
While you can use <em>empty columns</em> (like
<code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal
space around <code>.column</code> elements, you can also use
<code>.is-centered</code> on the parent <code>.columns</code> element:
</p>
</div>
<div class="columns is-mobile is-centered">
<div class="column is-half">
<p class="bd-notification is-primary">
<code class="html">is-half</code><br>
<code class="html">is-half</code><br />
</p>
</div>
</div>
{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
{% highlight html -%} {{- columns_mobile_centered -}} {%- endhighlight %}
<div class="content">
<p>
Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
Use with <code>.is-multiline</code> to create a flexible, centered list (try
resizing to see centering in different viewport sizes):
</p>
</div>
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
<code class="html">is-narrow</code><br />
Fifth Column
</p>
</div>
</div>
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
{% highlight html -%} {{- columns_mobile_multiline_centered -}} {%- endhighlight
%}

86
docs/documentation/columns/responsiveness.html
View File

@@ -1,15 +1,16 @@
---
title: Columns responsiveness
layout: documentation
layout: docs
theme: library
doc-library: true
doc-tab: columns
doc-subtab: responsiveness
breadcrumb:
- home
- documentation
- columns
- columns-responsiveness
- home
- documentation
- columns
- columns-responsiveness
---
{% capture columns_mobile %}
<div class="columns is-mobile">
<div class="column">1</div>
@@ -18,7 +19,6 @@ breadcrumb:
<div class="column">4</div>
</div>
{% endcapture %}
{% capture columns_desktop %}
<div class="columns is-desktop">
<div class="column">1</div>
@@ -27,14 +27,22 @@ breadcrumb:
<div class="column">4</div>
</div>
{% endcapture %}
{% capture columns_multiple_breakpoints %}
<div class="columns is-mobile">
<div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<code>is-three-quarters-mobile</code><br>
<code>is-two-thirds-tablet</code><br>
<code>is-half-desktop</code><br>
<code>is-one-third-widescreen</code><br>
<div
class="
column
is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd
"
>
<code>is-three-quarters-mobile</code><br />
<code>is-two-thirds-tablet</code><br />
<code>is-half-desktop</code><br />
<code>is-one-third-widescreen</code><br />
<code>is-one-quarter-fullhd</code>
</div>
<div class="column">2</div>
@@ -43,14 +51,15 @@ breadcrumb:
<div class="column">5</div>
</div>
{% endcapture %}
{% include elements/anchor.html name="Mobile columns" %}
{% include docs/elements/anchor.html name="Mobile columns" %}
<div class="content">
<p>
By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top
of each other on <strong>mobile</strong>.
<br>
If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the
<code>columns</code> container:
</p>
</div>
@@ -69,20 +78,22 @@ breadcrumb:
</div>
</div>
{% highlight html %}{{ columns_mobile }}{% endhighlight %}
{% highlight html -%}
{{- columns_mobile -}}
{%- endhighlight %}
<div class="message is-info">
<p class="message-header">
Resize
</p>
<p class="message-header">Resize</p>
<p class="message-body">
If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
If you want to see the difference, resize your browser and see
<em>when</em> the columns are stacked and when they are horizontally distributed.
</p>
</div>
<div class="content">
<p>
If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier
on the <code>columns</code> container:
</p>
</div>
@@ -101,16 +112,26 @@ breadcrumb:
</div>
</div>
{% highlight html %}{{ columns_desktop }}{% endhighlight %}
{% include elements/anchor.html name="Different column sizes per breakpoint" %}
{% highlight html -%}
{{- columns_desktop -}}
{%- endhighlight %}
{% include docs/elements/anchor.html name="Different column sizes per breakpoint" %}
<div class="content">
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
</div>
<div class="columns is-mobile">
<div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<div
class="
column
is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd
"
>
<p class="bd-notification is-primary">
<code>is-three-quarters-mobile</code><br>
<code>is-two-thirds-tablet</code><br>
@@ -135,7 +156,14 @@ breadcrumb:
<div class="message is-info">
<p class="message-header">Resize</p>
<p class="message-body">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.</p>
<p class="message-body">
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.
</p>
</div>
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
<div class="bd-highlight-full">
{% highlight html -%}
{{- columns_multiple_breakpoints -}}
{%- endhighlight %}
</div>

206
docs/documentation/columns/sizes.html
View File

@@ -1,15 +1,16 @@
---
title: Column sizes
layout: documentation
layout: docs
theme: library
doc-library: true
doc-tab: columns
doc-subtab: sizes
breadcrumb:
- home
- documentation
- columns
- columns-sizes
- home
- documentation
- columns
- columns-sizes
---
{% capture columns_sizes %}
<div class="columns">
<div class="column is-four-fifths">is-four-fifths</div>
@@ -65,7 +66,6 @@ breadcrumb:
<div class="column">Auto</div>
</div>
{% endcapture %}
{% capture columns_offset %}
<div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter"></div>
@@ -83,11 +83,10 @@ breadcrumb:
<div class="column is-11 is-offset-1"></div>
</div>
{% endcapture %}
{% capture columns_narrow %}
<div class="columns">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<div class="box" style="width: 200px">
<p class="title is-5">Narrow column</p>
<p class="subtitle">This column is only 200px wide.</p>
</div>
@@ -95,7 +94,9 @@ breadcrumb:
<div class="column">
<div class="box">
<p class="title is-5">Flexible column</p>
<p class="subtitle">This column will take up the remaining space available.</p>
<p class="subtitle">
This column will take up the remaining space available.
</p>
</div>
</div>
</div>
@@ -159,10 +160,10 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
@@ -173,10 +174,10 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
@@ -187,10 +188,10 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
@@ -201,10 +202,10 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
@@ -215,10 +216,10 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
@@ -229,10 +230,10 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
@@ -243,10 +244,10 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
@@ -257,10 +258,10 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
@@ -271,18 +272,20 @@ breadcrumb:
</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj">Auto</p>
<p class="bd-notification">Auto</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij">Auto</p>
<p class="bd-notification">Auto</p>
</div>
</div>
<div class="bd-highlight-full">
{% highlight html %}{{ columns_sizes }}{% endhighlight %}
{% highlight html -%}
{{- columns_sizes -}}
{%- endhighlight %}
</div>
{% include elements/anchor.html name="12 columns system" %}
{% include docs/elements/anchor.html name="12 columns system" %}
<div class="content">
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
@@ -304,7 +307,10 @@ breadcrumb:
<div class="message is-info">
<p class="message-header">Naming convention</p>
<p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
<p class="message-body">
Each modifier class is named after
<strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.
</p>
</div>
<div class="columns">
<div class="column is-1">
@@ -349,34 +355,34 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-2</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -384,31 +390,31 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-3</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -416,28 +422,28 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-4</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -445,25 +451,25 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-5</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -471,22 +477,22 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-6</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -494,19 +500,19 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-7</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -514,16 +520,16 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-8</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -531,13 +537,13 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-9</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -545,10 +551,10 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-10</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
<div class="column">
<p class="bd-notification is-wajofij has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -556,7 +562,7 @@ breadcrumb:
<p class="bd-notification is-primary"><code>is-11</code></p>
</div>
<div class="column">
<p class="bd-notification is-fojeisj has-text-centered">1</p>
<p class="bd-notification has-text-centered">1</p>
</div>
</div>
<div class="columns">
@@ -565,11 +571,13 @@ breadcrumb:
</div>
</div>
{% include elements/anchor.html name="Offset" %}
{% include docs/elements/anchor.html name="Offset" %}
<div class="content">
<p>
While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create
horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like
<code>.is-offset-x</code>:
</p>
</div>
@@ -610,18 +618,23 @@ breadcrumb:
</div>
<div class="bd-highlight-full">
{% highlight html %}{{ columns_offset }}{% endhighlight %}
{% highlight html -%}
{{- columns_offset -}}
{%- endhighlight %}
</div>
{% include elements/anchor.html name="Narrow column" %}
{% include docs/elements/anchor.html name="Narrow column" %}
<div class="content">
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
<p>
If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The
other column(s) will fill up the remaining space.
</p>
</div>
<div class="columns">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<div class="box" style="width: 200px">
<p class="title is-5">Narrow column</p>
<p class="subtitle">This column is only 200px wide.</p>
</div>
@@ -635,11 +648,16 @@ breadcrumb:
</div>
<div class="bd-highlight-full">
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
{% highlight html -%}
{{- columns_narrow -}}
{%- endhighlight %}
</div>
<div class="content">
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
<p>
As for the size modifiers, you can have narrow columns for different
<strong>breakpoints</strong>:
</p>
<ul>
<li>
<code>.is-narrow-mobile</code>