Componenti Framework Django

Lista completa (senza header, menu, footer). Classe CSS → grafica sotto. → Rails originale → Inventario

Scelte tipografiche (font, colori, grassetti…)
Font base:
-apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif
Proxima Nova Light:
menu, bottoni, titoli leggeri (fallback: base)
Proxima Nova Regular:
testo corpo, tooltip, elementi enfatizzati (fallback: base)
Dimensioni:
12px, 13px, 14px (base), 18px, 20px, 22px, 24px
Colori principali:
■ grigio extra scuro #4b4b4b (testo) · ■ menu gray #4F5D72 · ■ arancio #F5A000 (CTA, attivo) · ■ arancio scuro #E58D00 (hover)
Semantici:
■ rosso #c1282e (errore, elimina) · ■ verde #7AB55C (successo, menu) · ■ menu bg #333A3F · ■ menu scuro #1D2328
Grigi:
#FAFBFC · #EBEEF0 · #D3DBE2 · #868686 · #666666 · #333333 · #262626
Peso:
font-weight: normal (Light/Regular). Nessun bold di default nelle UI standard.
.wrap-title-bar, #title-bar, .page-title
Titolo pagina centrato Nuovo Esporta
.content-search-form (chiusa)
Ricerca avanzata Ricerca avanzata
.content-search-form.open – come Rails (Anagrafica)
+ Altri filtri
Ricerca avanzata Ricerca avanzata
.ta-btn
Azione Indietro Elimina Conferma Dettagli Annulla
.ta-button, .ta-button--orange
.form, .form .field
Annulla
.ta-multiselect, select[data-fancy] (init_multiselect)
.form input[type=checkbox], .form input[type=radio]
.ta-checkbox-tag
.ta-onoff-checkbox
Off On
.table (base)
Colonna AColonna BColonna C
Riga 1ARiga 1BRiga 1C
Riga 2ARiga 2BRiga 2C
.table.table-striped
NomeCognome
MarioRossi
LuigiVerdi
AnnaBianchi
.table.table-bordered
AB
12
34
.table.table-orange
Titolo tabella arancione
AB
12
.pagination
.ta-pagination (Django)
.ta-progress-bar
3 di 10
.ta-breadcrumb
.ta-tooltip (ta.tooltip: data-tooltip="true")
Passa il mouse
.label, .label-red, .label-orange, .label-blue, .label-green
Etichetta rossa Etichetta arancione Etichetta blu Etichetta verde Etichetta grigia
.ta-flash (messaggi)
.ta-card, .ta-grid, .ta-stack, .ta-container
ta-card singola
1
2
3
ta.image – image_preview (input file → anteprima img)
ta.datepicker – datetimepicker con spinner (.datepicker-icon)
ta.chartutils – Chart.make_chart_from_table
MeseVenditeRicavi
Gen1202400
Feb1503000
Mar1803600
Apr1402800
.ta-drop-down-button (ta.dropdown: data-action="drop-down")
Dropdown
.ta-wizard-steps
.nav-link, .delete-link, .action-link
Link nav Elimina Azione