Desenvolvimento de Templates: Bootstrap

Bootstrap - http://getbootstrap.com

Uma ferramenta de grande sucesso para o desenvolvimento de layouts que está disponível já há algum tempo é o framework Bootstrap do Twitter. 

Resumidamente, Bootstrap é uma biblioteca de arquivos CSS e JS que define a formatação básica de componentes HTML, como texto, tabelas e formulários, além de tornar responsivo rapidamente qualquer página construída com o framework.

Seu uso básico é simples: basta baixar o pacote contendo os arquivos CSS e JS, colocar na raiz do seu projeto, chamar através deu uma tag link  dentro de <head> e pronto, sua página já está formatada! Para dar um tempero a mais em menus, botões ou imagens, chame no final de seu código através de uma tag <script> os arquivos JavaScript ou jQuery.

Prós

Parece simple e é! Desde que descobri o Bootstrap descobri várias vantagens que listo a seguir.

Rapidez no desenvolvimento

Primeira e mais importante razão para usar o Bootstrap: basta linkar aos arquivos CSS do framework e a página ou tema que estiver desenvolvendo apresenta uma formatação básica.

Design

Bootstrap usa um grid que facilita muito o trabalho do desenvolvedor. Com 12 colunas, que podem ser aninhadas uma dentro das outras, o layout de seu projeto pode ter possibilidades infinitas. Além disso, proporciona uma séria de formatações para ítens comuns como campos de formulários, ítens de menu e botões que agilizam o processo de desenvolvimento.

Outro ponto importante é que o Bootstrap facilita o aprendizado dos designers que estão dando os primeiros passos no aprendizado de código.

Responsividade

Cada vez mais é imperativo que cada projeto responda com o layout apropriado para o aparelho que está sendo utilizado para visualizá-lo. Essa é a famosa responsividade.

O Bootstrap segue a filosofia “mobilidade primeiro” (mobile first) e atinge esse objetivo rapidamente, graças ao seu grid, que se ajusta dinamicamente às diferentes resoluções.

Usando as classes do framework, cada resolução pode ter uma visualização diferenciada, conforme as necessidades do projeto.

Consistência

A razão principal para que a ferramenta fosse desenvolvida foi a grande diversidade que o Twitter encontrava entre os desenvolvedores alocados em seus projetos. Isso causava problemas de interface em todas as etapas de desenvolvimento do projeto, inclusive quando chegava no usuário final. Com o Bootstrap os resultados se uniformizaram e você vê o mesmo resultado em diferentes navegadores e plataformas.

Integração

Se você começa a trabalhar em um projeto que já está no ar, o Bootstrap facilita a transposição da formatação anterior.

Digamos que é necessário desativar um determinado estilo de tabela ou uniformizá-lo. Basta remover a classe anterior ou o estilo inline aplicado e substituir pela classe table do Bootstrap. Em um instante sua tabela está com uma nova formatação. E daí pra frente, basta ir fazendo os ajustes necessários.

Documentação

A documentação do Bootstrap é sucinta e usa linguagem simplificada, facilitando os primeiros passos no framework. Se você tem dificuldades com o inglês, utilize alguma ferramenta de tradução online para auxiliar. Dependendo dos seus conhecimentos anteriores de HTML e CSS, em cinco minutos já é possível montar uma página básica. A curva de aprendizado é leve.

Suporte

Além da excelente documentação, uma vasta comunidade está disponível para ajudar quando se encontra algum problema. O projeto é seguidamente atualizado e seus criadores tem entregue de forma regular as atualizações. O projeto está hospedado no GitHub e, nesse momento, conta com mais de 10 mil commits e mais de 600 contribuintes.

Personalização

Se forem necessárias alterações na formatação original do framework utilize a ferramenta de personalização disponível no site do Bootstrap para que seu CSS fique mais leve e personalizado para seu projeto. Também é possível adicionar um arquivo CSS para modificar as formatações do Bootstrap, quando forem poucas.

Contras

Vamos dar uma olhada em algumas situações ou problemas que podem surgir ao se optar pelo uso do Bootstrap.

Conflitos

Em um grande projeto publicado e formatado com outros frameworks ou com CSS próprio, aplicar o Bootstrap pode ser uma grande dor de cabeça. Conflitos de CSS e JavaScript podem ser os primeiros a acontecer e os mais difíceis de resolver. Será necessário analisar com cuidado o projeto para ver onde é necessário remover ou mudar estilos e scripts. Isso toma tempo e deve ser levado em conta ao cogitar a mudança para um novo framework.

Peso

O pacote básico do Bootstrap vem com muitas linhas de CSS e JS, que pode parecer bom quando se sabe o que elas fazem, mas que se tornam ruim quando a exigência de rapidez no carregamento das páginas é alta. A ferramenta de personalização pode ajudar a criar um pacote mas leve, mas é preciso fazer uma análise crítica antes de usar o framework.

Projetos com “cara de Bootstrap”

Por conta de sua popularidade e facilidade de uso, é comum ver projetos que usam as formatações nativas do framework. Isso e verdade se o desenvolvedor do projeto não se preocupar ou não souber como explorar ao máximo os recursos do framework para ter uma interface personalizada.

Conclusão

Mesmo que existam problemas com o Bootstrap ou seu uso, ainda é um framework cheio de recursos com o qual se pode criar sites ou apps para web incríveis, usando seus recursos de personalização. Vale a pena dar uma conferida.

Alguns aplicativos, como o CMS Joomla! por exemplo, utilizam o Bootstrap para que seus usuários possam ter de forma rápida e eficiente uma interface bela, prática e responsiva.

Visite o site Bootstrap Expo para conhecer belos e inspiradores exemplos de bom uso do Bootstrap.

Bootstrap Expo - http://expo.getbootstrap.com

 

 

Related Posts with Thumbnails
Seja Sociável! Compartilhe!

Deixe uma resposta

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