zoralabULIST Technical Specification - ZORALab's Hestia

Main Purpose

This package's primary purpose is to provide user interface (UI) styling specifically for unordered list values. In web UI, it is shown as follows:

• Sun

• Earth

  • Human

  • Trees

• Mars

Legacy Recording

This package was known as ulist_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.

Designers

This component was designed by the following creators:

Dependencies

This component has the following dependencies (arranged in the order from left-top to right-bottom):

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:

<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

Compound List HTML

The compound list HTML codes are shown below:

<ul>
	<li>
		...
	</li>
	<li>
		...
		<ul style="--ulist-li-before-background-image: linear-gradient(to bottom, yellow, orangered);">
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li>
		...
	</li>
</ul>

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     : --ulist-display
CSS PROPERTY : display
DEFAULT      : block (>= v1.2.0)

Margin

Affects the margin of the rendered component.

VARIABLE     : --ulist-margin
CSS PROPERTY : margin
DEFAULT      : 0 (>= v1.2.0)

Padding

Affects the padding of the rendered component.

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

Text Align

Affects the text alignment of the rendered component.

VARIABLE     : --ulist-text-align
CSS PROPERTY : text-align
DEFAULT      : left (>= v1.2.0)

List Item Margin

Affects the list item's margin of the rendered component.

VARIABLE     : --olist-li-margin
CSS PROPERTY : margin
DEFAULT      : 2rem 0 (>= v1.2.0)

List Item Padding

Affects the list item's padding of the rendered component.

VARIABLE     : --olist-li-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Bullet Content

Affects the before-pseudo-element's content of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-content
CSS PROPERTY : content
DEFAULT      : "❡" (>= v1.2.0)

Bullet Display

Affects the before-pseudo-element's display mode of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-display
CSS PROPERTY : display
DEFAULT      : block (>= v1.2.0)

Bullet Margin

Affects the before-pseudo-element's margin of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-margin
CSS PROPERTY : margin
DEFAULT      : 0 (>= v1.2.0)

Bullet Padding

Affects the before-pseudo-element's padding of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Bullet Border

Affects the before-pseudo-element's border of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-border
CSS PROPERTY : border
DEFAULT      : 1px solid transparent (>= v1.2.0)

Bullet Border Radius

Affects the before-pseudo-element's border-radius of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-border-radius
CSS PROPERTY : border-radius
DEFAULT      : 50% (>= v1.2.0)

Bullet Font Size

Affects the before-pseudo-element's font size of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-font-size
CSS PROPERTY : font-size
DEFAULT      : 2.8rem (>= v1.2.0)

Bullet Font Weight

Affects the before-pseudo-element's font weight of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-font-weight
CSS PROPERTY : font-weight
DEFAULT      : 800 (>= v1.2.0)

Bullet Text Align

Affects the before-pseudo-element's text alignment of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-before-text-align
CSS PROPERTY : text-align
DEFAULT      : left (>= v1.2.0)

Bullet Background Image

Affects the before-pseudo-element's coloration of the list item (bullet) for the rendered component.

VARIABLE     : --ulist-li-background-image
CSS PROPERTY : background-image
DEFAULT      :
(>= v1.2.0)
linear-gradient(to bottom, var(--color-primary-200), var(--color-primary-400))

Bullet Background Image (Inverted)

Affects the before-pseudo-element's coloration of the list item (bullet) for the rendered component while in inverted mode.

VARIABLE     : --ulist-li-background-image-inverted
CSS PROPERTY : background-image-inverted
DEFAULT      :
(>= v1.2.0)
linear-gradient(to bottom, var(--color-primary-200), var(--color-primary-400))

Bullet Background Image (Print Mode)

Affects the before-pseudo-element's coloration of the list item (bullet) for the rendered component while in print mode.

VARIABLE     : --ulist-li-background-image-print
CSS PROPERTY : background-image-print
DEFAULT      :
(>= v1.2.0)
linear-gradient(to bottom, var(--body-color-print), var(--body-color-print))

JavaScript

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

ToCSS

Render the CSS output for this UI component.

Hugo

Usage example:

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