Blueprint

Quando se constrói alguns sítios com HTML e CSS descobre-se que existem um conjunto de problemas semelhantes que temos que resolver em cada um deles. Entre estes problemas encontram-se: limpar os valores por omissão para uma série de propriedades dos vários navegadores de modo a podermos começar com uma página limpa; estabelecer a maqueta e a grelha base a que a nossa maqueta se vai conformar; criar valores de propriedades por omissão adequados para os tamanhos dos tipos, alinhamentos e espacejamento. E ainda mais algumas coisas. Seria realmente útil ter algo para fazermos isto à partida de modo a podermos fazer aquilo que os designers gostam.

Olav Bjorkoy pegou nesta ideia e tratou de a incorporar na infraestrutura BlueprintCSS, uma infraestrutura CSS, disponível publicamente que tenta alcançar estes objectos. Após o seu lançamento esta infraestrutura tem vindo a evoluir, criando extensões e adicionando características (nem sempre uma coisa boa). Qual é o impacto que uma coisa destas pode ter, na forma de trabalhar?

A infraestrutura Blueprint é uma infraestrutura de CSS acompanhada de algumas ferramentas externas que permitem validar, usando o validador de CSS do W3C (em java), os sítios criados e gerar grelhas alternativas, usando uma série de scripts em ruby, à grelha por omissão.

O que é que faz a Blueprint?

(aquilo que chamariamos em português a planta ou o projecto?)

O conjunto central de características é o seguinte:

1. Limpar os valores por omissão de propriedades de estilo dos navegadores;
2. Estabelecer valores por omissão (noutros locais claro) adequados para tipografia incluindo famílias de tipos, tamanhos de cabeçalhos, estilos de parágrafos, estilos de listas, grelha base e ainda mais algumas coisas. Trata disto aplicando sempre valores relativos de modo a poder ser escalado em qualquer navegador;
3. Dá-nos uma metodologia a usar em grelhas de maqueta à medida. Qualquer número de colunas e larguras com que possa sonhar ficam fáceis de alcançar;
4. Oferece uma folha de estilo para impressora adequada;
5. Faz tudo isto de forma elegante na generalidade dos navegadores que o podem visitar, incluindo o IE6 e IE7.

É importante compreender que todos os elementos podem ser sobrepostos. A Blueprint não foi concebida para ser a folha de estilo única para um sítio. É, pelo contrário, um conjunto de estilos base para que o designer possa construir sobre alicerces sólidos, aplicando o que é adequado e sobrepondo-se aquilo que não lhe serve para o caso em mãos.

Por analogia podemos pensar que conceber um site com CSS é como começar com baldes de argamassa e conceber um sítio usando a Blueprint é conceber algo usando blocos mas tendo ainda acesso à argamassa.

A grelha

O cerne da Blueprint são as ferramentas de construção de grelha. Por omissão o ficheiro grid.css (um dos ficheiros da infraestrutura) estabelece uma grelha com uma largura de 950px (quase os 960px recomendados pelo Cameron) com 24 colunas, cada uma com 30px de largura com 10px de esquadria. Esta grelha será normalmente suficiente para a generalidade das necessidades.

Para as excepções é possível mudar isto à medida. Se necessitar de mais ou menos colunas ou que sejam mais largas ou mais estreitas que estejam mais apertadas ou mais separadas pode usar a ferramenta de geração de grelha CSS da Blueprint. Pode ainda usar o ficheiro compress.rb como abaixo indicado. O gerador de blueprint não só oferece um ficheiro grid.css de substituição como cria um ficheiro de imagem grid.png para uso como imagem de fundo durante o desenvolvimento, algo que nos permite assegurar um alinhamento perfeito. O gerador de grelha é uma peça central da infraestrutura, mesmo que tecnicamente seja uma ferramenta exterior. Sem ela a Blueprint seria limitativa e controladora, forçando os designers a usar uma só grelha de maqueta. Com ela os designers têm liberdade total.

Usar a Blueprint na sua cadeia de trabalho

Antes de começar a usar o Gimp (ou ferramenta equivalente) deve começar a planear com o Blueprint. É contudo possível, mas mais complicado fazer o caminho inverso.

O designer pode usar a ferramenta de geração acima mencionada de modo a criar uma maqueta com o número de colunas exacto, com esquadrias adequadas e uma largura total adequada ao projecto concreto. O designer deve guardar o ficheiro grid.css exportado. Pode então criar um documento gimp que reproduza esta estrutura em colunas.

O designer no final deve passar, à pessoa que fica encarregue de traduzir a imagem composta no Gimp para CSS e HTML, o ficheiro grid.css acima mencionado e deve dar a conhecer ainda as guias na composição gráfica.

Quando se usa a Blueprint, é realmente importante ler todas as regras incluídas no CSS e compreender as mesmas completamente, de modo a ficar-se consciente do que faz e como o faz antes de deitar a mão na massa. Se o não fizer podem escapar-lhe coisas importantes como .border, .colborder, .box e .hide.

Não seja enganado pela recomendação da documentação de grid.css que lhe sugere usar elementos div para todas as colunas. Pode aplicar a classe .column a qualquer elemento. Por exemplo, se estiver a usar a grelha por omissão e quizer uma barra no topo da página que inclua um logótipo do lado esquerdo e a navegação do lado direito pode adicionar class="column span-12" a um elemento h1 e a um elemento a ul em vez de criar div desnecessárias.

Para criar «linhas» na sua maqueta use várias div com a classe .container. O seu cabeçalho pode ser um contentor, o seu conteúdo outro e o seu rodapé ainda outro. Pode claro ter muitos mais. Só não pense que só pode usar um contentor.

Lembre-se ainda que não necessita de usar a totalidade das peças da Blueprint. Se por exemplo não estiver a usar uma maqueta baseada numa grelha não necessita de usar grid.css. Contudo reset.css e typography.css podem ainda ser-lhe úteis.

Finalmente. Nunca altere os próprios ficheiros Blueprint! É mais limpo incluir as suas próprias folhas de estilo e sobrepôr-se às regras da Blueprint. A alteração dos ficheiros CSS da Blueprint tornam mais difícil a actualização para a última versão da infraestrutura.

Instalação

A Blueprint deve ser colocada na pasta de CSS do sítio em que é aplicada. Depois de o fazer pode adicionar as 3 linhas seguintes ao elemento <head>:

<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 IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
 

Se estiver a trabalhar em xhtml não esquecer de terminar cada uma das linhas com um />

Estes ficheiros encontram-se na pasta de raiz de Blueprint. Sendo as versões compactadas.

A Blueprint está pronta a ser usada.

Pasta 'src'

• blueprint/src/reset.css: é o ficheiro que trata de limpar os valores CSS que os navegadores assumem por omissão;
• blueprint/src/grid.css: Este ficheiro estabelece a grelha. Inclui várias classes que aplicadas a div (às várias div) criam uma grelha baseada em colunas;
• blueprint/src/typography.css: Este ficheiro estabelece tipografia por omissão. Inclui ainda alguns métodos para brincar com o seu texto;
• blueprint/src/forms.css: Estabelece estilo minimalistas para formulários;
• blueprint/src/print.css: Estabelece regras para impressão, de modo a que o seu sítio seja impresso com estilo. Deve ser incluído em cada página;
• blueprint/src/ie.css: Inclui o lixo exigido pelos amados IE6 e IE7.

Pasta 'lib'

• blueprint/lib/compress.rb: Um script em Ruby para alterar à medida e comprimir o seu CSS. Pode estabelecer um espaço de nomeação, o número de colunas (pode ser usado em alternativa ao gerador acima indicado), larguras, trajectos de saída de ficheiros, vários projectos e nomes de classes semânticas. Ver os comentários em compress.rb ou executar compress.rb -h para informação adicional;
• blueprint/lib/validate.rb: Valida os ficheiros centrais da Blueprint usando o validador CSS do W3C;
• blueprint/lib/settings.example.yml: Um ficheiro de exemplo para quem necessite de indicar valores à medida.

Pasta 'tests'

Inclui ficheiros html para testar a maior parte dos aspectos da Blueprint. Para mais instruções ver tests/index.html

Finalmente uma cábula [pdf] para o blueprint.