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

Fix container docs

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-01 21:05:10 +01:00
parent 94fcaa55f6
commit e98c98c6fd
6 changed files with 85 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,17 +51,19 @@ doc-subtab: container
<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>.nav</code></li>
<li><code>.navbar</code></li>
<li><code>.hero</code></li>
<li><code>.section</code></li>
<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>.
</p>
<p>This is how the container will behave:</p>
<ul>
<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>
<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>
</ul>
<p>
The <code>$gap</code> variable has a default value of <code>24px</code> but can be modified.