Começar a usar Blueprint

Primeiros passos com Blueprint: Identificar os conteúdos do arquivo para baixar e começar a usar o framework CSS Blueprint.

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


Publicado em: 20/10/10
Valorize este artigo:
No artigo anterior já oferecemos uma introdução a Blueprint e às suas características. Agora, queremos dar as explicações necessárias para você começar a utilizá-lo. Para minimizar na medida do possível sua curva de aprendizagem e ajudá-lo a tirar proveito do framework CSS desde o primeiro momento.

Neste artigo veremos o que contém o arquivo para download de Blueprint e pedimos que olhem seus conteúdos. Em seguida, mostraremos o código que temos que colocar na nossa web para incluir os arquivos CSS e começar a utilizar blueprint em uma página web.

Componentes do download de Blueprint

No download do framework CSS Blueprint encontraremos algo mais que o simples código 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 visão geral do produto e será útil durante sua aprendizagem.

Diretório Blueprint:
Temos os arquivos do framework ie.css, print.css e screen.css. Esses três arquivos são os que teremos que incluir e depois comentaremos para que serve cada um deles. Estes arquivos estão "comprimidos", ou seja, sem comentários, saltos de linha e outras coisas para que ocupem pouco espaço em Kb.

Diretório blueprint/src:
São os arquivos fonte do framework, porém com o código completo, com os comentários 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 páginas. Possui os seguintes arquivos:

  • reset.css: Código para redefinir os estilos de todos os navegadores e torná-los compatíveis entre si.
  • typography.css: definição de tipografia por padrão para a página 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 atenção a como está feita e que classes oferece.
  • forms.css: Código para estilizar formulários e mensagens ao usuário.
  • ie.css: com estilos próprios para Internet Explorer
  • print.css: Os estilos que se utilizarão quando se imprima a página em papel.

Insisto em que é boa ideia abrir esses arquivos e dar uma olhada no código, nos comentários e assim irmos formando uma ideia de como é de como funciona o framework.

Diretório blueprint/plugins:
Uma série de plugins que funcionam sobre blueprint para diferentes casos de uso. Mais adiante falaremos sobre plugins.

Diretório lib:
Com alguns scripts na linguagem de programação Ruby para trabalhar com Blueprint.

Diretório templates:
Layouts para começar a desenhar em um editor gráfico, com guias para se ajustar ao espaço por colunas definido na grade. Até o momento de escrever este artigo só estava disponível o layout de Photoshop (arquivo PSD) com a grade de Blueprint.

Diretório test:
Contém exemplos de páginas criadas para testar as características e possibilidades de Blueprint. Também muito interessante, já que é uma maneira interessante de ver como desenvolver a estrutura de página de Blueprint.

Incluir os arquivos de Blueprint na página

O primeiro passo para começar a usar Blueprint em uma página web é incluir os arquivos CSS com o código 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 contém todos os estilos que se aplicam quando a página é 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 código do framework, combinando vários dos arquivos de estilos CSS que existem nos arquivos fonte (sem comprimir) que comentamos antes.

O segundo arquivo incluído contém o código da versão para imprimir da página web, com os estilos do framework que facilitarão a leitura das webs quando impressas. Podemos, além disso, editar este arquivo para que não se visualizem elementos desnecessários na impressão, por exemplo com código como este:

#cabecalho{display: none;}
#navegador{display: none;}

O último arquivo incluído é o ie.css, que ademais se inserta dentro de um comentário, para que só seja visível na família de navegadores de Internet Explorer. Contém, como podemos imaginar, código CSS para solucionar algumas diferenças de interpretação dos estilos nos navegadores de Microsoft.

Para incluir Blueprint no código 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.

Container principal da página Blueprint

Vejamos agora uma página básica que usa Blueprint. Para isso, o primeiro que devemos saber é que todo o código HTML de nossa página deve ser colocado em um container.

<div class="container">
   <p>Conteúdo da página</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 próximo artigo no qual explicaremos a grade de Blueprint.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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