Move away from * { box-sizing: border-box } to play nice with 3rd party scripts

Created by: staaky

The snippet below can be found in bootstrap.css:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Using this global css reset is fine as long as someone uses Bootstrap exclusively. Once third party scripts come into play this global reset to border-box starts messing up layouts.

For example, a lot of bug reports I'm getting for my (lightbox and tooltip) scripts concerning layouts being off end up being caused by this practice in Bootstrap. I'd say it's not something that belongs in a framework, unless it's meant to be used without third party scripts.

Foundation used to have this problem. It was fixed very elegantly in 5.0 by using a mixin to add the box-sizing reset to just the components that need it. By not defining it on * third party scripts remain unaffected and work out of the box. They can rely on the default box-sizing content-box being in place without anyone having to make css adjustments to reset things back to default.

I'm hoping something similar can be done in Bootstrap.