Entender a grade de Blueprint

Como é a grade por colunas disponível em Blueprint e as primeiras classes para começar a posicionar nela os elementos.

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


Publicado em: 20/10/10
Valorize este artigo:
A parte mais importante deste framework CSS é a grade, que como já havíamos adiantado no Manual de Blueprint, permite situar os elementos da página de uma maneira precisa e simples. Neste artigo mostraremos como funciona esta grade e as principais classes para poder construir uma página web.

Blueprint propõe um container de 950 pixels de largura, dividido em 24 colunas. A coluna ocupa um espaço de 30 pixels, com uma separação de 10 pixels entre colunas.

Mediante estas dimensões, como dissemos, se podem conseguir 24 colunas em um desenho, mas nós podemos unir duas ou mais colunas para obter espaços maiores. Por exemplo, se desejamos que em nosso desenho haja duas colunas, podemos dividir as 24 disponíveis em 18 para o corpo e 6 para a barra de links lateral.

Duas colunas juntas medem 30 píxels cada uma, mais os 10 pixels de separação entre elas, no total 70 pixels. Se unimos 3 colunas teremos 30 pixels de cada coluna menos duas separações de 10, o que soma 110 pixels. Assim podemos conseguir containers de até 24 larguras diferentes. Em geral, a largura disponível ao juntar várias colunas pode ser calculada com a fórmula:

largura = (colunas_que_unimos * 40) - 10

Para que fique claro como se combinam colunas pode-se ver esta imagem, na que temos uma representação de dois containers, como no exemplo anterior, um para o corpo com 18 colunas e outro para a lateral, de 6 colunas.

Para gerar todas as colunas existem classes CSS que vão desde span-1 a span-24. Simplesmente se utiliza a palavra "span-" e o número de colunas que desejamos juntar.

span-1 (container com 30 pixels)
span-2 (container com 70 pixels)
span-3 (container com 110 pixels)
...
span-23 (container com 910 pixels)
span-24 (container com 950 pixels)

Para fazer uma estrutura de página, ou seja, definir os containers de nosso layout, podemos utilizar diversos containers span-x e ademais, podemos aninhar containers para produzir estruturas de página mais complexas.

Devemos perceber que em cada seção temos que completar as 24 colunas, ou seja, se dividimos o espaço da página em diversas seções, somando-as na largura total do documento, devemos ter sempre as 24 colunas de espaço utilizado.

Além disso, no container que complete até a coluna 24 temos que colocar também a classe "last".

Vejamos um exemplo de estrutura de página baseada em Blueprint.

<div class="container">
   <div class="span-24 last">
      Cabecalho
   </div>
   <div class="span-16">
      Corpo esquerda
   </div>
   <div class="span-8 last">
      Lateral direita
   </div>
   <div class="span-24 last">
      Rodape
   </div>
</div>

Nota: Lembremos que sempre há que se colocar um container principal, com class="container", tal como se explicou no artigo Começar a usar Blueprint.

Nesta estrutura teremos um cabeçalho que ocupará toda a largura disponível (com span-24), uma parte central que está dividida em duas colunas, uma para o corpo à esquerda (com span-16) e outra para a barra de navegação (com span-8) na lateral direita. A página terminará com um rodapé que também ocupa todo a largura disponível do container.

É importante ver que cada uma das seções (ou filas de conteúdos) termina com um container que tem a classe "last".

Com estas classes você poderá criar estruturas de página o mais complexas que deseje, embora o framework possua muitas outras coisas que ainda não vimos. Não obstante, com o que você sabe já poderá fazer bastantes coisas e tudo sairá bem desde que você respeite:

  • Colocar sempre a classe "last" na última coluna de cada fila.
  • Que a soma das colunas em cada fila seja sempre 24

Há que prestar atenção a que todas as partes da página possuem containers que ocupam as 24 colunas. No cabeçalho está claro porque usamos um span-24 que já são todas as colunas e na parte central da página temos 16 colunas do corpo + 8 colunas da lateral = 24 colunas. O pé de página também tem suas 24 colunas em um único container. No próximo artigo já veremos um exemplo de página completo que utiliza Blueprint.





Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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