zoralabCORE Technical Specification - ZORALab's Hestia

The technical specifications to refer when using the package. Easy-going, offline supported (via web PWA installation), and detailed oriented. Courtesy from ZORALab's Hestia.

Objectives and Purposes

Main Purpose

This package's primary purpose is to provide user interface (UI) styling fundamental controls and default values for consistently controlling various other compatible UI components.

Legacy Recording

This package was known as core_hestiaUI before ZORALab's Hestia v1.2.0. The transformation was due to someone attempting to steal the copyrights and makes way for programming package's documentation restructuring.

Product Designs

Designers

This component was designed by the following creators:

(Holloway) Chew, Kean Ho

Dependencies

This component has no dependency.

HTML

For HTML, ZORALab's Hestia employs the W3C native syntax for simplicity and maximum compatibility sakes. ZORALab's Hestia recommends the following HTML code structure for this component.

Page Structure HTML

The compliant HTML page structure is shown below:

<!DOCTYPE html>
<html lang="...">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>...</title>
	...
	<style>...</style>
	<script defer>...</script>
	...
</head>
<body>
	<main>
		<section ...>
			...
		</section>

		<section ...>
			...
		</section>

		...
	</main>

	<footer>
		<section ...>
			...
		</section>

		<section ...>
			...
		</section>

		...
	</footer>

	<nav class='top-drawer'>
		...
	</nav>

	<nav class='left-drawer'>
		...
	</nav>

	<nav class='right-drawer'>
		...  <!-- THE LAST DRAWER HAS THE HIGHEST PRIORITY -->
	</nav>
</body>
</html>

Grid System HTML

The grid system HTML codes are shown below:

<!-- NOTE: PLEASE USE <div> FOR PROPER AND CONSISTENT CONTAINMENT. -->
<div class='row'>
	<div class='column'>
		...
	</div>

	<div class='column'>
		...
	</div>

	<div class='column'>
		...
	</div>

	...
</div>

CSS

ZORALab's Hestia heavily rely on CSS to style this component and offering its css variables for customizations. Below are the list of available CSS variables at your disposal.

Color System

ZORALab's Hestia heavily rely on CSS to style this component and offering its css variables for customizations. Below are the list of available CSS variables at your disposal. (Example: row 1 column 2 is --color-typography-100).

Variant	`50`	`100`	`200`	`300`	`400`	`500`	`600`	`700`	`800`	`900`	`950`
`--color-typography-`
`--color-dark-typography-`
`--color-contrast-`
`--color-dark-contrast-`
`--color-primary-`
`--color-dark-primary-`

Indicator Color System

The standard engineering indication system are also supplied for safety use. The are shown as follows (E.g. row 1 column 2 is --body-color-indicator-yellow):

Variant	`red`	`yellow`	`green`
`--body-color-indicator-`
`--body-background-indicator-`

Unified Typography Color System

The unified typography color system are also supplied for common readability. The are shown as follows (E.g. row 1 column 2 is --body-color-inverted):

Variant	`color`	`color-inverted`	`color-print`	`background`	`background-inverted`	`background-print`
`--body-`

Animation Timing System

This component also supplies consistent animation timing system. The are shown as follows (E.g. row 1 column 2 is --timing-fast):

Variant	`rapid`	`fast`	`normal`	`slow`	`slowest`
`--timing-`	`.2s`	`.3s`	`.4s`	`.5s`	`.8s`

Base Font System

The base font system are supplied for basic use. The are shown as follows (E.g. row 1 column 2 is --body-font-size):

Variant	`font-family`	`font-size`	`font-size-print`	`font-weight`	`letter-spacing`	`line-height`	`text-align`
`--body-`	`"Roboto", "Helvetica Neue", "sans-serif"`	`1.8rem`	`12pt`	`normal`	`.01rem`	`1.6`	`center`

Typography System

This component also supplies a consistent typography system. They are shown as follows (E.g. row 1 column 2 is --h1-font-style):

Variant	`font-size`	`font-style`	`line-height`	`letter-spacing`	`margin`	`padding`	`text-decoration`	`text-align`	`word-wrap`	`decoration-color`	`border-bottom`	`border-bottom-inverted`
`--h1-`	`4rem`	`normal`	`1.2`	`-.1rem`	`2rem 0 0`	`0`	`underline`	`left`	`break-word`	`var(--color-primary-300)`	`none`	`none`
`--h2-`	`3.5rem`	`normal`	`1.25`	`-.1rem`	`10rem 0 2rem`	`0`	`none`	`left`	`break-word`	`initial`	`none`	`none`
`--h3-`	`2.5rem`	`normal`	`1.3`	`-.1rem`	`7rem 0 0`	`0`	`none`	`left`	`break-word`	`initial`	`1px solid var(--color-primary-500)`	`1px solid var(--color-primary-300)`
`--h4-`	`2.2rem`	`normal`	`1.35`	`-.08rem`	`4.5rem 0 0`	`0`	`underline`	`left`	`normal`	`initial`	`none`	`none`
`--h5-`	`1.8rem`	`normal`	`1.5`	`-.05rem`	`4.5rem 0 0`	`0`	`none`	`left`	`normal`	`initial`	`none`	`none`
`--h6-`	`1.8rem`	`italic`	`1.5`	`0`	`4.5rem 0 0`	`0`	`none`	`left`	`normal`	`initial`	`none`	`none`
`--p-`					`0`	`1rem`		`left`

Z-Index System

This component also supplies its own z-index layering system where it is applied by default to the page entirely. It is designed to use the uppermost layer and subtraction from there (e.g. calc(var(--z-index-max) - var(--z-index-content))). The 2 exceptions are --z-index-hidden and --z-index-max where they can be used directly. They are shown as follows:

Variant	Value
`--z-index-max`	`2147483647`
`--z-index-max-overlay`	`1`
`--z-index-nav-top`	`2`
`--z-index-nav`	`3`
`--z-index-nav-overlay`	`4`
`--z-index-content-top`	`5`
`--z-index-content`	`6`
`--z-index-content-overlay`	`7`
`--z-index-hidden`	`-1`

Layout System

This component also supplies some customizable layout system. They are shown as follows (e.g. row 1 column 2 is --main-min-width):

Variant	`grid-area`	`min-width`	`width`	`max-width`	`padding-top`	`padding-left`	`padding-bottom`	`padding-right`
`--main`	`content`	`100%`	`100%`	`100%`	`10rem`	`10%`	`10rem`	`10%`
`--footer`	`footer`	`100%`	`100%`	`100%`	`3.5rem`	`10%`	`3.5rem`	`10%`
`--leftnav`	`leftnav`
`--rightnav`	`rightnav`
`--topnav`	`topnav`

Scroll Behavior

Affects the scrolling behavior of the page.

VARIABLE     : --html-scroll-behavior
CSS PROPERTY : scroll-behavior
DEFAULT      : smooth (>= v1.2.0)

Page Grid

Affects the base grid layout definition of the page.

VARIABLE     : --body-grid
CSS PROPERTY : grid
DEFAULT      :
(>= v1.2.0)
	"content" auto
	"footer" minmax(0, max-content)
	"topnav" minmax(0, auto)
	"leftnav" minmax(0, auto)
	"rightnav" minmax(0, auto)
	/ 100%

JavaScript

Fortunately, this component does not use any JavaScript. Relax.

Constants

This package does not offer any constant value.

Variables

This package does not offer any variable.

Offered Functions

ToCSS

Render the CSS output for this UI component.

Hugo

Usage example:

{{- $ret := partial "hestiaGUI/zoralabCORE/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>

Data Types

This package does not offer any data type.

Epilogue

Looks like we have arrived to the last station. Intrigued to get in touch? Please feel free to start contacting us via the following public channels:

GitHub Discussion Portal