From 36afdbcaac504117d515240cc7294c3fcbde4e45 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 3 Sep 2013 00:49:59 -0700
Subject: [PATCH] mo betta docs on box-sizing to build on
 e521ee83094f5a70978cc9d879f400c3ac95369c

---
 getting-started.html | 44 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/getting-started.html b/getting-started.html
index 79252dcca8..c4bb236750 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -761,28 +761,50 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
     <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.</p>
 
     <h3>Box-sizing</h3>
-    <p>Certain third party tools—such as Google Maps and Google Custom Search Engine—have trouble working out of the box with Bootstrap due to our use of <code>* { box-sizing: border-box; }</code>. Use the following snippet to override it when necessary.</p>
+    <p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
+    <p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p>
 {% highlight css %}
-/* Box-sizing reset
+/* Box-sizing resets
  *
- * Wrap your third party code in a `.reset-box-sizing` to override Bootstrap's
- * global `box-sizing` changes. Use Option A if you're writing regular CSS or
- * Option B for use in Less via mixin (requires access to Bootstrap's mixins).
+ * Reset individual elements or override regions to avoid conflicts due to
+ * global box model settings of Bootstrap. Two options—individual overrides and
+ * region resets—are available as plain CSS and Less.
  */
 
-/* Option A: CSS */
-.reset-box-sizing,
-.reset-box-sizing * {
+/* Option 1A: Override a single element's box model via CSS */
+.element {
   -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
           box-sizing: content-box;
 }
 
-/* Option B: Less mixin */
-.reset-box-sizing,
-.reset-box-sizing * {
+/* Option 1B: Override a single element's box model via Bootstrap Less mixin */
+.element {
   .box-sizing(content-box);
 }
+
+/* Option 2A: Reset an entire region via CSS */
+.reset-box-sizing,
+.reset-box-sizing *,
+.reset-box-sizing *:before,
+.reset-box-sizing *:after {
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+}
+
+/* Option 2B: Reset an entire region via custom Less mixin */
+.reset-box-sizing {
+  &,
+  *,
+  *:before,
+  *:after {
+    .box-sizing(content-box);
+  }
+}
+.element {
+  .reset-box-sizing();
+}
 {% endhighlight %}
   </div>