mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add klmn
This commit is contained in:
Jeremy Thomas
parent
2aba5a3f84
commit
3985fff747
111
docs/_includes/klmn.html
Normal file
111
docs/_includes/klmn.html
Normal file
@ -0,0 +1,111 @@
|
||||
<div id="klmn" class="bd-klmn">
|
||||
<div class="bd-klmn-gaps">
|
||||
<strong class="bd-klmn-label">
|
||||
Gap:
|
||||
<code id="klmnValue"></code>
|
||||
</strong>
|
||||
{% for i in (0..8) %}
|
||||
<a class="bd-klmn-gap" data-value="{{ i }}">
|
||||
is-{{ i }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="bd-klmn-lead">
|
||||
<div class="columns is-variable bd-klmn-columns">
|
||||
<div class="column is-3">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
Side
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="bd-notification is-info has-text-centered">
|
||||
Main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-variable bd-klmn-columns">
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-success has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-warning has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<div class="bd-notification is-danger has-text-centered">
|
||||
Three columns
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-variable bd-klmn-columns">
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-info has-text-centered">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-success has-text-centered">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-warning has-text-centered">
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-danger has-text-centered">
|
||||
5
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
6
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-info has-text-centered">
|
||||
7
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-success has-text-centered">
|
||||
8
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-warning has-text-centered">
|
||||
9
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-danger has-text-centered">
|
||||
10
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-primary has-text-centered">
|
||||
11
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bd-notification is-info has-text-centered">
|
||||
12
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ site.url }}/lib/klmn.js"></script>
|
||||
@ -13,12 +13,12 @@
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
|
||||
Nesting
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
|
||||
Options
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
|
||||
Gap
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
|
||||
Options
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
40
docs/_javascript/klmn.js
Normal file
40
docs/_javascript/klmn.js
Normal file
@ -0,0 +1,40 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const $klmnColumns = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-columns'), 0);
|
||||
const $klmnGaps = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-gap'), 0);
|
||||
const $klmnValue = document.getElementById('klmnValue');
|
||||
|
||||
$klmnGaps.forEach(el => {
|
||||
el.addEventListener('mouseenter', () => {
|
||||
const index = el.dataset.value;
|
||||
selectGap(index);
|
||||
});
|
||||
});
|
||||
|
||||
function resetGaps() {
|
||||
$klmnGaps.forEach(el => {
|
||||
el.classList.remove('bd-is-selected');
|
||||
});
|
||||
}
|
||||
|
||||
function setColumns(n) {
|
||||
$klmnColumns.forEach(el => {
|
||||
el.className = `columns is-variable bd-klmn-columns is-${n}`;
|
||||
});
|
||||
}
|
||||
|
||||
function setValue(n) {
|
||||
const rem = `${n * 0.25}rem`;
|
||||
$klmnValue.innerHTML = rem;
|
||||
}
|
||||
|
||||
function selectGap(n) {
|
||||
resetGaps();
|
||||
$klmnGaps[n].classList.add('bd-is-selected');
|
||||
setColumns(n);
|
||||
setValue(n);
|
||||
}
|
||||
|
||||
selectGap(3);
|
||||
|
||||
});
|
||||
@ -51,6 +51,8 @@
|
||||
|
||||
.highlight-full,
|
||||
#navbarJsExample
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
.highlight pre
|
||||
max-height: none
|
||||
|
||||
|
||||
32
docs/_sass/klmn.sass
Normal file
32
docs/_sass/klmn.sass
Normal file
@ -0,0 +1,32 @@
|
||||
.bd-klmn
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.bd-klmn-gaps
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
margin-bottom: 1.25rem
|
||||
|
||||
.bd-klmn-label
|
||||
margin: 0.25rem auto 0.25rem 0
|
||||
|
||||
.bd-klmn-gap
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
color: $red
|
||||
font-family: $family-monospace
|
||||
font-size: 0.75rem
|
||||
margin: 0.25rem 0 0.25rem 0.5rem
|
||||
padding: 0.375em 0.75em
|
||||
text-align: center
|
||||
vertical-align: middle !important
|
||||
white-space: nowrap
|
||||
&.bd-is-selected
|
||||
background-color: $green
|
||||
color: $white
|
||||
|
||||
.bd-klmn-columns:last-child
|
||||
.bd-notification
|
||||
font-size: 0.75rem
|
||||
white-space: nowrap
|
||||
@ -20,6 +20,7 @@ $twitter: #55acee
|
||||
@import "./_sass/expo"
|
||||
@import "./_sass/love"
|
||||
@import "./_sass/bootstrap"
|
||||
@import "./_sass/klmn"
|
||||
|
||||
// .columns
|
||||
// background-color: coral
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
41
docs/lib/klmn.js
Normal file
41
docs/lib/klmn.js
Normal file
@ -0,0 +1,41 @@
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
var $klmnColumns = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-columns'), 0);
|
||||
var $klmnGaps = Array.prototype.slice.call(document.querySelectorAll('.bd-klmn-gap'), 0);
|
||||
var $klmnValue = document.getElementById('klmnValue');
|
||||
|
||||
$klmnGaps.forEach(function (el) {
|
||||
el.addEventListener('mouseenter', function () {
|
||||
var index = el.dataset.value;
|
||||
selectGap(index);
|
||||
});
|
||||
});
|
||||
|
||||
function resetGaps() {
|
||||
$klmnGaps.forEach(function (el) {
|
||||
el.classList.remove('bd-is-selected');
|
||||
});
|
||||
}
|
||||
|
||||
function setColumns(n) {
|
||||
$klmnColumns.forEach(function (el) {
|
||||
el.className = 'columns is-variable bd-klmn-columns is-' + n;
|
||||
});
|
||||
}
|
||||
|
||||
function setValue(n) {
|
||||
var rem = n * 0.25 + 'rem';
|
||||
$klmnValue.innerHTML = rem;
|
||||
}
|
||||
|
||||
function selectGap(n) {
|
||||
resetGaps();
|
||||
$klmnGaps[n].classList.add('bd-is-selected');
|
||||
setColumns(n);
|
||||
setValue(n);
|
||||
}
|
||||
|
||||
selectGap(3);
|
||||
});
|
||||
@ -287,15 +287,13 @@ $column-gap: 0.75rem !default
|
||||
margin-bottom: (-$column-gap)
|
||||
&:not(:last-child)
|
||||
margin-bottom: calc(1.5rem - #{$column-gap})
|
||||
// .columns
|
||||
// margin-top: 1.5rem
|
||||
// Modifiers
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
&.is-gapless
|
||||
margin-bottom: 0
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
margin-top: 0
|
||||
& > .column
|
||||
margin: 0
|
||||
padding: 0 !important
|
||||
@ -325,6 +323,6 @@ $column-gap: 0.75rem !default
|
||||
.column
|
||||
padding-left: var(--columnGap)
|
||||
padding-right: var(--columnGap)
|
||||
@for $i from 0 through 12
|
||||
@for $i from 0 through 8
|
||||
&.is-#{$i}
|
||||
--columnGap: $i * 0.25rem
|
||||
|
||||
Loading…
Reference in New Issue
Block a user