diff --git a/docs/input_control.html b/docs/input_control.html index 45becb7..4d041ac 100644 --- a/docs/input_control.html +++ b/docs/input_control.html @@ -78,6 +78,13 @@
 
+ +
+
+ Fluid form +
+
+
@@ -119,16 +126,16 @@

Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <form> element and add your <input> elements inside. Link them to <label> elements for ease of acces and you are pretty much set. We highly recommend using the <fieldset> and <legend> elements to annotate your forms as well, but you can skip them if you wish.

-

Forms are inline by default. Use the .input-group class on a <div> wrapping inside it an <input> and <label> 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 grid module's rows and columns.

+

Forms are inline by default. Use the .input-group class on a <div> wrapping inside it an <input> and <label> pair to make sure they always display together in one line. You can make your .input-groups respond to viewport changes, by adding the .fluid class to them. Finally, if you want to create aligned forms with a preset layout, you can utilize the grid module's rows and columns.

Sample code

<form>
   <fieldset>
     <legend>Simple form</legend>
-    <div class="input-group">
+    <div class="input-group fluid">
       <label for="username">username</label>
       <input type="email" value="" id="username" placeholder="username">
     </div>
-    <div class="input-group">
+    <div class="input-group fluid">
       <label for="pwd">password</label>
       <input type="password" value="" id="pwd" placeholder="password">
     </div>
@@ -142,6 +149,7 @@
                 
  • Using the <fieldset> and <legend> 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).
    • 
                 
  • Some <input> elements, such as date & 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.
    • 
                 
  • 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.
    • 
+				
  • Try not to combine the grid module's classes with .fluid.input-groups, as this might cause certain styles to overlap and not display exactly like you want them to.
    • 
               
    
               
    
                 
    
@@ -336,7 +344,7 @@
                 
        
    
               
    
               
    
-                
    All button types have been stylized by default, while maintaining accessiblity. Simply add any <button> or an <input> with a button type (i.e. "button", "submit" or "reset") and they will be styled accordingly. You can also use the .button class for links, labels and other elements of your choice to make them look like buttons.
    
+                
    All button types have been stylized by default, while maintaining accessiblity. Simply add any <button> or an <input> with a button type (i.e. "button", "submit" or "reset") and they will be styled accordingly. You can also use the .button class or the role="button" attribute for links, labels and other elements of your choice to make them look like buttons.
    
                 
    Color variants are available in the form of the .primary, .secondary, .tertiary and .inverse classes. Size variants are available as well in the form of .small and .large classes.
    
                 
    Finally, you can create responsive groups of buttons by wrapping them inside a <div> with the .button-group class.
    
                 
    Sample code
    
@@ -349,7 +357,9 @@
 <button class="large">Large button</button>
 <button disabled>Disabled button</button>
 <a href="#" class="button">Link button</a>
+<a href="#" role="button">Link button</a>
 <label class="button">Label button</label>
+<label role="button">Label button</label>
 
 <div class="button-group">
   <button>Button</button>
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index e52e465..415f165 100644
--- a/docs/v2/DEVLOG.md
+++ b/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.