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

docs/_sass/main.sass

@@ -4,10 +4,16 @@
 
 .bd-figure
   +block
+  align-items: center
   border: 2px solid $white-ter
   border-radius: $radius
+  display: flex
+  flex-direction: column
   text-align: center
+  img
+    margin: 1em
   figcaption
+    align-self: stretch
     background-color: $white-ter
     color: $text-light
     font-size: $size-small
@@ -85,6 +91,8 @@
     display: none
     & + .bd-anchor-title
       padding-top: 0
+      .bd-anchor-link
+        top: 0
 
 // Side
 

docs/_sass/specific.sass

@@ -228,7 +228,7 @@
 .bd-anchor-link
   position: absolute
   right: calc(100% + 1rem)
-  top: 0
+  top: 1.5rem
   +until($widescreen)
     left: 0
     right: auto

docs/css/bulma-docs.css

@@ -10193,12 +10193,20 @@ label.panel-block:hover {
 }
 
 .bd-figure {
+  align-items: center;
   border: 2px solid whitesmoke;
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 
+.bd-figure img {
+  margin: 1em;
+}
+
 .bd-figure figcaption {
+  align-self: stretch;
   background-color: whitesmoke;
   color: #7a7a7a;
   font-size: 0.75rem;
@@ -10309,6 +10317,10 @@ label.panel-block:hover {
   padding-top: 0;
 }
 
+.bd-content hr:first-child + .bd-anchor-title .bd-anchor-link {
+  top: 0;
+}
+
 .bd-side,
 .bd-side-background {
   background-color: #fafafa;
@@ -12175,7 +12187,7 @@ svg {
 .bd-anchor-link {
   position: absolute;
   right: calc(100% + 1rem);
-  top: 0;
+  top: 1.5rem;
 }
 
 @media screen and (max-width: 1279px) {

docs/documentation/customize/concepts.html

@@ -30,6 +30,10 @@ breadcrumb:
       <strong>element/component variables</strong>: variables that are specific to a Bulma element/component
     </li>
   </ul>
+
+  <p>
+    Since these variables carry the <code>!default</code> flat, they can be assigned a <strong>new value</strong> either before or after having been imported.
+  </p>
 </div>
 
 {% include elements/anchor.html name="Strategy" %}

docs/documentation/customize/with-node-sass.html

@@ -35,6 +35,19 @@ npm install node-sass --save-dev
 npm install bulma --save-dev
 {% endcapture %}
 
+{% capture package %}
+{
+  "name": "mybulma",
+  "version": "1.0.0",
+  "main": "sass/mystyles.scss",
+  "license": "MIT",
+  "devDependencies": {
+    "bulma": "^0.7.1",
+    "node-sass": "^4.9.2"
+  }
+}
+{% endcapture %}
+
 {% capture step_2 %}
   <div class="content">
     <p>
@@ -43,57 +56,14 @@ npm install bulma --save-dev
   </div>
 
   {% highlight bash %}{{ dependencies }}{% endhighlight %}
-{% endcapture %}
-
-{% capture scss_bulma %}
-@charset "utf-8";
-@import "../node_modules/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.
+      Your <code>package.json</code> should look like this at this point.
-    </p>
-  </div>
-{% endcapture %}
-
-{% capture step_4 %}
-  <div class="content">
-    <p>
-      Let's create an HTML template which uses several Bulma components.
     </p>
   </div>
 
-  {% highlight html %}{% include snippets/mypage.html %}{% endhighlight %}
+  {% highlight bash %}{{ package }}{% endhighlight %}
-
-  <div class="content">
-    <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>
-  </div>
-
-  <figure class="bd-figure">
-    {%
-      include elements/responsive-image-2x.html
-      path="customize/custom-bulma-01-unstyled"
-      extension="png"
-      alt="Bulma unstyled"
-      width="600"
-      height="300"
-    %}
-    <figcaption>
-      The unstyled page
-    </figcaption>
-  </figure>
 {% endcapture %}
 
 {% capture scripts %}
@@ -120,7 +90,7 @@ npm start
 {% capture step_5 %}
   <div class="content">
     <p>
-      To build a CSS file from a Sass file, we can use <strong>node scripts</strong>:
+      To build a CSS file from a Sass file, we can use <strong>node scripts</strong>. In <code>package.json</code>, add the following:
     </p>
   </div>
 
@@ -140,26 +110,12 @@ npm start
     </ul>
 
     <p>
-      To test it out, go in your terminal and run the following command:
+      To test it out, go in your <strong>terminal</strong> and run the following command:
     </p>
 
     {% highlight bash %}{{ npm_build }}{% endhighlight %}
   </div>
 
-  <figure class="bd-figure">
-    {%
-      include elements/responsive-image-2x.html
-      path="customize/custom-bulma-02-default"
-      extension="png"
-      alt="Bulma default styles"
-      width="600"
-      height="300"
-    %}
-    <figcaption>
-      Bulma's default styles
-    </figcaption>
-  </figure>
-
   <div class="content">
     <p>
       If set up correctly, you will see the following message:
@@ -170,84 +126,29 @@ npm start
 
   <div class="content">
     <p>
-      To watch for changes, just launch the following command:
+      <strong>Reload</strong> the page and it should be styled like this:
+    </p>
+  </div>
+
+  {%
+    include components/figure.html
+    path="customize/custom-bulma-02-default"
+    extension="png"
+    alt="Bulma default styles"
+    width="600"
+    height="300"
+    caption="Bulma's default styles"
+  %}
+
+  <div class="content">
+    <p>
+      To <strong>watch for changes</strong>, just launch the following command:
     </p>
   </div>
 
   {% highlight bash %}{{ npm_watch }}{% endhighlight %}
 {% endcapture %}
 
-{% 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>
-
-  <figure class="bd-figure">
-    {%
-      include elements/responsive-image-2x.html
-      path="customize/custom-bulma-03-styled"
-      extension="png"
-      alt="Bulma customized"
-      width="600"
-      height="300"
-    %}
-    <figcaption>
-      Bulma's customized theme
-    </figcaption>
-  </figure>
-{% endcapture %}
-
 {% include components/step.html
   title='1. Create a <code style="white-space: nowrap;">package.json</code> file'
   content=step_1
@@ -262,16 +163,15 @@ $input-shadow: none;
 
 <hr>
 
-{% include components/step.html
+{% include steps/create-sass-file.html
-  title="3. Create a Sass file"
+  number="3"
-  content=step_3
+  path="../node_modules"
 %}
 
 <hr>
 
-{% include components/step.html
+{% include steps/create-html-page.html
-  title="4. Create an HTML page"
+  number="4"
-  content=step_4
 %}
 
 <hr>
@@ -283,7 +183,6 @@ $input-shadow: none;
 
 <hr>
 
-{% include components/step.html
+{% include steps/add-custom-styles.html
-  title="6. Add your own Bulma styles"
+  number="6"
-  content=step_6
 %}

docs/documentation/customize/with-sass-cli.html

@@ -0,0 +1,146 @@
+---
+title: With sass-cli
+layout: documentation
+doc-tab: customize
+doc-subtab: sass-cli
+breadcrumb:
+- home
+- documentation
+- customize
+- customize-sass-cli
+---
+
+{% capture gem_install %}
+gem install sass
+{% endcapture %}
+
+{% capture gem_test %}
+Sass 3.5.3 (Bleeding Edge)
+{% endcapture %}
+
+{% capture step_1 %}
+  <div class="content">
+    <p>
+      In your terminal, create a new folder called <code>mybulma</code>, navigate to it, then install the <strong>Sass gem</strong>:
+    </p>
+  </div>
+
+  {% highlight bash %}{{ gem_install }}{% endhighlight %}
+
+  <div class="content">
+    <p>
+     To try it out, run <code>sass -v</code> and you should see the following:
+    </p>
+  </div>
+
+  {% highlight bash %}{{ gem_test }}{% endhighlight %}
+
+  <div class="message is-info">
+    <div class="message-body">
+      <p>
+        If you are on <strong>Windows</strong> and use <strong>Chocolatey</strong>, you can try <code>choco install sass</code>.
+      </p>
+      <p>
+        If you are on <strong>Mac</strong> and use <strong>Homebrew</strong>, you can try <code>brew install sass/sass/sass</code>.
+      </p>
+    </div>
+  </div>
+{% endcapture %}
+
+{% capture step_2 %}
+  <div class="content">
+    <p>
+      Get the latest version of Bulma:
+    </p>
+    <p>
+      <a class="button is-primary" href="{{ site.data.meta.download }}">
+        <strong>Download</strong>
+      </a>
+    </p>
+    <p>
+      Unzip it and put the <code>bulma-{{ site.data.meta.version }}</code> folder inside your <code>mybulma</code> folder.
+    </p>
+  </div>
+{% endcapture %}
+
+{% capture build_sass %}
+sass --sourcemap=none sass/mystyles.scss:css/mystyles.css
+{% endcapture %}
+
+{% capture watch_sass %}
+sass --watch --sourcemap=none sass/mystyles.scss:css/mystyles.css
+{% endcapture %}
+
+{% capture step_5 %}
+  <div class="content">
+    <p>
+      In your terminal, type the following command:
+    </p>
+  </div>
+
+  {% highlight bash %}{{ build_sass }}{% endhighlight %}
+
+  <div class="content">
+    <p>
+      <strong>Reload</strong> the page and it should be styled like this:
+    </p>
+  </div>
+
+  {%
+    include components/figure.html
+    path="customize/custom-bulma-02-default"
+    extension="png"
+    alt="Bulma default styles"
+    width="600"
+    height="300"
+    caption="Bulma's default styles"
+  %}
+
+  <div class="content">
+    <p>
+      To <strong>watch for changes</strong>, just launch the following command:
+    </p>
+  </div>
+
+  {% highlight bash %}{{ watch_sass }}{% endhighlight %}
+{% endcapture %}
+
+{% include components/step.html
+  title='1. Install Sass'
+  content=step_1
+%}
+
+<hr>
+
+{% include components/step.html
+  title='2. Download Bulma'
+  content=step_2
+%}
+
+<hr>
+
+{% assign bulma_path = site.data.meta.version | prepend: "../bulma-" %}
+
+{% include steps/create-sass-file.html
+  number="3"
+  path=bulma_path
+%}
+
+<hr>
+
+{% include steps/create-html-page.html
+  number="4"
+%}
+
+<hr>
+
+{% include components/step.html
+  title='5. Build the CSS file'
+  content=step_5
+%}
+
+<hr>
+
+{% include steps/add-custom-styles.html
+  number="6"
+%}