Init v1

docs/documentation/form/general.html

@@ -1,6 +1,7 @@
 ---
 title: Form controls
-layout: documentation
+layout: docs
+theme: library
 doc-tab: form
 doc-subtab: general
 breadcrumb:
@@ -18,7 +19,6 @@ variables_keys:
 - $label-weight
 - $help-size
 ---
-
 {% capture example %}
 <div class="field">
   <label class="label">Name</label>
@@ -345,9 +345,9 @@ variables_keys:
     <input class="input" type="text" placeholder="Find a repository">
   </div>
   <div class="control">
-    <a class="button is-info">
+    <button class="button is-info">
       Search
-    </a>
+    </button>
   </div>
 </div>
 {% endcapture %}
@@ -380,9 +380,9 @@ variables_keys:
     <input class="input" type="text" placeholder="Amount of money">
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Transfer
-    </a>
+    </button>
   </p>
 </div>
 
@@ -400,9 +400,9 @@ variables_keys:
     <input class="input" type="text" placeholder="Amount of money">
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Transfer
-    </a>
+    </button>
   </p>
 </div>
 {% endcapture %}
@@ -448,9 +448,9 @@ variables_keys:
     <input class="input" type="text" placeholder="Amount of money">
   </p>
   <p class="control">
-    <a class="button is-primary">
+    <button class="button is-primary">
       Transfer
-    </a>
+    </button>
   </p>
 </div>
 {% endcapture %}
@@ -470,9 +470,9 @@ variables_keys:
     <input class="input" type="text" placeholder="Amount of money">
   </p>
   <p class="control">
-    <a class="button is-primary">
+    <button class="button is-primary">
       Transfer
-    </a>
+    </button>
   </p>
 </div>
 {% endcapture %}
@@ -480,9 +480,9 @@ variables_keys:
 {% capture group_example %}
 <div class="field is-grouped">
   <p class="control">
-    <a class="button is-primary">
+    <button class="button is-primary">
       Submit
-    </a>
+    </button>
   </p>
   <p class="control">
     <a class="button is-light">
@@ -495,9 +495,9 @@ variables_keys:
 {% capture group_centered_example %}
 <div class="field is-grouped is-grouped-centered">
   <p class="control">
-    <a class="button is-primary">
+    <button class="button is-primary">
       Submit
-    </a>
+    </button>
   </p>
   <p class="control">
     <a class="button is-light">
@@ -510,9 +510,9 @@ variables_keys:
 {% capture group_right_example %}
 <div class="field is-grouped is-grouped-right">
   <p class="control">
-    <a class="button is-primary">
+    <button class="button is-primary">
       Submit
-    </a>
+    </button>
   </p>
   <p class="control">
     <a class="button is-light">
@@ -528,9 +528,9 @@ variables_keys:
     <input class="input" type="text" placeholder="Find a repository">
   </p>
   <p class="control">
-    <a class="button is-info">
+    <button class="button is-info">
       Search
-    </a>
+    </button>
   </p>
 </div>
 {% endcapture %}
@@ -538,69 +538,69 @@ variables_keys:
 {% capture group_multiline_example %}
 <div class="field is-grouped is-grouped-multiline">
   <p class="control">
-    <a class="button">
+    <button class="button">
       One
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Two
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Three
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Four
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Five
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Six
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Seven
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Eight
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Nine
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Ten
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Eleven
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Twelve
-    </a>
+    </button>
   </p>
   <p class="control">
-    <a class="button">
+    <button class="button">
       Thirteen
-    </a>
+    </button>
   </p>
 </div>
 {% endcapture %}
@@ -814,11 +814,10 @@ variables_keys:
 
 <div class="content">
   <p>
-    Bulma supports the following native <strong>HTML form elements</strong>: <code>&lt;form&gt;</code> <code>&lt;button&gt;</code> <code>&lt;input&gt;</code> <code>&lt;textarea&gt;</code> and <code>&lt;label&gt;</code>.
-  </p>
-  <p>
-    The following CSS <strong>classes</strong> are supported:
+    Bulma supports the following native <strong>HTML form elements</strong>: <code>&lt;form&gt;</code>
+    <code>&lt;button&gt;</code> <code>&lt;input&gt;</code> <code>&lt;textarea&gt;</code> and <code>&lt;label&gt;</code>.
   </p>
+  <p>The following CSS <strong>classes</strong> are supported:</p>
   <ul>
     <li><code>label</code></li>
     <li><code>input</code></li>
@@ -833,15 +832,17 @@ variables_keys:
 
 <div class="content">
   <p>
-    To maintain an evenly balanced design, Bulma provides a very useful <code>control</code> container with which you can <strong>wrap</strong> the form controls.
+    To maintain an evenly balanced design, Bulma provides a very useful <code>control</code> container with which you
+    can <strong>wrap</strong> the form controls.
     <br>
-    When combining several controls in a <strong>form</strong>, use the <code>field</code> class as a <strong>container</strong>, to keep the spacing consistent.
+    When combining several controls in a <strong>form</strong>, use the <code>field</code> class as a
+    <strong>container</strong>, to keep the spacing consistent.
   </p>
 </div>
 
-{% include elements/anchor.html name="Complete form example" %}
+{% include docs/elements/anchor.html name="Complete form example" %}
 
-{% include elements/snippet.html content=example more=true %}
+{% include docs/elements/snippet.html content=example more=true %}
 
 <div class="content">
   <p>
@@ -849,7 +850,7 @@ variables_keys:
   </p>
 </div>
 
-{% include elements/anchor.html name="Form field" %}
+{% include docs/elements/anchor.html name="Form field" %}
 
 <div class="content">
   <p>The <code>field</code> container is a simple container for:</p>
@@ -860,19 +861,21 @@ variables_keys:
   </ul>
 </div>
 
-{% include elements/snippet.html content=field_example %}
+{% include docs/elements/snippet.html content=field_example %}
 
 <div class="content">
   <p>This container allows form fields to be <strong>spaced consistently</strong>.</p>
 </div>
 
-{% include elements/snippet.html content=fields_example %}
+{% include docs/elements/snippet.html content=fields_example %}
 
-{% include elements/anchor.html name="Form control" %}
+{% include docs/elements/anchor.html name="Form control" %}
 
 <div class="content">
   <p>
-    The Bulma <code>control</code> is a versatile <strong>block</strong> container meant to <strong>enhance single form controls</strong>. Because it has the same height as the element that it wraps, it can <strong class="has-text-danger">only contain</strong> the following Bulma elements:
+    The Bulma <code>control</code> is a versatile <strong>block</strong> container meant to
+    <strong>enhance single form controls</strong>. Because it has the same height as the element that it wraps, it can
+    <strong class="has-text-danger">only contain</strong> the following Bulma elements:
   </p>
 
   <ul>
@@ -881,33 +884,23 @@ variables_keys:
     <li><code>button</code></li>
     <li><code>icon</code></li>
   </ul>
-  <p>
-    This container gives the ability to:
-  </p>
+  <p>This container gives the ability to:</p>
   <ul>
-    <li>
-      keep the <strong>spacing</strong> consistent
-    </li>
-    <li>
-      combine form controls into a <strong>group</strong>
-    </li>
-    <li>
-      combine form controls into a <strong>list</strong>
-    </li>
-    <li>
-      append and prepend <strong>icons</strong> to a form control
-    </li>
+    <li>keep the <strong>spacing</strong> consistent</li>
+    <li>combine form controls into a <strong>group</strong></li>
+    <li>combine form controls into a <strong>list</strong></li>
+    <li>append and prepend <strong>icons</strong> to a form control</li>
   </ul>
 </div>
 
-{% include elements/snippet.html content=control_input_example %}
+{% include docs/elements/snippet.html content=control_input_example %}
 
-{% include elements/snippet.html content=control_select_example %}
+{% include docs/elements/snippet.html content=control_select_example %}
 
-{% include elements/snippet.html content=control_button_example %}
+{% include docs/elements/snippet.html content=control_button_example %}
 
 <!-- Font Awesome Icons -->
-{% include elements/anchor.html name="With icons" %}
+{% include docs/elements/anchor.html name="With icons" %}
 
 <div class="content">
   <p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
@@ -915,118 +908,130 @@ variables_keys:
     <li>
       <code>has-icons-left</code>
     </li>
-    <li>
-      and/or <code>has-icons-right</code>
-    </li>
+    <li>and/or <code>has-icons-right</code></li>
   </ul>
   <p>You also need to add a modifier on the <strong>icon</strong>:</p>
   <ul>
-    <li>
-      <code>icon is-left</code> if <code>has-icons-left</code> is used
-    </li>
-    <li>
-      <code>icon is-right</code> if <code>has-icons-right</code> is used
-    </li>
+    <li><code>icon is-left</code> if <code>has-icons-left</code> is used</li>
+    <li><code>icon is-right</code> if <code>has-icons-right</code> is used</li>
   </ul>
   <p>The size of the <strong>input</strong> will define the size of the icon container.</p>
 </div>
 
-{% include elements/snippet.html content=icons_example clipped=true %}
+{% include docs/elements/snippet.html content=icons_example clipped=true %}
+
+<div class="content">
+  <p>You can append icons to <strong>select dropdowns</strong> as well.</p>
+</div>
+
+{% include docs/elements/snippet.html content=select_icons_example %}
 
 <div class="content">
   <p>
-    You can append icons to <strong>select dropdowns</strong> as well.
+    If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size
+    of the input <em>or</em> of the icon.
   </p>
 </div>
 
-{% include elements/snippet.html content=select_icons_example %}
+{% include docs/elements/snippet.html content=has_icons_small_example %}
+
+{% include docs/elements/snippet.html content=has_icons_normal_example clipped=true %}
+
+{% include docs/elements/snippet.html content=has_icons_medium_example clipped=true %}
+
+{% include docs/elements/snippet.html content=has_icons_large_example clipped=true %}
+
+{% include docs/elements/anchor.html name="Form addons" %}
 
 <div class="content">
   <p>
-    If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
+    If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the
+    <code>field</code> container:
   </p>
 </div>
 
-{% include elements/snippet.html content=has_icons_small_example %}
-
-{% include elements/snippet.html content=has_icons_normal_example clipped=true %}
-
-{% include elements/snippet.html content=has_icons_medium_example clipped=true %}
-
-{% include elements/snippet.html content=has_icons_large_example clipped=true %}
-
-{% include elements/anchor.html name="Form addons" %}
-
-<div class="content">
-  <p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
-</div>
-
-{% include elements/snippet.html content=addons_example %}
+{% include docs/elements/snippet.html content=addons_example %}
 
 <div class="content">
   <p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
 </div>
 
 <div class="content">
-  <p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
+  <p>
+    It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.
+  </p>
 </div>
 
-{% include elements/snippet.html content=addons_static_example %}
-
-<div class="content">
-  <p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
-</div>
-
-{% include elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
-
-<div class="content">
-  <p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
-</div>
-
-{% include elements/snippet.html content=addons_expanded_fullwidth_example %}
-
-<div class="content">
-  <p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifiers to alter the <strong>alignment</strong>.</p>
-</div>
-
-{% include elements/snippet.html content=addons_center_example %}
-
-{% include elements/snippet.html content=addons_right_example %}
-
-{% include elements/anchor.html name="Form group" %}
+{% include docs/elements/snippet.html content=addons_static_example %}
 
 <div class="content">
   <p>
-    If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>field</code> container.
+    Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the
+    input):
   </p>
 </div>
 
-{% include elements/snippet.html content=group_example %}
-
-<div class="content">
-    Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifiers to alter the <strong>alignment</strong>.
-  </p>
-</div>
-
-{% include elements/snippet.html content=group_centered_example %}
-
-{% include elements/snippet.html content=group_right_example %}
+{% include docs/elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
 
 <div class="content">
   <p>
-    Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong> with.
+    If you want a full width select dropdown, pair <code>control is-expanded</code> with
+    <code>select is-fullwidth</code>.
   </p>
 </div>
 
-{% include elements/snippet.html content=group_expanded_example %}
+{% include docs/elements/snippet.html content=addons_expanded_fullwidth_example %}
+
+<div class="content">
+  <p>
+    Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifiers to alter the
+    <strong>alignment</strong>.
+  </p>
+</div>
+
+{% include docs/elements/snippet.html content=addons_center_example %}
+
+{% include docs/elements/snippet.html content=addons_right_example %}
+
+{% include docs/elements/anchor.html name="Form group" %}
+
+<div class="content">
+  <p>
+    If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the
+    <code>field</code> container.
+  </p>
+</div>
+
+{% include docs/elements/snippet.html content=group_example %}
+
+<div class="content">
+  <p>
+    Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifiers to alter the
+    <strong>alignment</strong>.
+  </p>
+</div>
+
+{% include docs/elements/snippet.html content=group_centered_example %}
+
+{% include docs/elements/snippet.html content=group_right_example %}
+
+<div class="content">
+  <p>
+    Add the <code>is-expanded</code> modifier on the control element you want to
+    <strong>fill up the remaining space</strong> with.
+  </p>
+</div>
+
+{% include docs/elements/snippet.html content=group_expanded_example %}
 
 <div id="form-group-multiline" class="content">
   <p>
-    Add the <code>is-grouped-multiline</code> modifier to allow controls to fill up <strong>multiple lines</strong>. This is ideal for a long list of controls.
+    Add the <code>is-grouped-multiline</code> modifier to allow controls to fill up <strong>multiple lines</strong>.
+    This is ideal for a long list of controls.
   </p>
 </div>
 
-{% include elements/snippet.html content=group_multiline_example clipped=true %}
+{% include docs/elements/snippet.html content=group_multiline_example clipped=true %}
 
 <div class="message is-info">
   <div class="message-header">
@@ -1035,40 +1040,39 @@ variables_keys:
   <div class="message-body">
     <div class="content">
       <p>
-        If you only need a list of <em>buttons</em>, try out the new <code>buttons</code> class with which you can create a <a href="{{ site.url }}/documentation/elements/button/#list-of-buttons">multiline list of buttons</a>.
+        If you only need a list of <em>buttons</em>, try out the new <code>buttons</code> class with which you can
+        create a <a href="{{ site.url }}/documentation/elements/button/#list-of-buttons">multiline list of buttons</a>.
       </p>
     </div>
   </div>
 </div>
 
-{% include elements/anchor.html name="Horizontal form" %}
+{% include docs/elements/anchor.html name="Horizontal form" %}
 
 <div class="content">
-  <p>If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the <code>field</code> container, in which you include:</p>
+  <p>
+    If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the
+    <code>field</code> container, in which you include:
+  </p>
   <ul>
-    <li>
-      <code>field-label</code> for the side label
-    </li>
-    <li>
-      <code>field-body</code> for the input/select/textarea container
-    </li>
+    <li><code>field-label</code> for the side label</li>
+    <li><code>field-body</code> for the input/select/textarea container</li>
   </ul>
   <p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
 </div>
 
-{% include elements/snippet.html content=horizontal_form_example horizontal=true more=true %}
+{% include docs/elements/snippet.html content=horizontal_form_example horizontal=true more=true %}
 
 <div class="content">
   <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>:
+    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>
     <li>
       <code>is-small</code>
     </li>
-    <li>
-      <code>is-normal</code> for any <code>input</code> or <code>button</code>
-    </li>
+    <li><code>is-normal</code> for any <code>input</code> or <code>button</code></li>
     <li>
       <code>is-medium</code>
     </li>
@@ -1078,23 +1082,25 @@ variables_keys:
   </ul>
 </div>
 
-{% include elements/snippet.html content=field_label_example horizontal=true more=true %}
+{% include docs/elements/snippet.html content=field_label_example horizontal=true more=true %}
 
 {% capture custom_message %}
   Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
 {% endcapture %}
 
-{% include elements/anchor.html name="Disabled form" %}
+{% include docs/elements/anchor.html name="Disabled form" %}
 
 <div class="content">
   <p>
-    You can disable part or a whole form by wrapping a set of controls in a <strong>fieldset</strong> with a <code>disabled</code> HTML attribute.
+    You can disable part or a whole form by wrapping a set of controls in a <strong>fieldset</strong> with a
+    <code>disabled</code> HTML attribute.
   </p>
 </div>
 
-{% include elements/snippet.html content=disabled_fields_example %}
+{% include docs/elements/snippet.html content=disabled_fields_example %}
 
-{% include components/variables.html
+{%
+  include docs/components/variables.html
   anchor_name='Control variables'
   type='element'
   variables_keys=page.variables_control_keys
@@ -1103,7 +1109,8 @@ variables_keys:
   file='controls'
 %}
 
-{% include components/variables.html
+{%
+  include docs/components/variables.html
   anchor_name='Form variables'
   type='element'
   variables_keys=page.variables_keys