Add babel

docs/documentation/components/modal.html

@@ -32,7 +32,7 @@ doc-subtab: modal
         </li>
       </ul>
       <p>
-        <a class="button is-primary is-large modal-button" data-target="#modal">Launch example modal</a>
+        <a class="button is-primary is-large modal-button" data-target="modal">Launch example modal</a>
       </p>
     </div>
 
@@ -42,7 +42,7 @@ doc-subtab: modal
   <div class="modal-content">
     <!-- Any other Bulma elements you want -->
   </div>
-  <button class="modal-close"></button>
+  <button class="modal-close is-large"></button>
 </div>
 {% endhighlight %}
 
@@ -66,7 +66,7 @@ doc-subtab: modal
     <div class="content">
       <p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
       <p>
-        <a class="button is-primary is-large modal-button" data-target="#modal-bis">Launch image modal</a>
+        <a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
       </p>
     </div>
 
@@ -78,7 +78,7 @@ doc-subtab: modal
       <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
-  <button class="modal-close"></button>
+  <button class="modal-close is-large"></button>
 </div>
 {% endhighlight %}
 
@@ -89,7 +89,7 @@ doc-subtab: modal
     <div class="content">
       <p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
       <p>
-        <a class="button is-primary is-large modal-button" data-target="#modal-ter">Launch modal card</a>
+        <a class="button is-primary is-large modal-button" data-target="modal-ter">Launch modal card</a>
       </p>
     </div>
 
@@ -150,7 +150,7 @@ doc-subtab: modal
       </article>
     </div>
   </div>
-  <button class="modal-close"></button>
+  <button class="modal-close is-large"></button>
 </div>
 
 <div id="modal-bis" class="modal">
@@ -160,7 +160,7 @@ doc-subtab: modal
       <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
-  <button class="modal-close"></button>
+  <button class="modal-close is-large"></button>
 </div>
 
 <div id="modal-ter" class="modal">

docs/documentation/components/navbar.html

@@ -0,0 +1,18 @@
+---
+layout: documentation
+doc-tab: components
+doc-subtab: navbar
+---
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Navbar</h1>
+    <h2 class="subtitle">
+      A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
+    </h2>
+
+    <hr>
+  </div>
+</section>

docs/documentation/elements/button.html

@@ -236,12 +236,7 @@ doc-subtab: button
   </div>
 </div>
 
-    <p id="static-button" style="margin-bottom: 0.5rem;">
-      <span class="tag is-success">New!</span>
-      <span class="tag is-info">0.4.2</span>
-    </p>
-
-    <h4 class="subtitle">
+    <h4 id="static-button" class="subtitle">
       Static
     </h4>
 
@@ -252,6 +247,10 @@ doc-subtab: button
   <div class="column">
 
     <div class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+        <span class="tag is-info">0.4.2</span>
+      </p>
       <p>
         You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/elements/form#form-addons">form addons</a>.
       </p>

docs/documentation/elements/form.html

@@ -803,12 +803,11 @@ doc-subtab: form
       <p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
     </div>
 
-    <p style="margin-bottom: 0.5rem;">
-      <span class="tag is-success">New!</span>
-      <span class="tag is-info">0.4.2</span>
-    </p>
-
     <div class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+        <span class="tag is-info">0.4.2</span>
+      </p>
       <p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
     </div>
 
@@ -1144,7 +1143,8 @@ doc-subtab: form
 <div class="content">
   <p>
     <span class="tag is-success">New!</span>
-    <br>
+  </p>
+  <p>
     To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>.field-label</code> comes with <strong>4 size modifiers</strong>:
   </p>
   <ul>

docs/documentation/elements/table.html

@@ -47,7 +47,8 @@ doc-subtab: table
       <p>
         <span class="tag is-success">New!</span>
         <span class="tag is-info">0.4.2</span>
-        <br>
+      </p>
+      <p>
         You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code>&lt;tr&gt;</code>
       </p>
     </div>