Bulma é um framework CSS totalmente gratuito, inspirado no Bootstrap e baseado em Flexbox, que já tem uma compatibilidade bem grande entre os browsers. Entre suas características, estão:

• 100% responsivo (mobile first)
• Totalmente CSS (não requer JavaScript)
• Modular (importe no seu projeto somente o que você precisa)
• Moderno (construído com Flexbox)
• Livre (open Source no GitHub)

O Framework contém todos os elementos mais comuns, como: formulários, tabelas, botões. menus, títulos, notificações, barras de progresso, entre outras coisas – assim como o consagrado Bootstrap.

Porém, o mais interessante é o sistema de grid super simples que ele nos apresenta, veremos ao longo do artigo.

Instalação

Pode ser feita de duas formas:

• 1. Link CND: <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.26/css/bulma.css”>. Basta incluir o link na tag head do seu HTML.
• 2. Download local com o NPM: npm install bulma. Basta executar esse comando no terminal dentro da pasta do seu projeto.

Grid@

Como o Bulma foi inspirado no Bootstrap, ele também tem um sistema de grid com 12 colunas. O funcionamento é muito simples. Tudo que precisamos é uma tag div com a classe .columns e suas divs filhas com a classe .column.

<div class="columns">
  <div class="column">.column</div>
  <div class="column">.column</div>
  <div class="column">.column</div>
</div>

Veja o exemplo a seguir: https://codepen.io/BEscudelario/full/pYErme.

Dessa forma, note que o tamanho das colunas será sempre o mesmo. Se quiser que uma coluna ocupe o espaço de duas, três ou mais, basta usar a classe .is-x, sendo x o tamanho da área que a coluna irá ocupar.

Exemplo:

• .is-2 ocupa o espaço de duas colunas.
• .is-3 ocupa o espaço de três colunas.

E assim sucessivamente. Bem simples né?

Hero

Sabe aquela dor de cabeça que é alinhar um elemento verticalmente ao centro da tela? Com o componente Hero, do Bulma, isso não será mais um problema.

Basta criar uma section com a classe hero, e dentro dela uma div com a classe hero-body. Tudo que estiver dentro desses elementos ficará centralizado verticalmente ao centro da tela.

Veja o trecho de código abaixo:

<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hero title
      </h1>
      <h2 class="subtitle">
        Hero subtitle
      </h2>
    </div>
  </div>
</section>

Essa foi somente uma prévia para você sentir um pouquinho do poder do Bulma. Para mais informações e exemplos confira a documentação do framework.