From 14ec5ac00009733afda02ef8f37aebb7c0d2047e Mon Sep 17 00:00:00 2001
From: harry <harmanmanchanda182@gmail.com>
Date: Tue, 21 Feb 2017 21:30:43 +0530
Subject: [PATCH] Added border box utility Also added the docs for the same

---
 docs/pages/prototyping.md       | 24 +++++++++++++++-------
 scss/prototype/_border-box.scss | 35 +++++++++++++++++++++++++++++++++
 scss/prototype/_prototype.scss  |  4 ++++
 3 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 scss/prototype/_border-box.scss

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 5682ccb29..88dea5631 100644
--- 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
index 000000000..e65345d4a
--- /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 7633d9cc6..e05a3fe4e 100644
--- 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;
 }
-- 
2.47.2