O que é?
Grid é uma malha que divide a tela em partes proporcionais e possibilita a organização do conteúdo e dos componentes de forma uniforme, disponibilizando equilíbrio visual e estrutural na interface. Uma grid responsiva auxilia na aplicação de componentes e espaçamentos em diferentes tamanhos de tela proporcionando uma melhor experiência a pessoa usuária.
Anatomia
1. Colunas
Possuem a mesma largura e estão a mesma distância umas das outras, variam de acordo com o tamanho da tela.
2. Gutter
É a distância entre as colunas na grid, sempre terá largura= 24px.
Tipos de grid
Grid com Menu Lateral/1366x
Utilizamos essa Grid quando temos que prever na interface um espaço para o Menu Lateral. Dessa forma, deixamos reservado um espaço em branco à esquerda da tela para o Menu, e a Grid vem logo em seguida após o recuo.
Grid sem Menu Lateral/1366x
Utilizamos a Grid Full quando não precisamos prever na interface um espaço pro Menu Lateral. Dessa forma, a Grid utiliza toda área útil do frame.
Os componentes são criados na UI Kit para se adaptar a grid como mostra a imagem abaixo. Ela deve servir para agrupar todo conteúdo da página.
Grid com Menu Lateral/1366x
Grid sem Menu Lateral/1366x
Espaçamentos
A grid deve respeitar um sistema de 8 pontos, ou seja, o espaçamento entre um elemento e o tamanho dos containers de elementos deve ser um número de pixels múltiplo de 8. Exemplo: 8px, 16px, 24px, 32px…
Posicionamento e Hierarquia
O conteúdo deve sempre estar alinhado à esquerda elencado a grid, certifique-se de que os objetos estejam alinhados vertical e horizontalmente. Dentro de um mesmo contexto, sempre dê preferência para blocos de conteúdo do mesmo tamanho. Por exemplo: 2 blocos de 4 colunas ou 3 blocos de 4 colunas.
- É recomendado ajustar o conteúdo da interface em 8 colunas na grid, caso exija mais espaço utilize 10 colunas.
- O comprimento máximo da linha de títulos e textos deve conter até 8 colunas. Pode ser reduzido em quatro colunas se houver informações primárias e/ou secundárias.
Aplicação
A grid do Sirius é baseada no Bulma, é possível habilitá-la acessando o Figma com o frame selecionado. Saiba mais através do tutorial “Como criar um frame e aplicar a grid no meu projeto?”
Figma
No figma ela deve conter obrigatoriamentente 12 colunas verticais, isso a torna mais flexível para a pessoa que projeta a interface. Permite a criação de diversas combinações de blocos, por ser divisível por 2, 3, 4 e 6.
