Bootstrap – Responsa, responsável e responsivo

O uso de um framework robusto, com bibliotecas bem resolvidas e sempre em evolução. Para designers e programadores

Para iniciarmos essa conversa, é necessário esclarecer alguns pontos:

1º – Um bom desenvolvedor não deve ficar dependente de um framework por diversas razões, como por exemplo: Ser descontinuado.

2º – Um framework não deve controlar o desenvolvedor, mas deve servir como base de desenvolvimento de suas aplicações, caso contrário tudo o que for feito será com a mesma interface.

3º – Seja criativo, use mais do framework, participe da comunidade, dê novas ideias, sugira, critique e adapte. E depois disso tudo, documente.

4º – Tudo que for dito nessa coluna é a única verdade para os desenvolvedores, ou não.

Vamos ao interessante.

Quem não se lembra dos momentos de extensos códigos para criar formulários, fazer as validações, ajustar as janelas modais e deixar tudo agradável? E depois da navegação móvel se popularizar. Quem não se viu obrigado a criar duas versões da mesma interface?

Nesse artigo vamos conhecer o Bootstrap. Uma ferramenta desenvolvida pelos criadores do Twitter e que com certeza vai reduzir o tempo de desenvolvimento dos códigos HTML.

A ferramenta é um framework front-end que já possui integrado uma biblioteca jquery bem extensa, uma biblioteca de css bem organizada e escrita, além de componentes e elementos visuais.

Manual para desenvolvedores

A vantagem (para quem não lê em inglês) é que a documentação já foi completamente traduzida para o português (link: http://globocom.github.io/bootstrap/index.html). Obs: existem uma nova versão, mas o manual ainda é em inglês (http://getbootstrap.com/).

A ferramenta já foi adotada por algumas empresas famosas e tem demonstrado um ótimo desempenho, tanto na sua estrutura de escrita, quanto ao tamanho dos arquivos gerados.

Alguns templates para WordPress por exemplo, se baseiam na estrutura adotada pelo boobtstrap, sem contar algumas aplicações famosas da globo.com e o próprio Twitter.

RESPONSA

Inicialmente é complicado adaptar-se ao framework, principalmente quando tratamos de Design Responsivo, pois os grids deixam de possuir larguras fixas para trabalhar com porcentagem. Com um pouco de domínio em css é possível fixar a largura máxima de uma página em pixels e trabalhar os outros objetos de maneira responsiva.

Mas se você for paciente, ler atentamente o manual e observar os exemplos, se sairá bem. O melhor é que a maior parte dos componentes, ao menos os mais importantes, já foi criada por outros desenvolvedores, isso garante a longevidade do framework, já que tendencia ao uso popular e a padronização dos códigos.

É possível utilizar os plugins javascript do Bootstrap sem sequer executar uma linha de javascript. Os plugins podem ser chamados através do  atributos data. Desta forma fica descrito no html a função daquele elemento, como por exemplo se um link deve comportar-se como modal.

RESPONSÁVEL

O Bootstrap usa uma vasta biblioteca jquery que tem sua implantação facilitada. No site oficial, o desenvolvedor pode personalizar as funções que irá realizar o download.

Toda ferramenta é escrita em HTML 5, a documentação é bem detalhada, o código é limpo e os exemplos podem ser usados como pontapé inicial, até que você domine o código.

Com a mesma cara? Acho que não!

A facilidade não pode tornar-se preguiça. O framework deve nos servir como ponto de partida para uma aplicação e a sua personalização deve ser ainda maior para que os aplicativos ganhem personalidade.  Parece uma tarefa simples, mas não é. Principalmente por ser bacana, leve, simples de aplicar e funcional. É utopia! Mas cuidado, pois no final, o site da empresa de cosméticos fica igual ao sistema interno de cadastro de usuários.

Isso prova que para um desenvolvedor adaptar-se a um framework é preciso mais do que força de vontade, é preciso ter conhecimento técnico.

RESPONSIVO

O ponto alto é a preocupação com usuários de diferentes dispositivos, fazendo o uso de comandos css para a criação de layouts fluídos e responsivos.

Se a visualização for em tela wide, tablet ou mobile, não importa, o front end se adapta para exibir o conteúdo de forma limpa e organizada.

Praticamente todos os elementos no Bootstrap são dados pelo grid que vai de 1 a 12, que pode ser responsivo ou não, dependendo apenas de incluir alguns arquivos css que controlam essa característica.

O Bootstrap integra com Django, com Rails, com WordPress, tem ótimos templates para venda, tem plugins para jQuery e ainda integra com o jQuery UI e originalmente em LESS, ele também tem uma versão para Sass.

Oficialmente

Aqui onde trabalho, adotamos essa ferramenta para padronizar o desenvolvimento das nossas aplicações e estamos adaptando para as nossas necessidades. Começamos a documentar esses ajustes para oficializar uma versão própria.

Minhas recomendações são: Faça o download da ferramenta e experimente. Indico a versão adaptada pela Globo.com

Links Relacionados:

Bootstrap Globo.com
Boostrap Oficial
jQuery UI Bootstrap
Datapicker
Bottsnip
Drag and Drop