Added border box utility

Also added the docs for the same

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 5682ccb293be12876785addb742eb791222ef721..88dea5631b8d2b491820098637e1fd9554ff467e 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -442,6 +442,16 @@ These width and height classes helps you to easily make an element as wide or as
 
 ---
 
+## Border box 
+
+Border box lets you only add the content, padding and border, but not the margin within the width and height css properties.
+
+```html
+<div class="border-box"></div>
+``` 
+
+---
+
 ## Display Classes
 
 Display classes helps to display the elements in specific positions inside any other HTML elements.
@@ -515,7 +525,9 @@ You might want to include a logo on the page but you also would like to use a te
 
 ---
 
-## Text Transformation
+## Text Helpers
+
+### Text Transformation
 
 Text transformation lets you control the capitalization of text. You can change the text transformation by adding `.text-uppercase`, `text-lowercase`, `text-capitalize` to an element. 
 
@@ -535,7 +547,7 @@ Note how `text-capitalize` just changes the first letter of every single word, l
 
 ---
 
-## Text Decoration
+### Text Decoration
 
 Text Decoration can be used to underline, overline, or line-through a text. You can change the text decoration by adding `.text-underline`, `text-overline`, `text-line-through` to an element.
 
@@ -547,7 +559,7 @@ Text Decoration can be used to underline, overline, or line-through a text. You
 
 ---
 
-## Text Truncate
+### Text Truncate
 
 The `text-truncate` displays an elipsis when the text must be in a single straight line that should overflows a box where overflow is hidden. See how in example the content did not crossed the first line!
 
@@ -557,9 +569,7 @@ The `text-truncate` displays an elipsis when the text must be in a single straig
 
 ---
 
-## Text Wrapping
-
-#### Text No-wrap
+### Text No-wrap
 
 If you would like to prevent the text wrapping into the next line you can utilize `text-nowrap`. Please note that the text will continue to be in same line unless the `<br/>` tag is used.
 
@@ -567,7 +577,7 @@ If you would like to prevent the text wrapping into the next line you can utiliz
 <p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
 ``` 
 
-#### Text Wrap
+### Text Wrap
 
 Oppositely, if you are looking for text wrapping into the next line, you can use `text-wrap`.
 

diff --git a/scss/prototype/_border-box.scss b/scss/prototype/_border-box.scss
new file mode 100644 (file)
index 0000000..e65345d
--- /dev/null
+++ b/scss/prototype/_border-box.scss
@@ -0,0 +1,35 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-bordered
+////
+
+/// Responsive breakpoints for border box.
+/// @type Boolean
+$prototype-border-box-breakpoints: $global-prototype-breakpoints !default;
+
+/// Border box utility
+@mixin border-box {
+       box-sizing: border-box !important;
+}
+
+@mixin foundation-prototype-border-box {
+       .border-box {
+               @include border-box;
+       }
+
+       @if ($prototype-border-box-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-border-box {
+                                               @include border-box;
+                                       }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss
index 7633d9cc6ccaa1b1a111315a5205b1befae9bd49..e05a3fe4ed32c9238b1ab90cadec4cb963830b02 100644 (file)
--- a/scss/prototype/_prototype.scss
+++ b/scss/prototype/_prototype.scss
@@ -45,6 +45,9 @@
 // Position Helpers
 @import 'position';
 
+// Border box
+@import 'border-box';
+
 // Sizing Utilities
 @import 'sizing';
 
@@ -63,6 +66,7 @@
   @include foundation-prototype-overflow;
   @include foundation-prototype-display;
   @include foundation-prototype-position;
+  @include foundation-prototype-border-box;
   @include foundation-prototype-sizing;
   @include foundation-prototype-spacing;
 }