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
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/">
|
<a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
|
||||||
Nesting
|
Nesting
|
||||||
</a>
|
</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/">
|
<a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
|
||||||
Gap
|
Gap
|
||||||
</a>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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,
|
.highlight-full,
|
||||||
#navbarJsExample
|
#navbarJsExample
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 1.5rem
|
||||||
.highlight pre
|
.highlight pre
|
||||||
max-height: none
|
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/expo"
|
||||||
@import "./_sass/love"
|
@import "./_sass/love"
|
||||||
@import "./_sass/bootstrap"
|
@import "./_sass/bootstrap"
|
||||||
|
@import "./_sass/klmn"
|
||||||
|
|
||||||
// .columns
|
// .columns
|
||||||
// background-color: coral
|
// 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
|
doc-subtab: gap
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture columns_gap %}
|
{% capture columns_default_gap %}
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
First column
|
<p class="bd-notification is-info">
|
||||||
|
Default gap
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
Second column
|
<p class="bd-notification is-success">
|
||||||
|
Default gap
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
Third column
|
<p class="bd-notification is-warning">
|
||||||
|
Default gap
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
@@ -27,17 +81,130 @@ doc-subtab: gap
|
|||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="title">Columns gap</h1>
|
<h1 class="title">Columns gap</h1>
|
||||||
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
|
<h2 class="subtitle">
|
||||||
<hr>
|
Customize the <strong>gap</strong> between the columns
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{% include anchor.html name="Default gap" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
|
<p>
|
||||||
<ol>
|
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>.
|
||||||
<li>Add a <code>columns</code> container</li>
|
<br>
|
||||||
<li>Add as many <code>column</code> elements as you want</li>
|
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.
|
||||||
</ol>
|
</p>
|
||||||
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</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>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{ columns_gap }}{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -34,44 +34,6 @@ doc-subtab: options
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% 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 %}
|
{% capture columns_mobile_centered %}
|
||||||
<div class="columns is-mobile is-centered">
|
<div class="columns is-mobile is-centered">
|
||||||
<div class="column is-half is-narrow">
|
<div class="column is-half is-narrow">
|
||||||
@@ -118,23 +80,6 @@ doc-subtab: options
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% 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 %}
|
{% include subnav-columns.html %}
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
@@ -182,67 +127,6 @@ doc-subtab: options
|
|||||||
|
|
||||||
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
{% 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" %}
|
{% include anchor.html name="Centering columns" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
@@ -302,43 +186,5 @@ doc-subtab: options
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
|
{% 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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -50,6 +50,23 @@ doc-subtab: sizes
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% 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 %}
|
{% include subnav-columns.html %}
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
@@ -429,5 +446,43 @@ doc-subtab: sizes
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
{% 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>
|
</div>
|
||||||
</section>
|
</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)
|
margin-bottom: (-$column-gap)
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: calc(1.5rem - #{$column-gap})
|
margin-bottom: calc(1.5rem - #{$column-gap})
|
||||||
// .columns
|
|
||||||
// margin-top: 1.5rem
|
|
||||||
// Modifiers
|
// Modifiers
|
||||||
&.is-centered
|
&.is-centered
|
||||||
justify-content: center
|
justify-content: center
|
||||||
&.is-gapless
|
&.is-gapless
|
||||||
margin-bottom: 0
|
|
||||||
margin-left: 0
|
margin-left: 0
|
||||||
margin-right: 0
|
margin-right: 0
|
||||||
|
margin-top: 0
|
||||||
& > .column
|
& > .column
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0 !important
|
padding: 0 !important
|
||||||
@@ -325,6 +323,6 @@ $column-gap: 0.75rem !default
|
|||||||
.column
|
.column
|
||||||
padding-left: var(--columnGap)
|
padding-left: var(--columnGap)
|
||||||
padding-right: var(--columnGap)
|
padding-right: var(--columnGap)
|
||||||
@for $i from 0 through 12
|
@for $i from 0 through 8
|
||||||
&.is-#{$i}
|
&.is-#{$i}
|
||||||
--columnGap: $i * 0.25rem
|
--columnGap: $i * 0.25rem
|
||||||
|
|||||||
Reference in New Issue
Block a user