Grid 960 – tutorial para turbinar seu CSS

Neste tutorial você aprenderá a utilizar o grid 960 em seu CSS. Com esse poderoso framework você será capaz de reduzir significativamente seu tempo escrevendo código além de diminuir as incompatibilidades entre browsers. Vale a pena conferir!

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 12 colunas

Layout com 16 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:

topo do site com 12 colunas

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:

&lt;div class="container_12"&gt;
    &lt;div class="grid_7"&gt;
        <span style="color: #ff0000;">&lt;div&gt; ... &lt;/div&gt; &lt;div&gt; ... &lt;/div&gt; &lt;div&gt; ... &lt;/div&gt;</span>
    &lt;/div&gt;

    &lt;div class="grid_5"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;

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:

&lt;div&gt;
        &lt;div <span style="color: #ff0000;">class="alpha"</span>&gt; ... &lt;/div&gt; &lt;div&gt; ... &lt;/div&gt; &lt;div <span style="color: #ff0000;">class="omega"</span>&gt; ... &lt;/div&gt;
&lt;/div&gt;
  • 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).

Deixe suas dúvidas, comentários e até a próxima!

16 Comentários

  1. Jonathan Prieto

    Achei ótimo o post! Com muita clareza e de forma sucinta conseguiu explicar tudo o que seria necessário para codificar o trabalho em html.

    Obrigado pela sabedoria compartilhada!

    Responder
  2. Rodolfo Jorge Nemer Nogueira

    Também é válido ressaltar pra quem tá começando com web que esse framework não é o único, nem o melhor, e que de certo modo, pode limitar o design.
    Apesar de todas as vantagens pra quem não tem muita prática com Web!

    O blog tá ótimo, cara, continue assim 😀

    Rodolfo Nogueira
    Curitiba Paraná, UFPR Música

    Responder
    • Ubiratan Cunha

      Sem dúvida não é o único, mas acho que é uma boa porta de entrada pra quem quer aprender!
      Obrigado pelos elogios e continue nos acompanhando!

      Responder
  3. Eduardo Martins

    Ubiratan, seu post foi muito valioso pra mim. Muito obrigado mesmo, eu já utilizo o Grid960 a algum tempo, como aprendi na marra, essas outras classes adicionais. Passaram batido pra mim. Por exemplo, eu estou montando um layout que tem uma coluna direita de 6 grids e todos os resto do site em uma coluna com 18 grid´s em um container de 24 grids.

    O meu problema até antes do seu post, é que se eu colocar dentro da div mãe de 18 grid´s, três div´s filhas de 6 grid´s. O layout estoura. Mas com o alpha e o ômega minha vida mudou para sempre! srswrsrsrsrsrsrsrs

    Mais uma vez, obrigado pelo post

    Responder
    • Ubiratan Cunha

      Eduardo,

      Que bom que o post foi útil! Também enfrentava esse mesmo problema que você citou e essa foi uma das razões que me motivou a escrever sobre esse assunto.

      Abraços

      Responder
    • Ubiratan Cunha

      Opa Lelvym,

      O Pull e o Push não tem segredo, eles funcionam muito parecido com o Prefix e o Sufix. A diferença é que o Prefix e o Suffix “inutilizam” as colunas aplicando um padding, ou seja eu não posso colocar nada naquele espaço. Já o Push e o Pull, colocam o objeto na coluna desejada sem utilizar padding…

      Dica: Uma maneira fácil de testar isso é abrir a tela “demo” do Grid960 (lá no site do projeto) e utilizando uma ferramenta como o Firebug, inserir no HTML o termo Push ou Pull, juntamente com o número da coluna (ex: push_6).

      Se ainda tiver alguma dúvida, basta escrever!

      Responder
  4. Diretório de Templates

    Ótimpo post, parabéns.

    Já tenho uma boa experiência com CSS, porém, nunca trabalhei com Frameworks CSS.

    Comecei a utilizar os “reset.css” em alguns projetos que já desenvolvi. Ajudam bastante, apesar de ser algo simples. Agora estou partindo para o uso de frameworks.

    Responder
  5. Daniele

    Gostaria de saber se há alguma incompatibilidade com o less , sou nova nessa area e ainda tenho algumas dificuladades

    Responder
  6. Edson Zaltron

    Otima explicação, faz tempo que tinha varias duvidas sobre este framework, maravilha muito bom, aproveitando para tirar uma duvida eu fiz uma página com varias imagens uma em baixo da outra e um texto abaixo de cada imagem, mas o problema é que se o texto não tem o mesmo numero de paragrafos que o ao lado bagunça tudo, tem uma ideia porque isto acontece? obrigado.

    Responder

Deixe uma Resposta

  • (não será publicado)

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

© 2017 Mochileiro Digital.

Compartilhe: