Updated input control documentation, resolves #40

docs/input_control.html

@@ -78,6 +78,13 @@
                 <div class="input-group"><label for="username">username</label> <input type="email" value="" id="username" placeholder="username">&nbsp;</div>
                 <div class="input-group"><label for="pwd">password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
               </fieldset>
+              </form>
+			  <form>
+              <fieldset>
+                <legend>Fluid form</legend>
+                <div class="input-group fluid"><label for="username">username</label> <input type="email" value="" id="username" placeholder="username"></div>
+                <div class="input-group fluid"><label for="pwd">password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
+              </fieldset>
               </form>
               <form>
               <fieldset>
@@ -119,16 +126,16 @@
               </div>
               <div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
                 <p>Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <code>&lt;form&gt;</code> element and add your <code>&lt;input&gt;</code> elements inside. Link them to <code>&lt;label&gt;</code> elements for ease of acces and you are pretty much set. We highly recommend using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements to annotate your forms as well, but you can skip them if you wish.</p>
-                <p>Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. If you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
+                <p>Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
                 <h3>Sample code</h3>
                 <pre>&lt;form&gt;
   &lt;fieldset&gt;
     &lt;legend&gt;Simple form&lt;/legend&gt;
-    &lt;div class=&quot;input-group&quot;&gt;
+    &lt;div class=&quot;input-group fluid&quot;&gt;
       &lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
       &lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
     &lt;/div&gt;
-    &lt;div class=&quot;input-group&quot;&gt;
+    &lt;div class=&quot;input-group fluid&quot;&gt;
       &lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt;
       &lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt;
     &lt;/div&gt;
@@ -142,6 +149,7 @@
                 <li>Using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended for a better presentational effect. Using these elements is a matter of personal preference, however try to keep your forms consistent (i.e. either use them in all forms or no forms as to not confuse users).</li>
                 <li>Some <code>&lt;input&gt;</code> elements, such as date &amp; time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your website or app.</li>
                 <li>Checkboxes and radio buttons are not stylized the same way as most of the other elements, nor do they follow the exact same stucture for layout. Please refer to the next section for information on how to use those.</li>
+				<li>Try not to combine the <strong>grid</strong> module's classes with <code>.fluid</code><code>.input-group</code>s, as this might cause certain styles to overlap and not display exactly like you want them to.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">
@@ -336,7 +344,7 @@
                 <div class="button-group"> <button>Button</button> <button>Button</button> <button>Button</button> </div>
               </div>
               <div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
-                <p>All button types have been stylized by default, while maintaining accessiblity. Simply add any <code>&lt;button&gt;</code> or an <code>&lt;input&gt;</code> with a button <code><span class="secondary">type</span></code> (i.e. <code><span class="fore-primary">&quot;button&quot;</span></code>, <code><span class="fore-primary">&quot;submit&quot;</span></code> or <code><span class="fore-primary">&quot;reset&quot;</span></code>) and they will be styled accordingly. You can also use the <code>.button</code> class for links, labels and other elements of your choice to make them look like buttons.</p>
+                <p>All button types have been stylized by default, while maintaining accessiblity. Simply add any <code>&lt;button&gt;</code> or an <code>&lt;input&gt;</code> with a button <code><span class="secondary">type</span></code> (i.e. <code><span class="fore-primary">&quot;button&quot;</span></code>, <code><span class="fore-primary">&quot;submit&quot;</span></code> or <code><span class="fore-primary">&quot;reset&quot;</span></code>) and they will be styled accordingly. You can also use the <code>.button</code> class or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>&quot;</span></code> attribute for links, labels and other elements of your choice to make them look like buttons.</p>
                 <p>Color variants are available in the form of the <code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> classes. Size variants are available as well in the form of <code>.small</code> and <code>.large</code> classes.</p>
                 <p>Finally, you can create responsive groups of buttons by wrapping them inside a <code>&lt;div&gt;</code> with the <code>.button-group</code> class.</p>
                 <h3>Sample code</h3>
@@ -349,7 +357,9 @@
 &lt;button class=&quot;large&quot;&gt;Large button&lt;/button&gt;
 &lt;button disabled&gt;Disabled button&lt;/button&gt;
 &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Link button&lt;/a&gt;
+&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;Link button&lt;/a&gt;
 &lt;label class=&quot;button&quot;&gt;Label button&lt;/label&gt;
+&lt;label role=&quot;button&quot;&gt;Label button&lt;/label&gt;
 
 &lt;div class=&quot;button-group&quot;&gt;
   &lt;button&gt;Button&lt;/button&gt;

docs/v2/DEVLOG.md

@@ -861,3 +861,4 @@
 - Added accessibility guidelines for using `role="button"` in `navigation`.
 - Added `sticky` documentation in `navigation`. No *dos* and *dont's* either, I'm afraid, can't find any troublesome things with this.
 - Added a quick fix for `table`s' irregular styling of mutliline headers. Resolves #54.
+- Updated `input_control` documentation for accessibility and `fluid` `input-group`s. Finally resolved #40, accessibility is now properly explained everywhere.