diff --git a/docs/_data/variables/base/_all.json b/docs/_data/variables/base/_all.json
deleted file mode 100644
index a720f04a..00000000
--- a/docs/_data/variables/base/_all.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "base/_all.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/base/helpers.json b/docs/_data/variables/base/helpers.json
deleted file mode 100644
index d8572ab9..00000000
--- a/docs/_data/variables/base/helpers.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "base/helpers.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/base/minireset.json b/docs/_data/variables/base/minireset.json
deleted file mode 100644
index 44f47d16..00000000
--- a/docs/_data/variables/base/minireset.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "base/minireset.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/components/_all.json b/docs/_data/variables/components/_all.json
deleted file mode 100644
index 55def69d..00000000
--- a/docs/_data/variables/components/_all.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "components/_all.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/components/level.json b/docs/_data/variables/components/level.json
deleted file mode 100644
index 115fee8b..00000000
--- a/docs/_data/variables/components/level.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "components/level.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/components/media.json b/docs/_data/variables/components/media.json
deleted file mode 100644
index 2e3ea755..00000000
--- a/docs/_data/variables/components/media.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "components/media.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/_all.json b/docs/_data/variables/elements/_all.json
deleted file mode 100644
index 9633bb22..00000000
--- a/docs/_data/variables/elements/_all.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "elements/_all.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/container.json b/docs/_data/variables/elements/container.json
deleted file mode 100644
index 463d2a48..00000000
--- a/docs/_data/variables/elements/container.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "elements/container.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/other.json b/docs/_data/variables/elements/other.json
deleted file mode 100644
index 8eca5932..00000000
--- a/docs/_data/variables/elements/other.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "elements/other.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/grid/_all.json b/docs/_data/variables/grid/_all.json
deleted file mode 100644
index 28f15a86..00000000
--- a/docs/_data/variables/grid/_all.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "grid/_all.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/grid/tiles.json b/docs/_data/variables/grid/tiles.json
deleted file mode 100644
index a429a62d..00000000
--- a/docs/_data/variables/grid/tiles.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "grid/tiles.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/layout/_all.json b/docs/_data/variables/layout/_all.json
deleted file mode 100644
index 35f974b8..00000000
--- a/docs/_data/variables/layout/_all.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "layout/_all.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/layout/hero.json b/docs/_data/variables/layout/hero.json
deleted file mode 100644
index 07c8acb0..00000000
--- a/docs/_data/variables/layout/hero.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "by_name": {},
-  "list": [],
-  "file_path": "layout/hero.sass"
-}
\ No newline at end of file
diff --git a/docs/_data/variables/utilities/controls.json b/docs/_data/variables/utilities/controls.json
new file mode 100644
index 00000000..f29b2b86
--- /dev/null
+++ b/docs/_data/variables/utilities/controls.json
@@ -0,0 +1,41 @@
+{
+  "by_name": {
+    "$control-radius": {
+      "name": "$control-radius",
+      "value": "$radius",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "4px"
+    },
+    "$control-radius-small": {
+      "name": "$control-radius-small",
+      "value": "$radius-small",
+      "type": "variable",
+      "computed_type": "size",
+      "computed_value": "2px"
+    },
+    "$control-border-width": {
+      "name": "$control-border-width",
+      "value": "1px",
+      "type": "size"
+    },
+    "$control-padding-vertical": {
+      "name": "$control-padding-vertical",
+      "value": "calc(0.375em - #{$control-border-width})",
+      "type": "size"
+    },
+    "$control-padding-horizontal": {
+      "name": "$control-padding-horizontal",
+      "value": "calc(0.625em - #{$control-border-width})",
+      "type": "size"
+    }
+  },
+  "list": [
+    "$control-radius",
+    "$control-radius-small",
+    "$control-border-width",
+    "$control-padding-vertical",
+    "$control-padding-horizontal"
+  ],
+  "file_path": "utilities/controls.sass"
+}
\ No newline at end of file
diff --git a/docs/_includes/elements/variables.html b/docs/_includes/elements/variables.html
index b3448eef..9a46dd93 100644
--- a/docs/_includes/elements/variables.html
+++ b/docs/_includes/elements/variables.html
@@ -28,11 +28,15 @@
 
 {% endcapture %}
 
-{% include elements/anchor.html name=anchor_name %}
+{% unless include.hide_anchor %}
+  {% include elements/anchor.html name=anchor_name %}
+{% endunless %}
 
-<div class="content">
-  <p>{{ content | strip }}</p>
-</div>
+{% unless include.hide_content %}
+  <div class="content">
+    <p>{{ content | strip }}</p>
+  </div>
+{% endunless %}
 
 <div class="table-container">
   <table class="table {{ table_class }}">
@@ -55,13 +59,8 @@
     <tbody>
       {% if include.variables_keys %}
         {% for key in include.variables_keys %}
-          {% if include.responsiveness_variables %}
-            {% assign variable = site.data.variables.utilities.initial-variables.by_name[key] %}
-            {% include elements/variable-row.html variable=variable %}
-          {% else %}
-            {% assign variable = site.data.variables.elements.form.by_name[key] %}
-            {% include elements/variable-row.html variable=variable %}
-          {% endif %}
+          {% assign variable = site.data.variables[include.folder][include.file].by_name[key] %}
+          {% include elements/variable-row.html variable=variable %}
         {% endfor %}
       {% else %}
         {% for variable_name in variables %}
diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html
index 7d1fdd08..46659461 100644
--- a/docs/documentation/form/file.html
+++ b/docs/documentation/form/file.html
@@ -730,4 +730,9 @@ meta:
   </p>
 </div>
 
-{% include elements/variables.html type='element' variables_keys=page.variables_keys %}
+{% include elements/variables.html
+  type='element'
+  variables_keys=page.variables_keys
+  folder='elements'
+  file='form'
+%}
diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index 0c68ba33..d107dacf 100644
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -8,15 +8,15 @@ breadcrumb:
 - documentation
 - form
 - form-general
-variables_controls_keys:
-- control-radius
-- control-radius-small
-- control-padding-vertical
-- control-padding-horizontal
-variables_form_keys:
-- label-color
-- label-weight
-- help-size
+variables_control_keys:
+- $control-radius
+- $control-radius-small
+- $control-padding-vertical
+- $control-padding-horizontal
+variables_keys:
+- $label-color
+- $label-weight
+- $help-size
 ---
 
 {% capture example %}
@@ -1029,49 +1029,23 @@ variables_form_keys:
 
 {% include elements/snippet.html content=field_label_example horizontal=true more=true %}
 
-{% include elements/anchor.html name="Variables" %}
+{% capture custom_message %}
+  Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+{% endcapture %}
 
-<div class="content">
-  <p>
-    Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-  </p>
-</div>
+{% include elements/variables.html
+  type='element'
+  variables_keys=page.variables_control_keys
+  custom_message=custom_message
+  folder='utilities'
+  file='controls'
+%}
 
-<table class="table is-bordered">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </thead>
-  <tfoot>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </tfoot>
-  <tbody>
-    {% for key in page.variables_controls_keys %}
-      {% assign variable = site.data.variables.utilities.controls.vars[key] %}
-      <tr>
-        <td>
-          <code>{{ variable.name }}</code>
-        </td>
-        <td>
-          <code>{{ variable.value }}</code>
-        </td>
-      </tr>
-    {% endfor %}
-    {% for key in page.variables_form_keys %}
-      {% assign variable = site.data.variables.elements.form.vars[key] %}
-      <tr>
-        <td>
-          <code>{{ variable.name }}</code>
-        </td>
-        <td>
-          <code>{{ variable.value }}</code>
-        </td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
+{% include elements/variables.html
+  type='element'
+  variables_keys=page.variables_keys
+  folder='elements'
+  file='form'
+  hide_anchor=true
+  hide_content=true
+%}
diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html
index ccfe35f8..18d362da 100644
--- a/docs/documentation/form/input.html
+++ b/docs/documentation/form/input.html
@@ -478,4 +478,8 @@ meta:
   </div>
 </div>
 
-{% include elements/variables.html type='element' variables_keys=page.variables_keys %}
+{% include elements/variables.html type='element'
+  variables_keys=page.variables_keys
+  folder='elements'
+  file='form'
+%}
diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html
index be8c6ac1..80b555c0 100644
--- a/docs/documentation/overview/responsiveness.html
+++ b/docs/documentation/overview/responsiveness.html
@@ -234,5 +234,6 @@ $fullhd-enabled: false
   type='element'
   variables_keys=page.variables_keys
   custom_message=custom_message
-  responsiveness_variables=true
+  folder='utilities'
+  file='initial-variables'
 %}
diff --git a/docs/scripts/plugins/03-read-other-variables.js b/docs/scripts/plugins/03-read-other-variables.js
index 2dde9e2c..24c84209 100644
--- a/docs/scripts/plugins/03-read-other-variables.js
+++ b/docs/scripts/plugins/03-read-other-variables.js
@@ -11,9 +11,9 @@ function plugin() {
     setImmediate(done);
 
     Object.keys(files).forEach(file_path => {
-      if (file_path.startsWith('utilities')) {
-        return;
-      }
+      // if (file_path.startsWith('utilities')) {
+      //   return;
+      // }
 
       const {file_name, lines} = utils.getLines(files, file_path);
       let variables = {
@@ -38,7 +38,9 @@ function plugin() {
         }
       });
 
-      utils.writeFile(file_path, variables);
+      if (variables.list.length > 0) {
+        utils.writeFile(file_path, variables);
+      }
     });
   };
 }