Demo of design sprint brochure site documentation

[bartaz]

Added a (work in progress) documentation on how to build brochure sites:
https://vanilla-framework-4708.demos.haus/docs/layouts/brochure

This is based on Figma design: https://www.figma.com/file/DZ7V6EFl18u72JLJrFDB2v/Building-brochure-pages-with-Vanilla-4.0

Currently it just includes the main examples of layouts as first pass, more content will be added later.

QA

• Review the docs:
  • https://vanilla-framework-4708.demos.haus/docs/layouts/brochure
• Review the provided examples:
  • https://vanilla-framework-4708.demos.haus/docs/examples
  • Look for all "Brochure site" examples in Layout section

[webteam-app]

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

[ClementChaumel]

It makes sense to use the layout we're talking about to showcase it but since it's embedded in the full-width one it's kind of a weird case IMO
I know I should read it as the green lines show but in my mind, I keep including the navigation like the red lines show

What do you think?

[bartaz]

It makes sense to use the layout we're talking about to showcase it but since it's embedded in the full-width one it's kind of a weird case IMO

Yes, I know what you mean. The thing is that the side navigation is outside of the grid, so it's not really counted in that. But I know that it may not look like this (especially on smaller screens when you see it close.

In the end, this is how it's gonna look like. Maybe we can later explain better that in layout with side navigation navigation is not part of this 25% rule. But for now it is how it is expected to be.

[ClementChaumel]

In the end, this is how it's gonna look like. Maybe we can later explain better that in layout with side navigation navigation is not part of this 25% rule. But for now it is how it is expected to be.

Ah ok I wasn't sure if it was meant to be used alongside the navigation. All good then!

[ClementChaumel]

This looks good to me. I just had a higher-order question: Since this is how we want the pages to be built shouldn't this be treated as a new pattern with its own classes instead of just being built with col?

[ClementChaumel]

Do we want to add a max-width utility or just update the lists to match the <p> behaviour?

[bartaz]

That's a good question that I didn't want to solve in this PR. I'll open a separate issue and we can discuss there.

[bartaz]

This looks good to me. I just had a higher-order question: Since this is how we want the pages to be built shouldn't this be treated as a new pattern with its own classes instead of just being built with col?

Yes, that's what https://warthogs.atlassian.net/browse/WD-2886 is about, but for now we want to provide documentation about how to build it with current Vanilla, so devs don't have to wait for new components.