Vale a pena migrar para o Bootstrap v4?

bookmark CSS access_time 8/6/2018 person Gabriel Willemann

Bootstrap v4: Demorou mas chegou

Como todos sabem o Twitter Bootstrap é um dos frameworks CSS mais populares do mundo e estávamos esperamos ansiosamente pela versão 4.

A versão 4 stable foi lançada oficialmente em janeiro de 2018 e trouxe várias novidades. Desde então venho migrando meus projetos para a nova versão e neste artigo vou destacar os pontos mais importantes (segundo minha opinião).

Bootstrap está mais moderno

A versão 3 havia sido lançada em 2013, logo seus estilos e cores já estavam bem desatualizados. O mínimo que se esperava um visual mais moderno.

O novo visual chegou com cores mais vibrantes e me parece ser uma clara influência do Material Design. Também houve melhorias na sua tipografia e espaçamentos, deixando os componentes mais "fluídos".

Obviamente os nomes da classes CSS também mudaram, mas esse não é o meu foco.

SASS

A versão 3 do Bootstrap foi construída com LESS, embora também havia suporte para SASS. Agora na versão 4, o framework foi todo construído com SASS e até então não há suporte para LESS.

Então se você quer personalizar o Bootstrap fique atento a essa mudança.

Glyphicons foi descontinuado

A partir da versão 4, o Bootstrap não inclui uma biblioteca para ícones, embora existam algumas bibliotecas recomendadas.

A recomendação do Bootstrap é: Utilize ícones implementados por meio de imagens vetoriais (SVG). Não é recomendado o uso "font-icons", uma vez que pode dar alguns problemas em idiomas que não usam o alfabeto ocidental.

Clique aqui para mais detalhes.

Flexbox: Finalmente

Até a versão 3 do Bootstrap era possível criar layouts responsivos com elementos flutuantes. Na versão 4 há o suporte para Flexbox.

Flexbox faz parte da especificação do CSS3 e nos ajuda a organizar os elementos em diferentes resoluções.

Se quer usar a versão 4 do Bootstrap então você precisa aprender a construir páginas com Flexbox. Segue alguns materiais que podem lhe ajudar:

Dê boas-vindas aos CARDS

Um dos componentes que eu mais utilizava no Bootstrap 3 eram os PANELS, uma vez que ele é muito útil para criar espaçamentos e áreas bem definidas dentro do Layout.

Porém na versão 4 o PANEL foi descontinuado, dando lugar ao componente CARD. Este componente ficou muito bom e na minha opinião foi o que mais evoluiu.

Obviamente o componente CARD utiliza vários recursos do Flexbox, ou seja, mais um motivo para aprender esta funcionalidade do CSS3.

Removido: btn-xs

Saiba que o componente "btn-xs" foi removido. A justificativa é que este componente não se adapta bem a dispositivos móveis e isso é verdade (experiência própria).

Mas se o seu sistema é somente desktop, não se preocupe. Isso é algo bem fácil de personalizar.

Se você precisa de ajuda clique aqui.

Utilities: Evolução significativa

Na versão 4 existem várias utilidades que facilitam o seu dia-a-dia. Na versão 3 já existia alguma coisa, mas nesta versão elas evoluíram significativamente.

Gostaria destacar estes itens:

Javascript: Eu esperava mais

Este é o único ponto decepcionante da versão 4, pelo menos para mim. O Bootstrap continua utilizando JQuery.

Em tempos de Vue, React e Angular continuar insistindo no JQuery não me parece uma boa escolha. Não é de hoje que eu somente utilizo o estilos do Bootstrap e os eventos Javascript eu faço no framework utilizado no projeto.

Acredito que neste ponto o Bootstrap poderia se inspirar no Bulma.io, que foca somente no CSS e se torna independente de qualquer framework Javascript.