Add breakpoint containers

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 0.4.4
 
+### New features
+
+* The breakpoints and `.container` **gap** can be customized with the new `$gap` variable
+* The `.container` has 2 new modifiers: `.is-widescreen` and `.is-fullhd`
+
 ### Issues closed
 
 * Fix #26 `.textarea` element will honors `[rows]` attribute

docs/_includes/bp/desktop.html

@@ -1 +1 @@
-<span class="tag">>= 1000px</span>
+<span class="tag">>= 1008px</span>

docs/_includes/bp/fullhd.html

@@ -0,0 +1 @@
+<span class="tag">>= 1392px</span>

docs/_includes/bp/touch.html

@@ -1 +1 @@
-<span class="tag">< 1000px</span>
+<span class="tag">< 1008px</span>

docs/_includes/bp/widescreen.html

@@ -0,0 +1 @@
+<span class="tag">>= 1200px</span>

docs/_includes/subnav-components.html

@@ -1,5 +1,5 @@
 <nav class="navbar has-shadow">
-  <div class="container">
+  <div class="container is-fullhd">
     <div class="navbar-brand">
       {% if site.vernum >= 43 %}
         <a class="navbar-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
@@ -9,6 +9,11 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'card' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/card/">
         Card
       </a>
+      {% if site.vernum >= 44 %}
+        <a class="navbar-item is-tab {% if page.doc-subtab == 'dropdown' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/dropdown/">
+          Dropdown
+        </a>
+      {% endif %}
       <a class="navbar-item is-tab {% if page.doc-subtab == 'level' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/level/">
         Level
       </a>

docs/css/bulma-docs.css

@@ -235,31 +235,31 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 999px) {
+@media screen and (min-width: 769px) and (max-width: 1007px) {
   .is-block-tablet-only {
     display: block !important;
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-block-touch {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-block-desktop {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1191px) {
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
   .is-block-desktop-only {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-block-widescreen {
     display: block !important;
   }
@@ -281,31 +281,31 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 999px) {
+@media screen and (min-width: 769px) and (max-width: 1007px) {
   .is-flex-tablet-only {
     display: flex !important;
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-flex-touch {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-flex-desktop {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1191px) {
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
   .is-flex-desktop-only {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-flex-widescreen {
     display: flex !important;
   }
@@ -327,31 +327,31 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 999px) {
+@media screen and (min-width: 769px) and (max-width: 1007px) {
   .is-inline-tablet-only {
     display: inline !important;
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-inline-touch {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-inline-desktop {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1191px) {
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
   .is-inline-desktop-only {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-inline-widescreen {
     display: inline !important;
   }
@@ -373,31 +373,31 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 999px) {
+@media screen and (min-width: 769px) and (max-width: 1007px) {
   .is-inline-block-tablet-only {
     display: inline-block !important;
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-inline-block-touch {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-inline-block-desktop {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1191px) {
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
   .is-inline-block-desktop-only {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-inline-block-widescreen {
     display: inline-block !important;
   }
@@ -419,31 +419,31 @@ table th {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 999px) {
+@media screen and (min-width: 769px) and (max-width: 1007px) {
   .is-inline-flex-tablet-only {
     display: inline-flex !important;
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-inline-flex-touch {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-inline-flex-desktop {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1191px) {
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
   .is-inline-flex-desktop-only {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-inline-flex-widescreen {
     display: inline-flex !important;
   }
@@ -491,25 +491,25 @@ table th {
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-size-1-touch {
     font-size: 3rem;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-size-1-desktop {
     font-size: 3rem;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-size-1-widescreen {
     font-size: 3rem;
   }
 }
 
-@media screen and (min-width: 1384px) {
+@media screen and (min-width: 1392px) {
   .is-size-1-fullhd {
     font-size: 3rem;
   }
@@ -531,25 +531,25 @@ table th {
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-size-2-touch {
     font-size: 2.5rem;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-size-2-desktop {
     font-size: 2.5rem;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-size-2-widescreen {
     font-size: 2.5rem;
   }
 }
 
-@media screen and (min-width: 1384px) {
+@media screen and (min-width: 1392px) {
   .is-size-2-fullhd {
     font-size: 2.5rem;
   }
@@ -571,25 +571,25 @@ table th {
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-size-3-touch {
     font-size: 2rem;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-size-3-desktop {
     font-size: 2rem;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-size-3-widescreen {
     font-size: 2rem;
   }
 }
 
-@media screen and (min-width: 1384px) {
+@media screen and (min-width: 1392px) {
   .is-size-3-fullhd {
     font-size: 2rem;
   }
@@ -611,25 +611,25 @@ table th {
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-size-4-touch {
     font-size: 1.5rem;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-size-4-desktop {
     font-size: 1.5rem;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-size-4-widescreen {
     font-size: 1.5rem;
   }
 }
 
-@media screen and (min-width: 1384px) {
+@media screen and (min-width: 1392px) {
   .is-size-4-fullhd {
     font-size: 1.5rem;
   }
@@ -651,25 +651,25 @@ table th {
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-size-5-touch {
     font-size: 1.25rem;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-size-5-desktop {
     font-size: 1.25rem;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-size-5-widescreen {
     font-size: 1.25rem;
   }
 }
 
-@media screen and (min-width: 1384px) {
+@media screen and (min-width: 1392px) {
   .is-size-5-fullhd {
     font-size: 1.25rem;
   }
@@ -691,25 +691,25 @@ table th {
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-size-6-touch {
     font-size: 1rem;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-size-6-desktop {
     font-size: 1rem;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-size-6-widescreen {
     font-size: 1rem;
   }
 }
 
-@media screen and (min-width: 1384px) {
+@media screen and (min-width: 1392px) {
   .is-size-6-fullhd {
     font-size: 1rem;
   }
@@ -815,31 +815,31 @@ a.has-text-danger:hover, a.has-text-danger:focus {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 999px) {
+@media screen and (min-width: 769px) and (max-width: 1007px) {
   .is-hidden-tablet-only {
     display: none !important;
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .is-hidden-touch {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .is-hidden-desktop {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1191px) {
+@media screen and (min-width: 1008px) and (max-width: 1199px) {
   .is-hidden-desktop-only {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .is-hidden-widescreen {
     display: none !important;
   }
@@ -3427,31 +3427,42 @@ input[type="submit"].button {
   margin-bottom: 1.5rem;
 }
 
-.container {
-  position: relative;
-}
-
-@media screen and (min-width: 1000px) {
 .container {
   margin: 0 auto;
   max-width: 960px;
+  position: relative;
   width: 960px;
 }
+
 .container.is-fluid {
-    margin: 0 20px;
+  margin-left: 24px;
+  margin-right: 24px;
   max-width: none;
   width: auto;
 }
+
+@media screen and (max-width: 1199px) {
+  .container.is-widescreen {
+    max-width: 1152px;
+    width: auto;
+  }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (max-width: 1391px) {
+  .container.is-fullhd {
+    max-width: 1344px;
+    width: auto;
+  }
+}
+
+@media screen and (min-width: 1200px) {
   .container {
     max-width: 1152px;
     width: 1152px;
   }
 }
 
-@media screen and (min-width: 1384px) {
+@media screen and (min-width: 1392px) {
   .container {
     max-width: 1344px;
     width: 1344px;
@@ -4553,7 +4564,7 @@ a.nav-item:not(.button).is-tab.is-active {
   padding-bottom: calc(0.75rem - 3px);
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .nav-item a:not(.button).is-brand,
   a.nav-item:not(.button).is-brand {
     padding-left: 0;
@@ -4571,7 +4582,7 @@ a.nav-item:not(.button).is-tab.is-active {
   overflow: auto;
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .nav-left,
   .nav-right {
     flex-basis: 0;
@@ -4800,7 +4811,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   margin: 0.5rem 0;
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .navbar-brand .navbar-item {
     align-items: center;
     display: flex;
@@ -4814,7 +4825,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .navbar,
   .navbar-menu,
   .navbar-start,
@@ -5839,7 +5850,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (max-width: 999px) {
+@media screen and (max-width: 1007px) {
   .column.is-narrow-touch {
     flex: none;
   }
@@ -5968,7 +5979,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .column.is-narrow-desktop {
     flex: none;
   }
@@ -6097,7 +6108,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1192px) {
+@media screen and (min-width: 1200px) {
   .column.is-narrow-widescreen {
     flex: none;
   }
@@ -6226,7 +6237,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1384px) {
+@media screen and (min-width: 1392px) {
   .column.is-narrow-fullhd {
     flex: none;
   }
@@ -6424,7 +6435,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .columns.is-desktop {
     display: flex;
   }
@@ -7501,11 +7512,10 @@ label.panel-block:hover {
 
 .section {
   background-color: white;
-  min-height: 100vh;
   padding: 3rem 1.5rem;
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   .section.is-medium {
     padding: 9rem 1.5rem;
   }
@@ -8057,7 +8067,7 @@ html.route-index #carbon {
   color: white;
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1008px) {
   #blogDropdown {
     width: 16rem;
   }

docs/documentation/components/dropdown.html

@@ -66,10 +66,26 @@ doc-subtab: dropdown
 </div>
 {% endcapture %}
 
+{% include subnav-components.html %}
+
 <section class="section">
   <div class="container">
+
+    <div class="columns" style="margin-bottom: -0.75rem !important;">
+      <div class="column">
         <h1 class="title">Dropdown</h1>
-    <h2 class="subtitle">An interactive <strong>dropdown menu</strong> for discoverable content</h2>
+        <h2 class="subtitle">
+          An interactive <strong>dropdown menu</strong> for discoverable content
+        </h2>
+      </div>
+
+      <div class="column is-narrow">
+        <p class="content">
+          <span class="tag is-success">New!</span>
+          <span class="tag is-info">0.4.4</span>
+        </p>
+      </div>
+    </div>
 
     <hr>
 

docs/documentation/form/select.html

@@ -289,7 +289,7 @@ doc-subtab: select
       </div>
     </div>
 
-    {% if site.vernum >= 42 %}
+    {% if site.vernum >= 44 %}
       <hr>
 
       <h3 class="title">Multiple select</h3>

docs/documentation/layout/container.html

@@ -4,6 +4,38 @@ doc-tab: layout
 doc-subtab: container
 ---
 
+{% capture container_example %}
+<div class="container">
+  <div class="notification">
+    This container is <strong>centered</strong> on desktop.
+  </div>
+</div>
+{% endcapture %}
+
+{% capture container_fluid_example %}
+<div class="container is-fluid">
+  <div class="notification">
+    This container is <strong>fluid</strong>: it will have a 24px gap on either side, on any viewport size.
+  </div>
+</div>
+{% endcapture %}
+
+{% capture container_widescreen_example %}
+<div class="container is-widescreen">
+  <div class="notification">
+    This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
+  </div>
+</div>
+{% endcapture %}
+
+{% capture container_fullhd_example %}
+<div class="container is-fullhd">
+  <div class="notification">
+    This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
+  </div>
+</div>
+{% endcapture %}
+
 {% include subnav-layout.html %}
 
 <section class="section">
@@ -25,52 +57,61 @@ doc-subtab: container
       </ul>
       <p>This is how the container will behave:</p>
       <ul>
-        <li>on <strong>mobile</strong> and <strong>tablet</strong>, it will have a margin of <strong>20px</strong> on both the left and right sides.</li>
-        <li>on <strong>desktop</strong> (>= 1000px), it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
-        <li>on <strong>widescreen</strong> (>= 1192px), it will have a maximum width of <strong>1152px</strong>.</li>
-        <li>on <strong>fullhd</strong> (>= 1384px), it will have a maximum width of <strong>1344px</strong>.</li>
+        <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>
       </ul>
+      <p>
+        The <code>$gap</code> variable has a default value of <code>24px</code> but can be modified.
+      </p>
       <p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
     </div>
   </div>
 </section>
 
 <div class="example is-fullwidth">
-    <div class="container">
-      <div class="notification">
-        This container is <strong>centered</strong> on desktop.
-      </div>
-    </div>
+  {{container_example}}
 </div>
 
-{% highlight html %}
-<div class="container">
-  <div class="notification">
-    This container is <strong>centered</strong> on desktop.
-  </div>
-</div>
-{% endhighlight %}
+{% highlight html %}{{container_example}}{% endhighlight %}
 
 <div class="container">
   <hr>
   <h3 class="title">Fluid container</h3>
   <div class="content">
-      <p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
+    <p>If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
   </div>
 </div>
 
 <div class="example is-fullwidth">
-    <div class="container is-fluid">
-      <div class="notification">
-        This container is <strong>fluid</strong>: it will have a 20px gap on either side.
+  {{container_fluid_example}}
 </div>
+
+{% highlight html %}{{container_fluid_example}}{% endhighlight %}
+
+<div class="container">
+  <hr>
+  <h3 class="title">Breakpoint containers</h3>
+  <div class="content">
+    <p>
+      <span class="tag is-success">New!</span>
+      <span class="tag is-info">0.4.4</span>
+    </p>
+    <p>
+      With the two modifiers <code>.is-widescreen</code> and <code>.is-fullhd</code>, you can have a <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
+    </p>
   </div>
 </div>
 
-{% highlight html %}
-<div class="container is-fluid">
-  <div class="notification">
-    This container is <strong>fluid</strong>: it will have a 20px gap on either side, on any viewport size.
+<div class="example is-fullwidth">
+  {{container_widescreen_example}}
 </div>
+
+{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
+
+<div class="example is-fullwidth">
+  {{container_fullhd_example}}
 </div>
-{% endhighlight %}
+
+{% highlight html %}{{container_fullhd_example}}{% endhighlight %}

docs/documentation/overview/variables.html

@@ -254,18 +254,26 @@ doc-subtab: variables
         <td><code>16px</code></td>
       </tr>
 
-      <tr><th colspan="2">Breakpoints</th></tr>
+      <tr><th colspan="5">Breakpoints</th></tr>
+      <tr>
+        <td><code>$gap</code></td>
+        <td>24px</td>
+      </tr>
       <tr>
         <td><code>$tablet</code></td>
         <td>769px</td>
       </tr>
       <tr>
         <td><code>$desktop</code></td>
-        <td>1000px (960px + 40px container)</td>
+        <td>1008px (960px + 2 * <code>$gap</code>)</td>
       </tr>
       <tr>
         <td><code>$widescreen</code></td>
-        <td>1192px (1152px+ 40px container)</td>
+        <td>1200px (1152px+ 2 * <code>$gap</code>)</td>
+      </tr>
+      <tr>
+        <td><code>$fullhd</code></td>
+        <td>1392px (1344px+ 2 * <code>$gap</code>)</td>
       </tr>
 
       <tr><th colspan="2">Miscellaneous</th></tr>

sass/elements/other.sass

@@ -2,22 +2,29 @@
   +block
 
 .container
-  position: relative
-  +desktop
   margin: 0 auto
-    max-width: $desktop - 40px
-    width: $desktop - 40px
-    // Modifiers
+  max-width: $desktop - (2 * $gap)
+  position: relative
+  width: $desktop - (2 * $gap)
   &.is-fluid
-      margin: 0 20px
+    margin-left: $gap
+    margin-right: $gap
     max-width: none
     width: auto
+  +until($widescreen)
+    &.is-widescreen
+      max-width: $widescreen - (2 * $gap)
+      width: auto
+  +until($fullhd)
+    &.is-fullhd
+      max-width: $fullhd - (2 * $gap)
+      width: auto
   +widescreen
-    max-width: $widescreen - 40px
-    width: $widescreen - 40px
+    max-width: $widescreen - (2 * $gap)
+    width: $widescreen - (2 * $gap)
   +fullhd
-    max-width: $fullhd - 40px
-    width: $fullhd - 40px
+    max-width: $fullhd - (2 * $gap)
+    width: $fullhd - (2 * $gap)
 
 .delete
   +delete

sass/layout/section.sass

@@ -1,6 +1,5 @@
 .section
   background-color: $white
-  min-height: 100vh
   padding: 3rem 1.5rem
   // Responsiveness
   +desktop

sass/utilities/initial-variables.sass

@@ -48,14 +48,16 @@ $body-size: 16px !default
 
 // Responsiveness
 
+// The container gap, which acts as the offset for breakpoints
+$gap: 24px !default
 // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default
-// 960px container + 40px
-$desktop: 1000px !default
-// 1152px container + 40
-$widescreen: 1192px !default
-// 1344px container + 40
-$fullhd: 1384px !default
+// 960px container + 3rem
+$desktop: 960px + (2 * $gap) !default
+// 1152px container + 3rem
+$widescreen: 1152px + (2 * $gap)  !default
+// 1344px container + 3rem
+$fullhd: 1344px + (2 * $gap)  !default
 
 // Miscellaneous