Exemplo de uso das classes da grade de Blueprint

Um layout criado através da framework CSS Blueprint, com exemplos de uso das classes mais importantes da grade de Blueprint.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 07/2/11
Valorize este artigo:
Ao longo do Manual de Blueprint já explicamos as classes CSS para desenhar uma web adaptando a posição dos elementos à grade que nos oferece este framework CSS. Em concreto, no artigo anterior vimos as classes que Blueprint coloca à nossa disposição para maquetar a página web . Assim, no presente texto vamos criar um segundo exemplo de maquetação utilizando as classes do grid de Blueprint, ou pelo menos a maioria delas e as que são mais utilizadas.

Neste exemplo vamos criar um modelo de página com três colunas, com aninhamento de vários containers. Além disso, vamos usar algumas das classes que ainda não praticamos, para deixar espaços em branco entre container, quer sejam colunas vazias ou margem de cima e de baixo das filas. Primeiro, apresentaremos a estrutura básica deste segundo layout de exemplo e depois mostraremos o mesmo exercício colocando, porém, um pouco de texto nos containers e alguma cor de fundo para diferenciá-los bem.

Neste exemplo teremos um cabeçalho (dividido em duas colunas e com um espaço em branco no meio), um corpo (dividido em outras duas colunas, mas que tem diversos elementos aninhados para gerar outras colunas dentro deles) e um pé de página, com uma única coluna. Vejamos o código HTML completo do exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="pt">
<head>
<title>Exemplo de Blueprint</title>
   <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
   <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">   
   <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

</head>
<body>

<div class="container showgrid">
   <div class="span-24 last append-bottom">
      <div class="span-10 append-6">
         Logotipo!!
      </div>
      <div class="span-7 append-1 last">
         Links para inscrição
      </div>
   </div>
   <div class="span-18">
      <div class="span-6">
         Navegador
      </div>
      <div class="span-12 last">
         Corpo...
         <div class="span-2">
            2 primeiras
         </div>
         <div class="span-6 prepend-4 last">
            Metade direita do corpo...
         </div>
      </div>   
   </div>
   <div class="span-6 last">
      Lateral
   </div>
   <div class="span-24 last prepend-top">
      Rodape...
   </div>
</div>


</body>
</html>

Agora farei alguns comentários acerca do código anterior:

  • O container principal tem as classes "container showgrid". A classe "container" é obrigatória para o container e a classe "showgrid" a utilizo para marcar como fundo do desenho a divisão nas 24 colunas que nos proporciona Blueprint.
  • O cabeçalho tem uma fila com uma coluna com as classes "span-24 last append-bottom". A classe append-bottom, que não tínhamos utilizado ainda, serve para gerar uma margem debaixo do cabeçalho.
  • Dentro dessa coluna para o cabeçalho, por sua vez, temos outro par de colunas. Uma para o logotipo e outra para os links de inscrição. Além disso, utilizamos as classes append-6 e append-1 para gerar espaços em branco. Se prestarmos atenção os tamanhos dos containers do cabeçalho somam 24 colunas. O logotipo tem "span-10 append-6", o que soma um total de 16 colunas. A outra camada do cabeçalho tem "span-7 append-1 last", o que soma um total de 8 colunas. 16 + 8 = 24 colunas em todo o cabeçalho.
  • A área central da página tem uma divisão de 18 e 6 colunas. A parte de 18 em seguida se divide também em outras colunas, uma de 6 e outra de 12. No total, o efeito faz com que o corpo pareça ter 3 colunas, mas na realidade são duas e com divisões aninhadas para gerar outras colunas.
  • Na área da coluna de 12 que há no corpo, aninhamos vários containers. Dado que agora estamos dentro de um span-12, temos que preencher essas 12 colunas para completar uma fila, em vez das 24 normais de toda a largura de página. As camadas que colocamos dentro deste container de 12 são duas: uma camada que tem espaço de 2 e outra camada de espaço 6, mas deixando um espaço em branco entre elas de outras 4 colunas, com "prepend-4" na camada de 6 colunas de largura . Entre todas somamos 2 de espaço da primeira divisão, 4 de espaço em branco e finalmente 6 do último container. Faz um total de 12 de largura e está inserida em um container de 12 de largura, portanto ocupa o espaço total disponível e temos que atribuir também a classe "last" ao container de span-6, por ser o último do espaço disponível.
  • No pé, para deixar uma margem acima, colocamos a classe "prepend-top".

O importante neste exemplo é ver como se organizam os espaços e como todas as filas sempre têm containers cujas larguras somadas são iguais aos espaços disponíveis (24 colunas). Se não for assim, devemos sempre preencher os "vazios" com espaços em branco (que conseguimos com as classes "prepend-x" ou "append-x"). Espero que o exemplo também sirva para ver como se pode maquetar com Blueprint e aninhar containers para obter qualquer tipo de layout.

Para os interessados, deixamos um link para o exemplo em funcionamento.

Agora, para melhorar o exemplo anterior, ou melhor dito, para que se veja melhor o resultado obtido com esta estrutura de containers, vamos encher de texto as diferentes camadas e atribuir-lhes uma cor de fundo para que se possam identificar visualmente.

Podemos ver em uma página à parte o exemplo com textos e cor.

Nota: Animo vocês a darem uma olhada no código fonte do segundo exemplo, com camadas que possuem textos e cores, para ver uma possível utilização dos containers e a aplicação de estilos CSS adicionais aos elementos.

No artigo seguinte continuaremos trazendo algumas recomendações a serem seguidas à hora de desenhar ou construir páginas com Blueprint.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato