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

Desde Agosto de 2013, quando foi lançada a versão 3, o Bootstrap adotou a abordagem mobile first* e responsiva, o que significa que suas colunas vão se adequando à tela quanto maior for sua largura (progressive enhancement), ou seja, do mobile para o desktop; diferente das versões anteriores, quando as colunas se ajustavam quanto menor fosse a tela (graceful degradation), do desktop para o mobile.

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

Qual a medida em pixels de uma folha de papel A4?

As caixas de diálogo do Photoshop NEW DOCUMENT e IMAGE SIZE

Antes de qualquer explicação, você sabe converter centímetros para polegadas, e vice-versa?

1 cm = 0,3937 pol ou 1 pol = 2,54 cm (mais fácil de gravar, não?)

Agora, você com certeza já deve ter ouvido falar em dpi. Sabe o que significa?

Continue reading

Qual o tamanho do background do Twitter?

mascote do twitter pensando "background? #comofaz"

Você, usuário um pouco mais, digamos, experimentado, já tentou posicionar uma imagem no background do seu perfil no Twitter?

Convenhamos, é meio chato! Vou explicar como adaptar (criar é com você!) uma imagem, de modo que seu background apareça melhor em algumas resoluções de monitor mais comuns.

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

Photoshop: Tratamento de imagem (parte 1)

Como tratar uma imagem?

duas fotos lado a lado de um combinado de sushi mostrando o antes e depois: do lado esquerdo a foto bruta, sem tratamento de imagem. do lado direito após um tratamento com correção de branco, tom, volume e seleção de cores

Lembro que quando comecei a mexer com tratamento de imagem – em meados de 1995 – o Photoshop (versão 3.x) era muito limitado e não podíamos cometer erros. Aliás, um erro só podia, pois não havia múltiplos undos (o “desfazer”), dá pra imaginar?! Também não tinha recursos de layers (camadas) e os pincéis não eram elaborados, além de outras tantas limitações. Mas, desde aquela época o processo de Seleção de Cores (grosso modo, é como chamam o tratamento de imagem para mídia impressa), sofre apenas a interferência das melhorias da ferramenta: as evoluções do programa.

Continue reading

© 2016 Edson S. Júnior

Theme by Anders NorenUp ↑