[Docs] WIP Style Guide

Fixes #1233
Additional content; adding size classes to
input[type="text"] to allow direct application to
the input; added placeholder styling and related
thematic constants.

example/styleguide/res/templates/controls.html

@@ -104,12 +104,12 @@
     <input name="Alarm Status" type="radio" />
     <em></em>
 </label>
-<br>
+<br />
 <label class="radio custom">Orange
     <input name="Alarm Status" type="radio" checked />
     <em></em>
 </label>
-<br>
+<br />
 <label class="radio custom">Yellow
     <input name="Alarm Status" type="radio" />
     <em></em>
@@ -137,5 +137,28 @@
         </div>
     </div>
 
+    <div class="l-section">
+        <h2>Text Inputs</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Text inputs have a consistent look-and-feel across the application. The input's <code>placeholder</code> is styled to appear visually different from an entered value.</p>
+                <p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
+            </div>
+<mct-example><input type="text" />
+<br /><br />
+<input type="text" placeholder="Enter a value" />
+<br /><br />
+<input type="text" value="A previously entered value" />
+<br /><br />
+<input type="text" class="numeric" value="Numeric" />
+<br /><br />
+<input type="text" class="lg" value="A large input" />
+<br /><br />
+<input type="text" class="med" value="A medium input" />
+<br /><br />
+<input type="text" class="sm" value="Small" />
+</mct-example>
+        </div>
+    </div>
 </div>