mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Add klmn
This commit is contained in:
Jeremy Thomas
@@ -5,19 +5,73 @@ doc-tab: columns
|
||||
doc-subtab: gap
|
||||
---
|
||||
|
||||
{% capture columns_gap %}
|
||||
{% capture columns_default_gap %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
First column
|
||||
<p class="bd-notification is-info">
|
||||
Default gap
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
Second column
|
||||
<p class="bd-notification is-success">
|
||||
Default gap
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
Third column
|
||||
<p class="bd-notification is-warning">
|
||||
Default gap
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
Fourth column
|
||||
<p class="bd-notification is-danger">
|
||||
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>
|
||||
{% 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">
|
||||
Auto
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -27,17 +81,130 @@ doc-subtab: gap
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Columns gap</h1>
|
||||
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
|
||||
<hr>
|
||||
<h2 class="subtitle">
|
||||
Customize the <strong>gap</strong> between the columns
|
||||
</h2>
|
||||
|
||||
{% include anchor.html name="Default gap" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
|
||||
<ol>
|
||||
<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 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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{ columns_default_gap }}
|
||||
|
||||
{% include 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:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-gapless">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_gapless }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>You can combine it with the <code>is-multiline</code> modifier:</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline is-mobile is-gapless">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include 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 class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New</span>
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include 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>:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_gap }}{% endhighlight %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -34,44 +34,6 @@ doc-subtab: options
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_gapless %}
|
||||
<div class="columns is-gapless">
|
||||
<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 %}
|
||||
|
||||
{% capture columns_gapless_multiline %}
|
||||
<div class="columns is-gapless is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<code>is-half</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column">
|
||||
Auto
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_mobile_centered %}
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half is-narrow">
|
||||
@@ -118,23 +80,6 @@ doc-subtab: options
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_narrow %}
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
@@ -182,67 +127,6 @@ doc-subtab: options
|
||||
|
||||
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
||||
|
||||
{% include 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:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-gapless">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_gapless }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can combine it with the <code>is-multiline</code> modifier:</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline is-mobile is-gapless">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-info"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-info"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="bd-notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-info">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Centering columns" %}
|
||||
|
||||
<div class="content">
|
||||
@@ -302,43 +186,5 @@ doc-subtab: options
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
|
||||
|
||||
{% include 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>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-narrow-mobile</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-narrow-tablet</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-narrow-desktop</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -50,6 +50,23 @@ doc-subtab: sizes
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_narrow %}
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-columns.html %}
|
||||
|
||||
<section class="section">
|
||||
@@ -429,5 +446,43 @@ doc-subtab: sizes
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||
|
||||
{% include 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>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-narrow-mobile</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-narrow-tablet</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-narrow-desktop</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user