O desenvolvimento de sites deixou de ser apenas para desktop há muito tempo, e acabou cada vez mais atingindo diversos tipos de dispositivos, com telas e sistemas operacionais diferentes. Para aumentar a usabilidade das páginas, softwares foram adaptados e regras de internet foram criadas para criar uma uniformidade no desenvolvimento.
Como surgiu o bootstrap?
Ele foi desenvolvido pelos engenheiros do Twitter, Jacob Thorton e Mark Otto, como uma tentativa para solucionar incompatibilidades dentro da equipe. O objetivo era otimizar o desenvolvimento de sua plataforma adotando uma única estrutura. Isso poderia reduzir a inconsistência entre os diferentes métodos de codificação usados por diferentes profissionais. A tentativa foi tão bem-sucedida que eles perceberam o grande potencial da ferramenta e a lançaram como software livre no GitHub.
Projetado para qualquer um em qualquer lugar
O slogan “Projetado para qualquer um em qualquer lugar” não veio do nada: com interface bastante amigável, o Bootstrap oferece uma enorme variedade de plugins e temas compatíveis com o framework. Além disto, possui integração com qualquer linguagem de programação. E o melhor de tudo, é free! Isto, graças ao seu código aberto, que em pouco tempo após o seu lançamento já recebeu a contribuição de inúmeros desenvolvedores de todo o planeta, tornando-o o software livre mais ativo do mundo.
Em seu site oficial, vemos a seguinte frase: “Bootstrap torna o desenvolvimento front-end mais rápido e fácil. Ele é feito para pessoas de todos os níveis de habilidade, dispositivos de todos os formatos e projetos de qualquer tamanho”. Aqui, resumimos os benefícios adicionais que ele oferece aos desenvolvedores.
Entendendo o bootstrap
A melhor forma de explicar o Bootstrap é entender que o Bootstrap é como um carro já pronto, que você pode trocar a cor, bancos e melhorar o motor, porém toda a estrutura do carro já é entregue pronta para você, ou seja, a parte mais complexa já está pronta tendo que seguir o mesmo padrão da estrutura e modificando somente o que desejar.
Em termos técnicos o Bootstrap possui toda a estrutura pronta para fazer sites responsivos adaptados para desktop, tablets e smartphones, mas é possível fazer alterações no design conforme desejar.
GRID – A estrutura do carro
O mais importante no Bootstrap é o Grid, porque é a estrutura que vai permitir o site ser visualizado para desktop, tablets e smartphones. Ao desenvolver uma página para desktop no Photoshop, poderá ser adaptada para tablets e smartphones quando implementado no código, evitando assim de desenvolver a mesma página no Photoshop para diversas plataformas.
1) Container e Colunas
O Grid é constituído por container e colunas:
- O container possui um tamanho fixo de acordo com o dispositivo que o usuário está acessando o site, por exemplo, se o usuário acessar o site em um monitor grande a largura do container será de 1440px, porém se o usuário acessar de um iPad a largura será de 750px.
- As colunas são as divisórias dentro do container e não possuem um tamanho fixo, a largura se adapta de acordo com o dispositivo do usuário.
2) Limite de 12 colunas
- As colunas dentro do container possuem limite de 12 colunas, ou seja, na largura de uma página é possível adicionar até 12 colunas uma do lado da outra.
- Cada coluna possui um número, que significa o seu espaçamento. No exemplo acima vemos que cada coluna possui o número 1 e uma do lado da outra é igual a 12. Porém podem ser utilizados menos colunas preenchendo a largura total da página, neste caso podem ser utilizados colunas com tamanho 6 + 6, 8 + 4 e assim por diante desde que o total seja 12. Segue exemplos:
Exemplo de grid com 12 colunas
Exemplo de grid com 3 colunas que no total o espaçamento é igual a 12
Exemplo de grid com 2 colunas que no total o espaçamento é igual a 12
Exemplo de grid com 2 colunas que no total o espaçamento é igual a 12
Photoshop
A melhor escolha para o desenvolvimento Web é o Adobe Photoshop, sendo um software que se adaptou muito bem com o mundo da Web e o desenvolvimento para multiplataforma como Desktop, Tablet e Smartphone.
Caso você esteja acostumado com Adobe Illustrator também é possível desenvolver sites neste software, porém o Photoshop torna o trabalho mais fácil devido a facilidade de gerenciamento com as camadas (layers).
Conclusão
Conhecer bem o Grid do Bootstrap é uma habilidade crucial para Designers. Ter esse conhecimento, reduzirá muito esforço e tempo na hora de repassar para o Desenvolvimento Web.
