From: Jeremy Thomas Date: Tue, 19 Jun 2018 13:06:24 +0000 (+0100) Subject: Add variables blog post X-Git-Tag: 0.7.2~95 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=45aa3169d035ea5dc2ecee3fb0b62ef8a09f6fd9;p=thirdparty%2Fbulma.git 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 index 000000000..3ced34677 --- /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. + +
+ JSON variables +
+ +As an added bonus, each variable row in the docs comes with its **type** and its **computed value** (if applicable). + +
+ Variables table +
diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index c86acfea3..627ea7fb7 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -22,6 +22,6 @@ breadcrumb: {% 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 index 000000000..3f0a19044 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 index 000000000..f68b83b31 Binary files /dev/null and b/docs/images/blog/variables/variables-table.png differ