Já reparou como os blocos da sidebar aqui do Tableless possuem todos a mesma largura? Ou como a largura do bloco de artigo somada a largura da sidebar é equivalente ao wrap do menu e do rodapé? Mesmo que você não tenha percebido isto antes de maneira consciente, a informação parece mais organizada desta forma…É por que o design do Tableless, como boa parte do conteúdo da internet, foi alinhado com o auxilio de um grid.
O que é um grid?
Um grid é basicamente um conjunto de linhas guias, horizontais e/ou verticais, que servem de base para um design. No caso de design digital, o grid funciona como um esqueleto onde o layout será apoiado. Grids estão em todos os lugares, mesmo que você não os enxergue. Basta olhar a sua volta. A organização da informação é uma das principais vantagens na utilização de um grid, mas eu poderia citar diversas outras como precisão, consistência, hierarquia visual, ritmo… Só isto já daria um artigo inteiro. Grids são mesmo maravilhosos e a maior parte dos designers que conheço são apaixonados pro eles. Mas muitas vezes reproduzir a precisão de um grid em um código HTML/CSS é uma tarefa muito desgastante. Alguns desenvolvedores – as vezes por desconhecimento, as vezes por preguiça, as vezes por falta de tempo hábil – acabam alterando os valores. Arredondam uma porcentagem aqui, inventam uma margem ali, completamente desconsideram o valor de espaçamento entre linha… Resultado: o layout final parece bem diferente do original já que o grid foi praticamente descartado. Designers choram. Desenvolvedores se descabelam. Caos. Okay, talvez não de maneira tão dramática. Mas recriar a precisão do grid no CSS pode ser um problema. Ainda mais quando se trata de um projeto que inclui design responsivo…
Sistemas convencionais de grids (e seus problemas)
Existem algumas alternativas que prometem ajudar nesta tarefa. Sistemas como o 1140 Grid System e o clássico 960gs quebram um galho e são faceis de utilizar, mas diversos aspectos me incomodavam nestes sistemas: classes não semânticas que sujavam o código (.onecol, .twocol… argh!), a necessidade de utilizar excessivamente truques como clearfix para “abrir” as fileiras e o aspecto engessado já que em nenhum destes sistemas existia a opção de customizar a largura das margens e colunas de acordo com o projeto. O jeito então era escrever manualmente um grid para cada job. Falo por mim mesma quando digo que matemática nunca foi o meu forte e aqueles pequenos segundos quebrando a cabeça na calculadora acabavam deixando todo processo mais lento quando somados no fim do dia. Mas tudo isto mudou com o adventos dos pré-processadores de CSS.
Para que servem pré-processadores?
Basicamente eles pegam o texto escrito em uma linguagem e convertem ele para outra. Ou seja, literalmente pré-processam o código. No que isto é útil? Bem, é possível adicionar funcionalidades novas em linguagens pré existentes. Sistemas como LESS, SASS e Stylus tornam possível trabalhar com velhos conhecidos dos programadores como variáveis, mixins, funções e operações matemáticas dentro do próprio CSS. É algo como uma folha de estilos com esteróides. E são estas funcionalidades extras que permitem a criação de um grid semântico.
Um aviso aos navegantes
Vamos utilizar o sistema Semantic.gs. Existem muitos outros do tipo, mas a vantagem dele é que não se trata de um framework cheio de classes inúteis ou de um plugin de js que pesará no final. Este grid é todo escrito usando apenas CSS compatível com as linguagens do LESS, SASS e Stylus. Para este artigo eu escolhi utilizar LESS por ser a linguagem mais popular. Mas é facinho de adaptar para as outras, só vai mudar a sintaxe. Ainda não sabe utilizar o LESS? Sugiro que você leia o artigo aqui do Tableless “CSS Dinâmico com Less“. Entendeu tudo direitinho? Então você esta pronto para começar.
O design
O primeiro passo, obviamente, é criar o grid no seu editor de imagens favoritos. No caso do Photoshop você pode quebrar a cabeça puxando linhas guias, utilizar algum plugin como o GuideGuide ou ainda utilizar usar um gerador online. Eu recomendo o Grid Calculator. Você insere o tamanho das colunas, das margens e a largura total do arquivo e magicamente ele gera um script de Photoshop ou Ilustrator ou ainda um arquivo em png com o grid prontinho. Mais fácil que tirar sarro do Internet Explorer.
Um grid é basicamente um conjunto de linhas guias, horizontais e/ou verticais, que servem de base para um design.
Então vamos considerar uma estrutura basica bem simples. Header, um bloco de conteúdo, sidebar e footer em um wrap de 960 pixes de largura.
Para criar este layout eu utilizei um grid de 12 colunas com 60 pixels de largura. Okay. Layout feito. Hora de desenvolver.
Construindo o Grid
Baixe a Demo ou crie um novo arquivo HTML com a seguinte estrutura.
Crie também um arquivo de CSS na linguagem LESS (style.less, por exemplo) e coloque o link entre as tags head do seu layout.
Não se esqueça de fazer o download da última versão do LESS e referencia-la também head do seu HTML. Lembrando sempre que este script deve aparecer depois da folha de estilos.
Hora de setar o nosso grid. Inclua o seguinte código na sua folha de estilos LESS:
Para customizar de acordo com o seu grid é bem fácil. Basta alterar os valores deste trecho:
Na opção @column-width você escreve a largura em pixels da coluna, em @gutter-width você escolhe a largura das margens e em @columns o número de colunas. E pronto! A matemática é toda feita pra você e o semantic.gs converte todas as medidas de pixel para porcentagem.
Como aplicar o grid
Segundo o nosso (belíssimo) layout o header deve ocupar a largura total do wrap, ou seja, o espaço equivalente a 12 colunas. Para isto basta acrescentar a classe .column(12) na folha de estilos.
E isto no CSS final é compilado para os valores em porcentagens com uma margem de 10px:
Legal, né? Da mesma forma podemos determinar o espaço destinado ao conteúdo e a sidebar.
E isto será compilado para:
Agora para fazer o conteúdo se adaptar a dispositivos mobile é moleza. É só utilizar os bons e velhos media-queries. Vamos supor que para smartphones tanto a section conteúdo quanto a sidebar devem ocupar a largura total do wrap.
E pronto! Desenvolvimento responsivo de maneira prática e semântica, sem se preocupar com a matemática.
Como a magia acontece
É tudo através desta função. Basicamente ele considera a largura total do sistema de grid como a largura das colunas multiplicado pelo número de colunas somado com a largura das margens multiplicado pelo número de colunas vezes um pixel.
Não quer trabalhar com porcentagens? Sem problema. Delete esta linha que os valores ficam em pixel.
Saiba mais
Existem algumas outras funções interessantes como a possibilidade de puxar e empurrar as divs e trabalhar com colunas aninhadas. Vale a pena ler a documentação do semantic.gs e seguir o projeto no GitHub para conferir futuras atualizações. O sistema é compatível com Firefox 3.5+, Safari 4+, Chrome, Opera 9+ e IE6.
E vocês? Utilizam algum sistema de grid? Quais são as vantagens e desvantagens? Deixem as sugestões nos comentários.
