Folha de dicas do framework Bulma CSS

Bulma Bulma é um framework CSS moderno e de código aberto baseado inteiramente em Flexbox.

Breakpoints responsivos

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

• Mobile: até 768px
• Tablet: a partir de 769px
• Desktop: a partir de 1024px
• Widescreen: a partir de 1216px
• FullHD: a partir de 1408px

---

Sistema de grade de colunas

Envolva os elementos filhos .column dentro de um contêiner 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>

Modificadores de largura de coluna

<div class="column is-half">Metade da largura</div>
<div class="column is-one-third">1/3 da largura</div>
<div class="column is-three-quarters">3/4 da largura</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

Modificadores principais

Cores

• .is-primary: Turquesa
• .is-link: Azul
• .is-info: Ciano
• .is-success: Verde
• .is-warning: Amarelo
• .is-danger: Vermelho

Tamanhos

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

Estados

• .is-outlined: Fundo transparente com borda colorida
• .is-loading: Ícone giratório de carregamento animado
• .is-disabled: Visualmente inativo

---

Utilitários de tipografia

Tamanhos de fonte

Alinhamento e transformação de texto

• .has-text-centered: Alinhamento centralizado
• .has-text-left: Alinhamento à esquerda
• .has-text-right: Alinhamento à direita
• .has-text-justified: Texto justificado
• .is-capitalized: Primeira letra de cada palavra em maiúscula
• .is-lowercase: Tudo em minúsculas
• .is-uppercase: Tudo em maiúsculas

---

Contêiner de conteúdo WYSIWYG

Utilize .content para formatar textos em markdown ou conteúdo de usuários do CMS:

<div class="content">
  <h1>Título Principal</h1>
  <p>Parágrafo padrão com escala tipográfica automática.</p>
  <ul>
    <li>Item de lista com marcadores 1</li>
    <li>Item de lista com marcadores 2</li>
  </ul>
</div>