shieldsBADGE Technical Specification - ZORALab's Hestia

Main Purpose

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

Legacy Recording

This package was known as badge-shields_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 no dependencies.

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:

<div class='badge'>
	<p>...first child is the title...</p>
	<p>...last child is the value...</p>
</div>

Customize Color HTML

The color customization HTML codes are shown below:

<div class='badge' style='--badge-background: #f00;'>
	...
</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.

Margin

Affects the margin of the rendered component.

VARIABLE     : --badge-margin
CSS PROPERTY : margin
DEFAULT      : .2rem .5rem (>= v1.2.0)

Border

Affects the border of the rendered component.

VARIABLE     : --badge-border
CSS PROPERTY : border
DEFAULT      : none (>= v1.2.0)

Border Radius

Affects the border radius of the rendered component.

VARIABLE     : --badge-border-radius
CSS PROPERTY : border-radius
DEFAULT      : .8rem (>= v1.2.0)

Shining Ray Width

Affects the shining ray's width of the rendered component.

VARIABLE     : --badge-width-shine
CSS PROPERTY : width
DEFAULT      : .6rem (>= v1.2.0)

Font Size

Affects the font size of the rendered component.

VARIABLE     : --badge-font-size
CSS PROPERTY : font-size
DEFAULT      : 18px (>= v1.2.0)

Color

Affects the color of the rendered component.

VARIABLE     : --badge-color
CSS PROPERTY : color
DEFAULT      : #fafafa (>= v1.2.0)

Shining Ray Color

Affects the shining ray's color of the rendered component.

VARIABLE     : --badge-color-shine
CSS PROPERTY : color
DEFAULT      : #ffff27 (>= v1.2.0)

Color (Print Mode)

Affects the color of the rendered component during print mode.

VARIABLE     : --badge-color-print
CSS PROPERTY : color
DEFAULT      : #101010 (>= v1.2.0)

Background

Affects the background of the rendered component.

VARIABLE     : --badge-background
CSS PROPERTY : background
DEFAULT      : #0000d1 (>= v1.2.0)

Background (Print Mode)

Affects the background of the rendered component during print mode.

VARIABLE     : --badge-background-print
CSS PROPERTY : background
DEFAULT      : #fff (>= v1.2.0)

Transition

Affects the animation timing of the rendered component.

VARIABLE     : --badge-transition
CSS PROPERTY : transition
DEFAULT      : 1.3s (>= v1.2.0)

Title Color

Affects the title color of the rendered component.

VARIABLE     : --badge-title-color
CSS PROPERTY : color
DEFAULT      : #fafafa (>= v1.2.0)

Title Background

Affects the title background of the rendered component.

VARIABLE     : --badge-title-background
CSS PROPERTY : background
DEFAULT      : #585858 (>= v1.2.0)

Value Font Weight

Affects the value's font family of the rendered component.

VARIABLE     : --badge-value-font-weight
CSS PROPERTY : font-weight
DEFAULT      : 800 (>= v1.2.0)

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/shieldsBADGE/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>