VaContent should be applied to doc block, not whole page

[asvae]

The idea of VaContent or .va-typography-block is that you use this component/class, when you want to apply vuesting styling. And you have clear reset if you don't apply it.

So, in opposition to other UI solutions, vuestic-ui can work without root level wrapper component (see VApp in vuetify etc). That's our selling point (even if not the biggest one).

Right now, in documentation all page is wrapped in va-content, which makes it harder for us to test components and for user - to understand, why code doesn't work out of the box looking at example at hand.

So, here's a couple of ideas I think would give us an improvement

• [ ] Use typography wrappers for doc blocks instead of using one wrapper for whole page.
  • [ ] Ideally we want to prevent wrapping each example. Not sure if that's achievable. [FEEDBACK NEEDED]
• [ ] Fix broken VaDataTable looks without .va-typography-block
• [ ] All other components should work all right in context of .va-typography-block, use #1168 to test that.
• [ ] Check other documentation pages if we have same issues with typography usage.
• [ ] Rename VaContent to VaTypographyBlock for consistency. [FEEDBACK NEEDED]
• [ ] Add documentation page
  • [ ] Outline for users that if they want typography styling for whole app - they can apply style at app level.
  • [ ] And if they don't - they have to use class/component for each case or use their own styling.
  • [ ] In developers docs:
    • [ ] Outline the philosophy behind the solution. It's intended to keep vuestic-ui App-less and allow for easy style overrides. I.e. if you have global tag based typography - you have to fight against framework sometimes. In our case it works on opt-in basis, so you can minimize override costs.

[rustem-nasyrov]

Ideally we want to prevent wrapping each example. Not sure if that's achievable. [FEEDBACK NEEDED]

We can achive this with .va-typography-block:not(.code-example).

[m0ksem]

@m0ksem, still not fixed in nuxt docs.