1.7.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.

A description is indented behind a subtle left rule, which visually ties it to the term above and keeps longer prose easy to scan.

content

The detailed explanation text string or fragment.

dd-classes

List of symbols for layout and indentation 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.

Terms and descriptions are stacked in a single column with a little vertical rhythm and a comfortable reading width. Pair it with dt for the term and dd for its description.

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.

A term renders as a compact, semi-bold label so it reads as a key above its description. The small top margin separates one term/description pair from the next.

content

The term text string or fragment.

dt-classes

List of symbols for default structural spacing 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 (empty by default).

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-redwood-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: noscript content KEY: #:classes ¶

Wrap content in an HTML <noscript> fallback element.

The contents are rendered and executed by browsers only when JavaScript is disabled, which makes this component the natural home for no-script notices or alternative navigation. Pair it with the recommended JavaScript-free stylesheet so JavaScript-dependent controls can hide themselves gracefully.

content

The fallback content shown when scripting is unavailable.

classes

List of symbols representing utility CSS classes applied to the element.

(noscript fallback-fragment)

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")))