Système de design Bulma.

Un framework CSS au comportement explicite — système de design Bulma

Utilisez les classes Bulma sur des éléments sémantiques HTML

Bulma fournit un vocabulaire visuel composé d’éléments, de composants, d’assistants de mise en page et de modificateurs. Ce n’est ni un gestionnaire d’état de formulaire ni un moteur d’exécution de widgets JavaScript. Le bureau éditorial charge la feuille de style officielle 1.0.4 et ajoute un petit script entièrement présenté pour la validation, l’aperçu du texte en direct et le changement de thème. Il n’y a aucune dépendance à React ni aucun fournisseur de framework.

Un champ regroupe un libellé, un conteneur de contrôle et un texte d’aide. La classe input s’applique à l’élément input lui-même, tandis que select est un conteneur autour de l’élément natif select. Ces distinctions sont importantes, car le conteneur gère la décoration et l’espacement. Reproduire uniquement l’apparence d’une capture d’écran avec des div génériques ferait perdre le comportement natif de saisie et de navigation au clavier.

Consultez la spécification associée

Rôles HSL et thèmes clair/sombre du système de design Bulma

Utilisez des modificateurs plutôt que des correctifs codés en dur

Bulma 1 stocke les familles de couleurs sous forme de composantes HSL et en déduit les valeurs associées. Le rôle de lien définit le bouton de révision, le libellé de section et les accents visuels. Les étiquettes d’avertissement et de succès signalent les états Brouillon et Prêt pour révision, mais le libellé textuel reste toujours visible. Le message utilise is-info, car il explique les limites du processus plutôt que de signaler une erreur.

La démo commence avec data-theme=light sur html. Le bouton d’apparence fait basculer cet attribut entre light et dark. Toutes les cartes, les champs, les textes d’aide et les messages adoptent ensemble le thème approprié. Définir directement un arrière-plan blanc sur le bloc compromettrait ce changement de thème. Pour personnaliser l’identité visuelle, modifiez les variables de rôle documentées et vérifiez les états qui en découlent, au lieu de ne changer que l’arrière-plan final du bouton.

Consultez la spécification associée

Préférences de polices et échelle typographique lisible du système de design Bulma

Le package définit des préférences, pas le chargement des polices

La pile de polices par défaut commence par Inter et comprend plusieurs polices système de remplacement. Le chargement de Bulma ne télécharge pas Inter. Cet exemple hors ligne utilise la première police disponible parmi celles indiquées. Pour utiliser une police précise en production, il faut fournir séparément le fichier de police et définir sa stratégie de chargement. Les classes de titre et de sous-titre établissent une hiérarchie visuelle sans modifier le niveau de titre HTML.

La page utilise title is-2 pour le titre principal, title is-4 pour le formulaire et title is-3 pour le titre de l’article. Une règle pour les écrans étroits réduit le titre principal à 2rem ; il s’agit explicitement d’un ajustement local. Les contrôles conservent leur taille standard de 1rem. Le texte d’aide reste à côté de son champ, afin d’éviter d’avoir à consulter des instructions dans une barre latérale distincte.

Consultez la spécification associée

Utilitaires d’espacement et colonnes adaptatives du système de design Bulma

Une répartition sept-cinq qui s’empile naturellement

L’élément parent columns utilise is-variable is-6 ; ses enfants sont column is-7 et column is-5. Ces proportions réservent plus de largeur au formulaire qu’à l’aperçu de l’article. Par défaut, les colonnes s’empilent sur les petits écrans. Cette composition n’ajoute donc pas is-mobile, qui maintiendrait une disposition horizontale trop étroite.

Les suffixes des utilitaires d’espacement ne correspondent pas à une échelle linéaire en pixels. En particulier, le suffixe cinq vaut 1.5rem et le suffixe six, 3rem. L’écart entre la carte et le message utilise mt-5, tandis que les petits libellés utilisent mb-3. La section externe applique localement une surcharge de 2rem à la verticale et de 1.5rem à l’horizontale ; la configuration supplémentaire complète de CSS est fournie dans la configuration initiale.

Consultez la spécification associée

Structure des champs et validation du système de design Bulma

La couleur ne suffit pas à signaler une erreur

Le titre et le résumé sont explicitement associés à leurs libellés et à leur texte d’aide. Lorsqu’une soumission est refusée, is-danger est ajouté au champ et au texte d’aide, aria-invalid=true est défini et le premier champ invalide reçoit le focus. Le titre doit contenir au moins cinq caractères après suppression des espaces en début et en fin ; le résumé doit en contenir vingt. Ce sont des exigences éditoriales données en exemple, et non des contraintes de Bulma.

La case de vérification du texte doit également être cochée. Le message d’erreur explicatif associé est référencé par aria-describedby. Bulma peut afficher ces états, mais ne peut pas déterminer si le texte est prêt. Cette décision revient au script, qui empêche la navigation native du formulaire. Aucun résultat serveur n’est simulé.

1. Effacez le titre et soumettez le formulaire pour voir le focus placé sur le champ invalide.
2. Rétablissez un titre et un résumé d’au moins vingt caractères.
3. Cochez la case de vérification du texte, soumettez le formulaire, puis modifiez à nouveau le texte pour que le brief repasse à l’état Brouillon.

Consultez la spécification associée

Cartes, messages et étiquettes d’état du système de design Bulma

Attribuez une seule fonction à chaque conteneur

La carte de l’article sépare card-header et card-content. L’en-tête indique le sujet, tandis qu’une étiquette affiche l’état éditorial. Le contenu comprend la section, le titre et le résumé mis à jour en temps réel, puis les métadonnées. L’aperçu privilégie volontairement le texte : la personne qui rédige peut évaluer la hiérarchie et la longueur sans qu’une image de remplacement ne prenne le dessus sur le brief.

Le composant de message utilise message-header et message-body pour expliquer que l’état Prêt pour révision est local. Il reste visible quelle que soit la validation. Une notification temporaire de réussite ne conviendrait pas pour expliquer cette limite : en la fermant, l’utilisateur pourrait croire que l’article a été publié.

• Carte : composition actuelle de l’article.
• Étiquette : état explicite, brouillon ou prêt pour révision.
• Message : explication persistante de l’action.

Consultez la spécification associée

Gérer l’état d’une application sans moteur de widgets avec le système de design Bulma

Éviter les messages de réussite périmés et l’insertion dangereuse dans l’aperçu

Chaque événement de saisie met à jour l’aperçu et réinitialise l’état à Brouillon. Cela évite de conserver une étiquette « Prêt » après que la personne qui rédige a modifié le texte révisé. L’affichage est mis à jour avec textContent : le texte saisi HTML est donc affiché tel quel, sans être interprété comme du balisage. Ces responsabilités incombent à l’application ; la feuille de style de Bulma ne peut pas les prendre en charge.

La fonction Restore draft appelle form.reset, supprime les classes de validation et aria-invalid, efface l’aide de la case à cocher et reconstruit l’aperçu. Elle rétablit le contenu d’exemple initial sans recharger le document. Le paragraphe d’état utilise role=status pour signaler les changements après la soumission, tandis que la saisie normale ne déplace pas le focus de façon répétée.

Consultez la spécification associée

Installer CSS et rendre le comportement visible avec le système de design Bulma

Sans fournisseur ni Bulma intégré à JavaScript

Installez [email protected] et copiez son fichier CSS compilé dans un dossier local, ou importez ce fichier CSS dans un bundler existant. La configuration HTML présentée ici ne nécessite aucune étape de compilation une fois le fichier copié. Placez le balisage complet de l’interface dans body et chargez app.js avec defer. Ne chargez pas un package JavaScript sans rapport en pensant qu’il activera les composants de Bulma.

Si vous ajoutez ensuite une fenêtre modale ou une liste déroulante, prévoyez délibérément les comportements associés au clavier, au focus et à la fermeture. Une classe telle que is-active modifie l’apparence ; elle ne piège pas le focus. Dans cet exemple, les champs et boutons natifs permettent de limiter le comportement à prendre en compte et à vérifier.

Consultez la spécification associée

Personnaliser le système de design Bulma à la portée appropriée

Examinez les variables des composants avant de les remplacer

Les variables globales --bulma définissent le thème, mais les composants définissent aussi leurs propres variables sur leurs sélecteurs. Une affectation plus spécifique à un composant peut remplacer une valeur définie à la racine. Si une surcharge à la racine semble sans effet, inspectez la classe dans le CSS compilé, puis placez la surcharge sur le composant approprié plutôt que d’accumuler des déclarations sans rapport.

Pour un produit conçu pour durer, distinguez les valeurs par défaut du package, les surcharges de marque et les règles de mise en page propres à chaque écran. Les ajustements de conteneur réduit et de titre sur mobile dans l’exemple sont des règles propres à l’écran. Les tableaux de référence indiquent séparément les valeurs réelles de Bulma, afin de distinguer clairement les paramètres réutilisables de ceux qui sont propres à ce bureau éditorial.

Consultez la spécification associée

Exemples de composants du système de design Bulma

<section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>

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';});