Introdução
Nesse artigo vamos falar sobre Blueprint, um framework CSS. Blueprint é uma ferramenta para desenvolvedores de aplicação web que agiliza na criação de uma página. É composto por uma série de folhas de estilo CSS possuindo códigos úteis para o desenvolvimento da página e podendo aplicar outros modelos de estilos tais como tipografia ou de impressão.
O Blueprint possui uma variedade de folhas de estilo CSS com códigos que podem ser utilizadas para estilos às páginas de uma maneira rápida e podendo também solucionar muitos problemas nas incompatibilidades dos browsers.
Definindo frameworks CSS
Um framework apenas se trata de uma coleção de arquivos com declarações de estilos definidas com um padrão para que possam ser utilizados em qualquer tipo de sites. Sendo útil para o desenvolvimento de aplicações web e também para solucionar eventuais problemas e situações comuns que ocorrem ao desenvolvermos uma aplicação web.
Características do BluePrint
BluePrint framework CSS foi criado sobre uma forte base de códigos CSS que ajudam no desenvolvimento e criação das aplicações web. Podemos destacar as seguintes características.
- A grade: Usada para a criação de qualquer estrutura necessária para a página. Se trata de um conjunto de classes CSS para fazer o posicionamento de qualquer elemento em uma largura de 950px. Sendo divida em 24 colunas.
- Tipografia: Pré-definida de modo preciso para todos os elementos que venham a utilizar texto.
- Formulários: Com códigos pré-definidos para melhorar as interfaces para o usuário.
- Impressão: Com definições CSS mais precisas para que as páginas estejam mais legíveis na hora da impressão no papel.
- IE: Com estilos pré-definidos para resolver alguns dos problemas mais comuns do IE.
Dessa forma possuímos uma base para começarmos facilmente a criar novas páginas web complexas e com compatibilidades nos diversos browsers. Foram criados plug-ins por terceiros para obter ícones, para fazer a página se adequar a largura do navegador assim completando ainda mais o BluePrint.
Download
Antes de continuarmos, precisamos fazer download dos arquivos do BluePrint, para isso precisamos acessar o seguinte site: http://www.blueprintcss.org/ e realizarmos o download em zip.
Figura 1: Download do BluePrint
Após completarmos o download, podemos descompactar e conhecermos um pouco do que vem com esse pacote de arquivos. Vamos lá:
Pasta BluePrint: Dentro dessa pasta temos os seguintes arquivos.
- IE.css: Contém códigos definidos para família IE, para que possa solucionar alguns problemas de incompatibilidade.
- Print.css: Contém estilos para a impressão, facilitando para quando for feita uma impressão em papel.
- Screen.css: Contém estilos que se aplicam a quando a página é visualizada.
Pasta BluePrint/src: Dentro dessa pasta temos os arquivos fonte do framework, porém com os códigos completos, com todos os comentários e formato para serem lidos normalmente. Se quisermos, é interessante dar uma lida neles, porque poderemos vir a aprender muita coisa principalmente de como as classes estão organizadas para serem usadas quando fomos construir nossas aplicações web. Dentro temos os seguintes arquivos.
- Reset.css: Arquivo com código para redefinir os estilos de todos os navegadores e torná-los compatíveis.
- Typography,css: Contém os códigos com definições de tipografia por padrão para aplicações web que ajuda com alguns problemas quando se trabalha com textos.
- Grid.css: Arquivo base, o mais importante, que contém as classes para gerar as grades, valendo a pena abri-lo e prestarmos atenção no modo como as classes estão criadas e quais são oferecidas.
- Forms.css: Arquivo que possui as classes responsáveis pelos elementos de formulários.
- IE.css: Arquivos com os códigos de estilo próprios para o Internet Explorer.
- Print.css: Arquivo que contém os códigos para quando for ser utilizada impressão no papel.
Pasta Blueprint Plug-ins: Dentro dessa pasta podemos encontrar uma série de plug-ins muito úteis com diversas funcionalidades para o BluePrint.
Pasta lib: Pasta com arquivos de script Ruby para trabalhar com BluePrint.
Pasta Templates: Esta pasta possui arquivos de layouts que você pode estar utilizando em editores gráficos de sua preferência. Esses arquivos possuem guias para se ajustarem aos espaços de colunas definidas pela grade (esses arquivos apenas estão disponíveis para PhotoShop).
Pasta Test: Exemplo de páginas prontas para testar características e possibilidades do BluePrint. Esses exemplos são muito interessantes, já que é uma maneira muito interessante de vermos como desenvolver a estrutura das páginas BluePrint.
Pondo em prática
Para começarmos, a primeira coisa que temos que fazer é referenciar os arquivos do BluePrint necessários. Fazemos isso utilizando a tag <link>, determinando o caminho de onde as folhas de estilo se encontram.
Importaremos esses arquivos dentro da tag
:Listagem1: Arquivos necessários do BluePrint
<html>
<head>
<title>Estrutura BluePrint.</title>
<link rel="stylesheet" href="blueprint/screen.css">
<link rel="stylesheet" href="blueprint/print.css">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css"><![endif]-->
</head>
Observamos que o link que carrega o arquivo IE.css está dentro de uma diretiva para que só seja executado nas versões do Internet Explorer.
Blueprint container principal
Semelhante a outros frameworks CSS, tais como 960 grid, Skeleton, o BluePrint também trabalha sobre um container principal.
Vamos ver um exemplo rápido de um container BluePrint.
Listagem 2: Container principal.
<div class=”container”>
Arquivos inseridos no site.
</div>
Para criar o container principal basta criarmos uma div e usar a classe container, dentro dessa div container podemos criar diversas outras divs com outras classes.
Grade
Podemos dizer que a parte mais importante desse framework CSS é a grid. Usando essa grade podemos posicionar os elementos na página de maneira precisa e simples. BluePrint propõe um container principal com 24 colunas e uma largura de 950px, onde cada coluna possui 30px de largura com um espaço entre elas de 10px.
Temos 24 colunas para criarmos nosso layout, mais podemos unir as colunas para obter espaços maiores. Supondo que queremos ter apenas três colunas, basta dividirmos as 24 colunas por três, assim iria nos proporcionar três partes com oito colunas cada uma dessas partes.
Para usarmos as colunas existentes, temos as classes CSS que vão de span-1 até span-24. Para determinamos o tanto de colunas que desejamos usar basta usar “span- e o numero de colunas que desejamos”. Vejamos alguns exemplos.
- span-1 (30px)
- span-2 (70px)
- span-3 (110px)
- span-4 (150px)
- span-5 (190px)
- span-6 (230px)
- span-7 (270px)
- span-8 (310px)
- …
- span-23 (910px)
- span-24 (950px)
Para desenvolvermos nossos layouts, podemos determinar o container principal e dentro dele diversões containers span-x. Podemos gerar alinhamentos para estarmos criando layouts mais complexões.
Não podemos esquecer que nosso container principal possui 24 colunas, e por isso cada seção do layout não pode passar de 24 colunas. Ou seja, ao criarmos as diversas partes do nosso layout, somando-as elas não podem possuir mais do 24 colunas de largura. Por exemplo, dividimos nossa estrutura em quatro partes, então cada parte tem que ter 6 colunas, pois somando 6+6+6+6, temos o total de 24 colunas. Claro que podemos escolher um tamanho para cada parte, não precisando ser partes iguais. Podemos ter assim 4+10+4+6. O que importa é não passar de 24 colunas.
Vamos criar agora um exemplo de estrutura onde vamos ter o seguinte: um cabeçalho, uma parte esquerda, corpo, parte direita e um rodapé.
Listagem 3: Criando estrutura exemplo
<html>
<head>
<title>Estrutura BluePrint.</title>
<link rel="stylesheet" href="blueprint/screen.css">
<link rel="stylesheet" href="blueprint/print.css">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css"><![endif]-->
</head>
<body>
<div class="container">
<div class="span-24 last">
<h1>Testando Blueprint</h1>
</div>
<div class="span-4 last">
<p> Lateral Esquerda.</p>
</div>
<div class="span-10">
<p>Corpo...</p>
</div>
<div class="span-6 last">
Lateral Direita.
</div>
<div class="span-24 last">
<br>
Rodape...
</div>
</div>
</body>
</html>
Como podemos observar junto, com algumas classes é usada a classe last para determinar que a margem ali vai ser de zero.
Observações sobre o código acima.
- <head>: Adicionamos os arquivos CSS necessários do BluePrint.
- <body>: Criamos o container principal, e dentro desse container principal colocamos um cabeçalho “Testando BluePrint”, depois colocamos uma lateral esquerda, um corpo, uma lateral direita e por final o rodapé
- Podemos observar que apenas com esse código não temos bem como notar as divisões entre os espaços, veja a Figura 2:
Figura 2: Resultado estrutura básica BluePrint
Agora vamos ver essa mesma estrutura com conteúdos inseridos. Observem a diferença da mesma imagem acima, só que agora com mais conteúdo posto nas colunas.
Figura 3: Estrutura básica com conteúdo
Podemos notar que assim fica bem mais fácil de definirmos as divisórias que fizemos no código anterior.
Assim terminamos esse artigo feito no intuito de nos mostrar mais um de tantos frameworks CSS. Podemos observar que todos oferecem uma vasta gama de opções de estilos e ferramentas que nos facilitam no desenvolvimento de websites. Agora basta testarmos esses frameworks e identificarmos aquele que mais se adéqua ao nosso projeto em questão.
Espero que o conteúdo aqui fornecido tenha sido do agrado de todos os leitores, me ponho à disposição para esclarecer dúvidas e sugestões, dicas para até mesmo novos artigos.
Um abraço a todos.
Conheça também:
- Introdução ao framewok CSS Skeleton
- Introdução ao framewok CSS 960 Grid
- Curso de Criação de web sites com Bootstrap
Discuta em:
