Add new container docs

css/bulma-rtl.css

@@ -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;

css/bulma.css

@@ -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;

docs/_data/variables/components/card.json

@@ -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",

docs/_data/variables/elements/container.json

@@ -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"
 }

docs/css/bulma-docs.css

@@ -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;
   }
 }

docs/documentation/layout/container.html

@@ -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">
+  <div class="notification is-primary">
-    This container is <strong>centered</strong> on desktop.
+    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" %}
+<!--  -->
-
+{% include elements/anchor.html name="Widescreen or FullHD only" %}
-<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" %}
 
 <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 %}

sass/elements/container.sass

@@ -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
+    &.is-widescreen:not(.is-max-desktop)
-      max-width: $widescreen - $container-offset
+      max-width: min($widescreen, $container-max-width) - $container-offset
   +until-fullhd
-    &.is-fullhd
+    &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
-      max-width: $fullhd - $container-offset
+      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