Principais Classes CSS da grade Blueprint

Uma lista das classes do framework CSS Blueprint que servem para definir o layout de nossa página web, utilizando a grade.

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


Publicado em: 12/1/11
Valorize este artigo:
Ao longo dos últimos artigos do Manual de Blueprint já tivemos oportunidade de aprender a trabalhar com algumas classes principais do framework CSS para a configuração da grade, porém ainda faltam muitas outras classes que podemos usar para determinar outras coisas sobre o posicionamento dos containers na página.

A seguir, faremos uma revisão em todas as classes que podemos utilizar quando configuramos a grade, o que também nos dará uma visão mais ampla das possibilidades de maquetação implementadas em Blueprint.

Antes de nada, convém recordar que nunca é demais dar uma olhada no código fonte do framework comentado, que está no diretório blueprint/src do pacote de download, no arquivo "grid.css". Nesse arquivo CSS encontraremos comentários do código com diversas informações úteis e breves explicações dos usos das classes. Além disso, poderemos ver quais são os estilos CSS especificados pelo framework e aprender um pouco sobre como funciona.

Classes da grade (grid) em Blueprint

Classe container: a classe principal da estrutura de página de Blueprint. Tudo deve ser colocado dentro de um container principal, com a classe container.

Nota: utilizamos a classe container pela primeira vez no artigo Começar a usar Blueprint.

Classe showgrid: uma classe útil para identificar visualmente a grade de Blueprint. Podemos atribuí-la sobre containers com classe "container" ou "span-x", para mostrar com uma imagem de fundo a divisão de colunas implementada pelo framework CSS.

Classe span-x (de span-1 a span-24): Para fazer os containers que se colocam na grade, utilizamos um conjunto de classes que vai da span-1 à span-24. Estes containers são ancorados em uma das filas de conteúdo da grade e o número do 1 ao 24 indica a quantidade de colunas que ocupa. As classes span-x também podem ser aplicadas sobre elementos INPUT ou TEXTAREA, para atribuir a largura desses elementos de formulário.

Classe last: A classe CSS "last" se coloca no último container que haja em uma fila de conteúdos, para indicar justamente que é o último elemento dessa fila e que o seguinte comece sempre debaixo dessa fila de conteúdos e à esquerda.

Nota: Tanto as classes span-1, span-2, ..., span-24 como a classe "last" já foram explicadas detalhadamente no artigo Entendendo a grade de Blueprint.

Classes append-x (de append-1até append-23): estas classes servem para preencher com um espaço vazio depois do elemento. Imaginemos que temos um container com span-3 e em seguida queremos ter um espaço vazio de 6 colunas. Então podemos colocar nesse container as classes "span-3 append-6", com isso o espaço total que se reservará para esse container será de 3 + 6 = 9 colunas (três colunas de espaço real para inserir conteúdos e 6 colunas de espaço em branco depois do container).

Classes prepend-x (de prepend-1 a prepend-23): são classes parecidas a append-x, com a diferença de que o espaço em branco se coloca antes do container. Esta classe é utilizada em conjunto com as classes span-x, igual que append-x.

Classe border: cria uma margem na parte direita do container, de um píxel de largura.

Classe colborder: serve para criar um margem, igual à classe anterior border, mas feita deixando um maior espaço em branco entre a linha da margem e os conteúdos dos lados. O problema é que se utilizamos esta classe se expandirá o container em uma coluna adicional e teremos que levá-la em conta quando façamos a recontagem de 24 colunas por cada fila de conteúdos.

Nota: veremos muitas destas classes detidamente no exemplo a seguir.

Classes pull-x e push-x: que vão de pull-1 a pull-24 e de push-1 até push-24 e servem para empurrar ou trazer o conteúdo de uma coluna e situá-lo em um lugar diferente. Se utilizamos a classe pull-x transferimos o conteúdo desse container para a esquerda e em "x" colocamos o número de colunas que movemos. Por sua parte, se utilizamos as classes push-x o que estamos fazendo é empurrar o conteúdo para a direita e na x de 1 a 24 especificamos a quantidade de espaço que desejamos mover para a direita. O conteúdo se colocará em cima de outros conteúdos que possa haver no lugar para onde o estamos transferindo.

Classe prepend-top: Serve para deixar um espaço em branco sobre um container. O espaço em branco que deixa é igual a 1.5cm, ou seja, uma vez e meia o tamanho da fonte configurada no elemento.

Classe append-bottom: Serve para deixar espaço em branco debaixo de um container, igual ao prepend-top, mas deixando a margem na parte debaixo.

Classe box: para criar uma caixa com padding (espaço em branco entre a borda do elemento e o lugar onde começa o conteúdo. Pode-se utilizar esta classe para as camadas com conteúdo a serem colocadas em uma das colunas, ou seja, para um DIV que coloquemos aninhado dentro do DIV span-x para definir a coluna.

Estilo para etiqueta HR: Isto não é uma classe, mas sim o estilo dado em Blueprint às etiquetas HR. Serve para criar uma linha horizontal para separar colunas.

Classe space para elementos HR (hr.space): É uma linha de separação, porém em branco.

Classe clearfix: Esta classe é muito importante, já que nos resolve o problema dos fundos sobre camadas que têm conteúdos flutuantes, já que às vezes o fundo não ocupa todo o espaço da caixa. Para quem não souber a que me refiro, consultar o artigo Solução para o problema de float em maquetação CSS.

Classe clear: Para que a camada se coloque em uma nova fila, deixando livres os espaços dos elementos que possa haver flutuantes em filas anteriores. Esta classe implementa o clear:both que já devemos saber o que significa em CSS.

Para ilustrar o funcionamento de algumas destas classes, pelo menos as mais utilizadas, vamos criar, no próximo artigo, um exemplo mais avançado com Blueprint.





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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