Antisèche du framework Bulma CSS

Bulma Bulma est un framework CSS moderne et open source entièrement basé sur Flexbox.

Points de rupture responsives (Breakpoints)

         768px       1024px              1216px       1408px
<---------^------------^------------------^-------------^------------->
  Mobile      Tablet         Desktop         Widescreen      FullHD

• Mobile : jusqu'à 768px
• Tablette : à partir de 769px
• Bureau : à partir de 1024px
• Écran large : à partir de 1216px
• FullHD : à partir de 1408px

---

Système de grille en colonnes

Englobez les éléments enfants .column dans un conteneur flex .columns :

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

Modificateurs de largeur de colonne

<div class="column is-half">Demi-largeur</div>
<div class="column is-one-third">1/3 de largeur</div>
<div class="column is-three-quarters">3/4 de largeur</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

Modificateurs fondamentaux

Couleurs

• .is-primary: Turquoise
• .is-link: Bleu
• .is-info: Cyan
• .is-success: Vert
• .is-warning: Jaune
• .is-danger: Rouge

Tailles

• .is-small
• .is-normal
• .is-medium
• .is-large

États

• .is-outlined: Fond transparent avec bordure colorée
• .is-loading: Spinner de chargement animé intégré
• .is-disabled: Visuellement désactivé

---

Utilitaires typographiques

Tailles de police

Alignement & transformations de texte

• .has-text-centered: Centrer le texte
• .has-text-left: Aligner à gauche
• .has-text-right: Aligner à droite
• .has-text-justified: Justifier le texte
• .is-capitalized: Majuscule au début de chaque mot
• .is-lowercase: Tout en minuscules
• .is-uppercase: Tout en majuscules

---

Conteneur de contenu WYSIWYG

Utilisez la classe .content pour formater du texte brut, du markdown ou du contenu CMS :

<div class="content">
  <h1>Titre principal</h1>
  <p>Paragraphe standard avec échelle typographique soignée.</p>
  <ul>
    <li>Élément de liste à puces 1</li>
    <li>Élément de liste à puces 2</li>
  </ul>
</div>