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

Container broken layout

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 16:15:58 +01:00
parent f0074aa339
commit 25d0ea1136
18 changed files with 1262 additions and 1244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
---
title: Container
subtitle: "A simple <strong>container</strong> to center your content horizontally"
layout: documentation
hide_carbon: true
doc-tab: layout
doc-subtab: container
---
@@ -38,82 +40,77 @@ doc-subtab: container
</div>
{% endcapture %}
{% include subnav/subnav-layout.html %}
<div class="content">
<p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
<ul>
<li><code>.navbar</code></li>
<li><code>.hero</code></li>
<li><code>.section</code></li>
<li><code>.footer</code></li>
</ul>
<p>
The containers <strong>width</strong> for each <strong>breakpoint</strong> is the result
of: <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code>
32px</code> but can be modified.
</p>
<p>This is how the container will behave:</p>
<ul>
<li>on <code>$desktop</code> it will have a maximum width of <strong>960px</strong>.</li>
<li>on <code>$widescreen</code> it will have a maximum width of <strong>1152px</strong>.</li>
<li>on <code>$fullhd</code> it will have a maximum width of <strong>1344px</strong>.</li>
</ul>
<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>
<section class="section">
<div class="container">
<h1 class="title">Container</h1>
<h2 class="subtitle">
A simple <strong>container</strong> to center your content horizontally
</h2>
<hr>
<div class="content">
<p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
<ul>
<li><code>.navbar</code></li>
<li><code>.hero</code></li>
<li><code>.section</code></li>
<li><code>.footer</code></li>
</ul>
<p>
The containers <strong>width</strong> for each <strong>breakpoint</strong> is the result
of: <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code>
32px</code> but can be modified.
</p>
<p>This is how the container will behave:</p>
<ul>
<li>on <code>$desktop</code> it will have a maximum width of <strong>960px</strong>.</li>
<li>on <code>$widescreen</code> it will have a maximum width of <strong>1152px</strong>.</li>
<li>on <code>$fullhd</code> it will have a maximum width of <strong>1344px</strong>.</li>
</ul>
<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>
{% include layout/main-close.html show_carbon=true %}
<div class="bd-example is-fullwidth">
{{container_example}}
</div>
{% highlight html %}{{container_example}}{% endhighlight %}
{% include layout/main-open.html %}
<section class="section">
<div class="container">
<h3 class="title is-4">Fluid container</h3>
<div class="content">
<p>If you don't want to have a maximum width but want to keep the 32px margin on the left and
right sides, add the <code>is-fluid</code> modifier:</p>
</div>
{% highlight html %}{{ container_example }}{% endhighlight %}
<h3 class="title is-4">Fluid container</h3>
<div class="content">
<p>If you don't want to have a maximum width but want to keep the 32px margin on the left and
right sides, add the <code>is-fluid</code> modifier:</p>
</div>
</section>
{% include layout/main-close.html %}
<div class="bd-example is-fullwidth">
{{container_fluid_example}}
</div>
{% highlight html %}{{container_fluid_example}}{% endhighlight %}
{% include layout/main-open.html %}
<section class="section">
<div class="container">
<h3 class="title is-4">Breakpoint containers</h3>
<div class="content">
<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>
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
<h3 class="title is-4">Breakpoint containers</h3>
<div class="content">
<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>
</section>
{% include layout/main-close.html %}
<div class="bd-example is-fullwidth">
{{container_widescreen_example}}
</div>
{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
{% include layout/main-open.html %}
{% highlight html %}{{ container_widescreen_example }}{% endhighlight %}
{% include layout/main-close.html %}
<div class="bd-example is-fullwidth">
{{container_fullhd_example}}
{{ container_fullhd_example }}
</div>
{% highlight html %}{{container_fullhd_example}}{% endhighlight %}
{% include layout/main-open.html %}
{% highlight html %}{{ container_fullhd_example }}{% endhighlight %}