Tema Bootstrap 5 per applicazioni Django dell'AGESCI Campania, con palette ufficiale e personalizzazione per branca.
Project description
django-agesci-theme
Tema Bootstrap 5 riusabile per le applicazioni Django dell'AGESCI Campania.
Fornisce un base.html pronto all'uso con header a due barre (barra brand
- barra ricerca/azioni), sidebar collapsible, footer ridisegnato e una
libreria di componenti opzionali (
ag_hero,ag_feature_grid,ag_jumbotrone altri 8). Tutto brandizzato con la palette ufficiale del Manuale Immagine Coordinata AGESCI 2011 e con la personalizzazione per branca tramite un singolo parametro.
| Ambito | Colore dominante | data-branca |
|---|---|---|
| Generico (default) | Blu/Azzurro | generico |
| Capi / Comunità Capi | Viola | capi |
| Lupetti/Coccinelle (L/C) | Giallo | lc |
| Esploratori/Guide (E/G) | Verde | eg |
| Rover/Scolte (R/S) | Rosso | rs |
Il colore viene applicato rimappando le CSS custom properties di Bootstrap, in
funzione dell'attributo data-branca sul tag <html>. Nessun ricompilo
necessario: basta cambiare una setting.
Installazione
Il pacchetto è disponibile su PyPI.
Con uv (consigliato)
uv add django-agesci-campania-theme
Con pip
pip install django-agesci-campania-theme
Da GitHub (ultima versione non rilasciata)
uv add "git+https://github.com/AGESCI-Campania/django-agesci-campania-theme.git"
pip install "git+https://github.com/AGESCI-Campania/django-agesci-campania-theme.git"
Configurazione
In settings.py:
INSTALLED_APPS = [
# ...
"agesci_theme",
]
TEMPLATES = [{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [],
"APP_DIRS": True,
"OPTIONS": {
"context_processors": [
# ... quelli di default ...
"agesci_theme.context_processors.agesci_theme",
],
},
}]
# --- Personalizzazione tema (tutte opzionali) ---
AGESCI_THEME_BRANCA = "generico" # generico | capi | lc | eg | rs | viola
AGESCI_THEME_NOME = "Zona Vesuvio" # mostrato in navbar/footer/title
# Navbar con testo scuro: utile per branca chiara (es. lc = giallo)
AGESCI_THEME_NAVBAR_TESTO_SCURO = False
# Loghi/favicon personalizzati (path relativi a STATIC).
# Se omessi usano gli asset AGESCI Campania inclusi nel pacchetto.
# AGESCI_THEME_LOGO_NAVBAR = "mia_app/img/logo_zona.svg"
# AGESCI_THEME_FAVICON_32 = "mia_app/img/favicon32.png"
Assicurati di avere lo static configurato:
STATIC_URL = "static/"
# in produzione: python manage.py collectstatic
Uso nei template
{% extends "agesci_theme/base.html" %}
{% load agesci_tags %}
{% load agesci_components %}
{% block title %}Home — {{ agesci_theme_nome }}{% endblock %}
{# Nav desktop: icona sopra + etichetta sotto #}
{% block header_nav %}
<li>
<a href="/" class="nav-link active">
<span class="ag-nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5v-5h3v5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354z"/>
</svg>
</span>
Home
</a>
</li>
{% endblock %}
{# Nav mobile (offcanvas) #}
{% block offcanvas_nav %}
<li><a href="/" class="nav-link active">Home</a></li>
{% endblock %}
{% block content %}
{% ag_hero title="Benvenuti!" subtitle="Il tema AGESCI è operativo."
cta_text="Scopri di più" cta_url="/chi-siamo/" %}
<button class="btn btn-primary">Pulsante in colore branca</button>
{# Emblema di una Zona Campania #}
{% emblema_zona "vesuvio" css_class="img-fluid" %}
{# Badge che segue il colore della branca corrente #}
<span class="badge {% branca_bg %}">Branca</span>
{% endblock %}
Blocchi disponibili in base.html
| Blocco | Posizione |
|---|---|
title |
<title> della pagina |
extra_head |
fine <head> |
header |
intera testata (sostituzione completa) |
brand_url |
URL brand nella barra superiore |
brand_text |
testo brand nella barra superiore |
header_nav |
nav desktop con icone (solo ≥ lg) |
offcanvas_nav |
nav mobile nel pannello offcanvas |
header_search |
campo ricerca in barra inferiore |
header_actions |
pulsanti azione in barra inferiore |
sidebar |
sidebar collapsible (vuota = assente) |
sidebar_items |
voci <li> della sidebar |
sidebar_user |
dropdown utente in fondo alla sidebar (default: request.user se autenticato) |
main_class |
classi CSS del <main> (default: container py-4) |
messages |
messaggi Django (alert Bootstrap) |
content |
contenuto principale |
footer |
footer (sostituzione completa) |
footer_brand_text |
testo sotto il logo nel footer |
footer_col1_title / footer_col2_title |
titoli colonne link |
footer_col1_links / footer_col2_links |
voci <li> colonne link |
footer_text |
testo centrale footer (compat. v1) |
footer_copyright |
riga copyright |
footer_links |
link legali (privacy, ecc.) |
extra_js |
script prima di </body> |
Layout applicazione (viewport fisso)
Da ≥ 992 px il base.html applica body { height: 100vh; overflow: hidden } e
.ag-scroll-area { min-height: 0; overflow-y: auto } tramite il CSS del tema.
Il risultato è un layout a viewport fisso: header e sidebar fissi; solo
.ag-scroll-area (che contiene <main> + <footer> come fratelli) scorre.
Il footer occupa tutta la larghezza dell'area (viewport − sidebar),
indipendentemente dal max-width del .container di <main>.
Su mobile/tablet (< 992 px) il layout torna al flusso normale.
Breadcrumb
Passa breadcrumb_items dal contesto della view: la breadcrumb compare
automaticamente nella barra inferiore dell'header al posto di ricerca/azioni.
# views.py
def my_view(request):
return render(request, "mia_app/pagina.html", {
"breadcrumb_items": [
{"label": "Home", "url": "/"},
{"label": "Sezione", "url": "/sezione/"},
{"label": "Pagina corrente"}, # ultimo: active, senza url
]
})
In alternativa usa {% ag_breadcrumb items=breadcrumb_items %} nel blocco content.
Icone Bootstrap (opzionale)
Supporto tramite django-bootstrap-icons.
Installazione con l'extra icons:
uv add "django-agesci-campania-theme[icons]"
# oppure
pip install "django-agesci-campania-theme[icons]"
Aggiungi in settings.py:
INSTALLED_APPS = [..., "agesci_theme", "django_bootstrap_icons"]
# Consigliato: abilita la cache per non scaricare gli SVG a ogni richiesta
BS_ICONS_CACHE = BASE_DIR / ".bs-icons-cache"
Uso nei template:
{% load bootstrap_icons %}
{% bs_icon "house" %}
{% bs_icon "calendar-event" size="1.5em" %}
Template tag
{% load agesci_tags %}
{% emblema_zona "napoli" css_class="..." alt="..." %}—<img>dell'emblema di Zona.{% zone_disponibili %}— lista delle chiavi di zona.{% branca_bg %}— classe CSS di sfondo nel colore della branca corrente.
Zone disponibili: caserta, faito, felix, hirpinia, liternum, napoli, poseidonia, salerno, samnium, vesuvio, volturno.
{% load agesci_components %}
11 componenti UI opzionali: {% ag_hero %}, {% ag_feature_card %},
{% ag_feature_grid %}, {% ag_jumbotron %}, {% ag_badge %},
{% ag_button %}, {% ag_breadcrumb %}, {% ag_dropdown %},
{% ag_list_group %}, {% ag_modal_trigger %}, {% ag_masonry_grid %}.
I template sono in agesci_theme/components/ e sono sovrascrivibili.
Vedi la documentazione completa.
Classi utility palette
bg-ag-viola, bg-ag-azzurro, bg-ag-giallo-lc, bg-ag-verde-eg,
bg-ag-rosso-rs, bg-ag-giallo-oro e i corrispettivi text-ag-*.
Progetto demo
Il repository include un progetto Django di esempio che mostra header, sidebar,
footer, componenti opzionali (/components/), palette e zone. Per avviarlo:
# 1. Clona il repository e installa le dipendenze (crea .venv automaticamente)
git clone https://github.com/AGESCI-Campania/django-agesci-campania-theme.git
cd django-agesci-campania-theme
uv sync
# 2. Crea il database e avvia il server
uv run python example_project/manage.py migrate
uv run python example_project/manage.py runserver
Apri http://127.0.0.1:8000/ nel browser.
Il demo include un selettore di branca nella barra dell'header: il dropdown
permette di passare in tempo reale tra generico, capi, lc, eg, rs e
viola senza ricaricare la pagina, con la scelta persistita in localStorage.
Sviluppo del tema (modificare i colori/SCSS)
Il CSS compilato è già committato, quindi chi installa il pacchetto non ha bisogno di Sass. Serve solo se vuoi modificare lo SCSS.
npm install
npm run build:css # rigenera agesci.css e agesci.min.css
npm run watch:css # ricompila live durante lo sviluppo
I sorgenti sono in agesci_theme/static/agesci_theme/scss/:
_palette.scss, _branche.scss, _bootstrap-overrides.scss,
_header.scss, _sidebar.scss, _footer.scss, _components.scss.
Palette ufficiale
Estratta dal Manuale Immagine Coordinata AGESCI 2011, sez. 7.
| Colore | Pantone | HEX |
|---|---|---|
| Viola | 527C | #7A1E99 |
| Viola scuro | 072C | #622599 |
| Giallo oro | 123C | #FFCC1E |
| Azzurro | 279C | #6689CC |
| Giallo L/C | 109C | #F9D616 |
| Verde E/G | 363C | #3D8E33 |
| Rosso R/S | 032C | #EF3340 * |
* Il manuale 2011 riporta per il 032C un RGB anomalo (refuso di stampa,
confermato): è stato adottato lo standard Pantone 032C. Vedi _palette.scss.
Licenza
Codice sotto licenza MIT. Marchi, emblemi e palette AGESCI restano proprietà dell'Associazione e sono soggetti al regolamento associativo sull'uso del marchio.
Project details
Release history Release notifications | RSS feed
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 django_agesci_campania_theme-2.2.0.tar.gz.
File metadata
- Download URL: django_agesci_campania_theme-2.2.0.tar.gz
- Upload date:
- Size: 1.5 MB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: uv/0.11.21 {"installer":{"name":"uv","version":"0.11.21","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Ubuntu","version":"24.04","id":"noble","libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":true}
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
dcdf11206736354a9fc100ea30ccf19d5068d5122fc045e051a262c9a2cbc2d4
|
|
| MD5 |
640953c7a335a3bd44f13dccfd6756a4
|
|
| BLAKE2b-256 |
2f30e9791cc69200727b597b33f6fa018e6734c8afc14433cf1a5420ddfd5701
|
File details
Details for the file django_agesci_campania_theme-2.2.0-py3-none-any.whl.
File metadata
- Download URL: django_agesci_campania_theme-2.2.0-py3-none-any.whl
- Upload date:
- Size: 1.5 MB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: uv/0.11.21 {"installer":{"name":"uv","version":"0.11.21","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Ubuntu","version":"24.04","id":"noble","libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":true}
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
3b2ec9f0ab37c7a27a4e453597cd0c41bcf604638f1e584fa09f359f9fb185cc
|
|
| MD5 |
2096a0c0382a7ff5014e6960aa34e042
|
|
| BLAKE2b-256 |
9905f25e681c555e9cadec8985b39ba9d8889ccc5df84b23799bea0087ce3add
|
