zenpy-garden core

Builder API for creating Zendesk Garden FastHTML components

Garden Headers

Garden CSS is split into packages. The core packages (bedrock and variables) are required, while component packages can be included as needed.

The garden_hdrs tuple bundles all available CSS. Use it when creating your FastHTML app:

app = FastHTML(hdrs=garden_hdrs)

For notebook development, see Preview Helper which handles this automatically.

Exported source

# Core packages
bedrock_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-bedrock@^10/dist/index.css', rel='stylesheet')
variables_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-variables@^7/dist/index.css', rel='stylesheet')

# Component packages
buttons_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-buttons@^9/dist/index.css', rel='stylesheet')
forms_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-forms@^8/dist/index.css', rel='stylesheet')
tags_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-tags@^6/dist/index.css', rel='stylesheet')
avatars_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-avatars@^7/dist/index.css', rel='stylesheet')
anchors_css = Link(href='https://cdn.jsdelivr.net/npm/@zendeskgarden/css-anchors@^1/dist/index.css', rel='stylesheet')

garden_hdrs = (bedrock_css, variables_css, buttons_css, forms_css, tags_css, avatars_css, anchors_css)

Component Factory

source

mk_compfn

 mk_compfn (compcls, tag=None, name=None, xcls='', **compkw)

Create a FastHTML component function for a Garden CSS class

	Type	Default	Details
compcls			Base CSS class (e.g. ‘c-btn’)
tag	NoneType	None	HTML tag function to use (defaults to name)
name	NoneType	None	Component function name (defaults to clstoname(compcls))
xcls	str		Extra classes to always include
compkw	VAR_KEYWORD

Create a button component by passing the Garden CSS class to mk_compfn:

mk_compfn('c-btn')

This creates a Btn function that wraps the c-btn class. Use it like any FastHTML component:

btn = Btn('Click me')
print(btn)

<btn class="c-btn  ">Click me</btn>

Garden modifiers start with --. Pass them via cls and they’ll be prefixed automatically:

pill = Btn('Click me', cls='--pill')
print(pill)

<btn class="c-btn c-btn--pill ">Click me</btn>

Preview Helper

source

mk_previewer

 mk_previewer (app=None, cls='')

Create a preview function for rendering Garden components in notebooks

	Type	Default	Details
app	NoneType	None	FastHTML app to use (creates one with garden_hdrs if None)
cls	str		CSS classes for the preview container div

p = mk_previewer()
p(
    Div(btn),
    Div(pill)
)