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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_layouts/documentation.html
View File

@ -39,6 +39,9 @@ route: documentation
<li {% if page.doc-tab == 'grid' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/grid/columns">Grid</a>
</li>
<li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/layout/container/">Layout</a>
</li>
<li {% if page.doc-tab == 'form' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/form/general">Form</a>
</li>
@ -52,9 +55,6 @@ route: documentation
<a href="{{ site.url }}/documentation/components/card/">Components</a>
{% endif %}
</li>
<li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
<a href="{{ site.url }}/documentation/layout/container/">Layout</a>
</li>
</ul>
</div>
</div>

94
docs/css/bulma-docs.css
View File

File diff suppressed because one or more lines are too long

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.

1
sass/elements/_all.sass
View File

@ -2,6 +2,7 @@
@import "box.sass"
@import "button.sass"
@import "container.sass"
@import "content.sass"
@import "form.sass"
@import "icon.sass"

27
sass/elements/container.sass Normal file
View File

@ -0,0 +1,27 @@
$container-offset: 60px !default
.container
margin: 0 auto
position: relative
+from($desktop + $container-offset)
max-width: $desktop - (2 * $gap)
width: $desktop - (2 * $gap)
&.is-fluid
margin-left: $gap
margin-right: $gap
max-width: none
width: auto
+until($widescreen + $container-offset)
&.is-widescreen
max-width: $widescreen - (2 * $gap)
width: auto
+until($fullhd + $container-offset)
&.is-fullhd
max-width: $fullhd - (2 * $gap)
width: auto
+from($widescreen + $container-offset)
max-width: $widescreen - (2 * $gap)
width: $widescreen - (2 * $gap)
+from($fullhd + $container-offset)
max-width: $fullhd - (2 * $gap)
width: $fullhd - (2 * $gap)

28
sass/elements/other.sass
View File

@ -1,34 +1,6 @@
.block
+block
$container-offset: 60px !default
.container
margin: 0 auto
position: relative
+from($desktop + $container-offset)
max-width: $desktop - (2 * $gap)
width: $desktop - (2 * $gap)
&.is-fluid
margin-left: $gap
margin-right: $gap
max-width: none
width: auto
+until($widescreen + $container-offset)
&.is-widescreen
max-width: $widescreen - (2 * $gap)
width: auto
+until($fullhd + $container-offset)
&.is-fullhd
max-width: $fullhd - (2 * $gap)
width: auto
+from($widescreen + $container-offset)
max-width: $widescreen - (2 * $gap)
width: $widescreen - (2 * $gap)
+from($fullhd + $container-offset)
max-width: $fullhd - (2 * $gap)
width: $fullhd - (2 * $gap)
.delete
+delete