Remove global box-sizing reset

[st3phan]

Could you consider removing the global box-sizing: border-box reset declaration?

It sometimes starts messing up layouts because the styleguide.css is of course not included in my production project. So where in patternlab the box-sizing reset applies to all elements it does not when viewing elements outside of patternlab because there is no global reset in my production CSS. I only set box-sizing to border-box on elements that need it.

So please consider removing this global box sizing reset:

/*------------------------------------*\
#RESET
\*------------------------------------*/

/**
* Apply border-box to all elements
*
* 1) This is a broadly-applied style that affects every
* element on the screen. This can bleed into user's styles
* but since it's been a best practice for years now we're
* going to default to this.
*/
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

And apply it only to elements that need it:

.sg-input {
    box-sizing: border-box; // apply to element that needs the reset
    margin: -2px 0 0 0;
    padding: 0.1em;
    border: 0;
    border-radius: $sg-border-radius;
    background: $sg-black;
    color: $sg-gray;
    width: 25px;
    text-align: right;
    transition: all $sg-animate-quick ease-out;
    ...
}

[bradfrost]

@st3phan This is a tricky one, as the effects of the border-box reset are far-reaching, but also extremely helpful. It's more than just sg-input that receives the updates from border-box; any element that contains a combination of padding, border, and width are affected. Paul Irish explains in his blog post.

I'm going to research how popular this technique is before committing to either change it or not.

[bradfrost]

Alright, the solution I used was to wrap the star selector in .pl-c-body {}, which will only apply to Pattern Lab UI styles and nothing inside the iframe. It doesn't seem to break any of the PL-specific UI patterns inside the iframe, so this is addressed.