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/_data/variables/elements/box.json

@@ -0,0 +1,45 @@
+{
+  "dir_name": "elements",
+  "file_name": "box",
+  "file_relative_path": "elements/box.sass",
+  "file_line_from": 1,
+  "file_line_to": 8,
+  "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/box.sass#L1,L8",
+  "vars": {
+    "box-color": {
+      "id": "box-color",
+      "name": "$box-color",
+      "value": "$text"
+    },
+    "box-background-color": {
+      "id": "box-background-color",
+      "name": "$box-background-color",
+      "value": "$white"
+    },
+    "box-radius": {
+      "id": "box-radius",
+      "name": "$box-radius",
+      "value": "$radius-large"
+    },
+    "box-shadow": {
+      "id": "box-shadow",
+      "name": "$box-shadow",
+      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+    },
+    "box-padding": {
+      "id": "box-padding",
+      "name": "$box-padding",
+      "value": "1.25rem"
+    },
+    "box-link-hover-shadow": {
+      "id": "box-link-hover-shadow",
+      "name": "$box-link-hover-shadow",
+      "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link"
+    },
+    "box-link-active-shadow": {
+      "id": "box-link-active-shadow",
+      "name": "$box-link-active-shadow",
+      "value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link"
+    }
+  }
+}