fastblocks-ui 0.4.0

FastBlocks UI: HTML/CSS-first styling and component helpers for FastBlocks

FastBlocks UI

FastBlocks UI is a modern HTML/CSS-first UI layer with a stable ui-* namespace, Jinja/FastBlocks helpers, and optional enhancement JavaScript. It is built as a clean-slate system with no compatibility bridge and no Sass/build-tool requirement.

Features

• HTML/CSS First: Uses semantic markup, CSS variables, and cascade layers as the foundation
• Template Helpers: Ships Python helpers for Jinja, async Jinja, and FastBlocks rendering
• Optional Enhancement JS: Keeps behavior light and progressive-enhancement friendly
• Modern Styling: Uses a Tailwind-inspired semantic token baseline with custom visuals
• Permissive License: BSD-3-Clause for commercial and open-source use

Installation

Install using pip:

pip install fastblocks-ui

Then copy the assets to your project:

fastblocks-ui copy-assets --dest ./static

Usage

Once installed, you can use the ui-* classes and Python helpers with server-rendered HTML:

<div class="ui-card">
  <div class="ui-card__header">Card Title</div>
  <div class="ui-card__body">
    This is a FastBlocks UI card styled with semantic tokens.
  </div>
  <footer class="ui-card__footer">
    <button class="ui-button is-primary" type="button">Action</button>
  </footer>
</div>

For full examples covering sync Jinja, async Jinja, and htmx fragments, see docs/usage.md. The component manifest is documented in docs/components.md. PWA-friendly app integration notes live in docs/usage.md.

Template Examples

Sync Jinja

{{ button("Save changes", variant="primary", type="submit") }}

Async Jinja

template = env.get_template("profile.html")
html = await template.render_async(user=user, button=button)

htmx Fragment

<form id="profile-form" hx-post="/profile" hx-target="#profile-form" hx-swap="outerHTML">
  {{ field(
    label="Email address",
    control_html=ui_input(id="profile-email", name="email", type="email", value=user.email)
  ) }}
  {{ button("Save", variant="primary", type="submit") }}
</form>

Theming

FastBlocks UI enables flexible theming through CSS variables:

:root {
  --ui-color-primary: #e040fb;
  --ui-radius-md: 8px;
  --ui-color-success: #00c853;
}

FastBlocks UI components automatically inherit these changes through semantic token mapping.

Components

FastBlocks UI centers its public surface on ui-* classes and helper APIs:

• ui-button
• ui-card
• ui-field
• ui-input
• ui-select
• ui-checkbox
• ui-switch
• ui-dialog
• ui-tabs
• ui-menu
• ui-alert

License

BSD-3-Clause