CSS Layout: Consistent padding

[woocommerce]

CSS Layout: Consistent padding

[jameskoster]

We've just begun looking at hifi component designs which is where something like this will reveal itself. Obviously in Sketch everything is in pixels, so whether we use relative units or not is purely a development decision I think.

If we use em, I think the most important thing to note right now is that we're using a base font-size of 16px.

For padding etc, we might consider setting variables based on the base font size and some kind of ratio.

$font_size: 16px;
$ratio: 1.2;
$padding: $font_size * $ratio;
$less_padding: $font_size / $ratio;
$more_padding: $font_size * $ratio * $ratio;

Just an idea.

[ryelle]

As of #86, we now have a $spacing sass variable, so that can be used like padding: $spacing * 2;

Currently it's set to 16px, we can swap & update the ActivityCard styles if needed once we have a final design & know what those values really should be.

[ryelle]

@kellychoffman @jameskoster @LevinMedia Do you have a consistent "rhythm" to the padding? We could define a base of say 8px or 20px and use multiples from there? Do you have opinions on the rem/em idea?

[kellychoffman]

Good question. Calypso had an 8px grid. Gutenberg is based on a 24px icon size and uses 6,8,12 pixel increments for type,padding,margin,etc.

As far as rem v. em.... Gutenberg doesn't use them because: themes. But we don't have to worry about that here. From what I understand, em is based on parent element font size and rem is based on root font size. So if we don't want something like a link or icon to resize with the text size, we'd use rem.

I'm open to using them. FWIW, it looks like Jetpack is using rems - @MichaelArestad wrote a basic sass function that does the math for you: https://github.com/Automattic/jetpack/blob/master/_inc/client/scss/functions/rem.scss

[ryelle]

Closing this in favor of #119