Manuais e recursos para desenvolvimento web www.criarweb.

com

Manual de Blueprint CSS

Autores do manual Este manual foi criado pelos seguintes colaboradores de Criarweb.com: Miguel Angel Alvarez Traduo de Celeste Veiga
(4 captulos)

Manual de Blueprint CSS: http://www.criarweb.com/blueprint-css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Blueprint, Framework CSS

Blueprint um complemento para desenvolvedores de webs que aumentar a produtividade nas tarefas de desenho e construo de pginas. Trata-se de uma srie de bibliotecas de Folhas de Estilo em Cascata que contm cdigo til para construir uma pgina web e aplicar outros tipos de estilos tipogrficos ou de impresso, algo que comumente conhecemos como Framework CSS. Este sistema oferece uma srie de arquivos com cdigo CSS que poderemos incluir nas pginas web para aplicar estilos de uma maneira rpida, e solucionar tambm muitos dos problemas de compatibilidade entre navegadores que podem surgir durante a etapa de construo. Existem diversos Framework CSS disponveis de maneira gratuita na Internet, criados por vrios desenvolvedores diferentes. Blueprint talvez o mais conhecido, ou pelo menos um dos mais populares e prova disso que foram criadas, inclusive, algumas variantes ou produtos derivados para ajustar Blueprint s diferentes necessidades dos desenvolvedores.

O que um Framework CSS

Talvez fosse bom definir o que se entende como framework CSS. Bem, simplesmente se trata de uma srie de declaraes de estilos definidos de forma standard para que sirvam como base para o desenho de todo tipo de webs. Dito de outra maneira, um pouco de cdigo CSS que se poderia considerar til para desenvolver qualquer tipo de web e que se coloca disposio para solucionar diversos problemas ou situaes, comuns no desenvolvimento de webs. Cada framework CSS, embora talvez devssemos cham-los simplesmente "Bibliotecas CSS", possui sua prpria filosofia hora de criar o cdigo para solucionar esses problemas. Algumas vezes as formas de atuar so similares e outras vezes diferentes, por isso o uso ou no dos frameworks CSS, bem como a escolha do mesmo uma deciso muito particular de cada programador ou desenvolvedor web. Existe, alm disso, uma discusso sobre se ou no conveniente o uso de Frameworks CSS, porm um assunto no qual no tocaremos neste artigo. Simplesmente queremos contar-lhes como funciona Blueprint e cada pessoa poder escolher us-lo ou no.

Caractersticas de Blueprint
O framework CSS Blueprint est criado sobre uma slida base de cdigo CSS que ajudar a desenvolver o desenho e a construo de websites. Entre as coisas que nos aporta podemos destacar: Uma grade, que nos permitir criar qualquer estrutura de pgina web. Bsicamente se trata de um conjunto de classes CSS para posicionar qualquer elemento em um espao de 950 pxeles de largura, dividido em 24 colunas. Uma definio de tipografia pr-determinada, de maneira precisa para todos os elementos da pgina que podem ter texto. Estilos para formulrios, com os que melhorar as interfaces de usurio. Estilos para impresso, com as definies CSS mais teis para que as pginas estejam bem legveis quando se imprimem no papel. Estilos especficos para IE, com os que resolver alguns dos problemas mais comuns de Internet Explorer.
2

Manual de Blueprint CSS: http://www.criarweb.com/blueprint-css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Com tudo isto adquirimos uma base para comear facilmente a fazer pginas web complexas e que sero mais compatveis em diferentes navegadores. Alm disso, Blueprint se completa com alguns plugins criados por terceiros que servem para fazer coisas mais avanadas ou diferentes. Por exemplo, h plugins para obter cones, para fazer pginas fluidas (que se adaptam largura da janela do navegador), etc. Para comear a usar Blueprint temos que acessar sua pgina web e baix-lo, atravs de sua pgina web: http://www.blueprintcss.org/ Nos artigos seguintes do Manual de Blueprint explicaremos tudo o que voc tem que conhecer para comear com p direito e tornar muito simples a adaptao ao framework CSS. Artigo por Miguel Angel Alvarez - Traduo de Celeste Veiga

Comear a usar Blueprint

No artigo anterior j oferecemos uma introduo a Blueprint e s suas caractersticas. Agora, queremos dar as explicaes necessrias para voc comear a utiliz-lo. Para minimizar na medida do possvel sua curva de aprendizagem e ajud-lo a tirar proveito do framework CSS desde o primeiro momento. Neste artigo veremos o que contm o arquivo para download de Blueprint e pedimos que olhem seus contedos. Em seguida, mostraremos o cdigo que temos que colocar na nossa web para incluir os arquivos CSS e comear a utilizar blueprint em uma pgina web.

Componentes do download de Blueprint

No download do framework CSS Blueprint encontraremos algo mais que o simples cdigo CSS que necessitamos para trabalhar. Saber o que tem o pacote de download e deterr-se a examin-lo um pouco pode ajudar a obter uma viso geral do produto e ser til durante sua aprendizagem. Diretrio Blueprint: Temos os arquivos do framework ie.css, print.css e screen.css. Esses trs arquivos so os que teremos que incluir e depois comentaremos para que serve cada um deles. Estes arquivos esto "comprimidos", ou seja, sem comentrios, saltos de linha e outras coisas para que ocupem pouco espao em Kb. Diretrio blueprint/src: So os arquivos fonte do framework, porm com o cdigo completo, com os comentrios e formato para que possam ser lidos comodamente. conveniente dar uma olhada nestes arquivos, posto que poderemos aprender muitas coisas, sobre como est feito e as classes criadas para serem utilizadas ao se construir as pginas. Possui os seguintes arquivos: reset.css: Cdigo para redefinir os estilos de todos os navegadores e torn-los compatveis entre si. typography.css: definio de tipografia por padro para a pgina web, que soluciona alguns problemas quando se trabalha com fontes grid.css: Este o arquivo mais importante, com as classes para gerar a grade, de modo que vale a pena prestar ateno a como est feita e que classes oferece.

Manual de Blueprint CSS: http://www.criarweb.com/blueprint-css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

forms.css: Cdigo para estilizar formulrios e mensagens ao usurio. ie.css: com estilos prprios para Internet Explorer print.css: Os estilos que se utilizaro quando se imprima a pgina em papel.

Insisto em que boa ideia abrir esses arquivos e dar uma olhada no cdigo, nos comentrios e assim irmos formando uma ideia de como de como funciona o framework. Diretrio blueprint/plugins: Uma srie de plugins que funcionam sobre blueprint para diferentes casos de uso. Mais adiante falaremos sobre plugins. Diretrio lib: Com alguns scripts na linguagem de programao Ruby para trabalhar com Blueprint. Diretrio templates: Layouts para comear a desenhar em um editor grfico, com guias para se ajustar ao espao por colunas definido na grade. At o momento de escrever este artigo s estava disponvel o layout de Photoshop (arquivo PSD) com a grade de Blueprint. Diretrio test: Contm exemplos de pginas criadas para testar as caractersticas e possibilidades de Blueprint. Tambm muito interessante, j que uma maneira interessante de ver como desenvolver a estrutura de pgina de Blueprint.

Incluir os arquivos de Blueprint na pgina

O primeiro passo para comear a usar Blueprint em uma pgina web incluir os arquivos CSS com o cdigo comprimido do framework. Isto tem que ser feito com a conhecida etiqueta LINK, conectada com as folhas de estilo.
<link href="css/blueprint/screen.css" type="text/css" rel="stylesheet" media="screen, projection"> <link href="css/blueprint/print.css" type="text/css" rel="stylesheet" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><! [endif]-->

O primeiro arquivo screen.css contm todos os estilos que se aplicam quando a pgina visualizada em uma tela. Como se pode ver, isso se indica na etiqueta LINK no atributo media="screen, projection". Nesse arquivo est a maioria do cdigo do framework, combinando vrios dos arquivos de estilos CSS que existem nos arquivos fonte (sem comprimir) que comentamos antes. O segundo arquivo includo contm o cdigo da verso para imprimir da pgina web, com os estilos do framework que facilitaro a leitura das webs quando impressas. Podemos, alm disso, editar este arquivo para que no se visualizem elementos desnecessrios na impresso, por exemplo com cdigo como este:
#cabecalho{display: none;} #navegador{display: none;}

O ltimo arquivo includo o ie.css, que ademais se inserta dentro de um comentrio, para que s seja visvel na famlia de navegadores de Internet Explorer. Contm, como podemos imaginar, cdigo CSS para solucionar algumas diferenas de interpretao dos estilos nos navegadores de Microsoft. Para incluir Blueprint no cdigo HTML anterior s temos que nos assegurar de que o caminho no atributo src est dirigido ao lugar onde salvamos os arquivos correspondentes do framework.

Manual de Blueprint CSS: http://www.criarweb.com/blueprint-css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Container principal da pgina Blueprint

Vejamos agora uma pgina bsica que usa Blueprint. Para isso, o primeiro que devemos saber que todo o cdigo HTML de nossa pgina deve ser colocado em um container.
<div class="container"> <p>Contedo da pgina</p> </div>

Como vemos, para o container principal usamos a classe "container". Dentro do DIV "container" colocaremos outros containers, com etiquetas DIV s que pomos outras classes do framework, mas isto no prximo artigo no qual explicaremos a grade de Blueprint. Artigo por Miguel Angel Alvarez - Traduo de Celeste Veiga

Entender a grade de Blueprint

A parte mais importante deste framework CSS a grade, que como j havamos adiantado no Manual de Blueprint, permite situar os elementos da pgina de uma maneira precisa e simples. Neste artigo mostraremos como funciona esta grade e as principais classes para poder construir uma pgina web. Blueprint prope um container de 950 pixels de largura, dividido em 24 colunas. A coluna ocupa um espao de 30 pixels, com uma separao de 10 pixels entre colunas.

Mediante estas dimenses, como dissemos, se podem conseguir 24 colunas em um desenho, mas ns podemos unir duas ou mais colunas para obter espaos maiores. Por exemplo, se desejamos que em nosso desenho haja duas colunas, podemos dividir as 24 disponveis em 18 para o corpo e 6 para a barra de links lateral. Duas colunas juntas medem 30 pxels cada uma, mais os 10 pixels de separao entre elas, no total 70 pixels. Se unimos 3 colunas teremos 30 pixels de cada coluna menos duas separaes de 10, o que soma 110 pixels. Assim podemos conseguir containers de at 24 larguras diferentes. Em geral, a largura disponvel ao juntar vrias colunas pode ser calculada com a frmula:
largura = (colunas_que_unimos * 40) - 10

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

Manual de Blueprint CSS: http://www.criarweb.com/blueprint-css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Para gerar todas as colunas existem classes CSS que vo desde span-1 a span-24. Simplesmente se utiliza a palavra "span-" e o nmero 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 pgina, ou seja, definir os containers de nosso layout, podemos utilizar diversos containers span-x e ademais, podemos aninhar containers para produzir estruturas de pgina mais complexas. Devemos perceber que em cada seo temos que completar as 24 colunas, ou seja, se dividimos o espao da pgina em diversas sees, somando-as na largura total do documento, devemos ter sempre as 24 colunas de espao utilizado. Alm disso, no container que complete at a coluna 24 temos que colocar tambm a classe "last". Vejamos um exemplo de estrutura de pgina 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 Comear a usar Blueprint.

Nesta estrutura teremos um cabealho que ocupar toda a largura disponvel (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 navegao (com span-8) na lateral direita. A pgina terminar com um rodap que tambm ocupa todo a largura disponvel do container. importante ver que cada uma das sees (ou filas de contedos) termina com um container que tem a classe "last". Com estas classes voc poder criar estruturas de pgina o mais complexas que deseje, embora o framework possua muitas outras coisas que ainda no vimos. No 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 ateno a que todas as partes da pgina possuem containers que ocupam as 24 colunas. No cabealho est claro porque usamos um span-24 que j so todas as colunas e na parte central da pgina temos 16 colunas do corpo + 8 colunas da lateral = 24 colunas. O p de pgina tambm tem suas 24 colunas em um nico container. No prximo artigo j
Manual de Blueprint CSS: http://www.criarweb.com/blueprint-css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 6

Manuais e recursos para desenvolvimento web www.criarweb.com

veremos um exemplo de pgina completo que utiliza Blueprint. Artigo por Miguel Angel Alvarez - Traduo de Celeste Veiga

Primeiro exemplo de pgina com Blueprint

A maneira mais interessante de confirmar todos os conhecimentos adquiridos no Manual de Blueprint ver um primeiro exemplo completo de pgina que usa este framework Javascript. Neste exemplo faremos uma estrutura de pgina 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 so bastante interessantes, mesmo com um cdigo simples. Como j conhecemos algumas coisas de Blueprint, podemos passar diretamente a ver este cdigo 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>

Manual de Blueprint CSS: http://www.criarweb.com/blueprint-css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Em HEAD inclumos os arquivos com o CSS de blueprint Em BODY comeamos com um "container" Colocamos um cabealho, uma fila com uma nica coluna de span-24 e last No corpo dividimos os espaos em duas colunas principais, de span-18 e span-6 (18+6=24). No corpo, dentro do container de span-18, aninhamos trs colunas de span-6 (como estamos em um span-18 temos espao para 3 espaos de span-6). importante perceber que o ltimo span-6 tem tambm a classe "last", porque termina uma fila dentro do span-18. O p tambm span-24 e last

Este exemplo pode ser visto em funcionamento em uma pgina parte. No entanto, sobre esta diviso em containers a verdade que no se percebe muito bem se no 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 contedo nos containers. Espero que este exemplo sirva como mostra do fcil que dividir a pgina em diferentes espaos, de modo a criar um layout adequado a nossas necessidades. As possibilidades de configurao da grade so ilimitadas. No obstante, cabe assinalar novamente que ainda nos faltam muitas outras classes por conhecer do framework CSS Blueprint que veremos nos artigos seguintes. Artigo por Miguel Angel Alvarez - Traduo de Celeste Veiga

Manual de Blueprint CSS: http://www.criarweb.com/blueprint-css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.