Add Webpack page

docs/documentation/customize/concepts.html

@@ -10,21 +10,26 @@ breadcrumb:
 - customize-concepts
 ---
 
+{% assign variables_link = site.data.links.by_id['customize-node-sass'] %}
+
 <div class="content">
   <p>
     Bulma is highly customizable thanks to <strong>415 Sass variables</strong> living across <strong>28 files</strong>.
   </p>
 
   <p>
-    These variables exist at 3 levels:
+    These variables exist at 4 levels:
   </p>
 
   <ul>
     <li>
-      <strong><a href="/documentation/overview/variables/#initial-variables">initial variables</a></strong>: global variables with <strong>literal</strong> values
+      <strong><a href="{{ site.url }}{{ variables_link.path }}#initial-variables">initial variables</a></strong>: global variables with <strong>literal</strong> values
     </li>
     <li>
-      <strong><a href="/documentation/overview/variables/#derived-variables">derived variables</a></strong>: global variables with values that reference other variables, or are computed
+      <strong><a href="{{ site.url }}{{ variables_link.path }}#derived-variables">derived variables</a></strong>: global variables with values that reference other variables, or are computed
+    </li>
+    <li>
+      <strong><a href="{{ site.url }}{{ variables_link.path }}#generic-variables">generic variables</a></strong>: for the HTML elements which carry no CSS class
     </li>
     <li>
       <strong>element/component variables</strong>: variables that are specific to a Bulma element/component
@@ -38,6 +43,10 @@ breadcrumb:
 
 {% include elements/anchor.html name="Strategy" %}
 
+{% assign node_sass_link = site.data.links.by_id['customize-node-sass'] %}
+{% assign sass_cli_link = site.data.links.by_id['customize-sass-cli'] %}
+{% assign webpack_link = site.data.links.by_id['customize-webpack'] %}
+
 <div class="content">
   <p>
     To customize Bulma, you will need to:
@@ -54,4 +63,20 @@ breadcrumb:
       create your own <code>.scss</code> or <code>.sass</code> file
     </li>
   </ul>
+
+  <p>
+    This can be achieved with:
+  </p>
+
+  <ul>
+    <li>
+      with <a href="{{ site.url }}{{ node_sass_link.path }}">node-sass</a>
+    </li>
+    <li>
+      with the <a href="{{ site.url }}{{ sass_cli_link.path }}">Sass CLI</a>
+    </li>
+    <li>
+      with <a href="{{ site.url }}{{ webpack_link.path }}">Webpack</a>
+    </li>
+  </ul>
 </div>