Update responsiveness breakpoints values in docs (#1264)

* Add breakpoints variables in responsivness docs page

* Update breakpoints list values by looping through page.breakpoints

* Add link to responsiveness variables repo file

* Add mixins variables in responsivness docs page

* Update mixins list values by looping through page.mixins

* Add link to responsiveness mixins repo file

* Update responsivness demo table header

* Add responsivness variables reference table

* Add variables to repo files urls (dry)

* Add breakpoints as jekyll data

* Use responsiveness breakpoints from jekyll data

* Replace breakpoints.yml with breakpoints.json and update relevant code accordingly

* Update URLs to source files in responsiveness docs page

docs/_data/breakpoints.json

@@ -0,0 +1,31 @@
+{
+  "mobile": {
+    "id": "mobile",
+    "name": "Mobile",
+    "from": 0,
+    "to": 768
+  },
+  "tablet": {
+    "id": "tablet",
+    "name": "Tablet",
+    "from": 769,
+    "to": 1023
+  },
+  "desktop": {
+    "id": "desktop",
+    "name": "Desktop",
+    "from": 1024,
+    "to": 1215
+  },
+  "widescreen": {
+    "id": "widescreen",
+    "name": "Widescreen",
+    "from": 1216,
+    "to": 1407
+  },
+  "fullhd": {
+    "id": "fullhd",
+    "name": "FullHD",
+    "from": 1408
+  }
+}

docs/_includes/bp/desktop.html

@@ -1 +1 @@
-<span class="tag">>= 1008px</span>
+<span class="tag">>= {{ site.data.breakpoints.desktop.from }}px</span>

docs/_includes/bp/fullhd.html

@@ -1 +1 @@
-<span class="tag">>= 1392px</span>
+<span class="tag">>= {{ site.data.breakpoints.fullhd.from }}px</span>

docs/_includes/bp/touch.html

@@ -1 +1 @@
-<span class="tag">< 1008px</span>
+<span class="tag">< {{ site.data.breakpoints.desktop.from }}px</span>

docs/_includes/bp/widescreen.html

@@ -1 +1 @@
-<span class="tag">>= 1200px</span>
+<span class="tag">>= {{ site.data.breakpoints.widescreen.from }}px</span>

docs/documentation/overview/responsiveness.html

@@ -3,6 +3,17 @@ title: Responsiveness
 layout: documentation
 doc-tab: overview
 doc-subtab: responsiveness
+variables:
+- name: $gap
+  value: 32px
+- name: $tablet
+  value: 769px
+- name: $desktop
+  value: 960px + (2 * $gap)
+- name: $widescreen
+  value: 1152px + (2 * $gap)
+- name: $fullhd
+  value: 1344px + (2 * $gap)
 ---
 
 {% include subnav-overview.html %}
@@ -28,80 +39,70 @@ doc-subtab: responsiveness
 
     {% include anchor.html name="Breakpoints" %}
     
+    {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.github %}
+    {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.github %}
+
     <div class="content">
-      <p>Bulma has 5 breakpoints:</p>
+      <p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</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>1008px</code></li>
-        <li><code>widescreen</code>: from <code>1200px</code></li>
-        <li><span class="tag is-success">New!</span> <code>fullhd</code>: from <code>1392px</code></li>
+        {% 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>
+        {% endfor %}
       </ul>
-      <p>Bulma uses 9 responsive mixins:</p>
+      
+      <p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
       <ul>
-        <li>
-          <code>=mobile</code><br>
-          until <code>768px</code>
-        </li>
-        <li>
-          <code>=tablet</code><br>
-          from <code>769px</code>
-        </li>
-        <li>
-          <code>=tablet-only</code><br>
-          from <code>769px</code> and until <code>1007px</code>
-        </li>
-        <li>
-          <code>=touch</code><br>
-          until <code>1007px</code>
-        </li>
-        <li>
-          <code>=desktop</code><br>
-          from <code>1008px</code>
-        </li>
-        <li>
-          <code>=desktop-only</code><br>
-          from <code>1008px</code> and until <code>1199px</code>
-        </li>
-        <li>
-          <code>=widescreen</code><br>
-          from <code>1200px</code>
-        </li>
-        <li>
-          <code>=widescreen-only</code><br>
-          from <code>1200px</code> and until <code>1391px</code>
-        </li>
-        <li>
-          <span class="tag is-success">New!</span>
-          <code>=fullhd</code><br>
-          from <code>1392px</code>
-        </li>
+        {% for breakpoint_hash in site.data.breakpoints %}
+          {% assign breakpoint = breakpoint_hash[1] %}
+          {% case breakpoint.id %}
+            {% when 'mobile' %}
+              <li>
+                <code>={{ breakpoint.id }}</code><br>
+                until <code>{{ breakpoint.to }}px</code>
+              </li>
+            {% when 'fullhd' %}
+              <li>
+                <span class="tag is-success">New!</span>
+                <code>={{ breakpoint.id }}</code><br>
+                from <code>{{ breakpoint.from }}px</code>
+              </li>
+            {% else %}
+              <li>
+                <code>={{ breakpoint.id }}</code><br>
+                from <code>{{ breakpoint.from }}px</code>
+              </li>
+              <li>
+                <code>={{ breakpoint.id }}-only</code><br>
+                from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
+              </li>
+              {% if breakpoint.id == 'tablet' %}
+                <li>
+                  <code>=touch</code><br>
+                  until <code>{{ breakpoint.to }}px</code>
+                </li>
+              {% endif %}
+          {% endcase %}
+        {% endfor %}
       </ul>
     </div>
 
     <table class="table is-bordered">
       <thead>
         <tr>
-          <th style="width: 20%;">
-            Mobile<br>
-            Up to <code>768px</code>
-          </th>
-          <th style="width: 20%;">
-            Tablet<br>
-            Between <code>769px</code> and <code>1007px</code>
-          </th>
-          <th style="width: 20%;">
-            Desktop<br>
-            Between <code>1008px</code> and <code>1199px</code>
-          </th>
-          <th style="width: 20%;">
-            Widescreen<br>
-            Between <code>1200px</code> and <code>1391px</code>
-          </th>
-          <th style="width: 20%;">
-            FullHD<br>
-            <code>1392px</code> and above
-          </th>
+          {% for breakpoint_hash in site.data.breakpoints %}
+            {% assign breakpoint = breakpoint_hash[1] %}
+            <th style="width: 20%;">
+              {{ breakpoint.name }}<br>
+              {% if breakpoint.id == 'mobile' %}
+                Up to <code>{{ breakpoint.to }}px</code>
+              {% elsif 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>
+          {% endfor %}
         </tr>
       </thead>
       <tbody>
@@ -188,5 +189,10 @@ doc-subtab: responsiveness
         </tr>
       </tbody>
     </table>
+    
+    {% capture custom_message %}You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
+    
+    {% include variables.html custom_message = custom_message %}
+    
   </div>
 </section>