CSS Box Sizing Reset

[hedgecox]

Sakura seems to be almost 'plug and play' however the issue I seem to run into is the lack of box-sizing reset. A very basic CSS reset such as the following would prevent the need for global override on every project:

    html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

My only concern is this is potentially a breaking change as anyone who is currently using the default box sizing without a global override could potentially have layout shifts if this was applied

[oxalorg]

@hedgecox Yes I agree.

I wanted to include it, but instead thought it would be better to recommend people to use Normalise.css as I was not too keen on reimplementing what normalize does. Turns out normalize does not add the border-box as I assumed it did.

We should definitely look forward to adding this, maybe in a v2 release. I'm open to more suggestions!

[hedgecox]

@oxalorg Sorry for the slow reply in getting back to this

Having a quick look at the Normalize.css source, I don't think there is a huge number of styles that would actually take affect (expecially in modern browsers) as they are immediately overridden by the Sakura styles.

You could probably achieve almost a full css reset by using something like the following (not tested)

   html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
        margin: 0;
        padding: 0;
    }