Document vertical spacing utilities

[sowasred2012]

Done

Adding documentation and example around vertical spacing (u-sv) utilities.

Fixes #4026

QA

• Open vertical spacing example
• See that the example makes sense (it's clearer when the baseline grid overlay is applied)
• Review updated documentation:
  • Vertical spacing docs

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

[webteam-app]

Demo starting at https://vanilla-framework-4092.demos.haus

[lyubomir-popov]

LGTM

[bartaz]

Some suggested rewording of do/donts

[bartaz]

This turns out very long on screen.

Would the individual examples fit into columns side by side? Maybe 6 columns (if we drop the middle example without utility)?

[bartaz]

It also looks bit weird to have HTML code in the example text. I don't think we do it anywhere. It makes it look a bit confusing or as an error.

Maybe instead of <p> in text just keep the utility class name, and word "text" or "paragraph" in the one that is pushed without class name?

[sowasred2012]

@bartaz

It also looks bit weird to have HTML code in the example text. I don't think we do it anywhere. It makes it look a bit confusing or as an error.

Maybe instead of <p> in text just keep the utility class name, and word "text" or "paragraph" in the one that is pushed without class name?

I was using this as a basis: https://vanillaframework.io/docs/examples/utilities/margin-collapse

[sowasred2012]

@bartaz also - with columns it looks like this, which looks quite weird to me: