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

Add breakpoint containers

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-21 11:22:08 +02:00
parent 39a09d204a
commit 06a392072b
14 changed files with 234 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/documentation/components/dropdown.html
View File

@@ -66,10 +66,26 @@ doc-subtab: dropdown
</div>
{% endcapture %}
{% include subnav-components.html %}
<section class="section">
<div class="container">
<h1 class="title">Dropdown</h1>
<h2 class="subtitle">An interactive <strong>dropdown menu</strong> for discoverable content</h2>
<div class="columns" style="margin-bottom: -0.75rem !important;">
<div class="column">
<h1 class="title">Dropdown</h1>
<h2 class="subtitle">
An interactive <strong>dropdown menu</strong> for discoverable content
</h2>
</div>
<div class="column is-narrow">
<p class="content">
<span class="tag is-success">New!</span>
<span class="tag is-info">0.4.4</span>
</p>
</div>
</div>
<hr>

2
docs/documentation/form/select.html
View File

@@ -289,7 +289,7 @@ doc-subtab: select
</div>
</div>
{% if site.vernum >= 42 %}
{% if site.vernum >= 44 %}
<hr>
<h3 class="title">Multiple select</h3>

109
docs/documentation/layout/container.html
View File

@@ -4,6 +4,38 @@ doc-tab: layout
doc-subtab: container
---
{% capture container_example %}
<div class="container">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
</div>
{% endcapture %}
{% capture container_fluid_example %}
<div class="container is-fluid">
<div class="notification">
This container is <strong>fluid</strong>: it will have a 24px gap on either side, on any viewport size.
</div>
</div>
{% endcapture %}
{% capture container_widescreen_example %}
<div class="container is-widescreen">
<div class="notification">
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
</div>
</div>
{% endcapture %}
{% capture container_fullhd_example %}
<div class="container is-fullhd">
<div class="notification">
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
</div>
</div>
{% endcapture %}
{% include subnav-layout.html %}
<section class="section">
@@ -25,52 +57,61 @@ doc-subtab: container
</ul>
<p>This is how the container will behave:</p>
<ul>
<li>on <strong>mobile</strong> and <strong>tablet</strong>, it will have a margin of <strong>20px</strong> on both the left and right sides.</li>
<li>on <strong>desktop</strong> (>= 1000px), it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
<li>on <strong>widescreen</strong> (>= 1192px), it will have a maximum width of <strong>1152px</strong>.</li>
<li>on <strong>fullhd</strong> (>= 1384px), it will have a maximum width of <strong>1344px</strong>.</li>
<li>on <strong>mobile</strong> and <strong>tablet</strong> {% include bp/touch.html %}, it will have a margin of <strong>24px</strong> on each side.</li>
<li>on <strong>desktop</strong> {% include bp/desktop.html %}, it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
<li>on <strong>widescreen</strong> {% include bp/widescreen.html %}, it will have a maximum width of <strong>1152px</strong>.</li>
<li>on <strong>fullhd</strong> {% include bp/fullhd.html %}, it will have a maximum width of <strong>1344px</strong>.</li>
</ul>
<p>
The <code>$gap</code> variable has a default value of <code>24px</code> but can be modified.
</p>
<p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
</div>
</div>
</section>
<div class="example is-fullwidth">
<div class="container">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
</div>
</div>
<div class="example is-fullwidth">
{{container_example}}
</div>
{% highlight html %}{{container_example}}{% endhighlight %}
{% highlight html %}
<div class="container">
<div class="notification">
This container is <strong>centered</strong> on desktop.
<hr>
<h3 class="title">Fluid container</h3>
<div class="content">
<p>If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
</div>
</div>
{% endhighlight %}
<div class="container">
<hr>
<h3 class="title">Fluid container</h3>
<div class="content">
<p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
</div>
</div>
<div class="example is-fullwidth">
{{container_fluid_example}}
</div>
<div class="example is-fullwidth">
<div class="container is-fluid">
<div class="notification">
This container is <strong>fluid</strong>: it will have a 20px gap on either side.
</div>
</div>
</div>
{% highlight html %}{{container_fluid_example}}{% endhighlight %}
{% highlight html %}
<div class="container is-fluid">
<div class="notification">
This container is <strong>fluid</strong>: it will have a 20px gap on either side, on any viewport size.
<div class="container">
<hr>
<h3 class="title">Breakpoint containers</h3>
<div class="content">
<p>
<span class="tag is-success">New!</span>
<span class="tag is-info">0.4.4</span>
</p>
<p>
With the two modifiers <code>.is-widescreen</code> and <code>.is-fullhd</code>, you can have a <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
</p>
</div>
</div>
{% endhighlight %}
<div class="example is-fullwidth">
{{container_widescreen_example}}
</div>
{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
<div class="example is-fullwidth">
{{container_fullhd_example}}
</div>
{% highlight html %}{{container_fullhd_example}}{% endhighlight %}

14
docs/documentation/overview/variables.html
View File

@@ -254,18 +254,26 @@ doc-subtab: variables
<td><code>16px</code></td>
</tr>
<tr><th colspan="2">Breakpoints</th></tr>
<tr><th colspan="5">Breakpoints</th></tr>
<tr>
<td><code>$gap</code></td>
<td>24px</td>
</tr>
<tr>
<td><code>$tablet</code></td>
<td>769px</td>
</tr>
<tr>
<td><code>$desktop</code></td>
<td>1000px (960px + 40px container)</td>
<td>1008px (960px + 2 * <code>$gap</code>)</td>
</tr>
<tr>
<td><code>$widescreen</code></td>
<td>1192px (1152px+ 40px container)</td>
<td>1200px (1152px+ 2 * <code>$gap</code>)</td>
</tr>
<tr>
<td><code>$fullhd</code></td>
<td>1392px (1344px+ 2 * <code>$gap</code>)</td>
</tr>
<tr><th colspan="2">Miscellaneous</th></tr>