add image styles, for now to scaffolding (soon to own file)

4 files changed, 78 insertions, 0 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f806ed519..87922cf88 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -175,6 +175,28 @@ a:hover {
   text-decoration: underline;
 }
 
+.img-rounded {
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+}
+
+.img-polaroid {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.img-circle {
+  -webkit-border-radius: 500px;
+     -moz-border-radius: 500px;
+          border-radius: 500px;
+}
+
 .row {
   margin-left: -20px;
   *zoom: 1;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0897cc5c5..f7b79e2dd 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -632,6 +632,12 @@ form.bs-docs-example {
   line-height: 24px;
 }
 
+/* Images */
+.bs-docs-example-images img {
+  margin: 10px;
+  display: inline-block;
+}
+
 /* Tooltips */
 .bs-docs-tooltip-examples {
   text-align: center;
diff --git a/docs/base-css.html b/docs/base-css.html
index 9aa012083..4f0df407d 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -92,6 +92,7 @@
           <li><a href="#tables">Tables <i class="icon-chevron-right"></i></a></li>
           <li><a href="#forms">Forms <i class="icon-chevron-right"></i></a></li>
           <li><a href="#buttons">Buttons <i class="icon-chevron-right"></i></a></li>
+          <li><a href="#images">Images <i class="icon-chevron-right"></i></a></li>
           <li><a href="#icons">Icons by Glyphicons <i class="icon-chevron-right"></i></a></li>
         </ul>
       </div>
@@ -1517,6 +1518,30 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 
 
 
+        <!-- Images
+        ================================================== -->
+        <section id="images">
+          <div class="page-header">
+            <h1>Images</h1>
+          </div>
+
+          <p>Simple classes to easily style images in any project.</p>
+          <div class="bs-docs-example bs-docs-example-images">
+            <img src="http://placehold.it/140x140" class="img-rounded">
+            <img src="http://placehold.it/140x140" class="img-circle">
+            <img src="http://placehold.it/140x140" class="img-polaroid">
+          </div>
+<pre class="prettyprint linenums">
+  &lt;img src="..." class="img-rounded"&gt;
+  &lt;img src="..." class="img-circle"&gt;
+  &lt;img src="..." class="img-polaroid"&gt;
+</pre>
+
+
+        </section>
+
+
+
         <!-- Icons
         ================================================== -->
         <section id="icons">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index fa8578672..a2685aab3 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -21,6 +21,7 @@
           <li><a href="#tables">{{_i}}Tables{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#forms">{{_i}}Forms{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#buttons">{{_i}}Buttons{{/i}} <i class="icon-chevron-right"></i></a></li>
+          <li><a href="#images">{{_i}}Images{{/i}} <i class="icon-chevron-right"></i></a></li>
           <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}} <i class="icon-chevron-right"></i></a></li>
         </ul>
       </div>
@@ -1454,6 +1455,30 @@
 
 
 
+        <!-- Images
+        ================================================== -->
+        <section id="images">
+          <div class="page-header">
+            <h1>{{_i}}Images{{/i}}</h1>
+          </div>
+
+          <p>Simple classes to easily style images in any project.</p>
+          <div class="bs-docs-example bs-docs-example-images">
+            <img src="http://placehold.it/140x140" class="img-rounded">
+            <img src="http://placehold.it/140x140" class="img-circle">
+            <img src="http://placehold.it/140x140" class="img-polaroid">
+          </div>
+<pre class="prettyprint linenums">
+  &lt;img src="..." class="img-rounded"&gt;
+  &lt;img src="..." class="img-circle"&gt;
+  &lt;img src="..." class="img-polaroid"&gt;
+</pre>
+
+
+        </section>
+
+
+
         <!-- Icons
         ================================================== -->
         <section id="icons">