@moki.codes/mokui-layout NPM

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.