960 grid tutorial

Deseja aumentar sua produtividade e criar folhas de estilo com maior rapidez? A solução pode ser utilizar um framework de desenvolvimento como o excelente grid 960. Neste tutorial vamos ensinar como trabalhar com esta ótima ferramenta. Mas antes de começar, vamos avaliar os prós e contras do uso de um framework no desenvolvimento de nosso CSS.

Prós do uso do Grid 960

Sem dúvida, entre as principais vantagens defendidas pelos adeptos do uso de frameworks como o grid 960, está o aumento na produtividade. Por possuir classes pré-prontas e um esquema de colunas bem definido, fica muito fácil e rápido para o desenvolvedor de frontend fazer seu trabalho.
Um outro aspecto importante é a diminuição das incompatibilidades entre browsers, visto que as classes fornecidas com o grid 960 já foram criadas pensando nestes aspectos. Isso não significa que o terrível IE não lhe causará problemas, mas que eles serão menores.

Contras do uso do Grid 960

Se você está iniciando no trabalho com CSS e ainda não possui experiência em codificação, não acho que seja indicado o uso de um framework. Aprenda tudo o que puder sobre CSS, faça projetos, resolva problemas de incompatibilidade, e só depois parta para o uso de um framework. Desta maneira a grid 960 será um recurso para melhorar seu trabalho e não uma muleta sem a qual você não consegue codificar.
Um outroa aspecto levantado por aqueles que não apoiam o uso de frameworks no CSS, está no fato de que isso pode restringir o processo criativo na hora de desenvolver seu layout. Afinal de contas, você vai ver que para codificar um layout usando uma grid, é necessário que o mesmo tenha sido desenvolvido dentro do modelo de colunas fornecido pela ferramenta e que o layout esteja contido dentro de uma largura de 960 pixels. Daí o nome Grid 960.

Bem chega de conversa e vamos ao tutorial:

1 Baixando o Grid 960

Vá até o site http://960.gs e faça o download do projeto. Na pasta que você vai baixar estarão vários arquivos, mas os que nos interessam são os seguintes:

1. code (aqui estão os códigos que usaresmos em nosso trabalho assim como um “demo” que mostra o grid 960 em ação)
2. sketch_sheets (aqui temos alguns modelos para imprimir e usar na construção de nossos wireframes)
3. templates (modelo que será usado no Photoshop ou outro programa com as colunas do framework)

Se isso ainda parece meio nebuloso, não se preocupe, continue lendo que tudo fará sentido logo adiante.

2 Utilizando o Grid na fase de layout

Como explicado logo acima, o Grid 960 nos fornece um modelo para ser utilizado na produção de nosso layout. Clique em “templates” > “photoshop”. Na pasta estarão 3 arquivos, ou modelos, cada um com um número pré-definido de colunas (12, 16 e 24). Aqui vai uma dica: escolha o arquivo com o número de colunas que mais se adeque ao seu projeto. Por exemplo, se seu layout possui 3 chamadas na home, a melhor opção será o modelo com 12 colunas, visto que 12 dividido por 3 nos dará 4 colunas iguais para cada chamada. Já o modelo de 16 se encaixa melhor em layouts com 4 chamadas. Veja abaixo os exemplos:

Layout com 12 colunas:



Layout com 16 colunas:

Como mostrado acima, você tem total liberdade para utilizar a grid contanto que se lembre de manter o layout dentro de 960 pixels e não coloque o início dos elementos nos espeços em branco que vemos entre as colunas (chamados de gutters).

Outro aspecto importante que devemos citar é que ao abrir o arquivo PSD você verá que além das colunas em vermelho, como mostradas acima, também teremos as grids do Photoshop delimitando o início e o fim de cada uma das colunas. Se tiver dúvidas na hora de fazer seu layout, deixe sua dúvida nos comentários e vamos esclarecê-la para você.

Como esse post não é sobre criação, vamos seguir adiante…

3 O que fazer depois do layout?

Essa resposta é simples, é hora da codificação do nosso HTML e da folha de estilos, o CSS. Aqui começa a parte interessante do uso da grid. Mas para podermos começar a utilizá-la primeiro devemos criar um link para as folhas de estilo que o Grid960 nos fornece. Para isso, insira dentro do <head> do seu HTML os seguintes links:

1. <link type=”text/css” rel=”stylesheet” href=”css/reset.css” />
2. <link type=”text/css” rel=”stylesheet” href=”css/text.css” />
3. <link type=”text/css” rel=”stylesheet” href=”css/960.css” />

O primeiro link chama o Reset fornecido pelo grid o que nos ajuda a “resetar” os estilos pré-definidos pelos browser. Desta maneira evitamos inconsistências entre browsers.

O segundo link chama o CSS responsável pelos estilos aplicados às fontes utilizadas no site. Isso nos ajuda a trabalhar o texto separado do resto do conteúdo e da estrutura do nosso layout. Não é obrigatório, mas costuma manter nosso trabalho mais organizado. Fica a dica.

Por fim temos o grid que é chamado no terceiro link. Se abrir este arquivo vai ver que ele basicamente possui várias classes que controlam o número de colunas utilizadas no nosso layout.

4 Entendo as classes do Grid 960

1. contaner_12, container_16 ou container_24

Aqui temos o container que manterá nosso trabalho dentro dos 960 pixels e que também será responsável por centralizar nosso layout no browser. Se site foi criado em 12 colunas utilizaremos a classe .container_12 e se foi feito em 16, .container_16 e assim por diante.

2. grid_1, grid_2, grid_3 etc…
Essas são as classes reponsáveis por controlar as colunas. Sempre devemos utilizá-las dentro de div’s com classe container_xx. Vamos dar alguns exemplos de seu uso:


O topo do site acima servirá como nosso exemplo. Como você pode ver ao contar as colunas, temos aqui um layout de 12 colunas. Se eu fosse codificar este site iria primeiramente criar uma div com a classe container_12, a fim de centralizar o conteúdo do site. Logo em seguida criaria 2 divs, a primeira para o logo que se encontra à esquerda e a segunda para os textos, à direita.

A primeira div receberia a classe “grid_4″, visto ser este o número de colunas que o logo ocupa (na largura) e a segunda div receberia a classe “grid_8″, que correspondem as colunas restantes dentre as 12 que tenho para trabalhar.

Dentro da div com a classe grid_4 eu colocaria a imagem do logo e dentro da segunda div, os títulos de cabeçalhos e parágrafos. O mesmo raciocínio se aplicapara aos demais elementos presentes no meu layout.
No caso de um slideshow, por exemplo, que ocupasse 12 colunas, bastaria utilizar na div onde ele estivesse contido, a classe “grid_12″. Faça um teste em um layout próprio e verá como é fácil montar seu CSS com essas classes!

5 Recursos Adicionais

Além das classes citadas acima (container_xx e grid_xx), o framework nos traz outras classes que nos possibilitam realizar ações adicionais. Vamos conhecê-las:

• Classes alpha e omega.

Vamos supor que você possua uma div, que já está utilizando uma classe grid_xx (onde “xx” representa o número de colunas), e dentro desta deseja inserir outras div’s, como no exemplo abaixo:

<div class="container_12">
    <div class="grid_7">
        <div> ... </div> <div> ... </div> <div> ... </div>
    </div>

    <div class="grid_5">
        ...
    </div>
</div>

Neste caso, as div’s filhas (destacadas em vermelho), poderão fazer uso das classes grid_xx para posicionamento, entretanto, será necessário utilizar a classe “alpha” na primeira div e a classe “omega” na última, evitando assim uma duplicidade de margens.

Confira abaixo:

<div>
        <div class="alpha"> ... </div> <div> ... </div> <div class="omega"> ... </div>
</div>

• Classes prefix_xx e suffix_xx

As classes prefix e suffix também nos fornecem um recurso muito interessante, o de poder utilizar as colunas como espaço em branco antes ou depois de um grid_xx. Por exemplo, se eu tenho uma div que ocupa quatro colunas e dentro destas 4 colunas eu quisessem descartar a utilização da primeira coluna, mantendo ainda a largura correspondente a 4, bastaria utilizar as seguintes classes conjuntamente: grid_3 prefix_1. Se a coluna a ser descartada fosse a última, bastaria utilizar a classe suffix_1 ao invés de prefix_1. Sempre lembrando que o número inserido nas classes prefix e suffix representam o número de colunas que elas utilizarão, assim como acontece com a classe grid_xx.

• clear e clearfix

Por fim, aqui temos um valioso recurso para evitar problemas com os floats utilizados pelas classes do Grid 960. Algumas vezes, após inserir suas classes, mesmo fazendo tudo certo, alguns elementos podem se comportar de maneira estranha e para “arrumar” isso, basta criar uma div e inserir uma dessas 2 classes, o que deve trazer os elementos ao fluxo normal do documento.

Conclusão

Bem galera, acho que é isso. Como puderam ver, esse framework pode acelerar nosso processo de produção e ajudar-nos a resolver problemas chatos de posicionamento em codificações tabeless (sem o uso de tabelas). Caso queira saber mais dêem uma conferida no demo online e inspecionem as classes utilizando a opção de “mostrar código fonte” do seu navegador ou utilizando o inspetor de elemtnos do Firebug (complemento do Firefox indispensável para desenvolvedores).