@moki.codes/mokui-layout

Modificators
--------------------------------------------------------------------------------
| name | value | description |
| ----------- | ------------- | ---------------------------------------------- |
| type | holy-grail | establishes full holy grail layout, aside left |
| | | aside right included. layout stretched full |
| | | viewport height, dropped footer by default |
| type | holy-grail- | holy grail with main and left aside |
| | asleft | |
| type | holy-grail- | holy grail with main and right aside |
| | asright | |
| type | holy-grail- | holy grail with main only |
| | main | |
| header | dense | set header height to dense, sets |
| | | --layout-header-height to --msp-1 * 2 |

Variables
--------------------------------------------------------------------------------
layout defines variables

* --layout-min-width
- minimal width layout shrinks default: 320px
* --layout-min-height: auto;
- layout minimum height
* --layout-header-height
- header height inside the layout defaults to --msp-1 * 3,
override to change appearance
* --layout-footer-height
- footer height inside the layout default to auto,
override to change appearance

Elements
--------------------------------------------------------------------------------
* header
* aside-left
* main
* aside-right
* footer
* container
* container-fluid

header
--------------------------------------------------------------------------------
layout's header element, height controlled by layout's --layout-header-height

aside-left
--------------------------------------------------------------------------------
left aside element

main
--------------------------------------------------------------------------------
layout's main element, only purpose is to place element inside grid markup as
a main content element

aside-right
--------------------------------------------------------------------------------
right aside element

footer
--------------------------------------------------------------------------------
layout's footer element, height controlled by layout's --layout-footer-height

container
--------------------------------------------------------------------------------
layout's container element. Centers content in the layout, responsive, relies
on the breakpoints set inside the theme(-screen-\).
On each breakpoint stays at the max-width of the breakpoint
with 2 (--gap)'s subtracted.

container-fluid
--------------------------------------------------------------------------------
layout's fluid container element.
takes 100% of available width but (--gap) on each side