Add variables blog post

This commit is contained in:
Jeremy Thomas 2018-06-19 14:06:24 +01:00
parent f9f0b19e46
commit 45aa3169d0
4 changed files with 25 additions and 1 deletions

View File

@ -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>

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB