Add Webpack page

docs/_includes/components/categories.html

@@ -4,7 +4,6 @@
     {% assign category_links = category[1] %}
     {% assign category_link = site.data.links.by_id[category_id] %}
 
-    {% if category_link.name != 'Customize' %}
     <div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
       <header class="bd-category-header">
         <a class="bd-category-toggle">
@@ -33,7 +32,6 @@
         {% endfor %}
       </ul>
     </div>
-    {% endif %}
   {% endfor %}
 </nav>
 

docs/_includes/index/customize.html

@@ -1,4 +1,4 @@
-{% assign customize_link = site.data.links.by_id['overview-customize'] %}
+{% assign customize_link = site.data.links.by_id['customize'] %}
 
 <section id="customize" class="bd-easy section is-medium">
   <div class="container">

docs/_includes/snippets/customized.html

@@ -22,4 +22,4 @@ $input-border-color: transparent;
 $input-shadow: none;
 
 // Import the rest of Bulma
-@import "../bulma";
+@import "../path/to/bulma";

docs/_includes/steps/add-custom-styles.html

@@ -49,9 +49,15 @@ $input-shadow: none;
   </div>
 
   <div class="content">
-    <p>
-      Since you are watching for changes, simply <strong>save the file</strong> to see the result:
-    </p>
+    {% if include.build %}
+      <p>
+        Rebuild the CSS to see the result:
+      </p>
+    {% else %}
+      <p>
+        Since you are watching for changes, simply <strong>save the file</strong> to see the result:
+      </p>
+    {% endif %}
   </div>
 
   {%

docs/_includes/steps/create-html-page.html

@@ -9,7 +9,7 @@
 
   <div class="content">
     <p>
-      Save this file as <code>mypage.html</code>.
+      Save this file as <code>mypage.html</code>{% if include.dist == true %} in the <code>dist</code> folder{% endif %}.
     </p>
     <p>
       Notice the <code>css/mystyles.css</code> path for your stylesheet. This will be the location of the CSS file we will generate with Sass.

docs/_includes/steps/create-package.html

@@ -0,0 +1,26 @@
+{% capture init %}
+npm init
+{% endcapture %}
+
+{% capture step_1 %}
+  <div class="content">
+    <p>
+      In your terminal, create a new folder called <code>mybulma</code>, navigate to it, then type the following command:
+    </p>
+  </div>
+
+  {% highlight bash %}{{ init }}{% endhighlight %}
+
+  <div class="content">
+    <p>
+      This will launch an interactive setup to create <code>package.json</code>. When prompted for an <strong>entry point</strong>, enter <code>{{ include.entry }}</code>.
+    </p>
+  </div>
+{% endcapture %}
+
+{% assign step_title = '. Create a <code style="white-space: nowrap;">package.json</code> file' | prepend: include.number %}
+
+{% include components/step.html
+  title=step_title
+  content=step_1
+%}

docs/_includes/steps/create-sass-file.html

@@ -1,6 +1,6 @@
 {% capture scss_bulma %}
 @charset "utf-8";
-@import "{{ include.path }}/bulma/bulma.sass";
+@import "{{ include.path }}";
 {% endcapture %}
 
 {% capture step_3 %}
@@ -19,9 +19,32 @@
   </div>
 {% endcapture %}
 
+{% capture step_3_bis %}
+  <div class="content">
+    <p>
+      Inside the same <code>src</code> folder, add a file called <code>mystyles.scss</code>:
+    </p>
+  </div>
+
+  {% highlight scss %}{{ scss_bulma }}{% endhighlight %}
+
+  <div class="content">
+    <p>
+      Make sure to write the correct path to the <code>bulma</code> folder.
+    </p>
+  </div>
+{% endcapture %}
+
 {% assign step_title = ". Create a Sass file" | prepend: include.number %}
 
-{% include components/step.html
-  title=step_title
-  content=step_3
-%}
+{% if include.bis == true %}
+  {% include components/step.html
+    title=step_title
+    content=step_3_bis
+  %}
+{% else %}
+  {% include components/step.html
+    title=step_title
+    content=step_3
+  %}
+{% endif %}