mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add new container docs
This commit is contained in:
Jeremy Thomas
parent
a84024765b
commit
85f61f2dfd
@ -341,6 +341,7 @@ section {
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
@ -1862,7 +1863,7 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
.container.is-fluid {
|
||||
max-width: none;
|
||||
max-width: none !important;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
width: 100%;
|
||||
@ -1875,25 +1876,25 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1215px) {
|
||||
.container.is-widescreen {
|
||||
.container.is-widescreen:not(.is-max-desktop) {
|
||||
max-width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1407px) {
|
||||
.container.is-fullhd {
|
||||
.container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: 1344px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1216px) {
|
||||
.container {
|
||||
.container:not(.is-max-desktop) {
|
||||
max-width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1408px) {
|
||||
.container {
|
||||
.container:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: 1344px;
|
||||
}
|
||||
}
|
||||
@ -4599,12 +4600,12 @@ fieldset[disabled] .select select:hover {
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
|
||||
color: #4a4a4a;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -5218,7 +5219,7 @@ button.dropdown-item.is-active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
@media screen and (min-width: 769px) {
|
||||
.modal-content,
|
||||
.modal-card {
|
||||
margin: 0 auto;
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
css/bulma-rtl.min.css
vendored
2
css/bulma-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
17
css/bulma.css
vendored
17
css/bulma.css
vendored
@ -341,6 +341,7 @@ section {
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
@ -1862,7 +1863,7 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
.container.is-fluid {
|
||||
max-width: none;
|
||||
max-width: none !important;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
width: 100%;
|
||||
@ -1875,25 +1876,25 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1215px) {
|
||||
.container.is-widescreen {
|
||||
.container.is-widescreen:not(.is-max-desktop) {
|
||||
max-width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1407px) {
|
||||
.container.is-fullhd {
|
||||
.container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: 1344px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1216px) {
|
||||
.container {
|
||||
.container:not(.is-max-desktop) {
|
||||
max-width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1408px) {
|
||||
.container {
|
||||
.container:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: 1344px;
|
||||
}
|
||||
}
|
||||
@ -4599,12 +4600,12 @@ fieldset[disabled] .select select:hover {
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
|
||||
color: #4a4a4a;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@ -5218,7 +5219,7 @@ button.dropdown-item.is-active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
@media screen and (min-width: 769px) {
|
||||
.modal-content,
|
||||
.modal-card {
|
||||
margin: 0 auto;
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
css/bulma.min.css
vendored
2
css/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
@ -21,7 +21,12 @@
|
||||
},
|
||||
"$card-radius": {
|
||||
"name": "$card-radius",
|
||||
"value": "0",
|
||||
"value": "0.25rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$card-overflow": {
|
||||
"name": "$card-overflow",
|
||||
"value": "hidden",
|
||||
"type": "string"
|
||||
},
|
||||
"$card-header-background-color": {
|
||||
@ -91,6 +96,7 @@
|
||||
"$card-background-color",
|
||||
"$card-shadow",
|
||||
"$card-radius",
|
||||
"$card-overflow",
|
||||
"$card-header-background-color",
|
||||
"$card-header-color",
|
||||
"$card-header-padding",
|
||||
|
||||
@ -4,10 +4,18 @@
|
||||
"name": "$container-offset",
|
||||
"value": "(2 * $gap)",
|
||||
"type": "compound"
|
||||
},
|
||||
"$container-max-width": {
|
||||
"name": "$container-max-width",
|
||||
"value": "$fullhd",
|
||||
"type": "variable",
|
||||
"computed_type": "computed",
|
||||
"computed_value": "1344px + (2 * $gap)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$container-offset"
|
||||
"$container-offset",
|
||||
"$container-max-width"
|
||||
],
|
||||
"file_path": "elements/container.sass"
|
||||
}
|
||||
@ -1864,7 +1864,7 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
.container.is-fluid {
|
||||
max-width: none;
|
||||
max-width: none !important;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
width: 100%;
|
||||
@ -1877,25 +1877,25 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1215px) {
|
||||
.container.is-widescreen {
|
||||
.container.is-widescreen:not(.is-max-desktop) {
|
||||
max-width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1407px) {
|
||||
.container.is-fullhd {
|
||||
.container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: 1344px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1216px) {
|
||||
.container {
|
||||
.container:not(.is-max-desktop) {
|
||||
max-width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1408px) {
|
||||
.container {
|
||||
.container:not(.is-max-desktop):not(.is-max-widescreen) {
|
||||
max-width: 1344px;
|
||||
}
|
||||
}
|
||||
|
||||
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -9,19 +9,23 @@ breadcrumb:
|
||||
- documentation
|
||||
- layout
|
||||
- layout-container
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture container_example %}
|
||||
<div class="container">
|
||||
<div class="notification">
|
||||
This container is <strong>centered</strong> on desktop.
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>centered</strong> on desktop and larger viewports.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_fluid_example %}
|
||||
<div class="container is-fluid">
|
||||
<div class="notification">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
|
||||
viewport size.
|
||||
</div>
|
||||
@ -30,7 +34,7 @@ breadcrumb:
|
||||
|
||||
{% capture container_widescreen_example %}
|
||||
<div class="container is-widescreen">
|
||||
<div class="notification">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
@ -38,22 +42,137 @@ breadcrumb:
|
||||
|
||||
{% capture container_fullhd_example %}
|
||||
<div class="container is-fullhd">
|
||||
<div class="notification">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_max_desktop_example %}
|
||||
<div class="container is-max-desktop">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_max_widescreen_example %}
|
||||
<div class="container is-max-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign bp_tablet = site.data.breakpoints.tablet %}
|
||||
{% assign bp_desktop = site.data.breakpoints.desktop %}
|
||||
{% assign bp_widescreen = site.data.breakpoints.widescreen %}
|
||||
{% assign bp_fullhd = site.data.breakpoints.fullhd %}
|
||||
{% assign container_offset = 64 %}
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bd-is-empty">
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
{% if breakpoint.id == 'tablet' %}
|
||||
<th>
|
||||
Below
|
||||
<br>
|
||||
<code>{{ bp_tablet.to }}px</code>
|
||||
</th>
|
||||
{% elsif breakpoint.id != 'mobile' %}
|
||||
<th>
|
||||
{{ breakpoint.name }}
|
||||
<br>
|
||||
{% if breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
<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>
|
||||
<p>
|
||||
The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger viewports. It 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>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Overview" %}
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{{ thead }}
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th colspan="4" class="has-text-centered"><code>max-width</code></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>.container</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-widescreen</code></td>
|
||||
<td colspan="2" class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-fullhd</code></td>
|
||||
<td colspan="3" class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
{% include elements/new-tag.html version="0.9.1" %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-max-desktop</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td colspan="3"><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-max-widescreen</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
<td colspan="2"><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Default behavior" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The containers <strong>width</strong> for each <strong>breakpoint</strong> is the result
|
||||
By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will increase its <code>max-width</code> after reaching the <code>$widescreen</code> and <code>$fullhd</code> breakpoints.
|
||||
</p>
|
||||
<p>
|
||||
The container's <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>
|
||||
@ -68,7 +187,7 @@ breadcrumb:
|
||||
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{container_example}}
|
||||
</div>
|
||||
|
||||
@ -76,24 +195,8 @@ breadcrumb:
|
||||
|
||||
{% highlight html %}{{ container_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Fluid container" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_fluid_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Breakpoint containers" %}
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Widescreen or FullHD only" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@ -103,7 +206,7 @@ breadcrumb:
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{container_widescreen_example}}
|
||||
</div>
|
||||
|
||||
@ -113,10 +216,81 @@ breadcrumb:
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{ container_fullhd_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_fullhd_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Desktop and Widescreen maximum widths" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.9.1" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2 modifiers:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.container.is-max-desktop</code> will behave like a desktop container
|
||||
</li>
|
||||
<li>
|
||||
<code>.container.is-max-widescreen</code> will behave like a widescreen container
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{ container_max_desktop_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_max_desktop_example }}{% endhighlight %}
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{ container_max_widescreen_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_max_widescreen_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Absolute maximum width" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of the <code>$container-max-width</code> Sass variable.
|
||||
</p>
|
||||
<p>
|
||||
By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>, <code>$desktop</code>, or any value in <strong>pixels</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Fluid container" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
{{container_fluid_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/variables.html type='element' data=site.data.variables.elements.container %}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
$container-offset: (2 * $gap) !default
|
||||
$container-max-width: $fullhd !default
|
||||
|
||||
.container
|
||||
flex-grow: 1
|
||||
@ -6,19 +7,21 @@ $container-offset: (2 * $gap) !default
|
||||
position: relative
|
||||
width: auto
|
||||
&.is-fluid
|
||||
max-width: none
|
||||
max-width: none !important
|
||||
padding-left: $gap
|
||||
padding-right: $gap
|
||||
width: 100%
|
||||
+desktop
|
||||
max-width: $desktop - $container-offset
|
||||
+until-widescreen
|
||||
&.is-widescreen
|
||||
max-width: $widescreen - $container-offset
|
||||
&.is-widescreen:not(.is-max-desktop)
|
||||
max-width: min($widescreen, $container-max-width) - $container-offset
|
||||
+until-fullhd
|
||||
&.is-fullhd
|
||||
max-width: $fullhd - $container-offset
|
||||
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
|
||||
max-width: min($fullhd, $container-max-width) - $container-offset
|
||||
+widescreen
|
||||
max-width: $widescreen - $container-offset
|
||||
&:not(.is-max-desktop)
|
||||
max-width: min($widescreen, $container-max-width) - $container-offset
|
||||
+fullhd
|
||||
max-width: $fullhd - $container-offset
|
||||
&:not(.is-max-desktop):not(.is-max-widescreen)
|
||||
max-width: min($fullhd, $container-max-width) - $container-offset
|
||||
|
||||
Loading…
Reference in New Issue
Block a user