Archived topic
Box model - border-box vs content-box
1 reply · Started by Dean on April 23, 2020
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
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.
