A evolução do Bootstrap

Para acompanhar as de exigência de mercado, principalmente do de programação web, o Bootstrap teve desde seu início que ter uma constante evolução. As  atualizações são fundamentais pois visam a correção de bugs, melhoria das funcionalidades já existentes e adição de outras novas, num esforço para manter o Bootstrap alinhado com as demandas do mercado web.

Hoje vamos abordar como ocorreu essa evolução do framework ao longo do tempo, incluindo como foco as principais mudanças que ocorreram nas versões 2.0 e 3.0.

Bootstrap Releases desde a versão 1.0

A versão 1.0  veio junto com a Hack week em Agosto de 2011. Desde então já houveram vinte versões lançadas no site do Bootstrap(bastante, né?!). A versão mais atual do site é a 4.1.1 e está disponível para download no site. Neste texto não será abordada a versão mais atual. Elas serão foco dos próximos textos da série nos quais abordaremos questões de sintaxe e utilização prática.

No quadro abaixo podemos verificar uma visão geral do cenário evolutivo do framework:

VersãoData de lançamento
1.019/08/2011
2.031/01/2012
3.019/08/2013
4.019/08/2015

São quatro versõe principais. Vamos ver as principais mudanças de uma para a outra.

 

Bootstrap: Versão 1.0

A versão inicial é a versão mais simples e até experimental do framework. Estão inclusas basicamente o CSS e alguns docs (plugins em JavaScript adicionados na verdade somente na versão 1.3).

Por essa versão ser muito simples, vamos também adicionar algumas informações sobre as versões imediatamente posteriores a esta, como a versão 1.1.0 e 1.1.1.

 

Bootstrap: Versão 1.1.0

Atualizações:

  • Suporte adicionado para IE7 e IE8
  • Adicionado diretório com exemplos de uso do Bootstrap para aplicações simples em websites
  • Correção de sintaxe para gradientes e color-stops
  • Atualizações para docs
  • Correção de bugs

 

Bootstrap: Versão 1.1.1

Atualizações:

  Edição de botões e alertas CSS para serem mais simples

  • Sistema de grid atualizado para ser mais específico e eliminar exigência de .column ou columns
  • Melhoria em especificidades dos seletores CSS, removendo tags desnecessárias e parent selectors
  • Atualizações para docs
  • Correção de bugs

 

As duas atualizações 1.1 e 1.2 foram fundamentais para tornar a primeira versão do bootstrap mais estável e aceitável no mercado web.

 

Bootstrap: Versão 2.0

Apesar das versões 1.0 apresentarem boas melhorias em relação a versão inicial, o lançamento da versão 2.0 inaugurou uma nova era no framework Bootstrap e muitos conceitos novos surgiram, sendo uma versão fundamental na evolução da ferramenta.

 

O que mudou?

Com o Bootstrap 2, uma série de mudanças e novas funcionalidades foram adicionadas ao toolkit como resultado de feedbacks de toda a comunidade que utiliza, trabalha ou simpatiza com o framework.

Atualizações:

 

  • Documentação completamente reformulada em praticamente todos componentes
  • Uma página totalmente nova para customização
  • Sistema de grid responsivo, com 12 colunas novas
  • Novos estilos de tabela com classe base comum para melhor compatibilidade com outras ferramentas
  • Novos form styles com defaults mais inteligentes, exigindo menos HTML
  • Ícones, disponibilizados por Glyphicons
  • Novos e mais inteligentes componentes de navegação
  • Novos botões e botões de grupo
  • Novas e mais simples mensagens de alerta
  • Novos plug-ins em javascript como carousel, collapse e typeahead

Mudanças de projeto

 

  • Docs: atualizações na estrutura, exemplos e trechos de código para apoio. Também responsivo para consultas com novas mídias
  • Docs: todas as páginas de docs estão baseadas em templates Mustache
  • Repo estrutura de diretório: CSS compilado removido da raiz em favor da grande disponibilidade de links diretos para download na homepage de docs.

 

Bootstrap: Versão 3.0

Da versão 2.0 para a 3.0 o número de mudanças também foi grande. Vamos elencar as principais delas.

  • Novo design e tema opcional: A estética foi bem simplificada e foi criada a possibildade de ter um tema opcional seria interessante.
  • Grid system melhorado: Com quatro níveis de classes de grid — celulares, tablets, desktops, e  desktops grandes — você pode criar alguns layouts com muita liberdade
  • Plugins Javascript re escritos: Todos os eventos estão agora  espaçados por nomes (namespaced)
  • Modais estão bem mais responsivos. Foi reestruturado o código modal para torná-lo mais responsivo em aparelhos móveis (tablets/celulares). Eles agora tem rolagem em todo o  viewport ao invés de ter um max-height.

Remoção de componentes Foi removido o accordion (substituído por painéis colapsáveis), submenus, e alguns poucos outros itens menores.

Novas documentações. Foi adicionada muita documentação , não somente aos componentes, mas ao suporte de browser (incluindo gotchas e bugs), licença para FAQs, suporte de terceiros (third parties), acessibilidade, etc.

Atualizações:

  • Restaurada a fonte de ícones Glyphicons.
  • Diversas utilidades responsivas podem ser aplicadas ao mesmo elemento.
  • Exemplos estão de volta no repo principal e estão completamente atualizados.
  • Bugs de compilação para customização corrigidos.
  • O tema opcional foi acrescentado e é demonstrado em um exemplo.
  • Os componentes da barra de navegação foram atualizados para a melhor acomodação de containers e mais. Podem ser vistas novidades nas margens e preenchimentos, mas sem mudanças no markup devem ser necessárias.

O jogo dos números (você sabia?)

Para aqueles mais curiosos de informação, o Bootstrap levou nove meses para ser desenvolvido e finalizado. Neste tempo tinha-se;

  • 379 arquivos modificados, significando 84,000 adições e remoções
  • Mais de 900 comentários de feedback
  • Mais de 20% de redução no minified CSS (de 127kb para 97kb)

 

Além disto, os números neste lançamento foram muito bons. Principalmente quando se revelam algumas escalas e o crescimento do framework.

  • Mais de  56,000 estrelas e 19,000 forks no GitHub (rank 1)
  • Quase 15 milhões de visualizações na página dos docs
  • No ano anterior ao lançamento da versão 3.0, foram identificados mais de 3 milhões de downloads apenas dos docs, 40% dos quais vieram do customizador

 

Com o Bootstrap 3, a grande novidade foi a responsividade e o approach mobile first. Esse fato reflete a evolução do mercado web e a importância que as telas menores(smartphones e tablets) ganharam em relação aos tradicionais desktops e notebooks. A maioria dos acessos na internet é feito via Mobile, tornando a responsividade e adaptação para smartphones essencial.

A versão 4.0 trouxe novas funcionalidades dentro do padrão já descrito nas evoluções anteriores. A documentação foi expandida, novas exemplos acrescentados e melhorias na responsividade foram implementadas.

Vale ressaltar que a versão 4 começou a ser desenvolvida em 2014, com a  versão alpha sendo lançada em 2015 e a versão beta somente em 2017. O que demonstra uma ampla gama de tópicos e melhorias que foram incorporados.

Os próximos artigos serão baseados na versão 4 beta, a mais atual, e entraremos mais a fundo em aspectos práticos. Até lá, que tal navegar pela história do Bootstrap no repositório onde as releases antigas podem ser encontradas?

 

 

Até a próxima!