Added bordered class to prototype utility!

Also
- Added bordered class to docs and visual regression testing.
- Added tables examples to docs and visual regression testing.
- Renamed Rounded elements to rounded & bordered

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 7333d0779f74f9156a34cd3063650fd5b77d04c1..479c059145eba1e1afb3935390fd6905ef7fa23c 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -45,18 +45,18 @@ Looking for more customization including **responsive breakpoints?** Click here
 
 ---
 
-## Rounded Elements
+## Rounded & Bordered
 
-These `.rounded` classes helps to make an element round its corners. This will help you quickly style the borders of an element. Mostly used in buttons, images, cards and more
+These `.rounded` & `.bordered` classes helps to make an element round its corners and give light borders respectively. This will help you quickly style the borders of an element. Mostly used in buttons, images, cards, tables and many more
 
 #### Buttons
 
 ```html_example
-<button type="button" class="button rounded primary">Primary</button>
-<button type="button" class="button rounded secondary">Secondary</button>
-<button type="button" class="button rounded success">Success</button>
-<button type="button" class="button rounded alert">Alert</button>
-<button type="button" class="button rounded warning">Warning</button>
+<button type="button" class="button rounded bordered primary">Primary</button>
+<button type="button" class="button rounded bordered secondary">Secondary</button>
+<button type="button" class="button rounded bordered success">Success</button>
+<button type="button" class="button rounded bordered alert">Alert</button>
+<button type="button" class="button rounded bordered warning">Warning</button>
 ```
 
 #### Images
@@ -82,10 +82,10 @@ These `.rounded` classes helps to make an element round its corners. This will h
 #### Cards
 
 ```html
-<div class="rounded card">
+<div class="rounded bordered card">
   <img src="assets/img/generic/rectangle-1.jpg">
   <div class="card-divider">
-    This is a Middle section
+    Rounded Card
   </div>
   <div class="card-section">
     <h4>This is a card.</h4>
@@ -97,7 +97,7 @@ These `.rounded` classes helps to make an element round its corners. This will h
 <div class="docs-code-live">
        <div class="row">
                <div class="small-4 columns">
-                       <div class="rounded card">
+                       <div class="rounded bordered card">
                          <img src="assets/img/generic/rectangle-1.jpg">
                          <div class="card-divider">
                            Rounded Card
@@ -109,7 +109,7 @@ These `.rounded` classes helps to make an element round its corners. This will h
                        </div>
                </div>
                <div class="small-4 columns">
-                       <div class="rounded card">
+                       <div class="rounded bordered card">
                          <img src="assets/img/generic/rectangle-1.jpg">
                          <div class="card-divider">
                            Rounded Card
@@ -121,7 +121,7 @@ These `.rounded` classes helps to make an element round its corners. This will h
                        </div>
                </div>
                <div class="small-4 columns">
-                       <div class="rounded card">
+                       <div class="rounded bordered card">
                          <img src="assets/img/generic/rectangle-1.jpg">
                          <div class="card-divider">
                            Rounded Card
@@ -135,6 +135,53 @@ These `.rounded` classes helps to make an element round its corners. This will h
        </div>
 </div>
 
+#### Tables
+
+```html
+<table class="rounded bordered">
+       <!-- My Table goes here -->
+</table>
+```
+
+<div class="docs-code-live">
+       <table class="rounded bordered">
+         <thead>
+           <tr>
+             <th width="200">Table Header</th>
+             <th>Table Header</th>
+             <th width="150">Table Header</th>
+             <th width="150">Table Header</th>
+           </tr>
+         </thead>
+         <tbody>
+           <tr>
+             <td>Content Goes Here</td>
+             <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+             <td>Content Goes Here</td>
+             <td>Content Goes Here</td>
+           </tr>
+           <tr>
+             <td>Content Goes Here</td>
+             <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+             <td>Content Goes Here</td>
+             <td>Content Goes Here</td>
+           </tr>
+           <tr>
+             <td>Content Goes Here</td>
+             <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+             <td>Content Goes Here</td>
+             <td>Content Goes Here</td>
+           </tr>
+           <tr>
+             <td>Content Goes Here</td>
+             <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+             <td>Content Goes Here</td>
+             <td>Content Goes Here</td>
+           </tr>
+         </tbody>
+       </table>
+</div>
+
 ---
 
 ## Font Styling

diff --git a/scss/prototype/_bordered.scss b/scss/prototype/_bordered.scss
new file mode 100644 (file)
index 0000000..665db8a
--- /dev/null
+++ b/scss/prototype/_bordered.scss
@@ -0,0 +1,46 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-bordered
+////
+
+/// Responsive breakpoints for bordered utility.
+/// @type Boolean
+$prototype-bordered-breakpoints: $global-prototype-breakpoints !default;
+
+/// Default value for `prototype-border-width`
+/// @type Number
+$prototype-border-width: rem-calc(1px) !default;
+
+/// Default value for `prototype-border-type`
+/// @type String
+$prototype-border-type: solid !default;
+
+/// Default value for `prototype-border-color` defaulted to `medium-gray`
+/// @type Color
+$prototype-border-color: $medium-gray !default;
+
+@mixin bordered {
+  border: $prototype-border-width $prototype-border-type $prototype-border-color;
+}
+
+@mixin foundation-prototype-bordered {
+  .bordered {
+    @include bordered;
+  }
+
+  @if ($prototype-bordered-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-bordered {
+            @include bordered;
+          }
+        }
+      }
+    }
+  }
+}

diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss
index 23fde760866ba6ab43df8191b70be14d68bd6a6b..732bd0c1632fad03d9593c2e4dcdb1dcddcf4008 100644 (file)
--- a/scss/prototype/_prototype.scss
+++ b/scss/prototype/_prototype.scss
@@ -27,6 +27,9 @@
 // Rounded Utility
 @import 'rounded';
 
+// Bordered Utility
+@import 'bordered';
+
 // Overflow helper classes
 @import 'overflow';
 
@@ -50,6 +53,7 @@
   @include foundation-prototype-font-styling;
   @include foundation-prototype-list-style-type;
   @include foundation-prototype-rounded;
+  @include foundation-prototype-bordered;
   @include foundation-prototype-overflow;
   @include foundation-prototype-display;
   @include foundation-prototype-position;

diff --git a/scss/prototype/_rounded.scss b/scss/prototype/_rounded.scss
index 73dabc12778cd0b8d31b78f1bb8a66d423a4c672..a0c8b536e997e23c580d06985828cb5f6acb5149 100644 (file)
--- a/scss/prototype/_rounded.scss
+++ b/scss/prototype/_rounded.scss
@@ -59,7 +59,7 @@ $prototype-border-radius: rem-calc(4px) !default;
     @include border-left-radius;
   }
   .rounded-circle {
-    @include rounded-circle
+    @include rounded-circle;
   }
 
   @if ($prototype-rounded-breakpoints) {
@@ -83,7 +83,7 @@ $prototype-border-radius: rem-calc(4px) !default;
             @include border-left-radius;
           }
           .#{$size}-rounded-circle {
-            @include rounded-circle
+            @include rounded-circle;
           }
         }
       }

diff --git a/test/visual/prototype/rounded-bordered.html b/test/visual/prototype/rounded-bordered.html
new file mode 100644 (file)
index 0000000..f2ac3e0
--- /dev/null
+++ b/test/visual/prototype/rounded-bordered.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Foundation for Sites Testing</title>
+    <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
+    <link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
+
+  </head>
+  <body>
+    <div class="row column">
+      <h2 class="m-t-20">Buttons</h2>
+      <button type="button" class="button rounded bordered primary">Primary</button>
+      <button type="button" class="button rounded bordered secondary">Secondary</button>
+      <button type="button" class="button rounded bordered success">Success</button>
+      <button type="button" class="button rounded bordered alert">Alert</button>
+      <button type="button" class="button rounded bordered warning">Warning</button>
+    </div>
+    <div class="row column">
+      <h2 class="m-t-20">Images</h2>
+      <img src="http://placehold.it/100x100" class="rounded m-r-10">
+      <img src="http://placehold.it/100x100" class="rounded-circle m-r-10">
+      <img src="http://placehold.it/100x100" class="rounded-top m-r-10">
+      <img src="http://placehold.it/100x100" class="rounded-right m-r-10">
+      <img src="http://placehold.it/100x100" class="rounded-bottom m-r-10">
+      <img src="http://placehold.it/100x100" class="rounded-left m-r-10">
+    </div>
+    <div class="row column">
+      <h2 class="m-t-20">Cards</h2>
+      <div class="rounded bordered card" style="width: 300px;">
+        <img src="../assets/img/generic/rectangle-1.jpg">
+        <div class="card-divider">
+          Rounded Card
+        </div>
+        <div class="card-section">
+          <h4>This is a card.</h4>
+          <p>It has an easy to override visual style, and is appropriately subdued.</p>
+        </div>
+      </div>
+    </div>
+    <div class="row column">
+      <h2 class="m-t-20">Tables</h2>
+      <table class="rounded bordered">
+        <thead>
+          <tr>
+            <th width="200">Table Header</th>
+            <th>Table Header</th>
+            <th width="150">Table Header</th>
+            <th width="150">Table Header</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Content Goes Here</td>
+            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+            <td>Content Goes Here</td>
+            <td>Content Goes Here</td>
+          </tr>
+          <tr>
+            <td>Content Goes Here</td>
+            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+            <td>Content Goes Here</td>
+            <td>Content Goes Here</td>
+          </tr>
+          <tr>
+            <td>Content Goes Here</td>
+            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+            <td>Content Goes Here</td>
+            <td>Content Goes Here</td>
+          </tr>
+          <tr>
+            <td>Content Goes Here</td>
+            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+            <td>Content Goes Here</td>
+            <td>Content Goes Here</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p class="m-y-20">&nbsp;</p>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>

diff --git a/test/visual/prototype/rounded.html b/test/visual/prototype/rounded.html
deleted file mode 100644 (file)
index 0a1624d..0000000
--- a/test/visual/prototype/rounded.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Foundation for Sites Testing</title>
-    <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
-    <link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
-
-  </head>
-  <body>
-    <div class="row column">
-      <h2 class="m-t-20">Rounded Buttons</h2>
-      <button type="button" class="button rounded primary">Primary</button>
-      <button type="button" class="button rounded secondary">Secondary</button>
-      <button type="button" class="button rounded success">Success</button>
-      <button type="button" class="button rounded alert">Alert</button>
-      <button type="button" class="button rounded warning">Warning</button>
-    </div>
-    <div class="row column">
-      <h2 class="m-t-20">Rounded Images</h2>
-      <img src="http://placehold.it/100x100" class="rounded m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-circle m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-top m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-right m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-bottom m-r-10">
-      <img src="http://placehold.it/100x100" class="rounded-left m-r-10">
-    </div>
-    <div class="row column">
-      <h2 class="m-t-20">Rounded Cards</h2>
-      <div class="rounded card" style="width: 300px;">
-        <img src="../assets/img/generic/rectangle-1.jpg">
-        <div class="card-divider">
-          Rounded Card
-        </div>
-        <div class="card-section">
-          <h4>This is a card.</h4>
-          <p>It has an easy to override visual style, and is appropriately subdued.</p>
-        </div>
-      </div>
-    </div>
-
-    <script src="../assets/js/vendor.js"></script>
-    <script src="../assets/js/foundation.js"></script>
-    <script>
-      $(document).foundation();
-    </script>
-  </body>
-</html>