kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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.
This commit is contained in:
Chris Rebert 2015-01-05 15:20:46 -08:00
parent 0bd8c7cb6a
commit ef453fa6ce
2 changed files with 12 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/getting-started/third-party-support.md
View File

@ -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 %}

7
scss/_scaffolding.scss
View File

@ -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;
}