Conhecendo o framework Bulma | iMasters
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.
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.
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.
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.
.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é?
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.
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.