O que dizer do Bootstrap? Bem, ele mudou a forma como eu trabalho lá pelos idos de 2012.
É, então, eu sou velha. Estou nessa de fazer HTML e CSS desde o ano de… deixa pra lá vai, que eu não vou entregar minha idade.
Quando eu comecei, nesse ano que eu não vou falar qual é, a gente usava tabelas para montar layouts em HTML. Responsivo era um conceito que não existia. Havia telas em 800x600px e telas em 1024x768px.
Aí você recebia aquele PSD lindo do seu colega, com muitas sombras e gradientes… e pá! Cortava tudo em várias imagens pequenas (muitas vezes até com texto misturado nelas) e encaixava em uma ou várias tabelas, como um quebra-cabeça.
Que loucura, não? Sorte que o tempo não volta para trás!
Em algum momento surgiu o Bootstrap com seu elegante grid responsivo de 12 colunas. Era todo um novo mundo de dispositivos para desbravar. Veja que já havia outros projetos se propondo ao mesmo fim, mas nenhum conseguiu a popularidade do Bootstrap. Na minha opinião, por 2 motivos: facilidade de usar e documentação impecável.
Tablets e smartphones estavam nas mãos das pessoas, as que tinham grana para isso, ao menos. Todo um mercado estava surgindo e com ele o conceito de design responsivo: que deve responder ao dispositivo onde está sendo exibido, se adaptando a ele.
E agora explico como isso mudou a minha forma de trabalhar em duas principais maneiras.
Grid de 12 colunas
A primeira mudança foi que a partir do advento do Bootstrap todos os meus PSDs passaram a ter 12 colunas. Olha, pode parecer uma coisa besta, mas não é. O grid é tão importante para um layout quanto o chocolate é para um brigadeiro. O grid está na síntese de um layout.
Ter isso já “decidido” antes de começar a desenhar um projeto economiza um caminhão de tempo.
Com essas 12 colunas, claramente você pode ter as variações que quiser até onde a matemática desse número mágico permitir. Você quer dividir a tela em 2 colunas com 50% de largura? Então vai usar 6 colunas do Bootstrap de cada lado. Quer dividir em 3? Vai usar 4 colunas. Você pode também subdividir qualquer espaço com o mesmo grid de 12 e por aí vai.
Mobile First
Eu não sou dessas que fica misturando inglês com português, calma lá. É que o termo não existe em português mesmo (Celular primeiro? Primeiro o celular? Oi?)
O fato é que a coisa do celular tomou tal importância que hoje eu desenho primeiro o layout de celular que o layout de tela grande, ou às vezes os dois ao mesmo tempo.
Já o HTML e CSS sempre começam primeiro pelo dispositivo de menor largura, que será um celular.
O código fica muito mais simples se você formata primeiro o celular e vai fazendo exceções (usando media queries) para os dispositivos maiores, até chegar em uma tela grande.
Código mais simples, com menos linhas, é sempre melhor. É mais fácil de ler, mais fácil de manter (menos coisas para lembrar) e é uma boa prática de desenvolvimento.
Essas são as duas maneiras em que o Bootstrap mudou a maneira como eu faço layouts. E você, faz o que? Deixa um comentário aí para nós!
Deixe um comentário