Sistema di progettazione Tabler.

Sistema di progettazione sistema di design Tabler Usa il tema corrispondente alla versione di Tabler

Usa il tema corrispondente alla versione di Tabler

Il diario del progetto è realizzato con Tabler 1.6.1. La palette compilata usa colori OKLCH, mentre le variabili semantiche usano light-dark e color-mix. Il riferimento riporta quindi le espressioni effettive anziché copiare valori esadecimali da una vecchia guida Bootstrap o Tabler. L’azione principale, i badge di stato e i ruoli delle superfici provengono tutti da questa versione installata.

Tabler amplia il vocabolario dei componenti Bootstrap con propri schemi di layout e di visualizzazione delle informazioni. L’esempio usa le classi native timeline, page-header, datagrid e avatar insieme a schede, moduli e un modal familiari. Questi dettagli ne fanno una composizione Tabler, anziché una griglia generica di schede con un logo diverso.

Leggi la specifica di supporto

La modalità colore del sistema di progettazione sistema di design Tabler cambia le superfici oltre al testo

Il cambio di modalità colore modifica sia le superfici sia il testo

Il controllo del tema modifica data-bs-theme sull’elemento html e aggiorna il proprio stato premuto e l’etichetta dell’azione. Le espressioni semantiche di Tabler scelgono quindi i valori chiari o scuri. Per questo semplice esempio a due stati non serve un gestore del tema JavaScript separato e le preferenze non vengono salvate al di fuori della pagina.

Decisione, Prototipo e Revisione usano le classi native per le sfumature blu, viola e verdi. Le etichette testuali mantengono il loro significato senza dipendere solo dal colore. Le illustrazioni degli studi di copertina conservano la palette originale, simile alla carta, in entrambe le modalità; le schede circostanti, la pagina e il testo usano il tema effettivo dei componenti.

Leggi la specifica di supporto

Sistema di design Tabler Sistema di progettazione: caratteri compatti per il testo corrente e gerarchia distinta per la pagina

Testo compatto per il corpo con una gerarchia di pagina distinta

Il testo corrente predefinito è di 0.875rem, con un’altezza della riga di circa 1.4286: su una radice di sedici pixel corrisponde a un testo di circa quattordici pixel. Lo stack di caratteri installato usa i caratteri sans-serif di sistema, quindi questa anteprima non richiede caratteri remoti. I titoli delle schede e i metadati mantengono le classi native, mentre il titolo della pagina usa una dimensione originale di trentadue pixel.

I valori nativi di spaziatura aumentano secondo la sequenza 0, 0.25, 0.5, 1, 1.5, 2 e 2.5rem. Sono variabili denominate nel CSS installato, non una scala ipotizzata. La spaziatura interna predefinita del corpo della scheda è di 1.25rem in entrambe le direzioni. Il nodo della timeline è di 2.5rem e il connettore usa la variabile di spaziatura della pagina per colmare il vuoto tra le voci.

Leggi la specifica di supporto

Sistema di design Tabler Sistema di progettazione: una timeline è più di un bordo verticale

Una timeline è più di un bordo verticale

Ogni punto di revisione è un elemento di lista timeline-event, con timeline-event-icon e timeline-event-card. Il CSS nativo posiziona il nodo, disegna il connettore tra le voci non finali e distanzia la scheda del contenuto in base alla larghezza del nodo più la spaziatura della pagina. Questo esempio non simula la linea con un’immagine di sfondo né si affida a posizioni assolute per ogni scheda.

Le schede variano per contenuto. Una registra una decisione strutturale, una contiene tre studi di copertina effettivi e una registra la revisione dei riferimenti. Il contesto del progetto è fuori dalla sequenza perché il formato e il focus attuale sono attributi persistenti, non eventi datati. Sugli schermi più piccoli, la barra laterale segue la timeline nell’ordine del documento.

Leggi la specifica di supporto

Sistema di design Tabler Sistema di progettazione: usare datagrid per piccoli gruppi di etichette e valori

Usa Datagrid per piccoli gruppi di etichette e valori

La scheda Contesto del progetto usa coppie datagrid-item, datagrid-title e datagrid-content. Formato, Team, Punti di revisione e Focus attuale sono attributi sullo stesso piano, quindi vengono presentati in un datagrid nativo compatto anziché in una tabella con intestazioni di riga ridondanti. Gli avatar iniziali usano le iniziali testuali e non richiedono immagini remote.

Il conteggio dei punti di revisione è l’unico valore del contesto modificato da questo esempio. Aggiungendo una voce locale, il conteggio passa da tre a quattro, mentre la descrizione originale del progetto rimane invariata. Si evitano così metriche di dashboard inventate: il numero corrisponde direttamente alle voci visibili nell’elenco.

Leggi la specifica di supporto

Sistema di design Tabler Sistema di progettazione: la modale integrata gestisce visibilità e focus

Il modal incluso gestisce visibilità e focus

Il pulsante Aggiungi punto di revisione apre la modale nativa tramite data-bs-toggle e data-bs-target. Il JavaScript Tabler integrato fornisce l’implementazione della modale. Un listener per shown.bs.modal porta il focus sul campo del titolo al termine della transizione, quando l’input è effettivamente visibile. Chiudi e Annulla usano data-bs-dismiss per seguire lo stesso ciclo di vita del componente.

La modale contiene un vero modulo. I vincoli di obbligatorietà e lunghezza rifiutano i campi incompleti prima che venga eseguito il gestore dell’invio. Il gestore verifica anche la lunghezza dopo aver rimosso gli spazi iniziali e finali, perché una stringa di soli spazi non è un titolo o una motivazione utile. La convalida mantiene il testo inserito disponibile per le correzioni; il modulo viene azzerato solo dopo l’aggiunta riuscita di una voce.

1. Apri la modale e invia i campi vuoti per individuare il primo controllo non valido.
2. Inserisci un titolo, scegli un tipo di punto di revisione e spiegane la motivazione.
3. Invia e verifica che la nuova voce e il conteggio nel contesto si aggiornino insieme.

Leggi la specifica di supporto

Sistema di design Tabler Sistema di progettazione: inserire testo in modo sicuro e indicare chiaramente i limiti locali

Aggiungi testo sicuro e indica il confine dell’elaborazione locale

L’applicazione crea una struttura di scheda nota e inserisce il titolo e la motivazione con textContent. Solo una mappatura fissa dei tre tipi del menu a discesa sceglie la classe per la sfumatura. Il testo fornito dall’utente non viene mai interpolato nel HTML della scheda. La nuova voce viene inserita in cima con l’etichetta chiara VOCE LOCALE, non con un timestamp del server inventato.

Dopo l’inserimento, l’istanza della modale esistente si chiude e una notifica di stato indica il nuovo punto di revisione. Specifica chiaramente che non è stato aggiornato alcun servizio del progetto. Un vero diario collaborativo richiederebbe persistenza, identità degli autori e garanzie sull’ordinamento; l’aggiunta di un elemento al DOM locale non offre queste funzionalità.

Leggi la specifica di supporto

Sistema di design Tabler Sistema di progettazione: mantenere leggibili i contenuti densi in una timeline compatta

Mantieni leggibili i contenuti densi in una timeline stretta

La griglia principale usa col-lg-8 e col-lg-4. Al di sotto del breakpoint grande nativo, il contesto del progetto si dispone sotto il diario. Il foglio di stile originale per schermi piccoli riduce la distanza laterale della timeline, consente ai gruppi di titoli e badge di andare a capo e ridimensiona gli studi di copertina, mantenendo invariati testi e azioni.

Una timeline può diventare affollata quando la colonna delle icone, la spaziatura interna delle schede e un titolo lungo competono per la stessa larghezza. L’esempio per dispositivi mobili mantiene il nodo come riferimento stabile, ma usa un rientro compatto. Gli studi di copertina originali restano tre piccoli confronti perché la loro relazione è importante; le didascalie sono accessorie rispetto al paragrafo esplicativo adiacente.

• Mantieni leggibili il titolo e il tipo di punto di revisione quando vanno a capo.
• Conserva il testo della motivazione invece di troncare ogni voce della timeline.
• Sui dispositivi mobili, mostra la scheda del contesto dopo la sequenza di lettura principale.

Leggi la specifica di supporto

Sistema di design Tabler Sistema di progettazione: caricare un abbinamento coerente di CSS e JavaScript

Carica una coppia CSS e JavaScript compatibile

La configurazione usa @tabler/core 1.6.1 e copia le risorse dist in una directory pubblica locale. Carica tabler.min.css prima del foglio di stile dell’applicazione e tabler.min.js prima del codice di interazione locale. Aggiungere un secondo bundle Bootstrap non correlato potrebbe inizializzare due volte gli stessi attributi data; questo esempio usa solo il bundle Tabler corrispondente.

Il foglio di stile attuale usa funzioni colore moderne. Consulta le indicazioni di Tabler sulla compatibilità dei browser prima di adottarlo in un prodotto con requisiti di supporto per browser meno recenti. L’esempio locale è stato verificato in Chromium per la convalida nativa della modale, l’inserimento nella timeline, la modalità scura e un layout da 390px; non è una distribuzione in produzione né una garanzia per ogni browser possibile.

Leggi la specifica di supporto

Sistema di design Tabler Esempi di componenti del sistema di progettazione

<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>

const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3;
modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus());
q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';};
q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`<div class="timeline-event-icon bg-${color}-lt" aria-hidden="true">YOU</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1"></h2><span class="badge bg-${color}-lt"></span></div><div class="text-secondary small mb-3">You · LOCAL ENTRY</div><p class="mb-0"></p></div></div>`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity(''));

html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}}