library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remove obsolete $container-offset variable from documentation (#1504)

Browse Source 
* Remove obsolete $container-offset variable from documentation

* Fix .container docs
This commit is contained in:
Gabriel Terwesten 2017-12-07 00:48:16 +01:00 committed by Jeremy Thomas
parent abead00bfe
commit 85dbf10363
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,8 @@ doc-subtab: container
{% 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.
This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
viewport size.
</div>
</div>
{% endcapture %}
@ -57,17 +58,16 @@ doc-subtab: container
<li><code>.footer</code></li>
</ul>
<p>
The container <strong>breakpoints</strong> have an <strong>offset</strong> defined by the <code>$container-offset</code> variable. It has a default value of <code>60px</code>.
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> + <code>$container-offset</code> = <code>>= 1068px</code> it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
<li>on <code>$widescreen</code> + <code>$container-offset</code> = <code>>= 1260px</code> it will have a maximum width of <strong>1152px</strong>.</li>
<li>on <code>$fullhd</code> + <code>$container-offset</code> = <code>>= 1452px</code> it will have a maximum width of <strong>1344px</strong>.</li>
<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 <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>
@ -83,7 +83,8 @@ doc-subtab: container
<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 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
<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>
</div>
</section>