npm package: @moki.codes/mokui-layout
Description: layout web ui subsystem
Author: Kirill Morozov
Latest version: 0.6.1

layout
--------------------------------------------------------------------------------

Description
--------------------------------------------------------------------------------
Layout block provides subsystem with the top most wrapper for a page content
layout after theme or on the same level, essential child elements:
header, main, footer. Other two elements are container and container-fluid.
All of the elements behavior described in their appropriate section.

Installation
--------------------------------------------------------------------------------
```
yarn add @moki.codes/mokui-layout
```

Styles
--------------------------------------------------------------------------------
```
@import "@moki.codes/mokui-layout/dist/mokui-layout.css"
```

Basic Usage
--------------------------------------------------------------------------------
```
...
<body class="layout
             layout_type_holy-grail"
>
        <header class="layout__header">
                <div class="layout__container-fluid>
                        full width content but gaps
                </div>
        </header>
        <main class="layout__main">
                <div class="layout__container">
                        responsive, centered content
                </div>
        </main>
        <footer class="layout__footer"></footer>
</body>
...
```

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-\<s,m,l,xl\>).
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