diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 447feeb..5f7f89e 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -610,3 +610,4 @@ - Changed `button` default coloration to a material color palette from Google Material Design, so that it will now be more consistent. Tweaked `opacity` to make this work. - Bumped demo stylesheet to latest commit. - Tweaked `tab` module colors and variables for consistency with the rest of the modules. +- Added basic documentation for `form`s and `input`s in the `input_control` doc page. diff --git a/docs/v2/input_control.html b/docs/v2/input_control.html index dfe9df9..0b04090 100644 --- a/docs/v2/input_control.html +++ b/docs/v2/input_control.html @@ -45,12 +45,12 @@ .fore-primary { color: #0d47a1; font-family: monospace, monospace; } .fore-secondary { color: #b71c1c; font-family: monospace, monospace; } .fore-tertiary { color: #1b5e20; font-family: monospace, monospace; } - .col-sm-12.col-sm-last.col-md-4.col-md-normal { + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } @media (max-width: 767px){ - .col-sm-12.col-sm-last.col-md-4.col-md-normal { + .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { border: 0; border-top: 1px solid #bdbdbd; } @@ -105,7 +105,7 @@

Quick overview

-


+

The presentation of forms, input fields, buttons and other interactive elements is always very important for any website or app. The input_control module provides you with much needed styling improvements for all of these elements, while keeping everything simple to use and understand, as well as combine with the other modules. Forms and input elements have a clean, modern design, while some elements like checkoxes and radio buttons get a much needed facelift. Buttons have also been stylized to look the same in all browsers, while keeping their design clean and allowing for a few color and size variants. Grouping inputs and labels or buttons is also part of this module and, as always, responsiveness is an important feature. Finally, all of the components are accessible, with a few minor caveats, that are discussed in their respective section in this page.


Quick start

@@ -122,30 +122,173 @@

Forms & input

-
- +
+
+
+ Inline form (default style) +
 
+
+
+
+ +
+
+ Aligned form (using grid) +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
-
-

+
+

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 .button-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.

Sample code

- 

+                
<form>
+  <fieldset>
+    <legend>Inline form (default style)</legend>
+    <div class="input-group">
+      <label for="username">username</label> 
+      <input type="email" value="" id="username" placeholder="username">
+    </div>
+    <div class="input-group">
+      <label for="pwd">password</label> 
+      <input type="password" value="" id="pwd" placeholder="password">
+    </div>
+  </fieldset>
+</form>

               

             

             

             
Notes

               
    
-                
  • 
-                
  • 
+                
  • 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.
    • 
               

               

               

-                

-                  

-                  
Do: 

+                

+                  
<form>
+  <fieldset>
+    <legend>Responsive form</legend>
+    <div class="row">
+      <div class="col-sm-12 col-md-4">
+        <label for="username">username</label> 
+      </div>
+      <div class="col-sm-12 col-md">
+        <input type="email" value="" id="username" placeholder="username">
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 col-md-4">
+        <label for="pwd">password</label> 
+      </div>
+      <div class="col-sm-12 col-md-4">
+        <input type="password" value="" id="pwd" placeholder="password">
+      </div>
+    </div>
+  </fieldset>
+</form>

+                  
Do: You can use .row and .col-SCR_SZ or .col-SCR_SZ-COL_WD (replacing SCR_SZ with one of the available screen size names (sm for smaller screens, md for medium-sized screens or lg for larger screens and COL_WD with a number from 1 to 12 specifying the width of the column) to set specific layouts for your aligned forms. You can also use the same column classes to make them responsive for different screen sizes.

                 

-                

-                  

-                  
Don't: 

+                

+                  
<form>
+  <fieldset>
+    <legend>Responsive form</legend>
+    <div class="row">
+      <div class="col-sm-12 col-md-10 col-md-offset-1">
+        <label for="username">username</label> 
+        <input type="email" value="" id="username" placeholder="username">
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12 col-md-10 col-md-offset-1">
+        <label for="pwd">password</label> 
+        <input type="password" value="" id="pwd" placeholder="password">
+      </div>
+    </div>
+  </fieldset>
+</form>

+                  
Do: Apart from using .row and .col-SCR_SZ or .col-SCR_SZ-COL_WD for responsiveness, you can also use other classes from the grid module such as the offset classes to make your form layouts more interesting.

+                

+                

+                  
<style>
+  .label-aligned {
+    align-items: center;
+  }
+</style>
+<form>
+  <fieldset>
+    <legend>Responsive form</legend>
+    <div class="row label-aligned">
+      <div class="col-sm-12 col-md-4">
+        <label for="username">username</label> 
+      </div>
+      <div class="col-sm-12 col-md">
+        <input type="email" value="" id="username" placeholder="username">
+      </div>
+    </div>
+  </fieldset>
+</form>

+                  
Do: When creating aligned forms using the grid module's classes, labels might be off-center vertically compared to their inline counterparts. Use a simple styling for their parent .row element, if you want to adjust their vertical alignment.

+                

+                

+                  
<<form>
+  <fieldset>
+    <legend>Responsive form</legend>
+    <div class="row input-group">
+      <div class="col-sm-12 col-md-4">
+        <label for="username">username</label> 
+      </div>
+      <div class="col-sm-12 col-md">
+        <input type="email" value="" id="username" placeholder="username">
+      </div>
+    </div>
+  </fieldset>
+</form>

+                  
Don't: Avoid using the .button-group class when creating aligned forms. This might cause unexpected behavior.

                 

               

             

@@ -159,10 +302,10 @@
               
Checkboxes & radio buttons

             

             

-              

+              

               
               

-              

+              

                 

                 
Sample code

                 

@@ -196,10 +339,10 @@
               
Buttons & button groups

             

             

-              

+              

               
               

-              

+              

                 

                 
Sample code

                 

@@ -233,10 +376,10 @@
               
File upload buttons

             

             

-              

+              

               
               

-              

+              

                 

                 
Sample code

                 

diff --git a/docs/v2/navigation.html b/docs/v2/navigation.html
index f20dd6b..dadf797 100644
--- a/docs/v2/navigation.html
+++ b/docs/v2/navigation.html
@@ -238,7 +238,7 @@
     <!-- navigation content -->
   </nav>
 </div>
-                  
Do: We strongly recommend using the <nav> element in combination with the grid module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.

+                  
Do: We strongly recommend using the <nav> element in combination with the grid module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.