Explain responsiveness

docs/documentation/overview/responsiveness.html

@@ -13,16 +13,32 @@ doc-subtab: responsiveness
 
     <hr>
 
+    <h3 class="title">Vertical by default</h3>
+    <div class="content">
+      <p>
+        Every element in Bulma is <strong>mobile-first</strong> and optmizes for <strong>vertical reading</strong>, so by default on mobile:
+      </p>
+      <ul>
+        <li><code>columns</code> are stacked vertically</li>
+        <li>the <code>level</code> component will show its children stacked vertically</li>
+        <li>the <code>nav</code> menu will be hidden</li>
+      </ul>
+      <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
+    </div>
+
+    <hr>
+
     <h3 class="title">Breakpoints</h3>
     <div class="content">
-      <p>Bulma has 4 breakpoints:</p>
+      <p>Bulma has 5 breakpoints:</p>
       <ul>
         <li><code>mobile</code>: up to <code>768px</code></li>
         <li><code>tablet</code>: from <code>769px</code></li>
         <li><code>desktop</code>: from <code>1000px</code></li>
         <li><code>widescreen</code>: from <code>1192px</code></li>
+        <li><code>fullhd</code>: from <code>1384px</code></li>
       </ul>
-      <p>Bulma uses 7 responsive mixins:</p>
+      <p>Bulma uses 9 responsive mixins:</p>
       <ul>
         <li>
           <code>=mobile</code><br>
@@ -52,110 +68,125 @@ doc-subtab: responsiveness
           <code>=widescreen</code><br>
           from <code>1192px</code>
         </li>
+        <li>
+          <code>=widescreen-only</code><br>
+          from <code>1192px</code> and until <code>1383px</code>
+        </li>
+        <li>
+          <code>=fullhd</code><br>
+          from <code>1384px</code>
+        </li>
       </ul>
-      <p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
     </div>
 
-    <table class="table">
+    <table class="table is-bordered">
       <thead>
         <tr>
-          <th>
+          <th style="width: 20%;">
             Mobile<br>
             Up to <code>768px</code>
           </th>
-          <th>
+          <th style="width: 20%;">
             Tablet<br>
             Between <code>769px</code> and <code>999px</code>
           </th>
-          <th>
+          <th style="width: 20%;">
             Desktop<br>
             Between <code>1000px</code> and <code>1191px</code>
           </th>
-          <th>
+          <th style="width: 20%;">
             Widescreen<br>
-            <code>1192px</code> and above
+            Between <code>1192px</code> and <code>1383px</code>
+          </th>
+          <th style="width: 20%;">
+            FullHD<br>
+            <code>1384px</code> and above
           </th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td class="is-narrow">
+          <td>
             <p class="notification is-success">mobile</p>
           </td>
-          <td class="is-narrow" colspan="3">
+          <td colspan="4">
             <p class="notification">-</p>
           </td>
         </tr>
         <tr>
-          <td class="is-narrow">
+          <td>
             <p class="notification">-</p>
           </td>
-          <td class="is-narrow" colspan="3">
+          <td colspan="4">
             <p class="notification is-success">tablet</p>
           </td>
         </tr>
         <tr>
-          <td class="is-narrow" colspan="2">
+          <td colspan="2">
             <p class="notification">-</p>
           </td>
-          <td class="is-narrow" colspan="3">
+          <td colspan="3">
             <p class="notification is-success">desktop</p>
           </td>
         </tr>
         <tr>
-          <td class="is-narrow" colspan="3">
+          <td colspan="3">
             <p class="notification">-</p>
           </td>
-          <td class="is-narrow">
+          <td colspan="2">
             <p class="notification is-success">widescreen</p>
           </td>
         </tr>
         <tr>
-          <td class="is-narrow">
+          <td colspan="4">
+            <p class="notification">-</p>
+          </td>
+          <td>
+            <p class="notification is-success">fullhd</p>
+          </td>
+        </tr>
+        <tr>
+          <td>
             <p class="notification">-</p>
           </td>
-          <td class="is-narrow">
+          <td>
             <p class="notification is-success">tablet-only</p>
           </td>
-          <td class="is-narrow" colspan="2">
+          <td colspan="3">
             <p class="notification">-</p>
           </td>
         </tr>
         <tr>
-          <td class="is-narrow" colspan="2">
+          <td colspan="2">
             <p class="notification">-</p>
           </td>
-          <td class="is-narrow">
+          <td>
             <p class="notification is-success">desktop-only</p>
           </td>
-          <td class="is-narrow">
+          <td colspan="2">
+            <p class="notification">-</p>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="3">
+            <p class="notification">-</p>
+          </td>
+          <td>
+            <p class="notification is-success">widescreen-only</p>
+          </td>
+          <td>
             <p class="notification">-</p>
           </td>
         </tr>
         <tr>
-          <td class="is-narrow" colspan="2">
+          <td colspan="2">
             <p class="notification is-success">touch</p>
           </td>
-          <td class="is-narrow" colspan="2">
+          <td colspan="3">
             <p class="notification">-</p>
           </td>
         </tr>
       </tbody>
     </table>
-
-    <h4>
-
-    <h3 class="title">Vertical by default</h3>
-    <div class="content">
-      <p>
-        Every element in Bulma is <strong>mobile-first</strong> and optmizes for <strong>vertical reading</strong>, so by default on mobile:
-      </p>
-      <ul>
-        <li><code>columns</code> are stacked vertically</li>
-        <li>the <code>level</code> component will show its children stacked vertically</li>
-        <li>the <code>nav</code> menu will be hidden</li>
-      </ul>
-      <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
-    </div>
   </div>
 </section>