Add Sass CLI steps

docs/_includes/components/figure.html

@@ -0,0 +1,13 @@
+<figure class="bd-figure" style="{{ include.style }}">
+  {%
+    include elements/responsive-image-2x.html
+    path=include.path
+    extension=include.extension
+    alt=include.alt
+    width=include.width
+    height=include.height
+  %}
+  <figcaption>
+    {{ include.caption }}
+  </figcaption>
+</figure>

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

@@ -0,0 +1,80 @@
+{% capture mystyles %}
+@charset "utf-8";
+
+// Import a Google Font
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
+
+// Set your brand colors
+$purple: #8A4D76;
+$pink: #FA7C91;
+$brown: #757763;
+$beige-light: #D0D1CD;
+$beige-lighter: #EFF0EB;
+
+// Update Bulma's global variables
+$family-sans-serif: "Nunito", sans-serif;
+$grey-dark: $brown;
+$grey-light: $beige-light;
+$primary: $purple;
+$link: $pink;
+$widescreen-enabled: false;
+$fullhd-enabled: false;
+
+// Update some of Bulma's component variables
+$body-background-color: $beige-lighter;
+$control-border-width: 2px;
+$input-border-color: transparent;
+$input-shadow: none;
+
+// Import only what you need from Bulma
+@import "../node_modules/bulma/sass/utilities/_all.sass";
+@import "../node_modules/bulma/sass/base/_all.sass";
+@import "../node_modules/bulma/sass/elements/button.sass";
+@import "../node_modules/bulma/sass/elements/container.sass";
+@import "../node_modules/bulma/sass/elements/form.sass";
+@import "../node_modules/bulma/sass/elements/title.sass";
+@import "../node_modules/bulma/sass/layout/hero.sass";
+@import "../node_modules/bulma/sass/layout/section.sass";
+{% endcapture %}
+
+{% capture step_6 %}
+  <div class="content">
+    <p>
+      Replace the content of the <code>mystyles.scss</code> file with the following:
+    </p>
+  </div>
+
+  <div class="highlight-full">
+    {% highlight scss %}{{ mystyles }}{% endhighlight %}
+  </div>
+
+  <div class="content">
+    <p>
+      Since you are watching for changes, simply <strong>save the file</strong> to see the result:
+    </p>
+  </div>
+
+  {%
+  include components/figure.html
+    style="background-color: #EFF0EB;"
+    path="customize/custom-bulma-03-styled"
+    extension="png"
+    alt="Bulma customized"
+    width="600"
+    height="300"
+    caption="Bulma's customized theme"
+  %}
+
+  <div class="content">
+    <p>
+      And voilà! You've managed to install and customize Bulma.
+    </p>
+  </div>
+{% endcapture %}
+
+{% assign step_title = ". Add your own Bulma styles" | prepend: include.number %}
+
+{% include components/step.html
+  title=step_title
+  content=step_6
+%}

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

@@ -0,0 +1,38 @@
+{% capture step_4 %}
+  <div class="content">
+    <p>
+      Create an HTML template which uses several Bulma components.
+    </p>
+  </div>
+
+  {% highlight html %}{% include snippets/mypage.html %}{% endhighlight %}
+
+  <div class="content">
+    <p>
+      Save this file as <code>mypage.html</code>.
+    </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.
+    </p>
+    <p>
+      Open the page in your browser:
+    </p>
+  </div>
+
+  {%
+    include components/figure.html
+    path="customize/custom-bulma-01-unstyled"
+    extension="png"
+    alt="Bulma unstyled"
+    width="600"
+    height="300"
+    caption="The unstyled page"
+  %}
+{% endcapture %}
+
+{% assign step_title = ". Create an HTML page" | prepend: include.number %}
+
+{% include components/step.html
+  title=step_title
+  content=step_4
+%}

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

@@ -0,0 +1,27 @@
+{% capture scss_bulma %}
+@charset "utf-8";
+@import "{{ include.path }}/bulma/bulma.sass";
+{% endcapture %}
+
+{% capture step_3 %}
+  <div class="content">
+    <p>
+      Create a <code>sass</code> folder in which you 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.sass</code> file.
+    </p>
+  </div>
+{% endcapture %}
+
+{% assign step_title = ". Create a Sass file" | prepend: include.number %}
+
+{% include components/step.html
+  title=step_title
+  content=step_3
+%}