Recomendações à hora de desenhar com o framework CSS Blueprint

Algumas recomendações para que o trabalho com Blueprint seja mais simples e para que possamos tirar maior proveito do framework CSS.

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


Publicado em: 21/3/11
Valorize este artigo:
Já escrevemos vários artigos sobre o framework CSS Blueprint, que estão sendo publicados em um Manual de Blueprint. Tivemos a oportunidade de conhecer a grade para posicionamento de elementos na página e vimos dois exemplos interessantes de páginas maquetadas com Blueprint.

Agora vamos dar uma pequena contribuição em forma de conselhos úteis para trabalhar com o framework CSS, tirar maior partido e evitar problemas de desenho.

Aplique estilos em sua própria folha de estilos

Pode ser uma boa ideia manter os CSS do framework inalterados e indicar em folhas de estilo próprias os estilos que você queira acrescentar ao seu projeto, criados em arquivos à parte dos do framework. Ajudará a manter seus arquivos de estilo mais reduzidos e a não misturar suas especificações com as de Blueprint.

Desenhe com o layout de 24 colunas

O primeiro passo para a concepção criativa de uma web é o design em um programa de edição gráfica como Photoshop. No arquivo de download de Blueprint temos um PSD (arquivo de photoshop) com uma série de divisões em colunas e guias para nos ajustarmos a elas. Esse arquivo serve de layout vazio para gerar nosso próprio desenho, que se ajuste aos espaços disponíveis em Blueprint.

O arquivo de Photoshop vem com uma camada oculta que contém um exemplo de desenho de website, baseando-se nos espaços disponíveis em Blueprint. Podemos buscar essa camada na janela de camadas, cujo nome é "sample site".

Recomendação para aplicar estilos adicionais aos containers

Como se pode observar, no exemplo do artigo anterior já colocamos alguns estilos nos containers da página, como cores de fundo e até algum estilo de tipografia. Mesmo sem muita experiência em Framework Blueprint posso dar duas recomendações:

Aplicar estilos em containers diferentes dos span-x:
Para aplicar estilos aos conteúdos de cada um dos containers que colocamos na grade , vale mais a pena colocar dentro do DIV "span-x" outro segundo DIV ao que poderemos dar estilos. Se aplicarmos CSS diretamente sobre os "span-x" podemos estar interferindo nos estilos criados pelo próprio framework. Por exemplo:

<div class="span-2">
   <div id="corpoesq">
      Aqui estou nas duas primeiras colunas da parte debaixo do corpo...
   </div>
</div>

Você viu que o DIV container "span-2" não tem mais estilos que aqueles proporcionados por essa classe "span-2". Em seguida, colocamos dentro outro DIV e é a este que atribuímos estilos particulares de nosso site.

Utilizar a classe "box" para conseguir um padding:
Em Blueprint, há uma classe pensada para que as caixas tenham padding chamada "box". Essa classe fornece um comportamento por padrão para os containers, que inclui, entre outras coisas, um padding. Minha recomendação, igual que no ponto anterior, seria utilizar essa classe também sobre um DIV que aninhamos dentro do container "span-x":

<div class="span-4">
   <div class="box">
      Conteudo que ja tem um padding
   </div>
</div>

Nós poderíamos inclusive mudar os estilos da classe "box" caso não se ajustem ao modelo de caixa que desejamos ter em nosso website.

Usando tipografias

Tipografias por padrão:
Ao usar as etiquetas standard do HTML temos a vantagem de que estão formatadas pelo framework CSS e , no que diz respeito à tipografia, já estão previamente configuradas. Não obstante, podemos necessitar mudar alguma tipografia e isto pode ser feito em nossa própria folha de estilo ou editando o arquivo do framework screen.css, na seção que está marcada com o comentário /* typography.css */. Embora não seja muito recomendável mudar o código fonte do framework, para pequenas edições como a tipografia por padrão não vejo problema em trocá-la diretamente no código de Blueprint.

Usar medidas em para tamanhos do texto:
As medidas CSS relativas, como as que obtemos com as unidades px ou em, são muito mais apropriadas. O mais recomendável quando queremos mudar o tamanho dos textos é atribuir-lhes com a unidade "em".

Em geral, todas as práticas recomendáveis para CSS também podem ser aplicadas em nosso trabalho com o framework. Depois de varias práticas seguramente você irá criando um esquema de trabalho que se adapte bem a seus hábitos e conhecimentos.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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