Como usar 960 grid framework

Entenda de uma vez por todas como usar 960 grid para criar sites.

Como usar framework 960 grid pra criar sites com mais rapidez e facilidade, podemos criar um layout em minutos com esta ferramenta.

É um tanto estranho dizer que esta ferramenta veio para simplificar nossos trabalhos na hora de criar sites, quando baixamos os arquivos, oque vemos são muitos códigos e a principio parece tudo muito complicado, mas com o tempo podemos perceber que a quantidade de código na verdade é apenas um trabalho já configurado, e oque a nossa parte é realmente simples, inserir as classes do tamanho desejado e todo o alinhamento já está feito.

 

O conceito real dos sistemas de grade além de facilitar nosso trabalho é um conceito que não veio somente com a WEB, e sim com design em geral o alinhamento.

Quando comecei a utilizar o sistema 960 grid confesso que não pude aproveitar todo seu sistema, por não entender como decifrar todos aqueles códigos, mas uma coisa eu tinha em mente que eu tinha que colocar em meus layouts era o alinhamento.

 

Eu usava seu plugin para fireworks e desenvolvia todo o layout baseado nas suas grades e formatava depois com meu próprio CSS, um exemplo esta aqui no Criar Sites, podemos ver a formatação em grade de 960 px, mas todo CSS é feito na mão, ou seja a parte melhor do sistema eu deixava de lado.

 

Vamos ver a diferença entre um site alinhado e um site totalmente desalinhado com 960 grid, é clara a facilidade que temos para decifrar um layout bem alinhado, o desalinhamento provoca uma demora na interpretação do conteúdo e o entendimento.

 

Layout devidamente alinhado com 960 grid.

template-alinhado

Layout desalinhado sem usar 960 grid.

template-desalinhado

O sistema 960 grid.

O sistema 960 grid é um modo de colocar sites em uma grade de 960 pixels de largura, a razão do número 960 é a serie divisões limpas e margens que se encaixam perfeitamente na maioria das resoluções de telas.

960 grid vem com 3 variações, grade de 12 colunas 16 colunas e uma extra de 24 colunas.

 

Na versão de 12 colunas a mais estreita tem 60 pixels de largura que depois vão aumentando de tamanho em 80 pixels cada, ficando então colunas de 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 e 940.

 

960_grid_12-colunas-criarsites-m

De modo parecido a grade de 16 colunas, a mais estreita é de 40 pixels e depois cada coluna tem um aumento de 60 pixels.

 

960_grid_16-colunas-criarsites-m

E na versão extra com grade de 24 colunas, a mais estreita é de 30 pixels e depois cada coluna tem um aumento de 40 pixels.

 

960_grid_24-colunas-criarsites-m

Utilizando CSS do 960 grid.

Quando olhamos para as barras azuis, temos que ver cada barra horizontal como uma classe CSS, assim como são chamada as classes do sistema 960 grid, grid_1, grid_2, grid_3 e assim por diante.

Baseado pelo sistema de 12 colunas, podemos ver na imagem a baixo as colunas numeradas como se fossem classes, grid_1 a menor e grid_12 a maior.

 

960_grid_12-colunas-criarsites-numeros-m

Com este sistema de nomeação das classes, se torna muito fácil fazer layouts em poucos minutos, temos que ter em mente que a soma das colunas tem ser o resultado do numero total do sistema escolhido.

No exemplo de sistema e 12 colunas, se quisermos colocar em um layout 3 blocos de textos bastaria atribuir a classe grid_4 a cada um de suas divs, ficaria 4 + 4 + 4 = 12 colunas.

 

960_grid_12-colunas-criarsites-exemplos-m

Da mesma forma com a versão de 16 colunas, atribuindo a classe CSS de grid_4 na versão 16 colunas o layout ficaria com 4 colunas, 4 + 4 + 4 + 4 = 16.

<br/

960_grid_16-colunas-criarsites-exemplos-m

Com a versão extrade 24 colunas teremos mais colunas ainda, fica a seu critério, a versão 24 colunas é para layouts mis detalhados que precisam de batates divisões, mas seguindo o exemplo teremos, 4 + 4 + 4 + 4 + 4 + 4 = 24.

 

960_grid_24-colunas-criarsites-exemplos-m

Puxar e empurrar com 960 grid.

O sistema 960 grid permite puxar e empurrar elementos horizontalmente, isso é possível utilizando as classes no CSS push e pull.

Veja no exemplo abaixo, eu utilizei em um layout de 24 colunas 3 boxes com classes gri_8, mas em 2 boxes eu acrescentei pull_2 e push_2 e o resultado é puxar e empurrar horizontalmente em 2 colunas, podemos mover quantas colunas quizermos, basta acrecentar o número de colunas no push e pull.

 

960_grid_push_pull<br/

Deixar espaços vazios com 960 grid.

Muitas vezes vamos precisar deixar espaços vazios em nosso layout, isso pode ser feito com a classe suffix e prefix.

Muito semelhante a classe pull e push, o suffix e prefix tem quase o mesmo efeito. Onde ao utilizar prefix e o número de colunas a serem deixadas vazias antes do elemento e sufix depois do elemento.

Veja no exemplo abaixo.

 

960_grid_suffix_prefix<br/

Utilizando classes dentro de classes com alpha e omega.

Para realizar esse método temos que atribuir as classes alpha e omega para fazer a correção dos elementos dentro das div mãe.

Uma coisa que temos que ter em mente é que ao adicionar duas ou mais classes dentro de outras é que temos que colocar alpha antes e omega depois.

No primeiro exemplo podemos ver a aplicação de alpha e omega nas 2 ultimas classes, onde tudo se encaixa perfeitamente.

 

Agora veja o resultado do mesmo código sem alpha e omega, é um desastre total, o layout se quebra inteiro.

 

960_grid_sem_alpha_omega

Layout completo feito com 960 grid de exempo para este tutorial.

Veja todos os detalhes do layout online no endereço a seguir => Layout 960 grid

Veja abaixo todo o código.

 

 

Oque temos que ter em mente.

Utilizar container_12 para layout de 12 colunas container_16 para de 16 colunas e container_24 para layout de 24 colunas.

Usar as classes grid_1 grid_2 grid_3 e etc…. para definir a largura desejada e lembrando que o total da soma das classes tem que ser o total do container escolhido, se for um container de 12 colunas, 4 + 4 + 4 = 12, e assim serve para os demais.

Usar push e pull para empurrar e puxar o conteúdo para cima de outras classes, independente da sua marcação.

Usar preffix e sufix para criar espaços no layout.

Usar alpha e omega para corrigir as margens de classe dentro de outras.

 

Onde baixar o sistema 960 grid.

Site oficial 960Grid.gs

É isso pessoal, qualquer dúvida deixe seu comentário.

Abraço!

Leave a Reply

16 comments

  1. César Nildo

    Muito bem colocado uso do grid 960. vlw

  2. Ederson F.

    Caralho! Melhor explicação ever!.. vlws!

  3. Ótima Explicação. Por causa dessa explicação eu acabei escapando da armadilha de usar apenas para desenhar o layout no Fireworks.

    • É Luciano, o aproveitamento do 960 grid vai bem mais além do layout no Fireworks, que bom que ajudou. obrigado pelo seu comentário.

  4. André

    Excelente explicação. Parabéns.

    • Obrigado André, tudo o que eu tento passar é fruto da própria internet, Valew pelo seu comentário.

  5. Rodrigo

    Everton, muito obrigado por compartilhar seu conhecimento, o artigo ficou excelente. Em meus últimos projetos perdi muito tempo com questões relacionadas a alinhamento dos objetos, agora com esse recurso com certeza tudo ficará mais fácil. Abraços.

    • Olá Rodrigo! cara o 960 grid é uma mão na roda realmente, e torna nosso trabalho bem profissional. Que bom que ajudou abraço!

  6. iamik

    tirou minha duvidas.
    muito obrigado!

  7. Victor Kobbel

    Boa noite.
    Sei que estou quase 2 anos atrasado mas vou perguntar mesmo assim…kkkk

    Tudo que vejo a respeito de grid se resume apenas em dividir o site em blocos organizados, porém, e se eu quiser fazer com que um conjunto de 3 divs fiquem unidas na horizontal sem nenhuma margem entre elas seria possível?

    Caso não seja possível, creio que o grid acabe limitando a criatividade, caso o contrario ele estaria realmente sendo uma grande mão na roda

    -2
    • Olá Victor, É isso mesmo, o sistema grid foi feito para organizar o conteúdo e os espaços são feitos para deixar o conteúdo mais agradável. No caso se você quiser colocar 3 blocos sem os espaços você pode colocar os blocos normais e usar o background para igualar. Se os blocos forem de texto não ficaria legal tudo junto, se você precisar fazer isso por algum motivo use o bloco maior e faça as divs conforme sua necessidade.

Pin It on Pinterest

Shares

Compartilhe!

Mostre esse post para seus amigos.