CategoryCSS

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

Um guia visual para Flexbox

Artigo original “A Visual Guide to CSS3 Flexbox Properties” escrito por Dimitar Stojanov, que gentilmente me permitiu traduzi-lo para o nosso idioma.

A propriedade CSS3 Flexbox, oficialmente chamada de CSS Flexible Box Layout Module é um “novo” modelo de layout em CSS3 feito para melhorar o alinhamento, direção e ordenação de itens em um container, mesmo quando estes possuem dimensões diferentes ou desconhecidas.

A principal característica de um container tipo flex é a capacidade de alterar a largura ou altura de seus elementos filhos para preencher o espaço disponível da melhor maneira possível em qualquer resolução de tela.

Flexbox é fácil de implementar. Designers e desenvolvedores não têm maiores dificuldades em criar um layout com Flexbox (exceto pelo suporte de alguns navegadores).
Como o posicionamento dos itens é quase que automático, layouts mais complexos podem ser criados com menos código, tornando o processo de desenvolvimento mais simples.
O algoritmo do Flexbox é baseado nos eixos horizontal (main axis) e vertical (cross axis), ao contrário de layouts em bloco e em linha.
Flexbox deve ser usado em pequenos componentes do projeto enquanto um modelo de grid CSS está surgindo para lidar com layouts maiores.

Melhor que explicar como as propriedades flex funcionam, este guia irá se concentrar em como elas afetam o layout de uma maneira visual.

Continue reading

LESS mixins: Snippets úteis para dispositivos móveis

LESS

Essa é uma dica pra quem usa LESS para escrever suas folhas de estilo.
De front-end para front-end, se você não usa LESS ou qualquer preprocessador CSS, meu amigo, só lamento. O ganho de produtividade com eles é assustador!

Gosto de trabalhar com LESS mas, usando qualquer preprocessador, variáveis, funções e mixins deixam seu código mais modular, mais reutilizável, mais limpo e organizado. Isso faz toda a diferença em um projeto, seja ele grande ou pequeno.

Continue reading

Entendendo float, clear e clearfix de uma vez por todas

O que é float? Pra que serve? E clear? Onde e quando posso aplicar? Por que quando se usa um às vezes é necessário usar o outro?
E esse tal de clearfix que a gente vê em todo código? Pra que serve?

De tanto ver aplicações equivocadas, achei que pudesse ser necessário explicar de uma forma que fique [bem] clara cada uma dessas propriedades.

Exemplos de aplicação de float, clear e clearfix

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

Radial shadow background

exemplo de background criado com um degradé radial (circular)

Há algum tempo atrás precisei criar uma textura de fundo pra um site que fosse bem elaborada, com sombras nos quatro cantos e que fosse leve. Um background típico de sites em Flash. De cara percebi que se fizesse isso usando uma única imagem (um JPEG gigante) não ficaria leve o suficiente.

O resultado você confere no final. A vantagem é a de usar apenas duas pequenas imagens, um GIF e um PNG transparente (que continua transparente no IE6!), num total de apenas 2Kb (!). O GIF é a textura que se repete nos eixos X e Y (baixei do site Squidfingers.com) e o PNG com degradé circular é a sombra, criado no Photoshop, e mede só 64×64 pixels. A desvantagem, se é que podemos chamar isso de desvantagem, é o uso de dois hacks pro IE. Vou explicar todo o processo.

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 ↑