Container e Grids

O assunto de hoje vai dar continuidade na série das ferramentas do Bootstrap.  Já falamos um pouco de layout, components, content e utilities. Hoje o foco será nos containers e grids, funcionalidades que são uma das principais fontes das facilidades proporcionadas pelo framework. Também já mencionamos os grids em artigos anteriores, hoje vamos aprofundar um pouco mais no tema.

 

O que é o Container

Antes de darmos início ao assunto vamos compreender o que é o container, que na verdade é o elemento de layout mais básico do Bootstrap.

Seu uso é crucial quando se utiliza o sistema de grid (abordado em mais detalhes na próxima seção) e garante que o layout irá ficar corretamente alinhado na página.

 

Algumas das funções do container são:

  • Define de forma automática larguras (width) do layout;
  • Define margens laterais da página, ou a deixa sem margens;
  • Posiciona o conteúdo no centro do browser.

 

Uma possibilidade interessante do container é a responsividade, que pode ser fixada (largura máxima muda a cada breakpoint) ou fluída (fica em 100% de preenchimento de largura sempre).

Além disso o container pode ficar invisível, mas não totalmente inacessível, de forma que é possível identificar sua existência pelos limites definidos pelo próprio container na página.

Mas antes de criar layouts com o Bootstrap, é necessário compreender bem como usar o container, que será exatamente o próximo assunto.

 

Como usar o Container

É o container que mantém o bom funcionamento do layout, pois é o responsável por envolver todo o conteúdo da página, ou uma seção, ou parte da página.

Existe a possibilidade de se ter mais de um container na mesma página, e de dois tipos:  o container simples e o container fluído.

Ocontainer simples, que é o padrão, cria uma área responsiva e de largura fixa centralizada na tela.

Já o container fluído também cria uma área responsiva, mas que ocupa toda a tela (também conhecido como full width).

Mas como saber qual escolher.

 

Qual você deve escolher?

A escolha vai depender muito de como o layout sendo utilizado vai se comportar, caso o layout tenha largura fixa, a melhor escolha é o container fixo. Caso a largura seja variável, o container fluído.

Em alguns casos também pode ocorrer a necessidade se utilizar vários containers, onde um vai ficar abaixo do outro, ou dentro de outros componentes. Por essa razão, todos os elementos visuais da página, devem estar dentro de pelo menos um container.

 

Sistema de Grid

O que é o sistema de grid?

Assim como começamos a seção do container o explicando conceitualmente, chegou a vez do sistema de grid, que já foi até mencionado algumas vezes anteriormente.

Os sistemas de grid são utilizados para a criação de layouts, é um aliado inseparável dos containers, afinal, linhas, colunas e containers são elementos fundamentais para um bom layout e alinhamento de conteúdo.

Aqui está resumido alguns aspectos de funcionamento do sistema de grid:

 

  • Linhas devem ser posicionadas com o .container (largura – fixa) ou .container-fluid (largura – total) para alinhamento e preenchimento;

 

  • Utilize as linhas para criar grupos horizontais de colunas;

 

  • Content deve ser posicionado nas colunas, e somente colunas devem ser herdeiras imediatas das linhas;

 

  • Classes de grid pré definidas como .row e .col-xs-4 estão disponíveis para rascunhos ou layouts rápidos. Menos mixins, que também podem ser usados para layouts mais semânticos;

 

  • Colunas de grid são criadas ao se especificar o número de doze colunas disponíveis desejadas. Por exemplo, três colunas iguais usariam três .col-xs-4.

 

Uma curiosidade e informação importante é que o sistema de grid é feito com flexbox e é completamente responsivo.

A seguir serão apresentados alguns aspectos importantes para o sistema de grid do Bootstrap, e desenvolvido brevemente seu funcionamento.

 

Opções de grid

Enquanto o Bootstrap faz uso de ems ou rems para definir a maior parte dos tamanhos, pxs são usados para breakpoints do grid e larguras de container. Isto acontece por causa da largura do viewport ser em Pixels, e não mudar de acordo com o tamanho da fonte.

 

Classes responsivas

O grid do Bootstrap inclui cinco camadas de classes pré definidas para construção de layouts complexos responsivos. É possível customizar o tamanho das colunas em aparelhos de tamanho extra pequeno, pequeno, médio, grande, ou extra grande, de acordo com a preferência do cliente.

 

Mixins Sass

Quando usar o código fonte Sass, existe a opção de utilizar variáveis e mixins para criar layouts customizados, semânticos e responsivos. As classes pré definidas de grid fazem uso das mesmas variáveis e mixins para proporcionar um pacote de classes ready-to-use para layouts responsivos ágeis.

 

Customizando o grid

Utilizar as variáveis e mapas de grid built-in Sass possibilita a customização completa das classes pré definidas de grid, seja modificando a quantidade de níveis, dimensões de media query, ou a largura do container.

 

Concluindo

Agora já com a visão conceitual e de como trabalham em conjunto, o container e o sistema de grid, é importante destacar a importância desta combinação para o desenvolvedor e usuário do framework Bootstrap.

As facilidades e poder que são potencializados são diversos, e o trabalho com a ferramenta se torna muito mais dinâmico, organizado, eficiente e preciso ao utilizar tais ferramentas.

Alguns conceitos não puderam ser explicados em detalhe. Por exemplo, se ficou curioso em saber o que é código fonte Sass, e outras siglas como ems, rems e pxs, continue acompanhando a série e aprofunde seus estudos nas referências abaixo:

 

E aí? Curtiu o artigo? Então deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.