fixing up buttons and examples of implementing icons

2 files changed, 80 insertions, 104 deletions

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 5b9cae472..23a6a37a2 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1412,7 +1412,7 @@
 <pre class="prettyprint linenums">
 &lt;i class="icon search"&gt;&lt;/i&gt;
 </pre>
-      <p>There are also styles available for inverted (white) icons, made ready with one extra class:</p>
+      <p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;i class="icon white search"&gt;&lt;/i&gt;
 </pre>
@@ -1427,18 +1427,15 @@
         <li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li>
         <li>{{_i}}With links to share context on a user's destination{{/i}}</li>
       </ul>
-      <p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use <code>.icon</code> class with no other classes:{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;i class="icon"&gt;&lt;/i&gt;
-</pre>
+      <p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.{{/i}}</p>
     </div>
   </div>
 
   <h3>{{_i}}Examples{{/i}}</h3>
+  <p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
   <div class="row">
     <div class="span4">
-      <p>{{_i}}Use them in buttons - of all types and sizes.{{/i}}</p>
-      <div class="btn-toolbar">
+      <div class="btn-toolbar" style="margin-bottom: 9px">
         <div class="btn-group">
           <a class="btn" href="#"><i class="icon align-left"></i></a>
           <a class="btn" href="#"><i class="icon align-center"></i></a>
@@ -1453,7 +1450,7 @@
             <li><a href="#"><i class="icon trash"></i> {{_i}}Delete{{/i}}</a></li>
             <li><a href="#"><i class="icon ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
             <li class="divider"></li>
-            <li><a href="#"><i class="icon"></i> {{_i}}Make Admin{{/i}}</a></li>
+            <li><a href="#"><i class="icon"></i> {{_i}}Make admin{{/i}}</a></li>
           </ul>
         </div>
       </div>
@@ -1469,7 +1466,6 @@
       </p>
     </div>
     <div class="span4">
-      <p>{{_i}}Use them in navigation.{{/i}}</p>
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
@@ -1481,9 +1477,8 @@
     </div>
     <div class="span4">
       <form>
-        <p>{{_i}}Use them with prepended forms.{{_i}}</p>
         <div class="control-group">
-          <label class="control-label" for="prependedInput">{{_i}}Your Email Address:{{/i}}</label>
+          <label class="control-label" for="prependedInput">{{_i}}Email address{{/i}}</label>
           <div class="controls">
             <div class="input-prepend">
               <span class="add-on"><i class="icon envelope"></i></span>
@@ -1491,20 +1486,6 @@
             </div>
           </div>
         </div>
-        <div class="control-group">
-          <label class="control-label" for="iconSelect">{{_i}}Your Location:{{/i}}</label>
-          <div class="controls">
-            <div class="input-prepend">
-              <span class="add-on"><i class="icon map-marker"></i></span>
-              <select id="iconSelect">
-                <option>Istanbul</option>
-                <option>London</option>
-                <option>New York</option>
-                <option>Tokyo</option>
-              </select>
-            </div>
-          </div>
-        </div>
       </form>
     </div>
   </div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index f73052e63..48de1f8bf 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -31,32 +31,29 @@
       <h3>{{_i}}Button groups{{/i}}</h3>
       <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
       <p>{{_i}}You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.{{/i}}</p>
-      <div class="well" style="padding: 10px; margin-bottom: 9px;">
+      <div class="btn-toolbar" style="margin-top: 18px;">
         <div class="btn-group">
           <a class="btn" href="#">{{_i}}Left{{/i}}</a>
           <a class="btn" href="#">{{_i}}Middle{{/i}}</a>
           <a class="btn" href="#">{{_i}}Right{{/i}}</a>
         </div>
       </div>
-      <div class="well" style="padding: 10px;">
-        <div class="btn-toolbar">
-          <div class="btn-group">
-            <a class="btn" href="#">1</a>
-            <a class="btn" href="#">2</a>
-            <a class="btn" href="#">3</a>
-            <a class="btn" href="#">4</a>
-          </div>
-          <div class="btn-group">
-            <a class="btn" href="#">5</a>
-            <a class="btn" href="#">6</a>
-            <a class="btn" href="#">7</a>
-          </div>
-          <div class="btn-group">
-            <a class="btn" href="#">8</a>
-          </div>
+      <div class="btn-toolbar">
+        <div class="btn-group">
+          <a class="btn" href="#">1</a>
+          <a class="btn" href="#">2</a>
+          <a class="btn" href="#">3</a>
+          <a class="btn" href="#">4</a>
+        </div>
+        <div class="btn-group">
+          <a class="btn" href="#">5</a>
+          <a class="btn" href="#">6</a>
+          <a class="btn" href="#">7</a>
+        </div>
+        <div class="btn-group">
+          <a class="btn" href="#">8</a>
         </div>
       </div>
-
     </div>
     <div class="span4">
       <h3>{{_i}}Example markup{{/i}}</h3>
@@ -100,67 +97,65 @@
     <div class="span4">
       <h3>{{_i}}Split button dropdowns{{/i}}</h3>
       <p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
-      <div class="well" style="padding: 10px; margin-bottom: 9px;">
-        <div class="btn-toolbar" style="margin-bottom: 9px;">
-          <div class="btn-group">
-            <a class="btn" href="#">{{_i}}Action{{/i}}</a>
-            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </div><!-- /btn-group -->
-          <div class="btn-group">
-            <a class="btn primary" href="#">{{_i}}Action{{/i}}</a>
-            <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </div><!-- /btn-group -->
-          <div class="btn-group">
-            <a class="btn danger" href="#">{{_i}}Danger{{/i}}</a>
-            <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </div><!-- /btn-group -->
-        </div>
-        <div class="btn-toolbar">
-          <div class="btn-group">
-            <a class="btn success" href="#">{{_i}}Success{{/i}}</a>
-            <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </div><!-- /btn-group -->
-          <div class="btn-group">
-            <a class="btn info" href="#">{{_i}}Info{{/i}}</a>
-            <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </div><!-- /btn-group -->
-        </div>
-      </div> <!-- /well -->
+      <div class="btn-toolbar" style="margin-top: 18px;">
+        <div class="btn-group">
+          <a class="btn" href="#">{{_i}}Action{{/i}}</a>
+          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn primary" href="#">{{_i}}Action{{/i}}</a>
+          <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn danger" href="#">{{_i}}Danger{{/i}}</a>
+          <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div>
+      <div class="btn-toolbar">
+        <div class="btn-group">
+          <a class="btn success" href="#">{{_i}}Success{{/i}}</a>
+          <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn info" href="#">{{_i}}Info{{/i}}</a>
+          <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div>
     </div>
     <div class="span8">
       <h3>{{_i}}Example markup{{/i}}</h3>