Foundation.mozilla.org: [Components] Spacings

[taisdesouzalessa]

Issue

We have been discussing if spacings should be attached to components or added as a separate element. Each direction has its pros and cons and this ticket is a central place for the discussion so hopefully we can reach an agreement that suits our needs the best.

References (feel free to edit this post and add more):

• Good article on Medium on the issue

This ticket is related to #1379 - decisions made on the system level will affect the vertical spacing on CMS components

[taisdesouzalessa]

@gvn @kristinashu I believe we decided to do some research on that and meet either later on this week or early next week to decide it, correct?

[xmatthewx]

Components should have a basic amount of spacing so they can't mash against each other. We should expect users to not notice or care. We can offer additional spacing, but it shouldn't be required.

[gvn]

My general thought is that we put top/bottom margin of 16px on components by default, which is the equivalent of the my-3 Bootstrap class.

If more spacing is desired, then the spacer component can be added, but I rarely see a need for less vertical spacing than 16px.

[taisdesouzalessa]

Sabrina, Kristina and I were discussing this yesterday and Sabrina had suggested the same thing: to have a default and if we need to add more we could. That seems a good solution. Before we decide the exact number, I would like to take a look at the current pages to make sure the vertical spacing is not too big, to small.

@sabrinang, maybe we could work together on this since you are putting that list of components together?

[taisdesouzalessa]

Talked to Sabrina about this issue + did some studies on the opportunity pages imagining the scenario: "What if we just had spacing=16px?"

As per @gvn's suggestion, 16px as default seems to be a good place to start with, in order to address @xmatthewx's concern on elements mashed against each other. We already use margin-bottom = 16px in our h1-h6 plus in body copy if I am not mistaken. As you can see from the studies below, the default of 16px is okay as a starting point but we sill need to give staff some control to add more spacing since many staff members populate those pages with lots of content.

Here is the study with all elements having default of 16px: InVision

Some recommendations:

• use only margin bottom=16px (not margin top and bottom, otherwise stacked elements may have a distance of 32px) _scratch that, see Gavin's comment below_
• I recommend we keep the line break option available to users because to keep hierarchy and also to keep the pages interesting, we have to break the monotony of 16px - as you can see in the example B above, a constant space of 16px is not ideal in the scenario.
• The "Healthy Internet" component should have different spacing since it looks better when a little bit further from the content above. I would recommend it to have margin top of 32px since any element above it will have margin bottom of 16px (32+16=48px, which is the distance between this component and footer.

Gavin, Matthew, @kristinashu does that make sense to you?

[gvn]

use only margin bottom=16px (not margin top and bottom, otherwise stacked elements may have a distance of 32px)

This will still only be a margin of 16px total due to margin collapse.

[taisdesouzalessa]

Learned a new thing today! I was not aware of this margin collapse thing! Thanks @gvn :). I will scratch this part of my comment above.

[kristinashu]

Love the recommendations @taisdesouzalessa! It will be a massive improvement to have this consistent spacing. Just to be super clear, are you saying we should add 16px both above and below every component (except for Healthy Internet" component)?

[taisdesouzalessa]

Yep @kristinashu - as default. But we should still allow users (and encourage them) to use the line break (or hit enter in the keyboard) to add more spaces so we can group related blocks of content (in order to avoid the "example B", which is not great in information grouping - the live page does a better job at it).

[taisdesouzalessa]

Implementation ticket here: #1474. Closing this one.