Use improved box sizing reset

Based on http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
This allows us to significantly simplify the relevant part of the docs.

diff --git a/docs/getting-started/third-party-support.md b/docs/getting-started/third-party-support.md
index ea22cf589fb212869f62733c7e35f543ab02e100..604290d0288cef99f47a0c6a4d32cb05c8dfe258 100644 (file)
--- a/docs/getting-started/third-party-support.md
+++ b/docs/getting-started/third-party-support.md
@@ -7,50 +7,19 @@ While we don't officially support any third party plugins or add-ons, we do offe
 
 ### Box-sizing
 
-Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
+Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
 
-Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).
+You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page:
 
 {% highlight scss %}
-/* Box-sizing resets
+/* Box-sizing reset
  *
- * 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 uncompiled Sass formats.
+ * Override an entire region's box model via CSS
+ * to avoid conflicts due to the global box model settings of Bootstrap.
  */
-
-/* Option 1A: Override a single element's box model via CSS */
-.element {
+.selector-for-some-widget {
   -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
           box-sizing: content-box;
 }
-
-/* Option 1B: Override a single element's box model by using a Bootstrap Sass 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 with a custom Sass mixin */
-.reset-box-sizing {
-  &,
-  *,
-  *:before,
-  *:after {
-    .box-sizing(content-box);
-  }
-}
-.element {
-  .reset-box-sizing();
-}
 {% endhighlight %}

diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index b5d767e64b2b8e71dc015809b13785d8b4b504a3..bb867c615b9997f6459e8cdbcd1a81db9c9dc860 100644 (file)
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -8,10 +8,15 @@
 // Heads up! This reset may cause conflicts with some third-party widgets.
 // For recommendations on resolving such conflicts, see
 // http://getbootstrap.com/getting-started/#third-box-sizing
+// Credit: Jon Neal & CSS-Tricks
+// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+html {
+  box-sizing: border-box;
+}
 *,
 *:before,
 *:after {
-  box-sizing: border-box;
+  box-sizing: inherit;
 }