Add checkbox and radio

diff --git a/docs/_includes/subnav-elements.html b/docs/_includes/subnav-elements.html
index 4252952075cb12db583fb29aa600c6bdaee4e938..21729ef2124b8b3428ae5291f8bec4b5b13d6dd0 100644 (file)
--- a/docs/_includes/subnav-elements.html
+++ b/docs/_includes/subnav-elements.html
@@ -13,9 +13,6 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/">
         Delete
       </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/form/">
-        Form
-      </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'icon' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/icon/">
         Icon
       </a>

diff --git a/docs/_includes/subnav-form.html b/docs/_includes/subnav-form.html
index 46ef68ee4897dbd708037fbec473c40b29fb7d11..76e0503327a7a2f20db9183ef52728a64fa9e4e6 100644 (file)
--- a/docs/_includes/subnav-form.html
+++ b/docs/_includes/subnav-form.html
@@ -19,9 +19,6 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'radio' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/radio/">
         Radio
       </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'other' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/other/">
-        Other
-      </a>
     </div>
   </div>
 </nav>

diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index ca5f36eeb00bdbe197dd3115ce6b3d814bc67e87..616a5bf12e3aa985ca01de85baac6201073acabb 100644 (file)
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -4,6 +4,8 @@ doc-tab: elements
 doc-subtab: form
 ---
 
+<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/form/general/">
+
 {% capture form_example %}
 <div class="field">
   <label class="label">Name</label>

diff --git a/docs/documentation/form/checkbox.html b/docs/documentation/form/checkbox.html
new file mode 100644 (file)
index 0000000..da2a44f
--- /dev/null
+++ b/docs/documentation/form/checkbox.html
@@ -0,0 +1,78 @@
+---
+layout: documentation
+doc-tab: form
+doc-subtab: checkbox
+---
+
+{% capture checkbox_example %}
+<label class="checkbox">
+  <input type="checkbox">
+  Remember me
+</label>
+{% endcapture %}
+
+{% capture checkbox_link_example %}
+<label class="checkbox">
+  <input type="checkbox">
+  I agree to the <a href="#">terms and conditions</a>
+</label>
+{% endcapture %}
+
+{% capture checkbox_disabled_example %}
+<label class="checkbox" disabled>
+  <input type="checkbox" disabled>
+  Save my preferences
+</label>
+{% endcapture %}
+
+{% include subnav-form.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Checkbox</h1>
+    <h2 class="subtitle">
+      The 2-state <strong>checkbox</strong> in its native format
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>checkbox</code> class is a simple wrapper around the <code>&lt;input type="checkbox"&gt;</code> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{checkbox_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{checkbox_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="content">
+      <p>
+        You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{checkbox_link_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{checkbox_link_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{checkbox_disabled_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/form/radio.html b/docs/documentation/form/radio.html
new file mode 100644 (file)
index 0000000..dc0df9c
--- /dev/null
+++ b/docs/documentation/form/radio.html
@@ -0,0 +1,109 @@
+---
+layout: documentation
+doc-tab: form
+doc-subtab: radio
+---
+
+{% capture radio_example %}
+<div class="control">
+  <label class="radio">
+    <input type="radio" name="answer">
+    Yes
+  </label>
+  <label class="radio">
+    <input type="radio" name="answer">
+    No
+  </label>
+</div>
+{% endcapture %}
+
+{% capture radio_default_example %}
+<div class="control">
+  <label class="radio">
+    <input type="radio" name="foobar">
+    Foo
+  </label>
+  <label class="radio">
+    <input type="radio" name="foobar" checked>
+    Bar
+  </label>
+</div>
+{% endcapture %}
+
+{% capture radio_disabled_example %}
+<div class="control">
+  <label class="radio">
+    <input type="radio" name="rsvp">
+    Going
+  </label>
+  <label class="radio">
+    <input type="radio" name="rsvp">
+    Not going
+  </label>
+  <label class="radio" disabled>
+    <input type="radio" name="rsvp" disabled>
+    Maybe
+  </label>
+</div>
+{% endcapture %}
+
+{% include subnav-form.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Radio</h1>
+    <h2 class="subtitle">
+      The mutually exclusive <strong>radio buttons</strong> in their native format
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>radio</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
+      </p>
+      <p>
+        Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{radio_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{radio_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="content">
+      <p>
+        You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the <code>&lt;input&gt;</code> element.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{radio_default_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{radio_default_example}}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="content">
+      <p>
+        You can add <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the <code>&lt;label&gt;</code> and the <code>&lt;input&gt;</code>.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        {{radio_disabled_example}}
+      </div>
+      <div class="column is-half highlight-full">
+        {% highlight html %}{{radio_disabled_example}}{% endhighlight %}
+      </div>
+    </div>
+  </div>
+</section>