rewriting examples for consistency

src/_includes/examples/bootstrap.html

@@ -1,5 +1,5 @@
 <section id="bootstrap">
-  <h2 class="page-header">Bootstrap 3</h2>
+  <h2 class="page-header">Bootstrap 3 Examples</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>

src/_includes/examples/bordered-pulled.html

@@ -3,30 +3,18 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>
-        Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
+        <i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
-        article graphics.
+        Use a few styles together and you'll have easy pull quotes or a great introductory article icon.
       </p>
     </div>
     <div class="col-md-9 col-sm-8">
-      <div class="well well-large well-transparent">
+      <p>
-        <i class="fa fa-quote-left fa-4x pull-left"></i>
+        Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
-        Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
+        article graphics.
-        Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
+      </p>
-        of them in any combination to get lots of new possibilities.
-      </div>
 {% highlight html %}
-<i class="fa fa-quote-left fa-4x pull-left"></i>
+<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
-Use a few of the new styles together ... lots of new possibilities.
+Use a few styles together and you'll have easy pull quotes or a great introductory article icon.
-{% endhighlight %}
-      <div class="well well-large well-transparent clearfix">
-        <i class="fa fa-flag fa-4x pull-left fa-border"></i>
-        Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
-        Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
-        of them in any combination to get lots of new possibilities.
-      </div>
-{% highlight html %}
-<i class="fa fa-flag fa-4x pull-left fa-border"></i>
-Use a few of the new styles together ... lots of new possibilities.
 {% endhighlight %}
     </div>
   </div>

src/_includes/examples/fixed-width.html

@@ -11,7 +11,8 @@
     </div>
     <div class="col-md-9 col-sm-8">
       <p>
-        Use <code>fa-fw</code> to set icons at a fixed width. Great to use when variable width throws off alignment. Especially useful in things like nav lists.
+        Use <code>fa-fw</code> to set icons at a fixed width. Great to use when variable icon widths throw off alignment.
+        Especially useful in things like nav lists.
       </p>
 {% highlight html %}
 <ul class="nav nav-pills nav-stacked">

src/_includes/examples/inline.html

@@ -1,17 +1,13 @@
-<section id="inline-icons">
+<section id="inline">
   <h2 class="page-header">Inline Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
+      <i class="fa fa-camera-retro"></i> fa-camera-retro
     </div>
     <div class="col-md-9 col-sm-8">
-      <div class="well well-transparent">
+      <p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
-        <div style="font-size: 24px; line-height: 1.5em;">
-          <i class="fa fa-camera-retro"></i> icon-camera-retro
-        </div>
-      </div>
 {% highlight html %}
-<i class="fa fa-camera-retro"></i> icon-camera-retro
+<i class="fa fa-camera-retro"></i> fa-camera-retro
 {% endhighlight %}
       <div class="alert alert-success"><i class="fa fa-info-circle"></i> Icon classes are echoed via CSS :before.</div>
     </div>

src/_includes/examples/larger.html

@@ -1,30 +1,24 @@
-<section id="larger-icons">
+<section id="larger">
   <h2 class="page-header">Larger Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <p>
-        To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
-        <code>fa-3x</code>, or <code>fa-4x</code>.
-      </p>
-    </div>
-    <div class="col-md-9 col-sm-8">
-      <p>
-        Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
-        <code>fa-3x</code>, or <code>fa-4x</code> classes.
-      </p>
-      <div class="well well-transparent">
-        <div style="font-size: 24px; line-height: 1.5em;">
       <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
       <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
       <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
       <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
+      <p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
     </div>
-      </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
+        <code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
+      </p>
 {% highlight html %}
 <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
 <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
 <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
 <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
+<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
 {% endhighlight %}
       <div class="alert alert-success">
         <i class="fa fa-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have

src/_includes/examples/list.html

@@ -1,4 +1,4 @@
-<section id="list-icons">
+<section id="list">
   <h2 class="page-header">List Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">

src/_includes/examples/rotated-flipped.html

@@ -2,10 +2,7 @@
   <h2 class="page-header">Rotated &amp; Flipped</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      A set of classes that can be used to arbitrarily rotate and flip icons.
+      <div style="font-size: 18px;">
-    </div>
-    <div class="col-md-9 col-sm-8">
-      <div class="well well-large well-transparent lead">
         <i class="fa fa-shield"></i>&nbsp; normal<br>
         <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
         <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
@@ -13,6 +10,11 @@
         <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
         <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
       </div>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        To arbitrarily rotate and flip icons, use the <code>fa-rotate-*</code> and <code>fa-flip-*</code> classes.
+      </p>
 {% highlight html %}
 <i class="fa fa-shield"></i>&nbsp; normal<br>
 <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
@@ -21,9 +23,6 @@
 <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
 <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
 {% endhighlight %}
-      <p class="alert alert-success">
-        <i class="fa fa-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7.
-      </p>
     </div>
   </div>
 </section>

src/_includes/examples/spinning.html

@@ -2,22 +2,19 @@
   <h2 class="page-header">Spinning Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
+      <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
+      <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
+      <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
+    </div>
+    <div class="col-md-9 col-sm-8">
       <p>
         Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
         <code>fa-refresh</code>, and <code>fa-cog</code>.
       </p>
-      <p>
-        <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
-        <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
-        <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
-      </p>
-    </div>
-    <div class="col-md-9 col-sm-8">
-      <div class="well well-large well-transparent lead">
-        <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
-      </div>
 {% highlight html %}
-<i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
+<i class="fa fa-spinner fa-spin"></i>
+<i class="fa fa-refresh fa-spin"></i>
+<i class="fa fa-cog fa-spin"></i>
 {% endhighlight %}
       <p class="alert alert-success">
         <i class="fa fa-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9.

src/_includes/examples/stacked.html

@@ -2,50 +2,53 @@
   <h2 class="page-header">Stacked Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
+      <div>
-      for the regularly sized icon, and <code>fa-stack-2x</code> for the larger bottom icon. <code>fa-inverse</code>
+        <span class="fa-stack fa-lg">
-      can be used as an alternative icon color.
-    </div>
-    <div class="col-md-9 col-sm-8">
-      <div class="well well-large well-transparent lead">
-        <span class="fa-stack">
           <i class="fa fa-square-o fa-stack-2x"></i>
           <i class="fa fa-twitter fa-stack-1x"></i>
         </span>
         fa-twitter on fa-square-o<br>
-        <span class="fa-stack">
+        <span class="fa-stack fa-lg">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
         </span>
         fa-flag on fa-circle<br>
-        <span class="fa-stack">
+        <span class="fa-stack fa-lg">
           <i class="fa fa-square fa-stack-2x"></i>
           <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
         </span>
         fa-terminal on fa-square<br>
-        <span class="fa-stack">
+        <span class="fa-stack fa-lg">
           <i class="fa fa-camera fa-stack-1x"></i>
           <i class="fa fa-ban fa-stack-2x text-danger"></i>
         </span>
         fa-ban on fa-camera
       </div>
+    </div>
+    <div class="col-md-9 col-sm-8">
+      <p>
+        To stack multiple icons, use the <code>fa-stack</code> class on the parent, the <code>fa-stack-1x</code>
+        for the regularly sized icon, and <code>fa-stack-2x</code> for the larger icon. <code>fa-inverse</code>
+        can be used as an alternative icon color. You can even throw <a href="#larger">larger icon</a> classes on the parent
+        to get further control of sizing.
+      </p>
 {% highlight html %}
-<span class="fa-stack">
+<span class="fa-stack fa-lg">
   <i class="fa fa-square-o fa-stack-2x"></i>
   <i class="fa fa-twitter fa-stack-1x"></i>
 </span>
 fa-twitter on fa-square-o<br>
-<span class="fa-stack">
+<span class="fa-stack fa-lg">
   <i class="fa fa-circle fa-stack-2x"></i>
   <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
 </span>
 fa-flag on fa-circle<br>
-<span class="fa-stack">
+<span class="fa-stack fa-lg">
   <i class="fa fa-square fa-stack-2x"></i>
   <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
 </span>
 fa-terminal on fa-square<br>
-<span class="fa-stack">
+<span class="fa-stack fa-lg">
   <i class="fa fa-camera fa-stack-1x"></i>
   <i class="fa fa-ban fa-stack-2x text-danger"></i>
 </span>

src/_includes/navbar.html

@@ -47,15 +47,15 @@
           <ul class="dropdown-menu pull-right">
             <li><a href="{{ page.relative_path }}examples/">Examples</a></li>
             <li class="divider"></li>
-            <li><a href="{{ page.relative_path }}examples/#inline-icons">Inline Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#inline">Inline Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#larger-icons">Larger Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#larger">Larger Icons</a></li>
             <li><a href="{{ page.relative_path }}examples/#fixed-width">Fixed Width Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#list-icons">List Icons</a></li>
+            <li><a href="{{ page.relative_path }}examples/#list">List Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled</a></li>
+            <li><a href="{{ page.relative_path }}examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
             <li><a href="{{ page.relative_path }}examples/#spinning">Spinning Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped</a></li>
+            <li><a href="{{ page.relative_path }}examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#stacked">Stacked</a></li>
+            <li><a href="{{ page.relative_path }}examples/#stacked">Stacked Icons</a></li>
-            <li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3</a></li>
+            <li><a href="{{ page.relative_path }}examples/#bootstrap">Bootstrap 3 Examples</a></li>
             <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li>
           </ul>
         </li>

src/assets/less/site/bootstrap/variables.less

@@ -56,11 +56,7 @@
 // -------------------
 
 // Brand colors
-//@brand-primary:         @blue-dark;
 @brand-success:         mix(@fa-green, #fff, 70%);
-//@brand-warning:         @yellow-dark;
-//@brand-danger:          @red;
-//@brand-info:            @blue;
 
 
 // Links
@@ -104,14 +100,6 @@
 
 
 // Form states and alerts
-//@state-warning-text:             mix(@yellow-dark, @yellow-darker, 80%);
-//@state-warning-bg:               @yellow-lighter;
-//@state-warning-border:           darken(spin(@state-warning-bg, -10), 7%);
-//
-//@state-danger-text:              @red;
-//@state-danger-bg:                @red-lighter;
-//@state-danger-border:            darken(spin(@state-danger-bg, -10), 4%);
-//
 @state-success-text:            @fa-green;
 @state-success-bg:              mix(@fa-green, #fff, 6%);
 @state-success-border:          darken(spin(@state-success-bg, -10), 13%);
@@ -126,3 +114,7 @@
 
 @carousel-control-color:        @fa-green-dark;
 @carousel-control-font-size:    30px;
+
+
+// Code
+@pre-border-color:              #e5e5e5;