Add getting started

docs/documentation/elements/tag.html

@@ -123,7 +123,7 @@ variables:
 
 {% capture tags_delete_addons %}
 <div class="tags has-addons">
-  <span class="tag is-info">Alex Smith</span>
+  <span class="tag is-danger">Alex Smith</span>
   <a class="tag is-delete"></a>
 </div>
 {% endcapture %}

docs/documentation/overview/start.html

@@ -9,11 +9,28 @@ doc-subtab: start
 
 <section class="section">
   <div class="container">
-    <h1 class="title"><strong>3</strong> ways to start</h1>
+    <h1 class="title">Getting started</h1>
     <h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
 
     <hr>
 
+    <div class="content">
+      <p>
+        There are several ways to <strong>get started</strong> with Bulma. You can either:
+      </p>
+      <ol>
+        <li>
+          use <strong>npm</strong> to install the Bulma package
+        </li>
+        <li>
+          use the cdnjs <strong>CDN</strong> to link to the Bulma stylesheet
+        </li>
+        <li>
+          use the <strong>GitHub repository</strong> to get the latest development version
+        </li>
+      </ol>
+    </div>
+
     <article class="media is-large">
       <div class="media-left">
         <p class="title is-5">1</p>
@@ -22,9 +39,7 @@ doc-subtab: start
         <p class="title is-5">
           Use <strong>NPM</strong> <em>(recommended)</em>:
         </p>
-{% highlight bash %}
-npm install bulma
-{% endhighlight %}
+        {% highlight bash %}npm install bulma{% endhighlight %}
       </div>
     </article>
 
@@ -62,10 +77,21 @@ npm install bulma
       </div>
       <div class="message-body">
         <p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
-{% highlight html %}
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-{% endhighlight %}
+        {% highlight html %}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">{% endhighlight %}
       </div>
     </div>
+
+    {% include heading.html name="Starter template" %}
+
+    <div class="content">
+      <p>
+        If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
+      </p>
+    </div>
+
+    <div class="example highlight-full">
+      {% highlight html %}{% include getting-started.html %}{% endhighlight %}
+    </div>
+
   </div>
 </section>