Bootstrap 5: Quais as Principais Novidades?

Bootstrap 5: Quais as Principais Novidades?

Maicon Ramos

Por Maicon Ramos

18/06/2020
Bootstrap 5: Quais as Principais Novidades?

Bootstrap 5, saiu a versão Alpha 😮
O Bootstrap existe há mais de 8 anos, alguns amam outros nem tanto, mas não podemos negar pois que ele é uma “mão na roda”, hoje ele é o Framework CSS mais popular do mundo. E se você trabalha ou já trabalhou com frontend é quase impossível não ter ouvido falar desse Framework CSS que está presente em mais de 18 milhões de site no mundo.

Foi lançado em 16 de junho de 2020 a versão alpha do Framework CSS Bootstrap 5, com muitas novidades e temos de cara o novo logo em formato de {} inspirado no CSS.

Bootstrap 5

1 – Adeus jQuery, Olá Vanilla

Com a chegada da versão 5, uma das maiores novidades é o bootstrap não ser mais dependente do jQuery, e apostar no Vanilla “Ótimo Framework”, sem deixar de agradecer no “prato que comeu” o bootstrap agradeceu em blog imensamente ao jQuery por mais de década ajudando com sua biblioteca.

Com o crescimento de outros framework como React, Vue e Angular era de se esperar que o Bootstrap seguisse esse caminho, caminho comum entre outras empresas que têm pensado em abandonar o jQuery, “E ai WordPress? 🧐”.

Com essa mudança a biblioteca vai fica mais enxuta diminuindo o tamanho do projeto e menor tempo de carregamento para os usuários. Foram também feitas mudanças em alguns plugin javascript e vai ser preciso consultar a documentação javascript para se atualizar.

2 – Ícones pra todo lado

É comum no desenvolvimento do Bootstrap temos que utilizar ícones do Font Awesome ou SVG personalizados, pois a sua biblioteca era meu limitada.

Agora adicionaram uma nova biblioteca de ícones SVG, que foi criada com cuidado por Mark Otto, co-fundador do Bootstrap.

Antes do lançamento oficial do Bootstrap 5 já estava disponível os ícones no site oficial. 

3 –  Mudando de Jekyll para Hugo

Jekyll é um gerador estático de sites muito popular, no entanto além de precisar do ruby, nos últimos anos o Hugo foi considerado o mais rápido e mais recomendado, sem dúvida gerando sites estáticos em milissegundos, atualmente utiliza a linguagem GoLang.

4 – Cores: Primary, Secundary e muito mais

A versão 5 trouxe consideravelmente mais opções de cores em relação às versões anteriores, com uma paleta de cores rica com opções de contraste interessantes, podendo ser possível personalizar seu site sem sair da base de código, e não ficando muito na cara que é um site Bootstrap já de cara, com as famosas cores primary, secundary, warning, danger e etc. 

Cores do Bootstrap 5

5 – Formulários Redesenhados

Foram redesenhados os componentes de formulário, utilizando bastante o pseudo-elementos e importantíssimo sem perder a semântica. para ser compatível e unificar o estilo e o comportamento dos controles de formulário no Sistema Operacional e no navegador.

Formulários Bootstrap 5

6 – Chega de Internet Explorer 

A equipe do Bootstrap decidiu abandonar o suporte para o Internet Explorer 10 e 11. Hoje em 2020, o Internet Explorer 10 e 11 não é mais relevante que os navegadores atuais como Chrome, Firefox e Edge. Tornou-se um dos pesadelos o desenvolvimento no IE, pois não suporta os padrões modernos de JavaScript. Para trabalhar com o Internet Explorer, seja 10 ou 11, os códigos JavaScript precisam ser compilados no ES5 em vez do ES6, e o pior é que ele não suporta muitas propriedades novas do CSS, o que limita alguns webdesigner na criação de site.

E muito mais:

  • Grid Aprimorado
  • O Card foi removido
  • Otimização da Navbar
  • Atualizações de classe
  • Fonte Responsivas
  • RTL
  • Offcanvas
  • API de utilitários
  • Documentação renovada
  • Possibilidade de customização CSS
Atualizações Bootstrap 5

Bootstrap Obrigado! 🥳

Só temos a agradecer pelo grande trabalho feito pela equipe do Bootstrap e colaboradores ao ao longo de anos de trabalho duro. Nos proporcionando Produtividade, estabilidade, consistência e alegria de trabalhar com esse Framework!

Links úteis:
Post no Bootstrap
Github bootstrap

Referências: ED Rodrigues , Designmodo, Themesberg

Comentários

0 comentários
Enviar um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *