O exemplo aqui não tem outro objetivo a não ser entender as classes disponíveis no framework CSS e praticar com elas. Para tanto, não nos preocupamos com o desenho, só com a maquetação em filas e colunas. Assim, vamos nos concentrar no verdadeiro valor desta prática e não em seu aspecto estético, que devemos aceitar é bastante feio. No futuro vamos realizar um desenho passo a passo, com bastante mais criatividade e componente gráfico, para que vejamos como maquetar um caso mais complexo e com mais elementos.
Seria bom dar uma olhada na página com o exemplo que vamos explicar neste artigo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Isso se estivermos utilizando XHTML transicional, mas poderíamos utilizar XHTML estrito, com este outro doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<link rel="STYLESHEET" type="text/css" href="code/css/960.css">
<link rel="STYLESHEET" type="text/css" href="code/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="code/css/text.css">
Vamos criando esta estrutura por partes, começando pelo cabeçalho. Porém, antes quero insistir em que este exemplo nos serve simplesmente para aprender a manipulação das classes do framework, incorporando exemplos de uso de todos os tipos de classes disponíveis, embora às vezes não tenha muito sentido ter feito as coisas tal qual aparecem.
Coloquei em todas as camadas do desenho um identificador (atributo id), para depois poder aplicar estilos com CSS.
Para que se veja a estrutura de conteúdos que vamos ter, mostro uma imagem onde está a maquetação da página, onde cada camada foi colocada com uma cor diferente e onde no texto da camada colocamos o identificador (atributo id) dessa camada.
<div class="container_12">
...
</div>
Agora colocamos os conteúdos no container, começando pelo cabeçalho da página, que tem duas camadas, uma com um texto à esquerda e outra com outro texto à direita. A camada da esquerda (id=cabeçalho) tem uma largura de 8 colunas e um espaço vazio à direita de 1 coluna. Para definir a largura colocamos a class CSS grid_8 e para definir o espaço em branco à direita, de uma coluna de largura, se coloca a classe suffix_1.
<div id="cabeçalho" class="grid_8 suffix_1">
...
</div>
<div id="buscador" class="grid_3">
...
</div>
A seguir do cabeçalho, como vimos no código anterior, colocamos o DIV com id "buscador", que tem uma largura de três colunas.
No total, nesta fila onde aparece o cabeçalho e o buscador, utilizamos 8 espaços no cabeçalho por grid_8 e 1 de espaço no vazio à direita do cabeçalho com suffix_1. Em seguida, colocamos o buscador, ocupando um espaço de 3 colunas. No total 8 + 1 + 3 = 12, que é o total de espaço que temos disponível em um container_12.
Para continuar vamos colocar um DIV com a class "clear". Isto tem que ser feito logo depois de cada uma das filas do desenho e a razão é que as classes grid_xx têm um float left e com este clear se consegue romper este estilo, de modo que a fila seguinte comece da esquerda.
<div class="clear"></div>
Na parte seguinte do desenho temos duas colunas principais. Na primeira coluna temos, por sua vez, outras três colunas aninhadas. Fazemos isso assim de propósito para colocar em funcionamentoo as classes alpha e omega explicadas no artigo anterior.
Como havíamos explicado, para gerenciar as margens das distintas camadas grid_xx, quando estão aninhadas como neste caso, temos que colocar a classe alpha na primeira camada aninhada e a classe omega na última camada aninhada.
Assim, teremos uma camada com id "esq", com espaço de 9 colunas e dentro desta, outras três camadas aninhadas com espaços de 4, 3 e 2 colunas, onde teremos que utilizar as classes omega e alpha comentadas antes. Depois destas três colunas aninhadas teremos que colocar um DIV com class="clear", para que possamos seguir inserindo conteúdos dentro da camada id "esq", que apareçam depois das três colunas aninhadas.
<div class="grid_9" id="esq">
<div class="grid_4 alpha" id="esq1">
...
</div>
<div class="grid_3" id="esq2">
...
</div>
<div class="grid_2 omega" id="esq3">
...
</div>
<div class="clear"></div>
...
</div>
<div class="grid_3" id="dir">
...
</div>
<div class="clear"></div>
Depois da camada de 9 colunas de largura com id "esq", colocamos para completar o espaço uma camada lateral da largura de 3 colunas. Entre todas as camadas desta fila temos então, uma de 9 colunas à esquerda e outra de 3 colunas à direita, que faz um total de 12 colunas de largura.
Como vimos no código anterior, depois desta fila colocamos outro DIV com class="clear", para poder começar a coluna seguinte desde o princípio.
Para terminar temos o pé de página. O pé foi feito com uma única camada de 7 colunas de largura, com a particularidade de que deixamos um espaço vazio à esquerda de 5 colunas, que se consegue com a classe prefix_5. No total, temos 7 colunas de espaço + 5 colunas vazias = 12 colunas do container_12.
Isto é obtido com o seguinte código:
<div class="prefix_5 grid_7" id="pé">
pé
</div>
Acabamos com um novo DIV class="clear", para colocar antes do fechamento do corpo da página.
Para que se visualize mais facilmente o esquema criado para fazer a estrutura de filas e colunas deste exemplo, coloco a continuação o código completo do corpo desta página:
<div class="container_12">
<div id="cabeçalho" class="grid_8 suffix_1">
<p>Cabeçalho</p>
</div>
<div id="buscador" class="grid_3">
<p>Buscador</p>
</div>
<div class="clear"></div>
<div class="grid_9" id="esq">
<div class="grid_4 alpha" id="esq1">
<p>izq1</p>
</div>
<div class="grid_3" id="esq2">
<p>izq2</p>
</div>
<div class="grid_2 omega" id="esq3">
<p>izq3</p>
</div>
<div class="clear"></div>
<p>
Conteudo da camada esq, que aparecerá debaixo das 3 colunas aninhadas.
</p>
</div>
<div class="grid_3" id="dir">
<p>der</p>
</div>
<div class="clear"></div>
<div class="prefix_5 grid_7" id="pé">
<p>pé</p>
</div>
<div class="clear"></div>
</div>
Poderíamos ver em uma página à parte o resultado obtido, uma vez colocado algo de texto dentro das camadas.
Para conseguir as cores de fundo e as bordas nas camadas, aplicamos estilos CSS através dos identificadores (atributo id) configurados nas distintas camadas e aplicando estilos à etiqueta P, como se pode ver a continuação.
<style type="text/css">
p{
border: 1px solid #999;
padding: 5px;
margin: 0px;
}
#cabeçalho{
background-color: #ffcccc;
}
#buscador{
background-color: #ccffcc;
}
#esq{
background-color: #e0e0ff;
}
#esq1{
background-color: #ccccff;
}
#esq2{
background-color: #9999ff;
}
#esq3{
background-color: #6666ff;
}
#dir{
background-color: #dididi;
}
#pé{
background-color: #ff8800;
}
</style>
Com isto já vimos um primeiro exemplo completo de maquetação CSS a través do framework 960 Grid System. Nos artigos seguintes que publicaremos em Criarweb .com vamos realizar um exemplo de maquetação mais complexo e com maior componente gráfico, para que se veja um caso prático real de uso deste framework CSS.
