more bootstrap 3.0 doc updates

src/_includes/examples/animated-spinner.html

@@ -1,11 +1,11 @@
 <section id="animated-spinner">
   <h2 class="page-header">Animated Spinner</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       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>.
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <div class="well well-large well-transparent lead">
         <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
       </div>
@@ -13,7 +13,7 @@
 <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
 {% endhighlight %}
       <p class="alert alert-info">
-        <i class="fa fa-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9.
+        <i class="fa fa-info-sign"></i> CSS3 animations aren't supported in IE8 - IE9.
       </p>
     </div>
   </div>

src/_includes/examples/bordered-pulled.html

@@ -1,13 +1,13 @@
 <section id="bordered-pulled">
   <h2 class="page-header">Bordered & Pulled Icons</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <p>
         Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
         article graphics.
       </p>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <div class="well well-large well-transparent">
         <i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
         Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.

src/_includes/examples/bulleted-lists.html

@@ -1,9 +1,7 @@
 <section id="bulleted-lists">
   <h2 class="page-header">Bulleted Lists</h2>
   <div class="row">
-    <div class="span12">
+    <div class="col-md-3">
-    </div>
-    <div class="span3">
       <ul class="fa-ul">
         <li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li>
         <li><i class="fa-li fa fa-ok"></i>Buttons</li>
@@ -13,7 +11,7 @@
         <li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
       </ul>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <p>Easily replace individual bullets.</p>
 {% highlight html %}
 <ul class="fa-ul">

src/_includes/examples/button-dropdowns.html

@@ -1,7 +1,7 @@
 <section id="button-dropdowns">
   <h2 class="page-header">Button Dropdowns</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <div class="btn-group open">
         <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
         <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
@@ -15,7 +15,7 @@
         </ul>
       </div>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
 {% highlight html %}
 <div class="btn-group open">
   <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>

src/_includes/examples/button-groups.html

@@ -1,23 +1,23 @@
 <section id="button-groups">
   <h2 class="page-header">Button Groups</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <p>
       <div class="btn-group">
-        <a class="btn" href="#"><i class="fa fa-align-left"></i></a>
+        <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
-        <a class="btn" href="#"><i class="fa fa-align-center"></i></a>
+        <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
-        <a class="btn" href="#"><i class="fa fa-align-right"></i></a>
+        <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
-        <a class="btn" href="#"><i class="fa fa-align-justify"></i></a>
+        <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
       </div>
       </p>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
 {% highlight html %}
 <div class="btn-group">
-  <a class="btn" href="#"><i class="fa fa-align-left"></i></a>
+  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
-  <a class="btn" href="#"><i class="fa fa-align-center"></i></a>
+  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
-  <a class="btn" href="#"><i class="fa fa-align-right"></i></a>
+  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
-  <a class="btn" href="#"><i class="fa fa-align-justify"></i></a>
+  <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
 </div>
 {% endhighlight %}
     </div>

src/_includes/examples/buttons.html

@@ -1,9 +1,9 @@
 <section id="buttons">
   <h2 class="page-header">Buttons</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <p>
-        <a class="btn" href="#">
+        <a class="btn btn-default" href="#">
           <i class="fa fa-repeat"></i> Reload</a>
         <a class="btn btn-success" href="#">
           <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a>
@@ -11,17 +11,17 @@
       <p>
         <a class="btn btn-large btn-primary" href="#">
           <i class="fa fa-comment"></i> Comment</a>
-        <a class="btn btn-small btn-info" href="#">
+        <a class="btn btn-sm btn-info" href="#">
           <i class="fa fa-info-sign"></i> Info</a>
       </p>
       <p>
         <a class="btn btn-danger" href="#">
           <i class="fa fa-trash fa-lg"></i> Delete</a>
-        <a class="btn btn-small" href="#">
+        <a class="btn btn-default btn-sm" href="#">
           <i class="fa fa-cog"></i> Settings</a>
       </p>
       <p>
-        <a class="btn btn-large btn-danger" href="#">
+        <a class="btn btn-lg btn-danger" href="#">
           <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
       </p>
       <p>
@@ -29,25 +29,25 @@
           <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
       </p>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <p>
         Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
         <code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>.
       </p>
 {% highlight html %}
-<a class="btn" href="#">
+<a class="btn btn-default" href="#">
   <i class="fa fa-repeat"></i> Reload</a>
 <a class="btn btn-success" href="#">
   <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a>
-<a class="btn btn-large btn-primary" href="#">
+<a class="btn btn-lg btn-primary" href="#">
   <i class="fa fa-comment"></i> Comment</a>
-<a class="btn btn-small btn-info" href="#">
+<a class="btn btn-sm btn-info" href="#">
   <i class="fa fa-info-sign"></i> Info</a>
 <a class="btn btn-danger" href="#">
   <i class="fa fa-trash fa-lg"></i> Delete</a>
-<a class="btn btn-small" href="#">
+<a class="btn btn-default btn-sm" href="#">
   <i class="fa fa-cog"></i> Settings</a>
-<a class="btn btn-large btn-danger" href="#">
+<a class="btn btn-lg btn-danger" href="#">
   <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
 <a class="btn btn-primary" href="#">
   <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>

src/_includes/examples/custom.html

@@ -1,10 +1,10 @@
 <section id="custom">
   <h2 class="page-header">Custom CSS</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>
       <div class="well">
         <span class="rating">

src/_includes/examples/form-inputs.html

@@ -1,19 +1,18 @@
 <section id="form-inputs">
   <h2 class="page-header">Prepended & Appended Form Inputs</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
-      <form>
+      <div class="input-group">
-        <div class="input-prepend">
+        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
-          <span class="add-on"><i class="fa fa-envelope"></i></span>
+        <input class="form-control" type="text" placeholder="Email address">
-          <input class="span2" type="text" placeholder="Email address">
       </div>
-        <div class="input-prepend">
+      <br>
-          <span class="add-on"><i class="fa fa-key"></i></span>
+      <div class="input-group">
-          <input class="span2" type="password" placeholder="Password">
+        <span class="input-group-addon"><i class="fa fa-key"></i></span>
+        <input class="form-control" type="password" placeholder="Password">
       </div>
-      </form>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
 {% highlight html %}
 <form>
   <div class="input-prepend">

src/_includes/examples/inline-icons.html

@@ -1,10 +1,10 @@
 <section id="inline-icons">
   <h2 class="page-header">Inline Icons</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <div class="well well-transparent">
         <div style="font-size: 24px; line-height: 1.5em;">
           <i class="fa fa-camera-retro"></i> icon-camera-retro

src/_includes/examples/larger-icons.html

@@ -1,13 +1,13 @@
 <section id="larger-icons">
   <h2 class="page-header">Larger Icons</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <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="span9">
+    <div class="col-md-9">
       <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.

src/_includes/examples/navigation.html

@@ -1,20 +1,18 @@
 <section id="navigation">
   <h2 class="page-header">Navigation</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
-      <div class="well" style="padding: 8px 0;">
+      <ul class="nav nav-pills nav-stacked">
-        <ul class="nav nav-list">
         <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li>
         <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li>
         <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li>
         <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
       </ul>
     </div>
-    </div>
+    <div class="col-md-9">
-    <div class="span9">
       <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
 {% highlight html %}
-<ul class="nav nav-list">
+<ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li>
   <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li>
   <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li>

src/_includes/examples/new.html

@@ -1,7 +1,7 @@
 <{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles">
   <h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
   <div class="row">
-    <div class="span4">
+    <div class="col-md-4">
       <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
       <div class="well well-transparent">
         <i class="fa fa-shield"></i>&nbsp; normal<br>
@@ -12,7 +12,7 @@
         <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <h4><a href="#stacked">Stacked Icons</a></h4>
       <div class="well well-transparent stacked">
         <span class="fa-stack">
@@ -32,7 +32,7 @@
         fa-terminal on fa-sign-blank
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
       <div class="well well-transparent">
         <ul class="fa-ul">

src/_includes/examples/rotated-flipped.html

@@ -1,10 +1,10 @@
 <section id="rotated-flipped">
   <h2 class="page-header">Rotated &amp; Flipped</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       A set of classes that can be used to arbitrarily rotate and flip icons.
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <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>

src/_includes/examples/stacked.html

@@ -1,11 +1,11 @@
 <section id="stacked">
   <h2 class="page-header">Stacked Icons</h2>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
       <code>fa-stack-base</code> for the bottom icon.
     </div>
-    <div class="span9">
+    <div class="col-md-9">
       <div class="well well-large well-transparent lead">
         <span class="fa-stack">
           <i class="fa fa-check-empty fa-stack-base"></i>
@@ -24,7 +24,7 @@
         fa-terminal on fa-sign-blank<br>
         <span class="fa-stack">
           <i class="fa fa-camera"></i>
-          <i class="fa fa-ban-circle fa-stack-base text-error"></i>
+          <i class="fa fa-ban-circle fa-stack-base text-danger"></i>
         </span>
         fa-camera on fa-ban-circle
       </div>
@@ -46,7 +46,7 @@ fa-flag on fa-circle<br>
 fa-terminal on fa-sign-blank<br>
 <span class="fa-stack">
   <i class="fa fa-camera"></i>
-  <i class="fa fa-ban-circle fa-stack-base text-error"></i>
+  <i class="fa fa-ban-circle fa-stack-base text-danger"></i>
 </span>
 fa-camera on fa-ban-circle
 {% endhighlight %}

src/_includes/tell-me-thanks.html

@@ -5,13 +5,13 @@
     open source community. If you'd like, here are a couple of ways you can tell me thanks for all my hard work.
   </p>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip"></i> Tip me on Gittip</a></h3>
       <p>
         Gittip is a great way to let developers know you appreciate their work.
       </p>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <h3><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h3>
       <p>
         Or pick something straight

src/_includes/whats-new.html

@@ -9,27 +9,27 @@
 
 <div id="whats-new" class="feature-list">
   <div class="row">
-    <div class="span4">
+    <div class="col-md-4">
       <h4><i class="fa fa-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
       Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <h4><i class="fa fa-terminal"></i> SCSS Support</h4>
       A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>.
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <h4><i class="fa fa-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4>
       SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
     </div>
-    <div class="span4 margin-bottom-large">
+    <div class="col-md-4 margin-bottom-large">
       <h4><i class="fa fa-magic"></i> Pixel Perfection at 14px</h4>
       Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <h4><i class="fa fa-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4>
       Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need.
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <h4><i class="fa fa-question-sign"></i> Want More Details?</h4>
       Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see
       what's new and changed.

src/assets/less/site-3.0.0.less

@@ -6,6 +6,7 @@
 @import "site/navbar";
 @import "site/jumbotron";
 @import "site/code";
+@import "site/wells";
 @import "site/layout";
 @import "site/social-buttons";
 @import "site/jumbotron-carousel";

src/assets/less/site/variables.less

@@ -7,7 +7,6 @@
 @link-color:            lighten(@red, 10%);
 @link-hover-color:      @red;
 
-
 // Typography
 @font-family-sans-serif:  proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
 @font-family-serif:       museo-slab, Georgia, "Times New Roman", Times, serif;

src/assets/less/site/wells.less

@@ -0,0 +1 @@
+.well-transparent { background-color: transparent; }