# Système de design Bulma ## Aperçu de l’interface du système de design Bulma Modifiez un titre et un résumé, validez le brief, marquez-le comme prêt et basculez entre les apparences claire et sombre. ## Référence de conception du système de design Bulma Bulma 1.0.4, CSS compilé et documentation officielle sur la mise en page adaptative et les assistants. Les composants HSL sont les valeurs par défaut du package et ne remplacent pas une palette de marque. Les conversions en rem supposent une racine de 16px. ### Fondations de la typographie et des contrôles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --bulma-family-primary | Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif | Pile de polices préférées ; le package ne télécharge pas ces fichiers de polices. | | --bulma-size-normal | 1rem | Taille par défaut des contrôles et du corps de texte. | | --bulma-size-small | 0.75rem | Taille compacte des contrôles auxiliaires. | | --bulma-size-medium | 1.25rem | Taille du modificateur moyen. | | --bulma-size-large | 1.5rem | Taille du modificateur large. | | --bulma-weight-semibold | 600 | Libellés et texte d’interface plus marqué. | | --bulma-block-spacing | 1.5rem | Espacement entre les éléments de bloc. | | --bulma-radius | 0.375rem | Rayon par défaut de 6px avec une racine de 16px. | | --bulma-radius-small | 0.25rem | Petit rayon de 4px. | | --bulma-radius-large | 0.75rem | Grand rayon de 12px. | | --bulma-control-height | 2.5em | 2.5em correspond à 40px pour une taille de contrôle de 16px. | | --bulma-control-border-width | 1px | Épaisseur commune de la bordure des contrôles. | | --bulma-control-line-height | 1.5 | Hauteur de ligne commune du texte des contrôles. | ### Construction des couleurs | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --bulma-primary-h / -s / -l | 171deg / 100% / 41% | Composants HSL de la couleur de base principale. | | --bulma-link-h / -s / -l | 233deg / 100% / 63% | Rôle des actions et des liens utilisé par is-link. | | --bulma-scheme-h / -s | 221 / 14% | Teinte et saturation du thème neutre. | | --bulma-scheme-main-l | 100% in light mode | Luminance de la surface claire principale. | | --bulma-text-l | 29% in light mode | Luminance du texte du thème normal. | | --bulma-text-title-l | 14% in light mode | Luminance du texte des titres, plus marqué. | ### Assistants d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | mb-0 | 0 | Utilitaire de marge inférieure ; les autres directions utilisent la même échelle de suffixes. | | mb-1 | 0.25rem | Utilitaire de marge inférieure ; les autres directions utilisent la même échelle de suffixes. | | mb-2 | 0.5rem | Utilitaire de marge inférieure ; les autres directions utilisent la même échelle de suffixes. | | mb-3 | 0.75rem | Utilitaire de marge inférieure ; les autres directions utilisent la même échelle de suffixes. | | mb-4 | 1rem | Utilitaire de marge inférieure ; les autres directions utilisent la même échelle de suffixes. | | mb-5 | 1.5rem | Utilitaire de marge inférieure ; les autres directions utilisent la même échelle de suffixes. | | mb-6 | 3rem | Utilitaire de marge inférieure ; les autres directions utilisent la même échelle de suffixes. | ### Points de rupture adaptatifs | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | mobile | ≤768px | Les colonnes et la pile de niveaux restent en place, sauf si is-mobile est ajouté. | | tablet | ≥769px | Les colonnes par défaut passent à l’horizontale. | | desktop | ≥1024px | Les modificateurs propres aux ordinateurs de bureau s’appliquent. | | widescreen | ≥1216px | Plage plus large pour les conteneurs et la mise en page. | | fullhd | ≥1408px | Plus grande plage par défaut. | ## Guide complet du système de design Bulma Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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 bulma@1.0.4 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 ### Balisage complet du bureau éditorial Structure Bulma field/control/label/help, colonnes 7/5, composants Card et Message, et étiquettes d’état. ```

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.

``` Référence du code - La bibliothèque CSS ne valide pas le formulaire et ne l’envoie pas. - aria-describedby relie les champs de saisie au texte d’aide. - L’aperçu utilise textContent pour afficher le texte saisi par l’utilisateur. ### Validation et comportement de l’aperçu local Les gestionnaires d’événements d’origine assurent les comportements que Bulma laisse volontairement à l’application. ``` 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';}); ``` Référence du code - En cas d’envoi invalide, le focus est placé sur le premier champ manquant. - La modification d’un brief prêt pour révision le ramène à l’état Brouillon. - L’attribut data-theme contrôle l’apparence. ## Configuration de l’agent du système de design Bulma ### Point de départ de l’implémentation Enregistrez le balisage complet et les exemples JavaScript comme indiqué. Bulma fournit le CSS ; le script d’application fourni gère toute la validation et l’état local. L’aperçu hors ligne intègre les deux fichiers. L’enveloppe HTML comprend l’intégralité du balisage du corps ; enregistrez les exemples d’interaction et de CSS fournis sous les noms de fichiers indiqués ici. ``` 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 pour votre projet ``` Commencez par le bureau éditorial complet Bulma 1.0.4. Conservez la structure field/control/help, les colonnes adaptatives, les composants Card et Message, ainsi que le thème clair/sombre défini au niveau du document. Les modifications du titre et du résumé doivent mettre à jour l’aperçu de l’article avec textContent et ramener son état à Brouillon. Exigez le respect des limites de longueur après suppression des espaces superflus et la confirmation de la vérification du texte avant de marquer l’article Prêt pour révision ; reliez les champs invalides à leur texte d’aide et placez le focus sur la première erreur. Restaurez le brouillon d’origine et effacez son état de validation sans laisser entendre qu’il a été publié. ``` ## Sources et périmètre du système de design Bulma Référence Bulma 1.0.4 CSS. Les règles éditoriales locales et JavaScript sont du code d’exemple original ; aucun brouillon n’est enregistré ni publié. - Vue d’ensemble Configuration et exigences documentaires propres à CSS. - Variables CSS Portée globale et portée des composants. - Contrôles de formulaire Composition des champs et des contrôles. - Adaptabilité Limites officielles des fenêtres d’affichage. - Assistants d’espacement Valeurs des suffixes utilitaires. - Mode sombre Sélection du thème. - Message Structure du conteneur Message. ## Ressources connexes au système de design Bulma ### Chakra UI Une référence Chakra UI v3 sur les jetons, les rôles de couleurs sémantiques, les recettes et les composants de formulaire composés. Examinez les échelles réelles d’espacement et de typographie, puis testez un formulaire natif de profil d’espace de travail avec validation, simulation d’échec de l’enregistrement et apparence claire ou sombre. ### CoreUI Une file de révision CoreUI reposant sur les véritables variables de thème 5.9, des onglets natifs, la sélection par lots avec cases à cocher et une notification persistante permettant d’annuler la dernière opération d’archivage locale. ### daisyUI Un studio d’invitation natif de CSS qui présente les 5 thèmes sémantiques de daisyUI, les couleurs associées au contenu, les options d’adhésion par boutons radio, les commandes de plage, la validation du navigateur et une véritable étape de révision dans une boîte de dialogue. - [Référence de mise en œuvre](https://bulma.io/documentation/form/general/) - [Source](https://bulma.io/documentation/features/css-variables/) - [Source](https://bulma.io/documentation/features/color-palettes/) - [Source](https://bulma.io/documentation/helpers/spacing-helpers/) - [Source](https://bulma.io/documentation/start/responsiveness/) - [Consultez la spécification associée](https://bulma.io/documentation/start/overview/) - [Consultez la spécification associée](https://bulma.io/documentation/features/dark-mode/) - [Consultez la spécification associée](https://bulma.io/documentation/helpers/typography-helpers/) - [Consultez la spécification associée](https://bulma.io/documentation/start/responsiveness/) - [Consultez la spécification associée](https://bulma.io/documentation/form/general/) - [Consultez la spécification associée](https://bulma.io/documentation/components/message/) - [Consultez la spécification associée](https://bulma.io/documentation/features/css-variables/) - [Référence du code](https://bulma.io/documentation/form/general/) - [Référence du code](https://bulma.io/documentation/start/overview/) - [Vue d’ensemble Configuration et exigences documentaires propres à CSS.](https://bulma.io/documentation/start/overview/) - [Variables CSS Portée globale et portée des composants.](https://bulma.io/documentation/features/css-variables/) - [Contrôles de formulaire Composition des champs et des contrôles.](https://bulma.io/documentation/form/general/) - [Adaptabilité Limites officielles des fenêtres d’affichage.](https://bulma.io/documentation/start/responsiveness/) - [Assistants d’espacement Valeurs des suffixes utilitaires.](https://bulma.io/documentation/helpers/spacing-helpers/) - [Mode sombre Sélection du thème.](https://bulma.io/documentation/features/dark-mode/) - [Message Structure du conteneur Message.](https://bulma.io/documentation/components/message/)