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

Add breakpoint based column gaps documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2018-05-30 14:12:03 +02:00
parent 4caa77dc0f
commit 56d58280ca
7 changed files with 575 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
docs/documentation/columns/gap.html
View File

@@ -84,6 +84,29 @@ breadcrumb:
</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>
{% endcapture %}
{% include elements/anchor.html name="Default gap" %}
<div class="content">
@@ -208,3 +231,53 @@ breadcrumb:
</p>
</div>
</div>
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
{% if vernum >= 72 %}
{% include elements/anchor.html name="Breakpoint based column gaps" %}
{% include elements/new-tag.html version="0.7.2" %}
<div class="content">
<p>
You can define a column gap for each viewport size:
</p>
</div>
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>
<div class="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 %}

15
docs/documentation/columns/sizes.html
View File

@@ -588,13 +588,22 @@ breadcrumb:
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
<ul>
<li>
<code>is-narrow-mobile</code>
<code>.is-narrow-mobile</code>
</li>
<li>
<code>is-narrow-tablet</code>
<code>.is-narrow-tablet</code>
</li>
<li>
<code>is-narrow-desktop</code>
<code>.is-narrow-touch</code>
</li>
<li>
<code>.is-narrow-desktop</code>
</li>
<li>
<code>.is-narrow-widescreen</code>
</li>
<li>
<code>.is-narrow-fullhd</code>
</li>
</ul>
</div>