Completely revamp how we layout pages

[davidknezic]

In order to simplify how we build web apps, I'm proposing this complete revamp of our page layout.

It's aim is:

• Don't force the .site, .site__page and .site__mobile structure on every site
• Let developers drop content into body directly
• Remove every overhead from very simple sites
• Make it easier to use fixed positioned elements, like sticky headers

Now an image that really made you read this pr, but won't help you because even I don't understand it anymore:

So far these are the changes:

• New drawer block
  • persistent-{breakpoint}-left and -right modifiers, if it should always be open
  • togglable-{breakpoint}-left and -right modifiers, if it should be togglable by adding the in class
  • togglable-{breakpoint}-top modifier, if it should toggle from above by adding the in class
• New mask block
• Copied the super helpful breakpoint mixins from Bootstrap v4
• New overflow-{breakpoint}-hidden utils
• New push-{breakpoint}-left and -right utils (should be renamed)

The idea is the following:

You have all the classes available so you can define all possible layouts in your markup. You can use different layouts per viewport.

Things pending:

• Write a jQuery plugin for the mobile behavior
• Document all Sass utilities (Define docs structure, add missing docs #22)
• Write a guide on how to layout web apps (Define docs structure, add missing docs #22)
• Is drawer the right name for that thing that can either slide into your viewport or be there persistently?
• The push-{breakpoint}-{direction} utils are here to add padding to all the content to make room for a persistent drawer. Is push the right name for that?

[davidknezic]

https://design.axa.com/feature-layout/index.html

[davidknezic]

Going to merge this in order to start with the cleanup of the docs. After that, there will be a pr documenting and explaining the modular header (#12) and the new revamped layout. Tracking documentation in #22.