Add Webpack page

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