Fix #1759

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### New features
 
+* New variables `$widescreen-enabled` and `$fullhd-enabled`: you can set them to `false` to disable each breakpoint
 * New variables `$control-border-width` and `$button-border-width`
 * 🎉 #1624 Add some common photography aspect ratios and portrait ratios
 * 🎉 #1747 New `$custom-colors` and `$custom-shades` variable for adding your own colors and shades to Bulma's `$colors` and `$shades` maps respectively

docs/_data/variables/utilities/initial-variables.json

@@ -196,11 +196,21 @@
       "name": "$widescreen",
       "value": "1152px + (2 * $gap)"
     },
+    "widescreen-enabled": {
+      "id": "widescreen-enabled",
+      "name": "$widescreen-enabled",
+      "value": "true"
+    },
     "fullhd": {
       "id": "fullhd",
       "name": "$fullhd",
       "value": "1344px + (2 * $gap)"
     },
+    "fullhd-enabled": {
+      "id": "fullhd-enabled",
+      "name": "$fullhd-enabled",
+      "value": "true"
+    },
     "easing": {
       "id": "easing",
       "name": "$easing",

docs/documentation/overview/responsiveness.html

@@ -11,6 +11,14 @@ variables_keys:
 - fullhd
 ---
 
+{% capture scss_code %}
+// Disable the widescreen breakpoint
+$widescreen-enabled: false
+
+// Disable the fullhd breakpoint
+$fullhd-enabled: false
+{% endcapture %}
+
 {% include subnav/subnav-overview.html %}
 
 <section class="section">
@@ -42,7 +50,7 @@ variables_keys:
       <ul>
         {% for breakpoint_hash in site.data.breakpoints %}
           {% assign breakpoint = breakpoint_hash[1] %}
-          <li>{% if breakpoint.id == 'fullhd' %}<span class="tag is-success">New!</span> {% endif %}<code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
+          <li><code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
         {% endfor %}
       </ul>
 
@@ -58,7 +66,6 @@ variables_keys:
               </li>
             {% when 'fullhd' %}
               <li>
-                <span class="tag is-success">New!</span>
                 <code>={{ breakpoint.id }}</code><br>
                 from <code>{{ breakpoint.from }}px</code>
               </li>
@@ -182,9 +189,39 @@ variables_keys:
             <p class="notification">-</p>
           </td>
         </tr>
+        <tr>
+          <td colspan="3">
+            <p class="notification is-success">until-widescreen</p>
+          </td>
+          <td colspan="2">
+            <p class="notification">-</p>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="4">
+            <p class="notification is-success">until-fullhd</p>
+          </td>
+          <td colspan="1">
+            <p class="notification">-</p>
+          </td>
+        </tr>
       </tbody>
     </table>
 
+    {% include anchor.html name="Disabling breakpoints" %}
+
+    {% include elements/new-tag.html version="0.6.3" %}
+
+    <div class="content">
+      <p>
+        By default, the <code>$widecreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You can disable them by setting the corresponding Sass boolean to <code>false</code>:
+      </p>
+    </div>
+
+    <div class="highlight-full">
+      {% highlight sass %}{{ scss_code }}{% endhighlight %}
+    </div>
+
     {% include anchor.html name="Variables" %}
 
     <div class="content">

sass/elements/container.sass

@@ -1,7 +1,7 @@
 .container
   margin: 0 auto
   position: relative
-  +from($desktop)
+  +desktop
     max-width: $desktop - (2 * $gap)
     width: $desktop - (2 * $gap)
     &.is-fluid
@@ -9,17 +9,17 @@
       margin-right: $gap
       max-width: none
       width: auto
-  +until($widescreen)
+  +until-widescreen
     &.is-widescreen
       max-width: $widescreen - (2 * $gap)
       width: auto
-  +until($fullhd)
+  +until-fullhd
     &.is-fullhd
       max-width: $fullhd - (2 * $gap)
       width: auto
-  +from($widescreen)
+  +widescreen
     max-width: $widescreen - (2 * $gap)
     width: $widescreen - (2 * $gap)
-  +from($fullhd)
+  +fullhd
     max-width: $fullhd - (2 * $gap)
-    width: $fullhd - (2 * $gap)
+    width: $fullhd - (2 * $gap)

sass/utilities/initial-variables.sass

@@ -53,8 +53,10 @@ $tablet: 769px !default
 $desktop: 960px + (2 * $gap) !default
 // 1152px container + 4rem
 $widescreen: 1152px + (2 * $gap) !default
+$widescreen-enabled: true !default
 // 1344px container + 4rem
 $fullhd: 1344px + (2 * $gap) !default
+$fullhd-enabled: true !default
 
 // Miscellaneous
 

sass/utilities/mixins.sass

@@ -99,20 +99,34 @@
     @content
 
 =desktop-only
-  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+  @if $widescreen-enabled
-    @content
+    @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+      @content
+
+=until-widescreen
+  @if $widescreen-enabled
+    @media screen and (max-width: $widescreen - 1px)
+      @content
 
 =widescreen
-  @media screen and (min-width: $widescreen)
+  @if $widescreen-enabled
-    @content
+    @media screen and (min-width: $widescreen)
+      @content
 
 =widescreen-only
-  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
+  @if $widescreen-enabled and $fullhd-enabled
-    @content
+    @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
+      @content
+
+=until-fullhd
+  @if $fullhd-enabled
+    @media screen and (max-width: $fullhd - 1px)
+      @content
 
 =fullhd
-  @media screen and (min-width: $fullhd)
+  @if $fullhd-enabled
-    @content
+    @media screen and (min-width: $fullhd)
+      @content
 
 // Placeholders