Add documentation of all CSS variables available

docs/documentation/layout/container.html

@@ -15,6 +15,7 @@ meta:
   colors: false
   sizes: true
   variables: true
+  hide_css_vars: true
 ---
 
 {% capture container_example %}
@@ -310,6 +311,4 @@ maximum widths" %}
 
 <div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
 
-{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %} {%
-include docs/components/variables.html type='element'
-data=site.data.variables.elements.container %}
+{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %}

docs/documentation/layout/footer.html

@@ -9,6 +9,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-footer
+meta:
+  variables: true
 ---
 {% capture footer_example %}
 <footer class="footer">

docs/documentation/layout/level.html

@@ -9,6 +9,9 @@ breadcrumb:
   - documentation
   - layout
   - layout-level
+meta:
+  variables: true
+  hide_css_vars: true
 ---
 {% capture nav_example %}
 <!-- Main container -->

docs/documentation/layout/media-object.html

@@ -9,6 +9,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-media
+meta:
+  variables: true
 ---
 {% capture media_example %}
 <article class="media">

docs/documentation/layout/section.html

@@ -10,6 +10,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-section
+meta:
+  variables: true
 ---
 {% capture section_example %}
 <section class="section">