As classes CSS que definem este framework CSS são bastante simples de entender e de utilizar nos nossos desenhos. Ademais, dado que são realmente poucas, não teremos problemas em dominá-las todas e utilizá-las com desenvoltura. Neste artigo queremos dar algumas explicações detalhadas sobre as diferentes classes que incorpora 960 Grid System, para que possamos utilizar o framework sem problemas e possamos entender também os próximos artigos, nos quais veremos um exemplo de desenho.

Nos capítulos anteriores publicados em CriarWeb.com no Manual de 960 Grid System, já explicamos o que é um framework CSS e demos umas primeiras notas sobre ele, que incluíam a descrição das classes mais importantes como container_xx e grid_xx. Convinha, sem dúvida, ler desde o princípio este manual, mas de qualquer forma vamos explicar todas as classes disponíveis para poder oferecer uma documentação completa.

Class container_xx:
Esta classe serve para definir um container, onde colocaremos mais tarde todos os conteúdos de nosso desenho. Existem dois tipos de containers, de 12 e 16 colunas, formadas com as classes container_12 e container_16.

Class grid_xx:
A classe grid_xx define um elemento do desenho que será colocado em um container e ajustado à grade que forma 960 Grid System. O valor "xx", de grid_xx, expressa o tamanho da grade que está sendo definida. Para um número maior, mais largura se dedicará a este elemento. Nos desenhos com o container_12 temos doze colunas e com grid_xx conseguiremos também doze diferentes larguras de colunas. Por exemplo, com grid_1 se obterá um elemento com uma largura igual a um doze avos do espaço total da página, com grid_8, obteríamos um elemento de largura igual a 8 doze avos do espaço e assim.. No caso do container_16 teríamos até 16 tipos de elementos com distintas larguras, desde grid_1 até grid_16.

Estas são as classes principais, que já explicamos com maior detalhe no artigo O básico sobre o uso de 960 grid

Agora vejamos outras classes que certamente também nos ajudarão e que teremos que saber utilizar para implementar desenhos medianamente avançados com o framework CSS.

Class alpha e class omega:
Estas duas classes servem quando estamos aninhando uns grid dentro de outros, para ajustar as margens dos diferentes elementos aninhados. Como devemos saber, porque se comentou no primeiro artigo deste manual, as classes grid_xx têm uma margem de 10 pixels à esquerda e à direita. Por exemplo, grid_12 que utiliza toda a largura da página, na realidade tem 940 pixels, que é o resultado de a 960 sobrarem 10 píxels de margem à esquerda e outros 10 à direita. Se inserirmos uns grid_xx dentro de outros, as margens dos grid_xx aninhados vão se incrementando e isto faria com que os espaços disponíveis não fossem suficientes para conter todos os elementos. Com as classes alpha e omega podemos solucioná-lo. Talvez consiga explicá-lo melhor com uma imagem.

Na imagem anterior vemos 4 camadas, às que colocamos uma cor de fundo para saber onde estão. A primeira, acima de tudo com fundo rosa é o cabeçalho, que não nos interessa muito para a explicação, mas é bom vê-la para termos uma ideia dos espaços. Depois, temos a Camada1, de cor azul, que contém a Camada2, com cor verde, que por sua vez contém a Camada3, com cor de fundo cinza. Talvez na minha maquetação desejasse que a Camada3 estivesse alinhada na vertical com a camada de cabeçalho, mas realmente devido às margens das camadas 2 e 3, se deixa ver um espaço vazio que têm os fundos das camadas que estão por debaixo da Camada 3.

Seguramente estes espaços vazios não nos incomodarão só esteticamente, mas também porque poderia ocorrer que as diferentes grid que colocamos no desenho não tenham o espaço suficiente para serem posicionadas corretamente. Ao perder 10 + 10 pixels por causa dessas margens, pode ser que não caibam todas as caixas colocadas no desenho com as classes grid_xx.

Enfim, para solucionar este problema, devem ser colocadas as classes alpha e omega. A classe alpha serve para eliminar a margem de 10 pixels à esquerda e a classe omega para eliminar a margem de 10 pixels da direita. Devemos utilizar estas duas classes sempre que tenhamos um grid_xx que tenha por sua vez outros grid_xx aninhados. O primeiro grid_xx filho deveria ter também a classe alpha e o que coloquemos como último deve ter também a classe omega.

Class prefix_xx:
Esta classe serve para ancorar uma grid_xx deixando um espaço vazio à esquerda. Por exemplo, prefix_1 faria com que a grid tivesse o espaço livre da largura de 1 coluna à esquerda. Isto nos serve no momento que queiramos deixar um espaço antes de inserir uma camada com grid_xx que não queremos que comece à esquerda completamente. Vejamos esta imagem:

Observamos o espaço vazio à esquerda da camada que aparece abaixo com fundo branco e borda cinza. Esse espaço vazio foi conseguido inserindo a classe prefix_5 na camada. Agora, este espaço vazio também se conta como espaço da camada, o que veremos melhor se colocamos uma cor de fundo à camada sobre a que aplicamos o prefix_5, como aparece nesta imagem:

Esta camada que vimos na imagem tem definidas as classes grid_7, porque a área onde colocaremos os conteúdos só ocupa o espaço de 7 colunas, e prefix_5, para que deixe 5 colunas de espaço vazio à esquerda, antes de colocar os conteúdos. (No meu desenho com container_12, chego às 12 colunas entre a largura do elemento grid_7 e o espaço vazio que coloquei com prefix_5)

Class suffix_xx:
De uma maneira similar a prefix_xx, a clase sufix_xx serve para colocar um espaço vazio à direita da camada. A camada terá uma largura definida com a classe grid_xx e depois com suffix_xx poderemos fazer com que tenha espaço adicional vazio à direita. Veremos melhor com uma imagem.

Na imagem anterior podemos ver como o conteúdo da camada de fundo rosa se coloca deixando um espaço vazio à direita. Ao definir a camada colocamos uma classe grid_8, para uma largura de 8 colunas e em seguida uma classe suffix_1, para um espaço em branco à direita de 1 coluna. Na prática, o espaço total que estou ocupando é de 9 colunas (8 por definir grid_8 mas 1 por definir suffix_1), depois a camada seguinte, onde coloquei a palavra "buscador" tal como se vê na imagem, terá uma largura de 3 colunas. Isto para meu desenho de container_12, que estará ocupando a largura completa, somando o grid_8 + suffix 1 da primeira camada, mais a grid_3 da segunda.

Agora você já conhece todas as class CSS do framework 960 Grid

Com isto já vimos todas as diferentes classes CSS que possui o 960 Grid System. Esperamos que tenham podido entendê-las bem e que agora não resulte difícil aplicá-las para atingir seus objetivos de desenho. Não obstante, no artigo seguinte veremos um exemplo de maquetação CSS no qual utilizaremos todos os tipos de class CSS disponíveis. Ainda será um exemplo simplificado, mas suficiente para que possamos ver as aplicações práticas de tudo que foi aprendido até agora.