mirror of
https://github.com/jgthms/bulma
synced 2026-03-17 10:54:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user