Add variables blog post

diff --git a/docs/_posts/2018-06-20-automatic-variables-documentation.md b/docs/_posts/2018-06-20-automatic-variables-documentation.md
new file mode 100644 (file)
index 0000000..3ced346
--- /dev/null
+++ b/docs/_posts/2018-06-20-automatic-variables-documentation.md
@@ -0,0 +1,24 @@
+---
+title: "Automatic variables documentation"
+layout: post
+introduction: "Keeping the docs in sync"
+color: "info"
+name: "Automatic variables docs"
+icon: "sync-alt"
+---
+
+Bulma is highly customizable because there are **415 Sass variables** across **28 files**.
+
+More and more CSS values are transformed into Sass variables for easy customization. And each new Bulma feature is required to come with its own set of variables.
+
+While providing these variables is necessary, it's only useful if developers are aware they exist! Keeping **in sync** the documentation and the source files used to be a manual process. It is now **automatic**, thanks to a script that parses the source files and outputs the numerous Sass variables as JSON data.
+
+<figure>
+  <img src="/images/blog/variables/json.png" alt="JSON variables" width="275" height="775">
+</figure>
+
+As an added bonus, each variable row in the docs comes with its **type** and its **computed value** (if applicable).
+
+<figure>
+  <img src="/images/blog/variables/variables-table.png" alt="Variables table" width="597" height="212">
+</figure>

diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html
index c86acfea3fb582495d52efc85cd1688df46e49d9..627ea7fb727ce0dd2dae5527966a54e104cd19bb 100644 (file)
--- a/docs/documentation/layout/footer.html
+++ b/docs/documentation/layout/footer.html
@@ -22,6 +22,6 @@ breadcrumb:
 </footer>
 {% endcapture %}
 
-{% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
+{% include elements/snippet.html content=footer_example horizontal=true more=true %}
 
 {% include elements/variables.html %}

diff --git a/docs/images/blog/variables/json.png b/docs/images/blog/variables/json.png
new file mode 100644 (file)
index 0000000..3f0a190
Binary files /dev/null and b/docs/images/blog/variables/json.png differ

diff --git a/docs/images/blog/variables/variables-table.png b/docs/images/blog/variables/variables-table.png
new file mode 100644 (file)
index 0000000..f68b83b
Binary files /dev/null and b/docs/images/blog/variables/variables-table.png differ