# Sistema di design Bulma ## Anteprima dell’interfaccia del sistema di design Bulma Modifica un titolo e un riepilogo, verifica il testo, contrassegnalo come pronto e passa dalla modalità chiara a quella scura. ## Riferimento di design del sistema di design Bulma CSS compilato della versione 1.0.4 di Bulma e documentazione ufficiale su responsive design e helper. I componenti HSL sono valori predefiniti del pacchetto, non una palette di colori del brand sostitutiva. Le conversioni in rem presuppongono una radice di 16px. ### Fondamenti di tipografia e controlli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bulma-family-primary | Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif | Stack di font preferiti; il pacchetto non scarica questi file di font. | | --bulma-size-normal | 1rem | Dimensione predefinita di controlli e testo del corpo. | | --bulma-size-small | 0.75rem | Dimensione compatta per i controlli ausiliari. | | --bulma-size-medium | 1.25rem | Dimensione del modificatore medium. | | --bulma-size-large | 1.5rem | Dimensione del modificatore large. | | --bulma-weight-semibold | 600 | Etichette e testo UI con maggiore enfasi. | | --bulma-block-spacing | 1.5rem | Spaziatura tra gli elementi a blocchi. | | --bulma-radius | 0.375rem | Raggio predefinito di 6px con radice a 16px. | | --bulma-radius-small | 0.25rem | Raggio small di 4px. | | --bulma-radius-large | 0.75rem | Raggio large di 12px. | | --bulma-control-height | 2.5em | 2.5em corrispondono a 40px con controlli da 16px. | | --bulma-control-border-width | 1px | Spessore condiviso dei bordi dei controlli. | | --bulma-control-line-height | 1.5 | Altezza di riga condivisa del testo dei controlli. | ### Struttura dei colori | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bulma-primary-h / -s / -l | 171deg / 100% / 41% | Componenti HSL del colore di base primario. | | --bulma-link-h / -s / -l | 233deg / 100% / 63% | Ruolo per azioni e link usato da is-link. | | --bulma-scheme-h / -s | 221 / 14% | Tonalità e saturazione dello schema neutro. | | --bulma-scheme-main-l | 100% in light mode | Luminanza della superficie chiara principale. | | --bulma-text-l | 29% in light mode | Luminanza del testo nello schema normale. | | --bulma-text-title-l | 14% in light mode | Luminanza del testo dei titoli con maggiore enfasi. | ### Helper per la spaziatura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | mb-0 | 0 | Utility per il margine inferiore; le altre direzioni usano la stessa scala di suffissi. | | mb-1 | 0.25rem | Utility per il margine inferiore; le altre direzioni usano la stessa scala di suffissi. | | mb-2 | 0.5rem | Utility per il margine inferiore; le altre direzioni usano la stessa scala di suffissi. | | mb-3 | 0.75rem | Utility per il margine inferiore; le altre direzioni usano la stessa scala di suffissi. | | mb-4 | 1rem | Utility per il margine inferiore; le altre direzioni usano la stessa scala di suffissi. | | mb-5 | 1.5rem | Utility per il margine inferiore; le altre direzioni usano la stessa scala di suffissi. | | mb-6 | 3rem | Utility per il margine inferiore; le altre direzioni usano la stessa scala di suffissi. | ### Breakpoint responsive | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | mobile | ≤768px | Colonne e stack di livello, a meno che non venga aggiunto is-mobile. | | tablet | ≥769px | Le colonne predefinite diventano orizzontali. | | desktop | ≥1024px | Iniziano i modificatori specifici per desktop. | | widescreen | ≥1216px | Intervallo più ampio per contenitori e layout. | | fullhd | ≥1408px | Intervallo predefinito più ampio. | ## Guida completa al sistema di design Bulma Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Bulma: un framework CSS con comportamento esplicito ### Usa le classi di Bulma su elementi HTML semantici > Bulma offre un vocabolario visivo di elementi, componenti, helper di layout e modificatori. Non è un gestore dello stato dei moduli né un runtime per widget JavaScript. La redazione carica il foglio di stile ufficiale 1.0.4 e aggiunge uno script breve, mostrato integralmente, per la convalida, l’anteprima del testo in tempo reale e il cambio di tema. Non sono necessarie dipendenze React né provider di framework. Un campo raggruppa un’etichetta, un contenitore per il controllo e un testo di aiuto. La classe input va applicata all’input effettivo, mentre select è un contenitore per l’elemento select nativo. Queste distinzioni sono importanti perché il contenitore gestisce decorazioni e spaziatura. Riprodurre l’aspetto di uno screenshot usando div generici farebbe perdere il comportamento nativo di modifica e navigazione da tastiera. Leggi la specifica di supporto ## Ruoli HSL e temi chiaro/scuro del sistema di design Bulma ### Usa i modificatori anziché applicare correzioni hardcoded Bulma 1 memorizza le famiglie di colori come componenti HSL e ne ricava i valori correlati. Il ruolo link definisce il pulsante di revisione, l’etichetta della sezione e gli accenti di supporto. Le etichette di avviso e successo indicano Bozza e Pronto per la revisione, ma il testo dell’etichetta rimane sempre visibile. Il messaggio usa is-info perché descrive i limiti del processo, anziché segnalare un errore. La demo inizia con data-theme=light su html. Il pulsante dell’aspetto alterna quell’attributo tra light e dark. Tutte le schede, i campi, i testi di aiuto e i messaggi ereditano insieme il tema corretto. Impostare direttamente uno sfondo bianco sul riquadro comprometterebbe questo cambio. Per personalizzare il brand, modifica le variabili di ruolo documentate e verifica gli stati derivati, invece di intervenire solo sul colore di sfondo finale del pulsante. Leggi la specifica di supporto ## Preferenze dei font e scala tipografica funzionale nel sistema di design Bulma ### Il pacchetto definisce preferenze, non distribuisce font Lo stack di font predefinito inizia con Inter e include diversi font di sistema alternativi. Caricare Bulma non scarica Inter. Questo esempio offline usa il primo font disponibile tra quelli elencati; quindi, se una build di produzione richiede un carattere specifico, dovrà fornire separatamente il file del font e la relativa modalità di caricamento. Le classi title e subtitle definiscono la gerarchia visiva senza modificare il livello di intestazione HTML. La redazione usa title is-2 per la pagina, title is-4 per il modulo e title is-3 per il titolo dell’articolo. Una regola specifica per schermi stretti riduce il titolo della pagina a 2rem: si tratta esplicitamente di un perfezionamento locale. I controlli mantengono la dimensione normale di 1rem. Il testo di aiuto rimane accanto al relativo campo, così l’utente non deve consultare le istruzioni in una barra laterale separata. Leggi la specifica di supporto ## Helper di spaziatura e colonne responsive nel sistema di design Bulma ### Una proporzione sette a cinque che si impila naturalmente Il contenitore columns usa is-variable is-6; i figli sono column is-7 e column is-5. Queste proporzioni riservano più spazio al modulo che all’anteprima dell’articolo. Per impostazione predefinita, il layout mobile-first impila le colonne su schermi di dimensioni mobili; perciò questa composizione non aggiunge is-mobile, che manterrebbe un layout orizzontale troppo compresso. I suffissi degli helper di spaziatura non corrispondono a una scala lineare in pixel. In particolare, il suffisso cinque equivale a 1.5rem e il sei a 3rem. La distanza tra scheda e messaggio usa mt-5, mentre le etichette più piccole usano mb-3. La sezione esterna applica un override dell’applicazione: 2rem in verticale e 1.5rem in orizzontale; il CSS aggiuntivo completo è incluso nella configurazione. Leggi la specifica di supporto ## Anatomia dei campi e convalida nel sistema di design Bulma ### Il colore è solo una parte di un errore Il titolo e il riepilogo sono associati esplicitamente alle rispettive etichette e ai testi di aiuto. Se l’invio viene rifiutato, is-danger viene aggiunto all’input e al testo di aiuto, aria-invalid=true viene impostato e il focus passa al primo controllo non valido. Il titolo deve contenere almeno cinque caratteri dopo aver rimosso gli spazi iniziali e finali; il riepilogo almeno venti. Si tratta di requisiti editoriali d’esempio, non di vincoli di Bulma. È necessario selezionare anche la casella di controllo per la revisione del testo. L’errore esplicativo associato è collegato tramite aria-describedby. Bulma può visualizzare questi stati, ma non può stabilire se il testo è pronto. Questa decisione spetta allo script, che impedisce la normale navigazione del modulo. Non viene inventato alcun risultato del server. 1. Cancella il titolo e invia il modulo per vedere il campo non valido con il focus. 2. Ripristina un titolo e un riepilogo di almeno venti caratteri. 3. Seleziona la casella di controllo per la revisione del testo, invia il modulo e poi modifica di nuovo il testo per riportare il brief allo stato Bozza. Leggi la specifica di supporto ## Schede, messaggi ed etichette di stato nel sistema di design Bulma ### Assegna a ogni contenitore un’unica funzione La scheda dell’articolo separa card-header e card-content. Il testo dell’intestazione identifica il contenuto, mentre un tag indica lo stato editoriale. Il contenuto include la sezione aggiornata in tempo reale, il titolo e il riepilogo, seguiti dai metadati. L’anteprima mette intenzionalmente il testo in primo piano: l’autore può valutarne la gerarchia e la lunghezza senza che un’immagine segnaposto sovrasti il brief. Il componente message usa message-header e message-body per spiegare che la prontezza alla revisione vale solo localmente. Rimane visibile indipendentemente dalla convalida. Una notifica di successo temporanea non sarebbe un’alternativa adeguata a questa indicazione persistente: chiudendola, l’utente potrebbe credere che l’articolo sia stato pubblicato. - Scheda: composizione corrente dell’articolo. - Tag: stato esplicito di bozza o revisione. - Messaggio: spiegazione persistente dell’effetto dell’azione. Leggi la specifica di supporto ## Gestire lo stato dell’applicazione senza un runtime per widget nel sistema di design Bulma ### Evita stati di successo non aggiornati e inserimenti non sicuri nell’anteprima Ogni evento di input aggiorna l’anteprima e riporta lo stato a Bozza. In questo modo non viene mantenuta l’etichetta Pronto dopo che l’autore modifica il testo già revisionato. Il contenuto viene aggiornato con textContent, quindi HTML digitato viene visualizzato come testo anziché interpretato come markup. Queste sono responsabilità dell’applicazione: il foglio di stile di Bulma non può occuparsene. Ripristina bozza richiama form.reset, rimuove le classi di convalida e aria-invalid, cancella il testo di aiuto della casella di controllo e ricostruisce l’anteprima. Ripristina il contenuto d’esempio originale senza ricaricare il documento. Dopo l’invio, il paragrafo di stato usa role=status; la normale digitazione in tempo reale, invece, non sposta ripetutamente il focus. Leggi la specifica di supporto ## Installa CSS e mantieni visibile il comportamento nel sistema di design Bulma ### Nessun provider e nessun JavaScript Bulma incluso Installa bulma@1.0.4 e copia il suo CSS compilato in una risorsa locale, oppure importa quel CSS in un bundler esistente. La configurazione semplice di HTML mostrata qui non richiede passaggi di compilazione dopo aver copiato la risorsa. Inserisci tutto il markup della scrivania in body e carica app.js con defer. Non caricare un pacchetto JavaScript non correlato aspettandoti che attivi i componenti di Bulma. Se in seguito aggiungi una finestra modale o un menu a discesa, definisci intenzionalmente i relativi comportamenti di tastiera, focus e chiusura. Una classe come is-active modifica l’aspetto, ma non intrappola il focus. In questo esempio, gli input e i pulsanti nativi mantengono ridotta e verificabile l’area dei comportamenti. Leggi la specifica di supporto ## Personalizza il sistema di progettazione sistema di design Bulma al livello appropriato ### Esamina le variabili dei componenti prima di sovrascriverle Le variabili globali --bulma definiscono il tema, ma anche i componenti dichiarano variabili nei propri selettori. Un’assegnazione più specifica del componente può sovrascrivere un valore a livello di radice. Se una sovrascrittura a livello di radice sembra inefficace, esamina la classe nel CSS compilato e applica la modifica al componente appropriato, invece di accumulare dichiarazioni non correlate. Per un prodotto destinato a durare, mantieni distinti i valori predefiniti del pacchetto, le modifiche del brand e le regole di layout specifiche delle schermate. Le piccole modifiche dell’esempio al contenitore e ai titoli su dispositivi mobili sono regole di schermata. Le tabelle di riferimento riportano separatamente i valori effettivi di Bulma, chiarendo quali impostazioni si possono riutilizzare e quali appartengono solo a questa scrivania editoriale. Leggi la specifica di supporto ## Esempi di componenti del sistema di progettazione sistema di design Bulma ### Markup completo della scrivania editoriale Anatomia di campo/controllo/etichetta/testo di aiuto Bulma, colonne 7/5, Card, Message e tag di stato. ```

BULMA / LOCAL EDITORIAL DESK

Shape the next issue.

An article brief, a preview, and an explicit editorial state.

Article brief

Use 5–90 characters. This field updates the preview as you type.

Use at least 20 characters to give the reviewer enough context.

Draft changes stay in this page only.

Issue 08 / Article preview

Draft

Design notes

A quieter way to work

How small choices in layout and language can make a demanding interface feel manageable.

Copy desk · Reading time assigned after editing

Review is a separate step

Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.

Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.

``` Riferimento del codice - La libreria CSS non convalida né invia il modulo. - aria-describedby collega gli input al testo di aiuto. - L’anteprima usa textContent per visualizzare il testo inserito dall’utente. ### Convalida e comportamento dell’anteprima locale I gestori di eventi originali forniscono i comportamenti che Bulma lascia intenzionalmente all’applicazione. ``` const $=id=>document.getElementById(id); const fields=['headline','summary']; function draft(){ $('state').textContent='Draft';$('state').className='tag is-warning is-light mr-4 my-4';$('result').textContent='Draft changes stay in this page only.';} function preview(){ $('preview-title').textContent=$('headline').value.trim()||'Untitled article';$('preview-summary').textContent=$('summary').value.trim()||'No summary yet.';$('preview-section').textContent=$('section').value;draft();} for(const id of ['headline','summary','section','checked'])$(id).addEventListener('input',preview); $('brief').addEventListener('submit',event=>{event.preventDefault();let first=null;for(const id of fields){const invalid=$(id).value.trim().length<(id==='headline'?5:20);$(id).classList.toggle('is-danger',invalid);$(id).setAttribute('aria-invalid',String(invalid));$(id+'-help').classList.toggle('is-danger',invalid);if(invalid&&!first)first=$(id);}$('checked-help').textContent=$('checked').checked?'':'Confirm the copy check before review.';$('checked-help').className='help is-danger';if(!$('checked').checked&&!first)first=$('checked');if(first){$('result').textContent='Check the highlighted brief fields.';first.focus();return;}$('state').textContent='Ready for review';$('state').className='tag is-success is-light mr-4 my-4';$('result').textContent='Marked ready in this local preview. Nothing was published.';}); $('reset').addEventListener('click',()=>{$('brief').reset();for(const id of fields){$(id).classList.remove('is-danger');$(id).removeAttribute('aria-invalid');$(id+'-help').classList.remove('is-danger');}$('checked-help').textContent='';preview();}); $('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';$('theme').textContent=dark?'Light appearance':'Dark appearance';}); ``` Riferimento del codice - Se l’invio non è valido, il focus passa al primo campo mancante. - Modificando una bozza pronta, il suo stato torna a Bozza. - L’attributo data-theme controlla l’aspetto. ## Configurazione dell’agente per il sistema di progettazione sistema di design Bulma ### Punto di partenza per l’implementazione Salva il markup completo e gli esempi JavaScript come indicato. Bulma fornisce il CSS; lo script dell’applicazione fornito implementa tutta la convalida e lo stato locale. L’anteprima offline incorpora entrambi i file. Il wrapper HTML include tutto il markup del body; salva gli esempi forniti per le interazioni e per il CSS usando i nomi file indicati qui. ``` Editorial desk

BULMA / LOCAL EDITORIAL DESK

Shape the next issue.

An article brief, a preview, and an explicit editorial state.

Article brief

Use 5–90 characters. This field updates the preview as you type.

Use at least 20 characters to give the reviewer enough context.

Draft changes stay in this page only.

Issue 08 / Article preview

Draft

Design notes

A quieter way to work

How small choices in layout and language can make a demanding interface feel manageable.

Copy desk · Reading time assigned after editing

Review is a separate step

Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.

Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.

``` ### Un prompt per il tuo progetto ``` Inizia con la scrivania editoriale completa di Bulma 1.0.4. Mantieni l’anatomia di campo/controllo/testo di aiuto, le colonne responsive, i componenti card e message e il tema chiaro/scuro a livello di documento. Le modifiche a titolo e riepilogo devono aggiornare l’anteprima dell’articolo tramite textContent e riportarne lo stato a Bozza. Richiedi il rispetto dei limiti di testo dopo aver rimosso gli spazi iniziali e finali e la conferma del controllo del testo prima di contrassegnarlo come pronto per la revisione; collega i campi non validi ai relativi testi di aiuto e sposta il focus sul primo errore. Ripristina la bozza originale e cancella lo stato di convalida senza far intendere che sia stata pubblicata. ``` ## Fonti e ambito del sistema di progettazione sistema di design Bulma Riferimento CSS 1.0.4 di Bulma. Le regole editoriali locali e JavaScript sono codice d’esempio originale; nessuna bozza viene archiviata o pubblicata. - Panoramica Configurazione con il solo CSS e requisiti del documento. - Variabili CSS Ambito globale e dei componenti. - Controlli del modulo Composizione di campo e controllo. - Adattabilità Limiti ufficiali delle aree visibili. - Helper per la spaziatura Valori dei suffissi delle utility. - Modalità scura Selezione del tema. - Message Anatomia del contenitore Message. ## Risorse correlate al sistema di progettazione sistema di design Bulma ### Chakra UI Un riferimento a Chakra UI v3 per token, ruoli semantici dei colori, ricette e componenti composti per i moduli. Esamina le scale effettive di spaziatura e tipografia, poi prova un modulo nativo per il profilo dell’area di lavoro con convalida, simulazione del salvataggio non riuscito e aspetto chiaro o scuro. ### CoreUI Una coda di revisione CoreUI realizzata con le variabili reali del tema 5.9, schede native, selezione multipla tramite caselle di controllo e un toast persistente che consente di annullare l’ultima archiviazione locale. ### daisyUI Uno strumento nativo per CSS dedicato alla creazione di inviti, che mostra i 5 temi semantici di daisyUI, i colori coordinati per i contenuti, gruppi di pulsanti radio, controlli a intervallo, convalida del browser e un vero passaggio di revisione in una finestra di dialogo. - [Riferimento per l’implementazione](https://bulma.io/documentation/form/general/) - [Fonte](https://bulma.io/documentation/features/css-variables/) - [Fonte](https://bulma.io/documentation/features/color-palettes/) - [Fonte](https://bulma.io/documentation/helpers/spacing-helpers/) - [Fonte](https://bulma.io/documentation/start/responsiveness/) - [Leggi la specifica di supporto](https://bulma.io/documentation/start/overview/) - [Leggi la specifica di supporto](https://bulma.io/documentation/features/dark-mode/) - [Leggi la specifica di supporto](https://bulma.io/documentation/helpers/typography-helpers/) - [Leggi la specifica di supporto](https://bulma.io/documentation/start/responsiveness/) - [Leggi la specifica di supporto](https://bulma.io/documentation/form/general/) - [Leggi la specifica di supporto](https://bulma.io/documentation/components/message/) - [Leggi la specifica di supporto](https://bulma.io/documentation/features/css-variables/) - [Riferimento del codice](https://bulma.io/documentation/form/general/) - [Riferimento del codice](https://bulma.io/documentation/start/overview/) - [Panoramica Configurazione con il solo CSS e requisiti del documento.](https://bulma.io/documentation/start/overview/) - [Variabili CSS Ambito globale e dei componenti.](https://bulma.io/documentation/features/css-variables/) - [Controlli del modulo Composizione di campo e controllo.](https://bulma.io/documentation/form/general/) - [Adattabilità Limiti ufficiali delle aree visibili.](https://bulma.io/documentation/start/responsiveness/) - [Helper per la spaziatura Valori dei suffissi delle utility.](https://bulma.io/documentation/helpers/spacing-helpers/) - [Modalità scura Selezione del tema.](https://bulma.io/documentation/features/dark-mode/) - [Message Anatomia del contenitore Message.](https://bulma.io/documentation/components/message/)