From ef453fa6cee06629a69efca47ad0e56a8ea7d853 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 5 Jan 2015 15:20:46 -0800 Subject: 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. --- docs/getting-started/third-party-support.md | 43 ++++------------------------- 1 file changed, 6 insertions(+), 37 deletions(-) (limited to 'docs/getting-started') diff --git a/docs/getting-started/third-party-support.md b/docs/getting-started/third-party-support.md index ea22cf589..604290d02 100644 --- 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 %} -- cgit v1.2.3