TagCSS

Compreendendo o sistema de grid do Bootstrap

Você não consegue entender o sistema de grid do Bootstrap?
Termos como col-sm, col-md, col-offset soam confusos?

Bom, você não é o único.

Muita gente se atrapalha com a sintaxe do Bootstrap mas, acredite, depois que você compreende fica muito fácil desenvolver um layout tanto para desktop quanto para mobile.

A especificação diz:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

O que isso quer dizer?

Assim como vários outros frameworks front-end, o Bootstrap faz uso de um grid de 12 colunas.

As 12 colunas do grid do Bootstrap

Na figura temos 12 colunas cuja classe .col-**-1 determina que cada “col” tenha o tamanho igual a 1. Os asteriscos devem ser substituídos por xs, sm, md ou lg (extra small, small, medium e large respectivamente). Falo sobre “breakpoints” mais abaixo.

Continue reading

Seu CSS é bom ou ruim?

Artigo original “Code smells in CSS” escrito por Harry Roberts, que gentilmente me permitiu traduzi-lo para o nosso idioma.

Chris Coyier recentemente respondeu a seguinte pergunta:

O que você diria se um código CSS está um lixo? Quais são os sinais de que o código é poluído ou que o programador front-end fez m3rd@? O que você analisaria nele para determinar se ele é bom ou ruim?

Pensei em estender a resposta de Chris adicionando um tempero próprio…

Meu cotidiano se passa trabalhando em casa para a BSkyB. Trabalho em grandes sites, dos quais o último me tomou mais de um ano para desenvolver o front-end (e ainda não terminou). Para mim CSS ruim é uma coisa muito específica e problemática; quando você está trabalhando em um site por meses a fio você não pode se permitir escrever um código poluído, seja ele CSS ou não, e qualquer código ruim precisa ser re-escrito.

Vou compartilhar apenas alguns pontos que eu analisei no CSS (e há, sem dúvida, alguns que deixei passar batido) para que você possa ter uma idéia quanto a qualidade, sua manutenção e sua integridade…

Continue reading

Por que usar CSS Reset?

botão CSS Reset (uma metáfora para o problema)

Muito se discute sobre o uso de CSS Reset em desenvolvimento web. É um verdadeiro divisor de águas. Há quem o odeia e quem não viva sem (meu caso).

Especialistas divergem entre si e são muito políticos em suas defesas quanto ao uso ou não de resets. Tanto que confundem a cabeça de novatos nessa área e só fazem aumentar a necessidade de um veredito.

Pois bem, resolvi peitar uma defesa baseada em problemas que enfrento diariamente. E defino minha conclusão com uma pergunta mais que direta: “Como eu criava sites antes sem usar um CSS Reset?”

Continue reading

@font-face CSS com ajuda do Google font API

Google font directory

Em um artigo que escrevi sobre o uso de @font-face e a conversão de fontes do formato TTF para EOT abordei o modo mais prático de implementação de fontes diversas para criação de sites mais, digamos, elaborados. Expliquei como e com o que converter fontes, e as linhas de código em CSS para implementação.

Agora vou explicar novamente o uso do @font-face abordando uma, na verdade duas, ajudas muito bem-vindas do gigante do Vale do Silício: a Google font API e o Google font directory.

Continue reading

CSS Sprites

Você já leu o artigo sobre CSS Sprites da Smashingmagazine? Veja bem, levando em conta que você tem conhecimento desse assunto, gostaria só de basear minha crítica em cima de dois pontos desse artigo:

  1. Cache de imagens
  2. Acessibilidade

Mas antes, vamos ser francos, usar sprites é uma mão na roda no desenvolvimento de sites, e sei q o pessoal da Smashingmagazine também pensa assim. Eles só colocaram o assunto em xeque devido ao mau uso ou o uso exagerado.

Continue reading

@font-face e a conversão de fontes .TTF para .EOT sem mistério

exemplo de uma fonte gótica, que não é uma fonte segura, ou seja, existe o risco de não ser exibida no computador do usuário caso não seja usado @font-face Se você chegou até aqui pensando em ler algo sobre o tal Microsoft WEFT (Web Embedding Fonts Tool), esqueça. Nunca consegui usar esse programa.

O propósito aqui é tão somente explicar que, além do WEFT, você pode baixar este executável e começar a gerar suas fontes EOT. Tem também versão para Linux (tar.gz).

Continue reading

© 2017 Edson S. Júnior

Theme by Anders NorénUp ↑