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

Add klmn

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-14 23:52:28 +01:00
parent 2aba5a3f84
commit 3985fff747
13 changed files with 2386 additions and 786 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>