960 Grid System
Introdução
O 960 Grid System foi criado por Nathan Smith, tratando-se de uma framework CSS.
Frameworks são estruturas de códigos pré-definidas, que permitem o desenvolvimento de projectos de software Web ou outros. Estas estruturas geralmente incluem programas de suporte, bibliotecas de código, linguagens de script ou qualquer outro tipo de software que funcionam como ferramentas auxiliares no desenvolvimento. O uso destas estruturas permite agilizar o trabalho dos designers e programadores e por essa razão vale a pena investir no seu conhecimento. Os frameworks CSS são constituídos por um conjunto de arquivos CSS, com código base para tipografia, estrutura e layout.
Existe ainda alguma polémica na utilização de frameworks, porque ainda existe o preconceito que estas limitam a criatividade, não temos essa opinião e, garantimos que a sua utilização permite poupar muito trabalho árduo. Por outro lado este sistema de grelha permite organizar de forma estética e eficaz o conteúdo, tarefa bem complicada sem o recurso a estas técnicas.
Objectivo Principal
O objectivo principal do sistema é fornecer uma grelha aonde possamos organizar o conteúdo. No caso do sistema 960, esta grelha encontra-se compreendida numa área de 960 pixéis de largura, daí o seu nome. O seu criador optou pela resolução de 960 pixéis, tendo em conta que é a mais usada actualmente pelos navegadores. O sistema 960 vem pré-configurado com 3 possibilidades de layout: 12, 16 ou 24 colunas. A figura seguinte apresenta, como exemplo, um layout de 12 colunas:
Como pode ser observado na figura, há 12 colunas cor rosa, com um espaço entre elas. No padrão 960, cada coluna possui 10px de margem tanto esquerda quanto direita, o que perfaz um espaço de 20px entre colunas. Cada coluna, neste layout, tem a largura de 60px. Assim:
• Largura total dos espaços 11x20px = 220px;
• Margens: Esquerda da 1ª coluna (10px) + Direita da 12ª coluna (10px) = 20px;
• Total: 720 + 220 + 20 = 960px ou 940px sem contar com os 20px das margens.
O sistema permite obter várias combinações. Cada grelha (grid) tem uma classe (class) que especifica a largura que irá ter:
• grid_2 140px
• grid_3 220px
• grid_4 300px
• grid_5 380px
• grid_6 460px
• grid_7 540px
• grid_8 620px
• grid_9 700px
• grid_10 780px
• grid_11 860px
• grid_12 940px
A largura pode ser obtida pela seguinte fórmula:
L = 80n -20, onde n é o número de colunas, ou seja, o grid. Para 1> = n <= 12
Para ficar mais claro o conceito, referimos como exemplo a terceira linha da figura, que considera duas larguras: uma de 540px
e outra de 380px (7 colunas e 5 colunas), ou seja, respectivamente o grid_7 e o grid_5.
Como começar
O primeiro passo para usar o 960 Grid System é fazer o seu download no site oficial: http://960.gs. Trata-se de um arquivo zipado que, ao ser descompactado, irá apresentar as seguintes pastas:
code - O importante são os ficheiros CSS;
templates – Ficheiros de imagens para quem quiser fazer mockups. A visão concreta de uma ideia antes de ser produzida, deve ser feita através do
desenvolvimento de modelos, mockups e protótipos. O sistema vem com templates específicos que permite o seu uso em diferentes editores gráficos, como por exemplo o Photoshop;
sketch_sheets – Ficheiros em formato PDF que podem ser imprimidos, para poder efectuar esboços desenhando directamente no papel ou noutro suporte;
licenses - Conteúdo legal da utilização do sistema;
app_plugins - Usados para adicionar funções a outros programas maiores, nomeadamente, neste caso, para gerar as grids do sistema 960, automaticamente, nos editores gráficos.
Copie os arquivos 960.css, reset.css e text.css para a pasta da sua aplicação. Em seguida, dentro da tag <head> da sua página, inclua o seguinte código:
<head><link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>
Importante: Tenha em atenção o caminho (Path) especificado. Referencie os arquivos CSS, de acordo com a localização correcta, dentro da sua aplicação.
Passando à prática
O 960 deverá ser aplicado num container. Deste modo, é necessário declarar uma <div> dentro da sua página que conterá todas as outras, sendo a sua sintaxe:
<div class="container_12">...
</div>
A classe container_12 interpreta que aquele elemento está adoptando uma grelha de 960px com 12 colunas. Se quisesse usar uma grelha com 16 colunas, bastaria usar a classe container_16.
Tendo em conta o layout da figura que é composto por:
• 2ª Linha 12 colunas (940px)
• 3ª Linha 7 colunas + 5 colunas (540px + 380px)
• 4ª Linha 12 colunas (940px)
• 5ª Linha 3 colunas + 3 colunas + 3 colunas + 3 colunas (220px + 220px + 220px + 220px)
• 6ª Linha 12 colunas (940px)
• 7ª Linha 4 colunas + 4 colunas + 4 colunas (300px + 300px + 300px)
Para obter este resultado, escreve-se o seguinte código:
...<div class="container_12">
<div class="grid_12"></div>
<div class="clear"></div>
<div class="grid_12"></div>
<div class="clear"> </div>
<div class="grid_7"></div>
<div class="grid_5"></div>
<div class="clear"></div>
<div class="grid_12"></div>
<div class="clear"></div>
<div class="grid_3"></div>
<div class="grid_3"></div>
<div class="grid_3"></div>
<div class="grid_3"></div>
<div class="clear"></div>
<div class="grid_12"></div>
<div class="clear"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
</div>
A classe grid (número de colunas) representa o número de colunas que o elemento deverá ocupar. Desta forma, na primeira e na segunda linha usamos a tag grid_12, pois pretendemos que toda a largura seja ocupada. Enquanto na terceira linha, como pretendemos dividir a largura em dois blocos, definimos para o primeiro elemento a tag grid_7 e grid_5 para o seguinte. A regra manteve-se pois cada linha deve possuir 12 colunas. No final de cada linha deve ser colocado um <div class="clear"></div>, atendendo a que cada coluna está definida com float: left
Os restantes recursos
Existem ainda as seguintes classes no 960 Grid System: alpha, omega, prefix e suffix, vamos então conhece-las melhor.
Class alpha e class omega
Estas duas classes utilizam-se quando estamos inserindo grids dentro de outros, para ajustar as margens dos diversos elementos inseridos. Como já referimos, as classes grid têm uma margem de 10px à esquerda e à direita. Por exemplo o grid_12 (que utiliza toda a largura do layout), na realidade tem 940px, sendo os 960px obtidos com os 10px da margem esquerda e direita. Se quiser que seu elemento ocupe a largura da margem esquerda, adicione a classe alfa. Se pretender utilizar a margem direita de um elemento inserido adicione a classe omega.
Class prefix
Esta classe serve para deslocar o conteúdo, deixando um espaço à esquerda. Por exemplo o prefix_5 faria que o espaço livre deixado à esquerda tivesse a largura de cinco colunas.
Como o nosso bloco de conteúdo ocupa sete colunas, ou seja, tem um grid_7 a sintaxe seria:
<div class="container_12"><div class="grid_7 prefix_5"></div>
<div class="clear"></div>
...
</div>
Class suffix
De forma similar à classe prefix, a classe suffix permite deixar um espaço livre à direita.
Notas finais
A pasta app_plugins vem com duas aplicações para o Photoshop e para o Fireworks da Macromedia, (actualmente também da Adobe), que ao serem instaladas permitem a geração automática da grelha do 960 Grid System. Para instalar o plugin no Photoshop copie o ficheiro 960_GRIDS.atn para [Photoshop Directory] > Presets > Actions abra a aplicação e em Actions escolha a grelha pretendida.
Se pretende um layout maior ou menor do que 960px, ou com um número diferente de colunas das 12, 16 ou 24 pré definidas pelo 960 System, então precisa de utilizar um sistema de grelhas variáveis. A SprySoft tem um gerador de grelhas online configuráveis. Nesta conformidade, poderá obter o layout, grátis, nesse site, de acordo com o pretendido.
Em artigos posteriores publicaremos casos práticos reais de desenvolvimento Web, com componentes gráficos complexos, mostrando as potencialidades do uso deste framework CSS.
Tal como referimos no inicio do artigo o 960 Grid System, permite organizar de forma estética e eficaz o conteúdo, tarefa bem complicada sem o recurso a esta técnica. Por outro lado, como teve decerto a oportunidade de verificar, a sintaxe da utilização das classes definidas no sistema é bastante acessível.