ZURB CSS Grid Builder

ZURB CSS Grid Builder é uma ferramenta bem prática para quem mexe com páginas na web, mas não tem muita prática com códigos CSS. Ele permite que o usuário crie layouts dos mais variados tipos.

O serviço pode ser utilizado também por usuários experientes, assim é possível poupar tempo na codificação da estrutura de um site sem abrir mão da qualidade no final. Com o código fornecido pelo ZURB CSS Grid Builder fica bem mais fácil controlar o posicionamento dos elementos de uma página.

Como usar

Não precisa ser um programador web profissional para entender como o ZURB CSS Grid Builder funciona. Todas as configurações do layout podem ser modificadas na página inicial do serviço, mas nada impede que o usuário futuramente altere o código gerado.

Na coluna mais à esquerda da tela você encontra alguns campos a serem preenchidos. São eles que determinam a aparência do layout. Veja abaixo quais são as opções e a qual configuração ela se refere.

• # of columns => determina o número de colunas que o site terá.
• Column width => define a largura de cada uma das colunas.
• Gutter width => permite que o usuário modifique o espaçamento entre as colunas da página criada.
• Screen Width => determina a resolução da página.

O resultado das modificações pode ser visto à direita, em uma imagem que imita a tela de um navegador. Logo abaixo dessa imagem o usuário encontra o código CSS, o qual pode ser selecionado e copiado sem problemas. No entanto, para facilitar ainda mais a vida do usuário, os desenvolvedores criaram o botão "Get the Code!" (Pegue o código). Com ele todo o código criado é automaticamente copiado para a área de clipboard.

Feito isso, é só colar o código no arquivo com extensão CSS e adaptar a página ao novo layout. Com o ZURB CSS Grid Builder fica bem mais simples criar páginas com várias colunas e, o melhor de tudo, você não precisa instalar nada no computador, basta abrir o seu navegador.