Woocommerce-admin: CSS Layout: Consistent padding

[psealock]

Our code base is gathering inconsistent padding as elements take shape. Some examples:

padding: 12px;
padding: 8px 16px 8px 16px;
padding-bottom: 10px;
padding: 2em;

Now is a good time to set some standard rules for padding so elements and their contents line up without developers needing to think about it too much.

Additionally, there are benefits to using relative units such as em or rem so that padding can reflect changes in font-sizes made to the entire document or component.

Some info here, https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

[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

[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]

Closing this in favor of #119