Neste artigo irei falar sobre uma boa prática que irá facilitar sua vida na hora de reproduzir layouts. Esta não se limita apenas ao desenvolvimento mas também poderá te auxiliar no design de um produto, por exemplo.
Tendo isto em mente explicarei alguns conceitos básicos antes de aprofundar mais no assunto.
O que é pt
Antes de mais nada um "pt" é uma medida de espaço que depende da resolução de uma tela, sendo assim 1pt = 1 pixel.
O que é um grid?
Grid é um sistema de design onde utilizamos linhas verticais e horizontais para organizar componentes dentro de uma tela de forma harmônica.
Tipos de telas e densidade de pixels"?
Hoje em dia existem diversos tamanhos e tipos de telas. O que dificultaria no processo de fidelização dos protótipos na hora da execução.
Sendo assim quanto maior a qualidade da tela mais pixels "cabem".
Como funcionam: "@1x, @2x e @3x" ?
Imagine que você tem um ícone no tamanho de 16px (ele representará o @1x que nada mais é o tamanho original do ícone.)
Seguindo este raciocínio se uma imagem originalmente possuí 16px (@1x) o @2x é seu múltiplo de 2 (32px) e @3x é igual a 48px.
E afinal: O que é 8pt Grid?
O 8pt grid é uma "fórmula" onde usamos os múltiplos de 8 para compor os elementos na tela.
Ele pode ser utilizado para o tamanho dos components e para seus espaçamentos.
Sabendo que podemos utiliza-lo em tamanho e espaçamentos seus múltiplos são: 8, 16, 24, 32.. (Só imaginar o 8 somando ele mesmo: 8+8 = 16, 8+16 = 24 e etc.).
Soft e Hard grid? O que é?
O grid possuí duas formas de ser implementado, são: Soft e hard.
- Hard: Forma mais rígida (hard) de se implementar o grid. Ou seja os elementos são posicionados em relação ao container "pai" (com maior hierarquia).
Como mostrado na imagem, não possuí variação de tamanho e posicionamentos dentro de uma mesmo container.
- Soft: Os elementos individuais são posicionados em relação uns aos outros, em vez da grade real.
Tipografia
Na tipografia se formos levar em consideração que para web, o valor de 1 rem equivale 16px, podemos aplicar uma "regra" de múltiplos de 4 (que neste caso seria 0.5 rem).
Mas em desenvolvimento mobile podemos seguir a regra de múltiplos de 8 sem preocupação.
Na prática
A principal vantagem deste conceito na prática é a responsividade em diversos tamanhos de tela.
O maior exemplo disto é que a Google e o Firefox já adotam e disponibilizam este conceito.
Caso queira se aprofundar mais sobre o assunto deixo aqui os links do Material design:
Esta boa prática com certeza ajudará muito na hora de você criar tela responsivas e na praticidade na hora de programa-las.
Top comments (0)