30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Dica Rápida: Construindo Um Layout de Blog Com Bulma

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nessa dica rápida, usaremos Bulma, um popular framework CSS que usa Flexbox, de Jeremy Thomas, para criar um layout de blog responsivo.

Como de costume, para ter uma ideia do que criaremos, vejamos a demo no Codepen (veja a versão grande para uma melhor experiência):

Começando Com Bulma

Bulma requer um único arquivo CSS. Obtemos uma cópia na página do GitHub, por um gerenciador de pacotes (npm) ou uma CDN (cdnjs).

Para esse tutorial, escolheremos a última opção. Então, coloquemos um link na seção <head> do documento HTML:

Agora, estamos prontos para criar o layout do blog!

Criando o Layout

Nossa grade terá a largura máxima e centralizada horizontalmente. Para consegui risso, usaremos as classes auxiliares section e container de Bulma.

Em telas pequenas, os artigos devem empilhar-se verticalmente:

Bulma mobile layout

Por padrão, Bulma, que é mobile-first, posiciona todos os artigos um em cima do outro em áreas de visualização menores que 769px. Só precisamos estruturar o blog quando for maior que 768px.

Para isso, precisamos só de um elemento: o tile. Como veremos logo, o truque está em aninhar vários deles.

Com isso em mente, vejamos de perto o visual desejado para o desktop. Como vemos na visualização abaixo, ele possui três linhas:

Para cada linha, Bulma espera por, pelo menos, a essa hierarquia aninhada:

Expliquemos:

  • Começamos pelo tile superior contendo todos os outros.
  • Dentro dele, adicionamos tiles distribuídos no eixo horizontal. Além disso, com base na grade de 12 colunas, especificamos a largura dos elementos. Iso é possível usando as classes is-* onde * é um número entre 1 e 12. Por exemplo, um tile com a classe is-6 ocupará 50% do espaço horizontal.
  • Para empilhar tiles, usamos a classe is-vertical.
  • Para adicionar conteúdo a um tile, atribuímos a classe is-child a ele e is-parent ao tile pai.

A essa altura, estamos prontos para por teoria em prática.

Linha #1

A primeira linha contém 3 colunas. A primeira e terceira ocupam um quarto da largura total, e a segundo ocupa ocupa metade. Além disso, a terceira contém duas colunas filhas.

Com base no que discutimos, eis o código requerido:

Notemos que definimos uma largura específica apenas para a segunda coluna, com a classe is-6. Claro, se quiséssemos, podemos adicionar is-3 à primeira e terceira também. Mas não é preciso, porque ambas colunas crescem (elas tem flex-grow: 1) para dividir o espaço horizontal restante.

Além do mais, apenas por estilo, atribuímos algumas classes extras a cada artigo. E para simplificar, omitimos o conteúdo.

Linha #2

Similar à primeira linha, a secunda contém três colunas. A primeira ocupar metade da largura, enquanto as outras duas ocupam um quarto cada. Além disso, a segunda coluna tem duas colunas filhas.

Eis o código:

Linha #3

A terceira linha é um pouco mais complicada. Temos duas colunas, com a primeira sendo o dobro da segunda. Dentro da primeira, temos duas sub-linhas. A primeira contém três colunas de tamanho igual e a segunda tem duas colunas de tamanhos iguais.

O código para esse caso é o seguinte:

Como vemos no código acima, a hierarquia aninha parece com isso:

Se quisermos entender melhor como o elemento tile funciona, vejamos a documentação além de ver as ferramentas de desenvolvedores do navegador para inspecionar as classes associadas.

Suporte de Navegadores

Hoje em dia, Flexbox tem um ótimo suporte e nosso layout de blog deve funcionar em todos navegadores modernos.

Contudo, ao testar a página em vários navegadores, vimos que IE 11 não reproduzia o resultado desejado. Eis o que víamos:

Por outro lado, o Microsoft Edge não dava erros. Talvez algum erro com a versão mais atual do IE. De qualquer modo, tentamos ver se tinha algum ajuste rápido que pudesse evitar esses problemas.

Resolvemos incluindo flex-basis: auto aos artigos e tiles mais externos do tile is-vertical da terceira linha (vejamos a hierarquia anterior).

De novo, é uma solução rápida que parece funcionar para esse exemplo específico. Para nossas próprias implementações podemos precisar de outras mudanças.

Conclusão

Nessa dica rápida, aprendemos a construir uma grade de blog responsiva com Bulma, um framework Flexbox.

Já experimentou Bulma em algum projeto? O que achou? Compartilhe suas experiências nos comentários abaixo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.