Vamos realizar uma série de artigos sobre a maquetação de páginas web com 960 Grid System, que nos permitirá implementar nossos desenhos de webs mais facilmente. 960 Grid System é um framework CSS, que não é mais que uma declaração de estilos que dispõe as classes necessárias para implementar colunas em uma página web, de diversos tamanhos, com as que maquetar nossos conteúdos fácil e ordenadamente.

Nós mesmos poderíamos fazer um sistema próprio para maquetar uma página com diversas colunas, como vimos em diversos artigos da Oficina de CSS, mas utilizando um framework como 960 Grid já teremos a maior parte do trabalho realizado, pois somente teremos que colocar em cada container de elementos as classes disponíveis no sistema, para que tenha a largura e a posição desejadas.

Utilizar um framework CSS não aporta nenhuma criatividade para realizar um desenho bonito, mas nos permite ancorar conteúdos na página de uma maneira simples. Nós, portanto, seremos os que nos encarregaremos de desenhar uma página web que tenha um aspecto agradável, porém poderemos partir de uma estrutura em colunas, onde restringir os espaços para que tudo fique bem colocado. Com a prática vocês vão notar que, saber de antemão os espaços disponíveis para as colunas do desenho de nossa web, resulta bastante útil à hora de desenhar com algum programa como Photoshop.

960 Grid System leva este nome porque é um sistema de grade para fazer páginas com 960 pixels de largura. As colunas que poderemos colocar na grade terão distintas larguras, mas a largura total da página será sempre de 960 pixels. Escolheu-se este valor porque 960 é divisível por uma boa quantidade de números, o que o torna mais versátil para poder alcançar páginas resultantes da mais variada gama.

Na própria página de início de 960 Grid System se pode acessar o download do Framework e algumas explicações sobre seu uso, bem como exemplos de páginas que o utilizam para a maquetação CSS e um demo interessante para poder ver o tipo de colunas que podem ser obtidas, suas larguras, etc.

http://960.gs

Variantes de 960 Grid

O próprio framework dispõe de duas variantes diferentes, para fazer páginas utilizando 12 ou 16 colunas. Não é que necessitemos utilizar todas as colunas disponíveis para realizar a maquetação, mas é que a grade terá essas divisões verticais onde podemos situar os elementos. A variante de 12 colunas dá menos possibilidades para repartir os espaços, mas em muitos dos casos será mais que suficiente para criar qualquer estrutura de página. A variante de 16 colunas, dá uma gama maior de possíveis larguras para as colunas, que pode ser necessária em desenhos com um nível de detalhe mais alto.

Em ambas as variantes as colunas obtidas têm uma margem de cada lado de 10 pixels, de modo que se colocarmos duas colunas, uma ao lado de outra, entre as margens das duas simultaneamente, obteremos uma separação de 20 pixels entre elas.

Larguras possíveis com a variante de 12 colunas

Com a primeira das variantes de 960 Grid podemos fazer divisões em até 12 colunas distintas. Tendo em conta as margens à esquerda e à direita das colunas, as larguras das que dispomos serão as seguintes:

1: 60px
2: 140px
3: 220px
4: 300px
5: 380px
6: 460px
7: 540px
8: 620px
9: 700px
10: 780px
11: 860px
12: 940px

Qualquer coluna terá que ter um destes tamanhos disponíveis. Em uma seção podemos colocar várias colunas de diversos tamanhos, sempre tendo em conta que a largura máxima disponível será de 96 pixels, menos as margens.

Por exemplo, para um desenho a 3 colunas, uma combinação de larguras poderia ser de 140px, 460px y 300px.

Larguras possíveis com a variante de 16 colunas

Utilizando a variante de 16 colunas temos 16 possíveis larguras de elementos da página, o que pode aumentar as possibilidades de escolha. As diferentes larguras com as que poderíamos trabalhar são as seguintes:

1: 40px
2: 100px
3: 160px
4: 220px
5: 280px
6: 340px
7: 400px
8: 460px
9: 520px
10: 580px
11: 640px
12: 700px
13: 760px
14: 820px
15: 880px
16: 940px

Assim, com este sistema poderíamos maquetar até 16 colunas de 40 pixels cada uma, ou qualquer combinação que desejemos, sempre que a largura mais as margens dos elementos seja de 960 pixels.

Nos arquivos para download do framework encontraremos um demo que nos pode dar uma ideia exata dos tamanhos das caixas e as possibilidades de maquetação. Também podemos ver o demo na URL: http://960.gs/demo.html

Resumindo, com 960 Grid temos bastante versatilidade para fazer nossas maquetações. Ainda falta explicar como utilizar o framework, que deixaremos para próximos artigos, mas pelo menos podemos fazer uma ideia das suas possibilidades.