Primeiro exemplo de página com Blueprint

Podemos ver um primeiro exemplo de página desenvolvida com o framework CSS Blueprint.

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


Publicado em: 29/11/10
Valorize este artigo:
A maneira mais interessante de confirmar todos os conhecimentos adquiridos no Manual de Blueprint é ver um primeiro exemplo completo de página que usa este framework Javascript. Neste exemplo faremos uma estrutura de página onde aninhamos alguns containers e onde jogamos com colunas de diferentes larguras.

Por agora, só vamos utilizar um pequeno grupo de classes que aprendemos no artigo Entender a grade de Blueprint, mas ainda assim os resultados são bastante interessantes, mesmo com um código simples.

Como já conhecemos algumas coisas de Blueprint, podemos passar diretamente a ver este código fonte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<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">
   <div class="span-24 last">
      <h1>Testando Blueprint</h1>
   </div>
   <div class="span-18">
      <p>Corpo...</p>
      
      <div class="span-6">
         Destacado 1
      </div>
      <div class="span-6">
         Destacado 2
      </div>
      <div class="span-6 last">
         Destacado 3
      </div>
   </div>
   <div class="span-6 last">
      Lateral
   </div>
   <div class="span-24 last">
      Rodape...
   </div>
</div>


</body>
</html>

  • Em HEAD incluímos os arquivos com o CSS de blueprint
  • Em BODY começamos com um "container"
  • Colocamos um cabeçalho, uma fila com uma única coluna de span-24 e last
  • No corpo dividimos os espaços em duas colunas principais, de span-18 e span-6 (18+6=24).
  • No corpo, dentro do container de span-18, aninhamos três colunas de span-6 (como estamos em um span-18 temos espaço para 3 espaços de span-6). É importante perceber que o último span-6 tem também a classe "last", porque termina uma fila dentro do span-18.
  • O pé também é span-24 e last

Este exemplo pode ser visto em funcionamento em uma página à parte.

No entanto, sobre esta divisão em containers a verdade é que não se percebe muito bem se não colocamos algum texto neles. Para poder ver o exemplo de uma maneira mais clara, podemos acessar este segundo link no qual utilizamos a mesma estrutura e colocamos algum texto como conteúdo nos containers.

Espero que este exemplo sirva como mostra do fácil que é dividir a página em diferentes espaços, de modo a criar um layout adequado a nossas necessidades. As possibilidades de configuração da grade são ilimitadas.

Não obstante, cabe assinalar novamente que ainda nos faltam muitas outras classes por conhecer do framework CSS Blueprint que veremos nos artigos seguintes.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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