zoralabTABLE Technical Specification - ZORALab's Hestia

Main Purpose

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

Legacy Recording

This package was known as table_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:

<table>
	<thead>
		<tr>
			<th>H1</th>
			<th>H2</th>
			<th>H3</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>...</td>
			...
		</tr>
		<tr>
			<td>...</td>
			...
		</tr>
		...
	</tbody>
</table>

2-Axis Headers HTML

The required HTML codes are shown below:

<table>
	<thead>
		<tr>
			<th>H1</th>
			<th>H2</th>
			<th>H3</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>C1</th>
			<td>...</td>
			...
		</tr>
		<tr>
			<th>C2</th>
			<td>...</td>
			<td>...</td>
			...
		</tr>
		...
	</tbody>
</table>

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

Overflow

Affects the overflow behavior of the rendered component.

VARIABLE     : --table-overflow
CSS PROPERTY : overflow
DEFAULT      : auto (>= v1.2.0)

Margin

Affects the margin of the rendered component.

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

Padding

Affects the padding of the rendered component.

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

Min-Width

Affects the minimum width of the rendered component.

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

Max-Width

Affects the maximum width of the rendered component.

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

Min-Height

Affects the minimum height of the rendered component.

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

Max-Height

Affects the maximum height of the rendered component.

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

Border

Affects the border of the rendered component.

VARIABLE     : --table-border
CSS PROPERTY : border
DEFAULT      : 1px solid var(--table-color-primary) (>= v1.2.0)

Color

Affects the color of the rendered component.

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

Color (Header)

Affects the header cell's color of the rendered component.

VARIABLE     : --table-color-header
CSS PROPERTY : color
DEFAULT      : var(--color-typography-100) (>= v1.2.0)

Color (Primary)

Affects the primary color of the rendered component.

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

Color (Print Mode)

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

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

Background

Affects the background of the rendered component.

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

Background (Row Header)

Affects the table first row header's background of the rendered component.

VARIABLE     : --table-background-header-row
CSS PROPERTY : background
DEFAULT      : var(--color-primary-900) (>= v1.2.0)

Background (Column Header)

Affects the table first column header's background of the rendered component.

VARIABLE     : --table-background-header-column
CSS PROPERTY : background
DEFAULT      : var(--color-primary-700) (>= v1.2.0)

Background (Odd Elements)

Affects the odd number positioned data cell's background of the rendered component.

VARIABLE     : --table-background-odd
CSS PROPERTY : background
DEFAULT      : transparent (>= v1.2.0)

Background (Even Elements)

Affects the even number positioned cell's background of the rendered component.

VARIABLE     : --table-background-even
CSS PROPERTY : background
DEFAULT      : var(--color-primary-50) (>= v1.2.0)

Background (Focused)

Affects the cell's background of the rendered component while being focused.

VARIABLE     : --table-background-focus
CSS PROPERTY : background
DEFAULT      : var(--color-contrast-500) (>= v1.2.0)

Background (Print Mode)

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

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

Cell Margin

Affects the table cell's margin of the rendered component.

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

Cell Padding

Affects the table cell's padding of the rendered component.

VARIABLE     : --table-cell-padding
CSS PROPERTY : padding
DEFAULT      : 1rem (>= v1.2.0)

Cell Border

Affects the cell's border of the rendered component.

VARIABLE     : --table-cell-border
CSS PROPERTY : border
DEFAULT      : var(--table-border) (>= 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/zoralabTABLE/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>