Grid

Definições Gerais

Todos os sites e apps devem ser construídos sobre um sistema de Grid flúido e baseado em colunas, visando garantir responsividade, modularidade e consistência em todas as partes do produto.

Nesse cenário, os valores de Margin e Gutter devem ser fixos, enquanto a largura das colunas possui tamanho variável, a depender do tamanho da tela do dispositivo.

Largura total

O grid deve sempre preencher totalmente a largura da tela do dispositivo, possuindo portanto largura variável. A partir da largura total do grid, subtraem-se margin e gutters para que se calcule a largura de cada coluna.

Para evitar problemas com imagens e ajustes complexos no layout, o Grid Width deve sempre possuir uma largura limite de 1444px, ainda que a tela do dispositivo seja superior a isso.

Largura das colunas

O grid deve possuir 12 colunas de tamanho variável, calculadas a partir da largura do dispositivo utilizando a seguinte fórmula:

Collumn Width = (Grid Width - (11*Gutter) - Margin)/12

Margin e gutter

O valor de Margin varia de acordo com a largura da tela do dispositivo, seguindo a regra:

Se ScreenWidth ≥ 1000px, então Margin = 24px

Se ScreenWidth < 1000px, então Gutter = 20px

O Gutter também varia com a tela do dispositivo:

Se ScreenWidth ≥ 1000px, então Gutter = 20px

Se ScreenWidth < 1000px, então Gutter = 16px

Aplicações

Diretrizes de uso

• Os componentes de Header e Footer precisam, por definição, ignorar o limite do grid. Por isso, eles recebem uma aplicação interna das configurações do grid e devem ignorá-lo na construção das telas.

• Outros componentes e estruturas devem, sempre, seguir as colunas do grid. Ítens internos de agrupamentos e estruturas podem possuir tamanho fixo ou proporcional ao agrupamento, ignorando as colunas do grid, contanto que seu agrupamento acompanhe e possua uma largura definida em colunas.

• Para carrosseis de componentes (mobile e tablet), os ítens internos do carrossel devem ocupar exatamente 5 ou 10 colunas do grid, conforme necessidade do componente, garantindo exibição de parte dos outros ítens antes do fim da screen view.

Histórico de Atualizações