Noção de grade¶
O princípio de uma grade
Uma grade é simplesmente um corte em células das mesmas dimensões como mostrado abaixo:
A grade Bootstrap tem 12 colunas.
Terminologia
Uma grade é dividida em linhas (chamadas “linha” em Bootstrap e “linha” em WebAcappella RC) e colunas (“col”), como na figura a seguir :
A Grade Bootstrap
A divisão em colunas divide a largura da tela em porcentagens. Para as filas, entretanto, a altura será ajustada ao conteúdo.
Organização da grade¶
A Bootstrap considera 4 tipos de mídia:
Grande (Lg) |
Bn |
Sm |
Xsmall (Xs) |
|---|---|---|---|
|
|
|
|
Valor de referência |
Valor de referência |
Valor de referência |
Valor de referência |
>= 1200 px |
>= 992 px |
>= 768 px |
< 768 px |
E em WebAcappella Grid?
Uma grade é definida em WAGRID pelo botão “BOX” que conterá tantas linhas quantas forem desejadas, sempre com uma largura máxima de 12 colunas por linha.
Uma linha (linha em Bootstrap) conterá elementos (texto, imagem, etc.).
Os 2 componentes principais são a “CAIXA” e a “LINHA”.
Nota
CAIXA: Este é o componente primário (e portanto indispensável), o único onde as linhas podem ser acrescentadas.
Nota
LINHA: Componente que permite incluir imagens, texto, uma galeria, etc.
Uma linha é dividida em 12 colunas (ver bootstrap), um componente como uma imagem pode ter pelo menos 1 coluna de largura e no máximo 12 colunas de largura.
No total, podemos, portanto, ter 12 componentes de 1 unidade de largura.
Quanto à altura de uma linha, ela depende do tamanho da largura do(s) componente(s) inserido(s) (noção de ração para uma imagem, noção de conteúdo para o texto em particular).
A noção de proporção refere-se a uma noção de proporcionalidade (largura*altura) e portanto de “redimensionamento” de uma imagem.
O conteúdo tem uma noção de “fluidez”, ou seja, o conteúdo deve aparecer em todos os casos e, portanto, se você reduzir a largura (perda de conteúdo, portanto), isto será inevitavelmente compensado por um ganho de altura.
O espaçador é um componente separado no sentido de que tem um tamanho fixo, o que torna possível gerar uma margem.