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/_includes/variables.html

@@ -1,12 +1,48 @@
-{% include anchor.html name="Variables" %}
+{% capture content %}
+
+  {% assign anchor_name = include.anchor_name | default: 'Variables' %}
+  {% assign tab         = include.tab         | default: page.doc-tab %}
+  {% assign subtab      = include.subtab      | default: page.doc-subtab %}
+  {% assign type        = include.type        | default: tab %}
+  {% assign data        = include.data        | default: site.data.variables[tab][subtab] %}
+  {% assign variables   = include.variables   | default: data.vars %}
+  {% assign table_class = include.table_class | default: 'is-bordered' %}
+
+  {% if include.custom_message %}
+  
+    {{ include.custom_message }}
+  
+  {% else %}
+  
+    {% assign variables_link_text = "these variables" %}
+  
+    {% capture variables_link %}
+    
+      {% if data.file_url %}
+    
+        <a href="{{ data.file_url }}" target="_blank">{{ variables_link_text }}</a>
+    
+      {% else %}
+    
+        {{ variables_link_text }}
+    
+      {% endif %}
+    
+    {% endcapture %}
+  
+    You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+  
+  {% endif %}
+
+{% endcapture %}
+
+{% include anchor.html name=anchor_name %}
 
 <div class="content">
-  <p>
-    {% if include.custom_message %}{{ include.custom_message }}{% else %}You can use these variables to <strong>customize</strong> this {%if include.element %}element{% elsif include.layout %}layout{% else %}component{% endif %}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endif %}
-  </p>
+  <p>{{ content | strip }}</p>
 </div>
 
-<table class="table is-bordered">
+<table class="table {{ table_class }}">
   <thead>
     <tr>
       <th>Name</th>
@@ -20,7 +56,8 @@
     </tr>
   </tfoot>
   <tbody>
-    {% for variable in page.variables %}
+    {% for variable_hash in variables %}
+      {% assign variable = variable_hash[1] %}
       <tr>
         <td>
           <code>{{ variable.name }}</code>