Add variables blog post

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>

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 %}