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

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f806ed519f3d50721e93fa764383c3ee5965778c..87922cf8809f3d9249283d9995ed5c50943637b3 100644 (file)
--- 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 0897cc5c5c629e24d5fc0a8d52ad45350b675d30..f7b79e2dd18f912a4b8ce0fdf1038f27993fd457 100644 (file)
--- 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 9aa0120833b0318f237067eedee170a6233f9696..4f0df407d7c8fb77445de44671d74053cb2d74fd 100644 (file)
--- 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 fa85786724a4b94890328facf759c42fc26c3b33..a2685aab37214e10b5c46884f8a2308e63b6d32d 100644 (file)
--- 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">

diff --git a/less/scaffolding.less b/less/scaffolding.less
index a218c547867fd97b40c646afc65b766f3993c7b4..fe63c7cacddaf67d7e9f14e0fc3713ab9d4ff629 100644 (file)
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -27,3 +27,25 @@ a:hover {
   color: @linkColorHover;
   text-decoration: underline;
 }
+
+
+// Images
+// -------------------------
+
+.img-rounded {
+  .border-radius(6px);
+}
+
+.img-polaroid {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
+     -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
+          box-shadow: 0 1px 3px rgba(0,0,0,.1);
+}
+
+.img-circle {
+  .border-radius(500px);
+}
\ No newline at end of file