Jinja2 macro components and Pico CSS theming for the Bluefox Stack.
Verified details
These details have been verified by PyPIProject links
GitHub Statistics
Maintainers
Project description
bluefox-components
Jinja2 macro components and Pico CSS theming for the Bluefox Stack.
What it is
A PyPI package that provides:
- Jinja2 macro templates — parameterized, composable UI building blocks under the
bfx/namespace - A CSS theme layer — Pico CSS variable overrides for the Bluefox default palette, plus 4 alternate theme variants
- A component showcase — mountable FastAPI router for a storybook-like preview of every component
- A setup function — registers templates and static assets with one call
Quick start
uv add bluefox-components
from bluefox_core import BluefoxSettings, create_bluefox_app
from bluefox_components import setup_components
settings = BluefoxSettings()
app = create_bluefox_app(settings)
setup_components(app)
{% extends "bfx/base.html" %}
{% from "bfx/button.html" import button %}
{% from "bfx/input.html" import input %}
{% block content %}
<form method="post">
{{ input("email", type="email", label="Email") }}
{{ button("Sign in") }}
</form>
{% endblock %}
Components
| Category | Macros |
|---|---|
| Forms | button, input, select, textarea, form_group, csrf_input |
| Layout | card, nav, breadcrumbs |
| Data | data_table, pagination, empty_state |
| Feedback | alert, badge, modal, modal_trigger, loading_spinner, loading_skeleton |
Every macro accepts an attrs parameter (dict) for arbitrary HTML attributes — HTMX, Alpine.js, data-*, aria-* all pass through without the macro needing to know about them.
Themes
4 theme variants, each with distinct typography, border radii, and visual identity:
| Theme | Font | Feel |
|---|---|---|
| Financial | Inter + DM Serif Display | Corporate, conservative, tight corners |
| Playful | Nunito | Bouncy, pill buttons, purple accent |
| Minimal | IBM Plex Sans | Monochrome, zero radius, dense |
| Roommate | Outfit + DM Serif Display | Warm terracotta, soft rounded |
Apply a theme with a single attribute on <html>:
<html data-bfx-theme="financial">
Or pass it from your template:
{% extends "bfx/base.html" %}
{# renders: <html data-bfx-theme="financial"> #}
templates.get_template("page.html").render(theme="financial")
Component showcase
Mount the built-in showcase router for live documentation:
from bluefox_components import component_router
app.include_router(component_router, prefix="/components")
Design decisions
- Macros, not includes. Explicit parameters for the 90% case,
attrsdict for escape hatches. - Pure Pico CSS. No Tailwind, no utility classes. Themes override CSS custom properties only.
- Zero build step. No bundler, no compilation. Install, call
setup_components(), use macros. - Semantic HTML. A card is an
<article>, a form group is a<label>, a nav is a<nav>. Pico styles them automatically.
Requirements
- Python >= 3.12
- bluefox-core >= 0.4.0
License
MIT
Project details
Verified details
These details have been verified by PyPIProject links
GitHub Statistics
Maintainers
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file bluefox_components-0.9.0.tar.gz.
File metadata
- Download URL: bluefox_components-0.9.0.tar.gz
- Upload date:
- Size: 106.9 kB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/6.1.0 CPython/3.13.7
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
5311b62edceb5c5a098219ffc3d29860fe94db7581aa175c1f5c1f0631e07639
|
|
| MD5 |
c406ff6e3c54f177f0b904cb8c137cd1
|
|
| BLAKE2b-256 |
80e1f2b7c2f1db36392b26b55a1980e2aac6a03ddbf4cfaf6d97112bc9a19e4a
|
Provenance
The following attestation bundles were made for bluefox_components-0.9.0.tar.gz:
Publisher:
publish.yml on blue-fox-software/bluefox-components
-
Statement:
-
Statement type:
https://in-toto.io/Statement/v1 -
Predicate type:
https://docs.pypi.org/attestations/publish/v1 -
Subject name:
bluefox_components-0.9.0.tar.gz -
Subject digest:
5311b62edceb5c5a098219ffc3d29860fe94db7581aa175c1f5c1f0631e07639 - Sigstore transparency entry: 1113262587
- Sigstore integration time:
-
Permalink:
blue-fox-software/bluefox-components@2284b0436f67575985a9032b483001815cbbe78d -
Branch / Tag:
refs/tags/v0.9.0 - Owner: https://github.com/blue-fox-software
-
Access:
private
-
Token Issuer:
https://token.actions.githubusercontent.com -
Runner Environment:
github-hosted -
Publication workflow:
publish.yml@2284b0436f67575985a9032b483001815cbbe78d -
Trigger Event:
push
-
Statement type:
File details
Details for the file bluefox_components-0.9.0-py3-none-any.whl.
File metadata
- Download URL: bluefox_components-0.9.0-py3-none-any.whl
- Upload date:
- Size: 29.1 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/6.1.0 CPython/3.13.7
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
746c9fa9c50ce04e7aa98cd5dfd8d19560f3eaa6053ca64689dd4f1b347dce36
|
|
| MD5 |
682950884d04cf0810c389ffaf24e561
|
|
| BLAKE2b-256 |
c2e3ec602154ffe28f5154b2cab656af33478fc20d562c23858836a14965ebfc
|
Provenance
The following attestation bundles were made for bluefox_components-0.9.0-py3-none-any.whl:
Publisher:
publish.yml on blue-fox-software/bluefox-components
-
Statement:
-
Statement type:
https://in-toto.io/Statement/v1 -
Predicate type:
https://docs.pypi.org/attestations/publish/v1 -
Subject name:
bluefox_components-0.9.0-py3-none-any.whl -
Subject digest:
746c9fa9c50ce04e7aa98cd5dfd8d19560f3eaa6053ca64689dd4f1b347dce36 - Sigstore transparency entry: 1113262637
- Sigstore integration time:
-
Permalink:
blue-fox-software/bluefox-components@2284b0436f67575985a9032b483001815cbbe78d -
Branch / Tag:
refs/tags/v0.9.0 - Owner: https://github.com/blue-fox-software
-
Access:
private
-
Token Issuer:
https://token.actions.githubusercontent.com -
Runner Environment:
github-hosted -
Publication workflow:
publish.yml@2284b0436f67575985a9032b483001815cbbe78d -
Trigger Event:
push
-
Statement type:
