zoralabDLIST 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 specifically for definitions list values. In web UI, it is shown as follows:

Sun: The core of our solar system.; Primary source of energy. Its body is primarily consisting of hot plasma consistently dumping light and heat energies to its surrounding.; Provides heats and gives life to plants on Earth.
Mercury: FIRST planet away from Sun.
Venus: SECOND planet away from Sun.
Earth: THIRD planet away from the Sun.; Contains organic life on and inside the planet.

Sun: The core of our solar system.; Primary source of energy. Its body is primarily consisting of hot plasma consistently dumping light and heat energies to its surrounding.; Provides heats and gives life to plants on Earth.
Mercury: FIRST planet away from Sun.
Venus: SECOND planet away from Sun.
Earth: THIRD planet away from the Sun.; Contains organic life on and inside the planet.

Legacy Recording

This package was known as deflist_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 the following dependencies (arranged in the order from left-top to right-bottom):

zoralabCORE

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.

Minimum HTML

The minimum required HTML codes are shown below:

<dl>
	<dt>...1st term...</dt>
	<dd>...1st definition for 1st-term...</dd>
	<dd>...2nd definition for 1st-term...</dd>

	<dt>...2nd term...</dt>
	<dd>...1st definition for 2nd-term...</dd>
	<dd>...2nd definition for 2nd-term...</dd>

	...
</dl>

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.

Display

Affects the display mode of the rendered component.

VARIABLE     : --dlist-display
CSS PROPERTY : display
DEFAULT      : block (>= v1.2.0)

Margin

Affects the margin of the rendered component.

VARIABLE     : --dlist-margin
CSS PROPERTY : margin
DEFAULT      : 3rem auto (>= v1.2.0)

Padding

Affects the padding of the rendered component.

VARIABLE     : --dlist-padding
CSS PROPERTY : padding
DEFAULT      : 0 5rem (>= v1.2.0)

Border

Affects the border of the rendered component.

VARIABLE     : --dlist-border
CSS PROPERTY : border-top; border-bottom
DEFAULT      : 2px solid var(--dlist-color) (>= v1.2.0)

Min-Width

Affects the minimum width of the rendered component.

VARIABLE     : --dlist-min-width
CSS PROPERTY : min-width
DEFAULT      : initial (>= v1.2.0)

Width

Affects the width of the rendered component.

VARIABLE     : --dlist-width
CSS PROPERTY : width
DEFAULT      : 100% (>= v1.2.0)

Max-Width

Affects the maximum width of the rendered component.

VARIABLE     : --dlist-max-width
CSS PROPERTY : max-width
DEFAULT      : 100% (>= v1.2.0)

Min-Height

Affects the minimum height of the rendered component.

VARIABLE     : --dlist-min-height
CSS PROPERTY : min-height
DEFAULT      : initial (>= v1.2.0)

Height

Affects the height of the rendered component.

VARIABLE     : --dlist-height
CSS PROPERTY : height
DEFAULT      : initial (>= v1.2.0)

Max-Height

Affects the maximum height of the rendered component.

VARIABLE     : --dlist-max-height
CSS PROPERTY : max-height
DEFAULT      : initial (>= v1.2.0)

DD-Item Counter

Affects the dd-item counter behavior of the rendered component.

VARIABLE     : --dlist-counter
CSS PROPERTY : counter-reset; counter-increment
DEFAULT      : dd-items (>= v1.2.0)

Color

Affects the color of the rendered component.

VARIABLE     : --dlist-color
CSS PROPERTY : color
DEFAULT      : var(--color-primary-300) (>= v1.2.0)

Color (Inverted Mode)

Affects the color of the rendered component while in inverted mode.

VARIABLE     : --dlist-color-inverted
CSS PROPERTY : color
DEFAULT      : var(--color-primary-200) (>= v1.2.0)

Color (Print Mode)

Affects the color of the rendered component when in print mode.

VARIABLE     : --dlist-color-print
CSS PROPERTY : color
DEFAULT      : var(--body-color-print) (>= v1.2.0)

Background

Affects the background of the rendered component.

VARIABLE     : --dlist-background
CSS PROPERTY : background
DEFAULT      : var(--body-background) (>= v1.2.0)

Background (Inverted Mode)

Affects the background of the rendered component while in inverted mode.

VARIABLE     : --dlist-background-inverted
CSS PROPERTY : background
DEFAULT      : var(--body-background-inverted) (>= v1.2.0)

Background (Print Mode)

Affects the background of the rendered component when in print mode.

VARIABLE     : --dlist-background-print
CSS PROPERTY : background
DEFAULT      : var(--body-background-print) (>= v1.2.0)

Term Margin

Affects the term's margin of the rendered component.

VARIABLE     : --dlist-dt-margin
CSS PROPERTY : margin
DEFAULT      : 3rem auto 0 (>= v1.2.0)

Term Padding

Affects the term's padding of the rendered component.

VARIABLE     : --dlist-dt-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Term Border

Affects the term's border of the rendered component.

VARIABLE     : --dlist-dt-border
CSS PROPERTY : border-bottom
DEFAULT      : .5px solid var(--dlist-dt-border-color) (>= v1.2.0)

Term Font Size

Affects the term's font size of the rendered component.

VARIABLE     : --dlist-dt-font-size
CSS PROPERTY : font-size
DEFAULT      : 2.5rem (>= v1.2.0)

Term Font Weight

Affects the term's font weight of the rendered component.

VARIABLE     : --dlist-dt-font-weight
CSS PROPERTY : font-weight
DEFAULT      : 600 (>= v1.2.0)

Term Font Style

Affects the term's font style of the rendered component.

VARIABLE     : --dlist-dt-font-style
CSS PROPERTY : font-style
DEFAULT      : italic (>= v1.2.0)

Text Align

Affects the term's text alignment of the rendered component.

VARIABLE     : --dlist-dt-text-align
CSS PROPERTY : text-align
DEFAULT      : justify (>= v1.2.0)

Term Color

Affects the term's color of the rendered component.

VARIABLE     : --dlist-dt-color
CSS PROPERTY : color
DEFAULT      : var(--dlist-color) (>= v1.2.0)

Term Color (Inverted Mode)

Affects the color of the rendered component while in inverted mode.

VARIABLE     : --dlist-dt-color-inverted
CSS PROPERTY : color
DEFAULT      : var(--dlist-color-inverted) (>= v1.2.0)

Term Color (Print Mode)

Affects the term's color of the rendered component when in print mode.

VARIABLE     : --dlist-dt-color-print
CSS PROPERTY : color
DEFAULT      : var(--body-color-print) (>= v1.2.0)

Term Border Color

Affects the term's border color of the rendered component.

VARIABLE     : --dlist-dt-border-color
CSS PROPERTY : border-color
DEFAULT      : var(--dlist-color) (>= v1.2.0)

Term Border Color (Inverted Mode)

Affects the border color of the rendered component while in inverted mode.

VARIABLE     : --dlist-dt-border-color-inverted
CSS PROPERTY : border-color
DEFAULT      : var(--dlist-color-inverted) (>= v1.2.0)

Term Border Color (Print Mode)

Affects the term's border color of the rendered component when in print mode.

VARIABLE     : --dlist-dt-border-color-print
CSS PROPERTY : border-color
DEFAULT      : var(--body-color-print) (>= v1.2.0)

Term Background

Affects the term's background of the rendered component.

VARIABLE     : --dlist-dt-background
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Term Background (Inverted Mode)

Affects the term's background of the rendered component while in inverted mode.

VARIABLE     : --dlist-dt-background-inverted
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Term Background (Print Mode)

Affects the term's background of the rendered component when in print mode.

VARIABLE     : --dlist-dt-background-print
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Definition Margin

Affects the definition's margin of the rendered component.

VARIABLE     : --dlist-dd-margin
CSS PROPERTY : margin
DEFAULT      : .5rem auto (>= v1.2.0)

Definition Padding

Affects the definition's padding of the rendered component.

VARIABLE     : --dlist-dd-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Definition Border

Affects the definition's border of the rendered component.

VARIABLE     : --dlist-dd-border
CSS PROPERTY : border-bottom
DEFAULT      : .5px solid var(--dlist-dd-border-color) (>= v1.2.0)

Definition Font Size

Affects the definition's font size of the rendered component.

VARIABLE     : --dlist-dd-font-size
CSS PROPERTY : font-size
DEFAULT      : var(--body-font-size) (>= v1.2.0)

Definition Font Weight

Affects the definition's font weight of the rendered component.

VARIABLE     : --dlist-dd-font-weight
CSS PROPERTY : font-weight
DEFAULT      : var(--body-font-weight) (>= v1.2.0)

Definition Font Style

Affects the definition's font style of the rendered component.

VARIABLE     : --dlist-dd-font-style
CSS PROPERTY : font-style
DEFAULT      : normal (>= v1.2.0)

Text Align

Affects the definition's text alignment of the rendered component.

VARIABLE     : --dlist-dd-text-align
CSS PROPERTY : text-align
DEFAULT      : justify (>= v1.2.0)

Definition Color

Affects the definition's color of the rendered component.

VARIABLE     : --dlist-dd-color
CSS PROPERTY : color
DEFAULT      : var(--body-color) (>= v1.2.0)

Definition Color (Inverted Mode)

Affects the definition's color of the rendered component while in inverted mode.

VARIABLE     : --dlist-dd-color-inverted
CSS PROPERTY : color
DEFAULT      : var(--body-color-inverted) (>= v1.2.0)

Definition Color (Print Mode)

Affects the definition's color of the rendered component when in print mode.

VARIABLE     : --dlist-dd-color-print
CSS PROPERTY : color
DEFAULT      : var(--body-color-print) (>= v1.2.0)

Definition Border Color

Affects the definition's border color of the rendered component.

VARIABLE     : --dlist-dd-border-color
CSS PROPERTY : border-color
DEFAULT      : var(--dlist-color) (>= v1.2.0)

Definition Border Color (Inverted Mode)

Affects the definition's border color of the rendered component while in inverted mode.

VARIABLE     : --dlist-dd-border-color-inverted
CSS PROPERTY : border-color
DEFAULT      : var(--dlist-color-inverted) (>= v1.2.0)

Definition Border Color (Print Mode)

Affects the definition's border color of the rendered component when in print mode.

VARIABLE     : --dlist-dd-border-color-print
CSS PROPERTY : border-color
DEFAULT      : var(--body-color-print) (>= v1.2.0)

Definition Background

Affects the definition's background of the rendered component.

VARIABLE     : --dlist-dd-background
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Definition Background (Inverted Mode)

Affects the definition's background of the rendered component while in inverted mode.

VARIABLE     : --dlist-dd-background-inverted
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Definition Background (Print Mode)

Affects the definition's background of the rendered component when in print mode.

VARIABLE     : --dlist-dd-background-print
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

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/zoralabDLIST/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