1.4.1 Procedures

Procedure: col content KEY: #:gap #:shadow #:wrap #:padding-y #:padding-x #:rounding #:background #:items #:col-classes ¶

Create a vertical column container using flexbox layout.

content

The inner content elements or fragments to stack vertically.

gap

List of symbols for spacing gaps between elements.

shadow

List of symbols for shadow effect CSS classes.

wrap

List of symbols defining wrap properties.

padding-y

List of symbols for vertical padding CSS classes.

padding-x

List of symbols for horizontal padding CSS classes.

rounding

List of symbols for container border-radius CSS classes.

background

List of symbols for container background CSS classes.

items

List of symbols for cross-axis alignment CSS classes.

col-classes

List of base vertical flex layout CSS classes.

(col '((div "Top Item") (div "Bottom Item")) #:background '(bg-transparent))

Procedure: dd content KEY: #:dd-classes #:weight #:family #:color #:size ¶

Create an HTML description details (<dd>) element.

content

The detailed explanation text string or fragment.

dd-classes

List of symbols for layout and fallback color CSS classes.

weight

List of symbols for font weight CSS classes.

family

List of symbols for font family CSS classes.

color

List of symbols for text color CSS classes.

size

List of symbols for text sizing CSS classes.

(dd "An implementation of the Scheme programming language.")

Procedure: dl content KEY: #:dl-classes ¶

Create an HTML description list (<dl>) element.

content

The inner term (<dt>) and description (<dd>) elements.

dl-classes

List of symbols for layout and style CSS classes.

(dl '((dt "Framework") (dd "Hygguile")))

Procedure: dt content KEY: #:dt-classes #:weight #:family #:style #:color #:size ¶

Create an HTML description term (<dt>) element.

content

The term text string or fragment.

dt-classes

List of symbols for default structural padding CSS classes.

weight

List of symbols for font weight CSS classes.

family

List of symbols for font family CSS classes.

style

List of symbols for font style CSS classes.

color

List of symbols for text color CSS classes.

size

List of symbols for text sizing CSS classes.

(dt "Guile Scheme" #:weight '(font-bold))

Procedure: footer content KEY: #:background #:shadow #:footer-classes ¶

Create an HTML footer element.

content

The inner content or layout fragments of the footer.

background

List of symbols for background CSS classes.

shadow

List of symbols for shadow effect CSS classes.

footer-classes

List of utility formatting and layout CSS classes.

(footer "© 2026 Hygguile Framework")

Procedure: hr KEY: #:margin #:border #:color ¶

Create an HTML horizontal rule (<hr>) element.

margin

List of symbols representing margin CSS classes.

border

List of symbols representing border width CSS classes.

color

List of symbols representing border color CSS classes.

(hr #:margin '(my-4) #:color '(border-red-500))

Procedure: linear-gradient content KEY: #:container-class #:direction #:steps ¶

Create a container styled with a CSS linear gradient background.

content

The inner layout components or text elements inside the container.

container-class

A string containing additional CSS utility classes for the wrapper.

direction

A symbol or string designating the gradient vector direction (e.g., 'right, 'bottom).

steps

A list of color string steps making up the gradient stops.

(linear-gradient "Gradient Text" #:direction 'right #:steps '("#ff0000" "#0000ff"))

Procedure: row content KEY: #:gap #:shadow #:wrap #:padding-y #:padding-x #:rounding #:background #:items #:row-classes ¶

Create a horizontal row container using flexbox layout.

content

The inner content elements or fragments to align horizontally.

gap

List of symbols for spacing gaps between elements.

shadow

List of symbols for shadow effect CSS classes.

wrap

List of symbols defining wrap properties.

padding-y

List of symbols for vertical padding CSS classes.

padding-x

List of symbols for horizontal padding CSS classes.

rounding

List of symbols for container border-radius CSS classes.

background

List of symbols for container background CSS classes.

items

List of symbols for cross-axis alignment CSS classes.

row-classes

List of base horizontal flex layout CSS classes.

(row '((div "Left Element") (div "Right Element")) #:gap '(gap-4))

Procedure: with-footer KEY: #:main #:footer ¶

Wrap a main content fragment and a footer fragment within a full-screen vertical flex container.

main

S-expression representing the main content layout.

footer

S-expression representing the footer layout.

(with-footer #:main '((p "Hello World")) #:footer '((footer "Standard Footer")))