Box model – border-box vs content-box

[Dean]

I’m used to working with a box model where padding and borders are included in widths. It just makes sense to me that when I want an element to be, say, 200px wide, that I don’t have to subtract any padding or borders from that. So, in previous projects might declare this in my CSS just to zero everything out:

‘*, *:before, *:after {
box-sizing: border-box;
}`

I’m using GPP 1.9.1 and it’s using the default box model (content-box). Just wondering if any thought has gone into making a future version use border-box?

Or, if anybody has set up for border-box (by declaring a CSS rule like the one above) and then done the work of finding all the overrides needed to make the layout work as before I would be very grateful if they would like to share their work here. A SCSS module would be perfect 🙂

Similarly, is there an intention to move away from floats and into flex for layout? I see GenerateBlocks uses border-box and has flex statements sprinkled through the CSS – a sign of the future? And if that’s the case, are you able to say when a release of GPP might include these techniques?

Thanks and keep up the great work.

Cheers
Dean

[David]

Hi there,

If you need to pass down the border-box sizing model then this CSS is probably the better solution:

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

GP has ben around for over 6 years so adding this directly to the Theme would effect a lot of users websites. So its much simpler that if people need it – to use the CSS above. Personally i prefer adding the border-box model where i know its required.

Flexbox is on the cards for the GeneratePress theme. Can’t say for certain but hope to see it sometime this year.

Thanks for the great feedback – much appreciated.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts