Fix button spacing, Add image placeholders

docs/documentation/components/card.html

@@ -17,14 +17,14 @@ doc-subtab: card
 <div class="card">
   <div class="card-image">
     <figure class="image is-4by3">
-      <img src="http://placehold.it/300x225" alt="">
+      <img src="{{site.url}}/images/placeholders/300x225.png" alt="">
     </figure>
   </div>
   <div class="card-content">
     <div class="media">
       <div class="media-left">
         <figure class="image is-32x32">
-          <img src="http://placehold.it/64x64" alt="Image">
+          <img src="{{site.url}}/images/placeholders/64x64.png" alt="Image">
         </figure>
       </div>
       <div class="media-content">

docs/documentation/components/media-object.html

@@ -21,7 +21,7 @@ doc-subtab: media-object
       <article class="media">
         <figure class="media-left structure-item" title="media-left">
           <p class="image is-64x64">
-            <img src="http://placehold.it/128x128">
+            <img src="{{site.url}}/images/placeholders/128x128.png">
           </p>
         </figure>
         <div class="media-content structure-item is-structure-right" title="media-content">
@@ -56,7 +56,7 @@ doc-subtab: media-object
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -101,7 +101,7 @@ doc-subtab: media-object
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -142,7 +142,7 @@ doc-subtab: media-object
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -159,7 +159,7 @@ doc-subtab: media-object
     <article class="media">
       <figure class="media-left">
         <p class="image is-48x48">
-          <img src="http://placehold.it/96x96">
+          <img src="{{site.url}}/images/placeholders/96x96.png">
         </p>
       </figure>
       <div class="media-content">
@@ -186,7 +186,7 @@ doc-subtab: media-object
     <article class="media">
       <figure class="media-left">
         <p class="image is-48x48">
-          <img src="http://placehold.it/96x96">
+          <img src="{{site.url}}/images/placeholders/96x96.png">
         </p>
       </figure>
       <div class="media-content">
@@ -206,7 +206,7 @@ doc-subtab: media-object
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">

docs/documentation/components/modal.html

@@ -75,7 +75,7 @@ doc-subtab: modal
   <div class="modal-background"></div>
   <div class="modal-content">
     <p class="image is-4by3">
-      <img src="http://placehold.it/1280x960">
+      <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
   <button class="modal-close"></button>
@@ -122,7 +122,7 @@ doc-subtab: modal
       <article class="media">
         <div class="media-left">
           <figure class="image is-64x64">
-            <img src="http://placehold.it/128x128" alt="Image">
+            <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
           </figure>
         </div>
         <div class="media-content">
@@ -157,7 +157,7 @@ doc-subtab: modal
   <div class="modal-background"></div>
   <div class="modal-content">
     <p class="image is-4by3">
-      <img src="http://placehold.it/1280x960">
+      <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
   <button class="modal-close"></button>

docs/documentation/elements/box.html

@@ -31,7 +31,7 @@ doc-subtab: box
           <article class="media">
             <div class="media-left">
               <figure class="image is-64x64">
-                <img src="http://placehold.it/128x128" alt="Image">
+                <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
               </figure>
             </div>
             <div class="media-content">
@@ -66,7 +66,7 @@ doc-subtab: box
   <article class="media">
     <div class="media-left">
       <figure class="image is-64x64">
-        <img src="http://placehold.it/128x128" alt="Image">
+        <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
       </figure>
     </div>
     <div class="media-content">

docs/documentation/elements/form.html

@@ -38,7 +38,7 @@ doc-subtab: form
 <label class="label">Username</label>
 <p class="control has-icon has-icon-right">
   <input class="input is-success" type="text" placeholder="Text input" value="bulma">
-  <span class="icon">
+  <span class="icon is-small">
     <i class="fa fa-check"></i>
   </span>
   <span class="help is-success">This username is available</span>
@@ -46,7 +46,7 @@ doc-subtab: form
 <label class="label">Email</label>
 <p class="control has-icon has-icon-right">
   <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
-  <span class="icon">
+  <span class="icon is-small">
     <i class="fa fa-warning"></i>
   </span>
   <span class="help is-danger">This email is invalid</span>
@@ -323,13 +323,13 @@ doc-subtab: form
 {% capture icons_example %}
 <p class="control has-icon">
   <input class="input" type="email" placeholder="Email">
-  <span class="icon">
+  <span class="icon is-small">
     <i class="fa fa-envelope"></i>
   </span>
 </p>
 <p class="control has-icon">
   <input class="input" type="password" placeholder="Password">
-  <span class="icon">
+  <span class="icon is-small">
     <i class="fa fa-lock"></i>
   </span>
 </p>

docs/documentation/elements/icon.html

@@ -19,16 +19,17 @@ doc-subtab: icon
       <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
     </div>
 
-    <div class="example">
-      <span class="icon">
-        <i class="fa fa-home"></i>
-      </span>
-    </div>
-
-{% highlight html %}
+{% capture icon_example %}
 <span class="icon">
   <i class="fa fa-home"></i>
 </span>
+{% endcapture %}
+    <div class="example">
+      {{icon_example}}
+    </div>
+
+{% highlight html %}
+{{icon_example}}
 {% endhighlight %}
 
     <div class="content">

docs/documentation/elements/image.html

@@ -21,13 +21,13 @@ doc-subtab: image
 
     <div class="example">
       <figure class="image is-128x128">
-        <img src="http://placehold.it/128x128">
+        <img src="{{site.url}}/images/placeholders/128x128.png">
       </figure>
     </div>
 
 {% highlight html %}
 <figure class="image is-128x128">
-  <img src="http://placehold.it/128x128">
+  <img src="{{site.url}}/images/placeholders/128x128.png">
 </figure>
 {% endhighlight %}
 
@@ -42,37 +42,37 @@ doc-subtab: image
       <tbody>
         <tr>
           <td><code>image is-16x16</code></td>
-          <td><figure class="image is-16x16"><img src="http://placehold.it/16x16"></figure></td>
+          <td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
           <td>16x16px</td>
         </tr>
         <tr>
           <td><code>image is-24x24</code></td>
-          <td><figure class="image is-24x24"><img src="http://placehold.it/24x24"></figure></td>
+          <td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
           <td>24x24px</td>
         </tr>
         <tr>
           <td><code>image is-32x32</code></td>
-          <td><figure class="image is-32x32"><img src="http://placehold.it/32x32"></figure></td>
+          <td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
           <td>32x32px</td>
         </tr>
         <tr>
           <td><code>image is-48x48</code></td>
-          <td><figure class="image is-48x48"><img src="http://placehold.it/48x48"></figure></td>
+          <td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
           <td>48x48px</td>
         </tr>
         <tr>
           <td><code>image is-64x64</code></td>
-          <td><figure class="image is-64x64"><img src="http://placehold.it/64x64"></figure></td>
+          <td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
           <td>64x64px</td>
         </tr>
         <tr>
           <td><code>image is-96x96</code></td>
-          <td><figure class="image is-96x96"><img src="http://placehold.it/96x96"></figure></td>
+          <td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
           <td>96x96px</td>
         </tr>
         <tr>
           <td><code>image is-128x128</code></td>
-          <td><figure class="image is-128x128"><img src="http://placehold.it/128x128"></figure></td>
+          <td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
           <td>128x128px</td>
         </tr>
       </tbody>
@@ -86,13 +86,13 @@ doc-subtab: image
 
     <div class="example">
       <figure class="image is-128x128">
-        <img src="http://placehold.it/256x256">
+        <img src="{{site.url}}/images/placeholders/256x256.png">
       </figure>
     </div>
 
 {% highlight html %}
 <figure class="image is-128x128">
-  <img src="http://placehold.it/256x256">
+  <img src="{{site.url}}/images/placeholders/256x256.png">
 </figure>
 {% endhighlight %}
 
@@ -108,32 +108,32 @@ doc-subtab: image
       <tbody>
         <tr>
           <td><code>image is-square</code></td>
-          <td><figure class="image is-square"><img src="http://placehold.it/480x480"></figure></td>
+          <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
           <td>Square (or 1by1)</td>
         </tr>
         <tr>
           <td><code>image is-1by1</code></td>
-          <td><figure class="image is-1by1"><img src="http://placehold.it/480x480"></figure></td>
+          <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
           <td>1 by 1</td>
         </tr>
         <tr>
           <td><code>image is-4by3</code></td>
-          <td><figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure></td>
+          <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
           <td>4 by 3</td>
         </tr>
         <tr>
           <td><code>image is-3by2</code></td>
-          <td><figure class="image is-3by2"><img src="http://placehold.it/480x320"></figure></td>
+          <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
           <td>3 by 2</td>
         </tr>
         <tr>
           <td><code>image is-16by9</code></td>
-          <td><figure class="image is-16by9"><img src="http://placehold.it/640x360"></figure></td>
+          <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
           <td>16 by 9</td>
         </tr>
         <tr>
           <td><code>image is-2by1</code></td>
-          <td><figure class="image is-2by1"><img src="http://placehold.it/640x320"></figure></td>
+          <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
           <td>2 by 1</td>
         </tr>
       </tbody>

docs/documentation/grid/tiles.html

@@ -44,7 +44,7 @@ doc-subtab: tiles
               <p class="title">Middle tile</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -93,7 +93,7 @@ doc-subtab: tiles
           <p class="title">Middle tile</p>
           <p class="subtitle">With an image</p>
           <figure class="image is-4by3">
-            <img src="http://placehold.it/640x480">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
           </figure>
         </article>
       </div>
@@ -383,7 +383,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -490,7 +490,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -583,7 +583,7 @@ tile is-ancestor
           <p class="title">Middle box</p>
           <p class="subtitle">With an image</p>
           <figure class="image is-4by3">
-            <img src="http://placehold.it/640x480">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
           </figure>
         </article>
       </div>

docs/documentation/overview/start.html

@@ -14,7 +14,9 @@ doc-subtab: start
     <hr>
 
     <article class="media is-large">
-      <div class="media-number">1</div>
+      <div class="media-left">
+        <p class="title is-5">1</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Use <strong>NPM</strong> <em>(recommended)</em>:
@@ -26,7 +28,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">2</div>
+      <div class="media-left">
+        <p class="title is-5">2</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
@@ -37,7 +41,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">3</div>
+      <div class="media-left">
+        <p class="title is-5">3</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Download from the <strong>repository</strong>
@@ -70,7 +76,9 @@ npm install bulma
     </div>
 
     <article class="media is-large">
-      <div class="media-number">1</div>
+      <div class="media-left">
+        <p class="title is-5">1</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Download</strong> the source files:
@@ -83,7 +91,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">2</div>
+      <div class="media-left">
+        <p class="title is-5">2</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Set</strong> your variables:<br>
@@ -107,7 +117,9 @@ $family-primary: $family-serif // Use the new serif family
     </article>
 
     <article class="media is-large">
-      <div class="media-number">3</div>
+      <div class="media-left">
+        <p class="title is-5">3</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Import</strong> Bulma <em>after</em> having set your variables:<br>