Embora a Apple possa enfrentar desafios no design de hardware e software, ela nos mostrou, em seus momentos de glória, como o alinhamento preciso pode elevar a estética de um produto. A perfeita sincronia de elementos resulta em uma aparência superior, tanto no design industrial quanto no web design. Frequentemente, os layouts de sites são concebidos no Photoshop, mas designers e desenvolvedores também ajustam a aparência diretamente no navegador. Essa manipulação é facilitada pelo console de desenvolvimento web, presente em todos os navegadores, onde é possível adicionar preenchimento, alterar cores e muito mais. Contudo, esses consoles geralmente carecem de uma ferramenta de alinhamento. Se você utiliza o Chrome para desenvolvimento, a extensão Baseliner pode ser uma adição valiosa, introduzindo linhas horizontais à tela, com opções de espaçamento e cor personalizáveis. A ferramenta ainda permite inserir um preenchimento no topo da página, antes da grade.
Como Utilizar o Baseliner
Após instalar o Baseliner, clique no botão “B” que surge na barra de endereços. Um menu se abrirá, revelando as opções para ajustar a grade.
Por padrão, o preenchimento superior é de 0px, o espaçamento entre as linhas é de 12px, e as linhas são cinzas, com opacidade de 100%. Para modificar esses valores, clique nas caixas correspondentes.
A paleta de cores permite selecionar a cor das linhas da grade, enquanto os valores de espaçamento, preenchimento e opacidade podem ser ajustados inserindo números ou usando as setas direcionais. Após ajustar a grade, clique em “Aplicar”.
As linhas de grade são aplicadas apenas à página ativa, e não a todas as páginas abertas. Para removê-las, clique novamente no botão “B” e selecione “Remover”.
O Baseliner demonstra um desempenho impecável, com controle de cores e preenchimento superior. No entanto, seria interessante se houvesse também suporte para linhas verticais.