zoralabSPLIT_SKEW Technical Specification - ZORALab's Hestia

Main Purpose

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

Legacy Recording

This package was first released in ZORALab's Hestia v1.2.0.

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:

<div style='background: [BACKGROUND_HERE];'>
	<div class='split skew' style='
		--split-skew-angle: [ANGLE_OF_CHOICE: to left bottom | to right bottom];
		--split-skew-upper-background: [BACKGROUND_COLOR_OF_UPPER_CONTAINER];
		--split-skew-lower-background: transparent;
		margin-bottom: [ADJUST_PRESENTATION_ACCORDINGLY];
	'></div>


	... CONTENT OF THE SECTION/CONTAINER ...


	<div class='split skew' style='
		--split-skew-angle: [ANGLE_OF_CHOICE: to left bottom | to right bottom];
		--split-skew-upper-background: transparent;
		--split-skew-lower-background: [BACKGROUND_COLOR_OF_LOWER_CONTAINER];
	'></div>
</div>

<!-- NOTE: SECTION EXTERIOR BOUNDARY BACKGROUND MUST BE OF A COLOR. -->

<div style='background: [BACKGROUND_HERE];'>
	<div class='split skew' style='
		--split-skew-angle: [ANGLE_OF_CHOICE: to left bottom | to right bottom];
		--split-skew-upper-background: [BACKGROUND_COLOR_OF_UPPER_CONTAINER];
		--split-skew-lower-background: transparent;
		margin-bottom: [ADJUST_PRESENTATION_ACCORDINGLY];
	'></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.

Height

Affects the height of the rendered component.

VARIABLE     : --split-skew-height
CSS PROPERTY : margin
DEFAULT      : 150px (>= v1.2.0)

Skew Angle

Affects the skew angle of the rendered component.

VARIABLE     : --split-skew-angle
CSS PROPERTY : background (linear-gradient)
DEFAULT      : to left bottom (>= v1.2.0)

Background (Upper)

Affects the upper container's background of the rendered component.

VARIABLE     : --split-skew-upper-background
CSS PROPERTY : background (linear-gradient)
DEFAULT      : var(--body-background) (>= v1.2.0)

Background (Lower)

Affects the lower container's background of the rendered component.

VARIABLE     : --split-skew-lower-background
CSS PROPERTY : background (linear-gradient)
DEFAULT      : transparent (>= 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/zoralabSPLIT_SKEW/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>