From 754a2c16bda4976d13e1a8d12db662d581234368 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 30 Jan 2017 13:46:10 -0800
Subject: [PATCH] [Docs] WIP Style Guide

Fixes #1233
---
 .../styleguide/res/templates/controls.html    | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html
index 8f11dba4f1..1ea27ecfb4 100644
--- a/example/styleguide/res/templates/controls.html
+++ b/example/styleguide/res/templates/controls.html
@@ -93,4 +93,74 @@
             </div>
         </div>
     </div>
+
+    <div class="l-section">
+        <h2>Checkboxes</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
+                <p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
+            </div>
+            <div class="col">
+                <h3>Markup</h3>
+                <pre>
+
+                </pre>
+
+                <h3>Example</h3>
+                <label class="checkbox custom no-text">
+                    <input type="checkbox" />
+                    <em></em>
+                </label>
+                <br />
+                <label class="checkbox custom no-text">
+                    <input type="checkbox" checked />
+                    <em></em>
+                </label>
+                <br />
+                <label class="checkbox custom">Here's one with a label
+                    <input type="checkbox" />
+                    <em></em>
+                </label>
+            </div>
+        </div>
+    </div>
+
+    <div class="l-section">
+        <h2>Radio Buttons</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Radio buttons use the same technique as checkboxes above.</p>
+            </div>
+            <div class="col">
+                <h3>Markup</h3>
+                <pre>
+
+                </pre>
+
+                <h3>Example</h3>
+                <label class="checkbox custom no-text">
+                    <input type="radio" />
+                    <em></em>
+                </label>
+                <br />
+                <label class="checkbox custom no-text">
+                    <input type="radio" checked />
+                    <em></em>
+                </label>
+                <br />
+                <label class="checkbox custom">Here's one with a label
+                    <input type="radio" />
+                    <em></em>
+                </label>
+            </div>
+        </div>
+    </div>
+
+
+
+
+
+
+
 </div>
\ No newline at end of file