layout web ui subsystem
npm install @moki.codes/mokui-layoutlayout
--------------------------------------------------------------------------------
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 Modificators Variables * --layout-min-width Elements header aside-left main aside-right footer container container-fluid
--------------------------------------------------------------------------------
`>
...
responsive, centered content
...
``
--------------------------------------------------------------------------------
| 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 |
--------------------------------------------------------------------------------
layout defines variables
- 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
--------------------------------------------------------------------------------
* header
* aside-left
* main
* aside-right
* footer
* container
* container-fluid
--------------------------------------------------------------------------------
layout's header element, height controlled by layout's --layout-header-height
--------------------------------------------------------------------------------
left aside element
--------------------------------------------------------------------------------
layout's main element, only purpose is to place element inside grid markup as
a main content element
--------------------------------------------------------------------------------
right aside element
--------------------------------------------------------------------------------
layout's footer element, height controlled by layout's --layout-footer-height
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
layout's fluid container element.
takes 100% of available width but (--gap) on each side