OutfitKit Jinja macros — semantic HTML components on top of the OutfitKit CSS library.

Navigation

Verified details

These details have been verified by PyPI
Project links
GitHub Statistics
Maintainers
Avatar for ioan_beilic from gravatar.com ioan_beilic

Unverified details

These details have not been verified by PyPI
Meta
  • License: MIT License (MIT)
  • Author: OutfitKit
  • Tags components , css , jinja , jinja2 , outfitkit , ui
  • Requires: Python >=3.11
  • Provides-Extra: dev , jinjax , showcase
Classifiers
Report project as malware

Project description

OutfitKit

Librería CSS de componentes para aplicaciones web. ~260 bloques semánticos con prefijo ok-*, BEM-light, themeable vía CSS custom properties.

Cero JS obligatorio. Cero build pipeline para consumidores. Un solo <link> y listo.

Uso (consumidor solo CSS)

OutfitKit se publica en dos sabores, ambos con el mismo CSS:

Bundle Clases Cuándo usarlo
outfitkit.min.css .ok-btn, .ok-card, .ok-flex, … Cuando OutfitKit convive con otra librería CSS o cuando quieres distinguir tus clases en DevTools.
outfitkit.unprefixed.min.css .btn, .card, .flex, … Cuando OutfitKit es tu única librería y prefieres clases cortas (estilo Tailwind / Daisy). Hub y Cloud usan este.

Ambos bundles comparten los mismos tokens (--ok-*), keyframes y animations — lo único que cambia es el nombre de los selectores de clase.

Producción — con prefijo ok-

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/OutfitKit/outfitkit@latest/dist/outfitkit.min.css">

<button class="ok-btn ok-btn--primary">Continuar</button>

Producción — sin prefijo

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/OutfitKit/outfitkit@latest/dist/outfitkit.unprefixed.min.css">

<button class="btn btn--primary">Continuar</button>

Desarrollo — fuente sin minificar

Útil para inspeccionar reglas en DevTools sin pasar por la minificación:

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/OutfitKit/outfitkit@main/css/outfitkit.css">

La fuente en css/ siempre lleva el prefijo ok-; el bundle sin prefijo se genera solo en CI cuando se etiqueta una release. Los navegadores modernos resuelven los @import sin problema, así que el archivo de desarrollo no necesita bundling.

Macros Jinja (opcional)

Si tu backend es Python con Jinja2 (FastAPI, Flask, Django+jinja2 backend), puedes consumir los componentes como macros:

pip install outfitkit             # macros vanilla
pip install outfitkit[jinjax]     # + sintaxis HTML-like <Button label="x" />

Las macros viven en showcase/ y se publican desde ahí a PyPI. Cualquier macro funciona con o sin JinjaX (formato dual-mode).

Sitio de demos

Componentes en vivo con código fuente al lado, navegable: https://outfitkit.github.io/outfitkit/

Estructura del repositorio

outfitkit/
├── css/                ← fuentes CSS sin minificar (lo que editas)
│   ├── tokens.css      ← variables --ok-* (paleta, spacing, themes)
│   ├── base.css        ← reset + tipografía
│   ├── utilities.css   ← .ok-flex, .ok-gap-*, .ok-text-*
│   ├── outfitkit.css   ← entry point con @import de todo
│   └── components/     ← 44 archivos, uno por familia (button, card, modal, ...)
├── dist/               ← bundles generados SOLO en CI al taggear (no editar a mano)
│   ├── outfitkit.css                  (concatenado, con prefijo ok-)
│   ├── outfitkit.min.css              (minificado, con prefijo ok-)
│   ├── outfitkit.unprefixed.css       (concatenado, sin prefijo)
│   └── outfitkit.unprefixed.min.css   (minificado, sin prefijo)
└── showcase/           ← macros Jinja + sitio de demos + paquete PyPI

Contribuir

Editar CSS

Edita los archivos en css/. Para previsualizar tus cambios:

<link rel="stylesheet" href="./css/outfitkit.css">

cargado desde un servidor local cualquiera (python3 -m http.server 8000). No hay build local. Cuando estés contento, push y abre PR.

Releases

El bundle minificado lo genera la Action css-build.yml al taggear:

git tag v3.0.0
git push origin v3.0.0

La Action concatena css/*.css, minifica con lightningcss-cli y commitea dist/outfitkit.{css,min.css} al tag. jsDelivr sirve @v3.0.0/dist/outfitkit.min.css y @latest automáticamente.

Convenciones

Naming (BEM-light)

.ok-{block}              base               .ok-card
.ok-{block}__{element}   child element      .ok-card__header
.ok-{block}--{modifier}  variant            .ok-btn--primary
.is-{state}              runtime state      .is-active, .is-open

Theming

Themes se aplican vía atributo data-theme en <html> o cualquier subárbol:

<html data-theme="erplora">  <!-- default, dark terracota -->
<html data-theme="dark">
<html data-theme="light">

Cualquier variable --ok-* puede sobreescribirse para crear tu propio theme.

Licencia

MIT.

Project details

Verified details

These details have been verified by PyPI
Project links
GitHub Statistics
Maintainers
Avatar for ioan_beilic from gravatar.com ioan_beilic

Unverified details

These details have not been verified by PyPI
Meta
  • License: MIT License (MIT)
  • Author: OutfitKit
  • Tags components , css , jinja , jinja2 , outfitkit , ui
  • Requires: Python >=3.11
  • Provides-Extra: dev , jinjax , showcase
Classifiers

Release history Release notifications | RSS feed

1.5.0

1.4.1

1.4.0

1.3.1

1.3.0

This version

1.2.0

1.1.1

1.1.0

1.0.0

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

outfitkit-1.2.0.tar.gz (14.6 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

outfitkit-1.2.0-py3-none-any.whl (41.1 kB view details)

Uploaded Python 3

File details

Details for the file outfitkit-1.2.0.tar.gz.

File metadata

  • Download URL: outfitkit-1.2.0.tar.gz
  • Upload date:
  • Size: 14.6 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.12

File hashes

Hashes for outfitkit-1.2.0.tar.gz
Algorithm Hash digest
SHA256 6fabe24f62be81dfd01184efd46f3ee6798d32a007ae8258ee10d80a55a4079d
MD5 7ca5ae3ceb7ce9ec0360b644c240d3d2
BLAKE2b-256 cb4c2931d77ff6278a3639629d6f05883f44171d956f7d6753d0139ff40d6ce4

See more details on using hashes here.

Provenance

The following attestation bundles were made for outfitkit-1.2.0.tar.gz:

Publisher: pypi-publish.yml on OutfitKit/outfitkit

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

File details

Details for the file outfitkit-1.2.0-py3-none-any.whl.

File metadata

  • Download URL: outfitkit-1.2.0-py3-none-any.whl
  • Upload date:
  • Size: 41.1 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/6.1.0 CPython/3.13.12

File hashes

Hashes for outfitkit-1.2.0-py3-none-any.whl
Algorithm Hash digest
SHA256 1425d0fc710e03ca94b813adf374ac2f1b44892fab6f6f9b62adeccd995e0a95
MD5 52fbdae34850779e117cf5e0a49ad7d7
BLAKE2b-256 5181e14c0b85a4aa76e4f267a06b071feaaa1408f1bf1d5f8b0e954c9a6e3ddc

See more details on using hashes here.

Provenance

The following attestation bundles were made for outfitkit-1.2.0-py3-none-any.whl:

Publisher: pypi-publish.yml on OutfitKit/outfitkit

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page