Docs/variables data (#1314)

* Replace variables.json with colors.json and update related files accordingly

* Add variables data files

* Update variables include template and all related files to use new variables data

* Fix mobile breakpoint id typo in responsivness docs page

* Fix Liquid syntax error in made-with-bulma docs page

* Update bulma sass files count in modular docs page

* Use breakpoints data in responsiveness helpers docs page

* Use breakpoints and variables data in typography helpers docs page

* Add missing page titles in docs pages front matter

docs/documentation/modifiers/responsive-helpers.html

@@ -11,26 +11,19 @@ doc-subtab: responsive-helpers
     <th>
       Class
     </th>
-    <th>
-      Mobile<br>
-      Up to <code>768px</code>
-    </th>
-    <th>
-      Tablet<br>
-      Between <code>769px</code> and <code>1007px</code>
-    </th>
-    <th>
-      Desktop<br>
-      Between <code>1008px</code> and <code>1199px</code>
-    </th>
-    <th>
-      Widescreen<br>
-      Between <code>1200px</code> and <code>1391px</code>
-    </th>
-    <th>
-      FullHD<br>
-      Above <code>1392px</code>
-    </th>
+    {% for breakpoint_hash in site.data.breakpoints %}
+      {% assign breakpoint = breakpoint_hash[1] %}
+      <th>
+        {{ 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>
 {% endcapture %}