6 vantagens em usar BEM ao escrever CSS
BEM é uma convenção de nomenclatura de CSS bastante usada no front end. Conheça 6 vantagens de usar BEM ao escrever CSS.
Source Maps em produção?
Source Maps são muito bem vindos em ambientes de desenvolvimento para pré-processadores CSS. Mas você já tinha pensando em source maps em produção?
O macete para unidades de viewport em mobile
O macete para unidades de viewport em mobile para conseguir 100vh real na tela!
Algumas coisas que você deve saber ao trabalhar com unidades de viewport
Existe um problema em definir a altura de um elemento em 100vh em navegadores móveis ao posicionar algo no bottom. Veja algumas considerações sobre isso.
CSS element()
Conheça element(), a função de CSS que renderiza qualquer parte de um site como uma imagem ao vivo!
dpw expo #36 – React Bolt, Butter Cake, Browserhacks
React Bolt, boilerplate para projetos React; Butter Cake, framework CSS moderno com Flexbox; Browserhacks, com listas de hacks CSS para diferentes browsers.
Vulnerabilidades de segurança CSS
Já tinha parado para pensar que pode haver vulnerabilidades de segurança CSS? Veja neste artigo alguns exemplos possíveis.
4 Layouts mais comuns com CSS Grid
Veja como podem ser feitos com CSS Grid alguns dos layouts mais comuns de sites que é possível encontrar pela Web.
9 dicas básicas de web design responsivo
Web design responsivo já surgiu trazendo novas questões e desafios. Conheça 9 dicas básicas de web design responsivo para ajudar.
CSS Grid intrinsecamente responsiva com minmax() e min()
Já ouviu falar de intrinsic web design? Veja como é possível fazer CSS Grid intrinsecamente responsiva de maneira (relativamente) fácil!
dpw expo #31 – Page Transitions, Hopscotch, Agile CSS Framework
Page Transitions, uma coleção de transições de página; Hopscotch, para fazer tour pelo site e; Agile CSS, framework CSS levíssimo otimizado para SEO.
dpw expo #30 – collectorium, perfundo, npkill
collectorium, para fazer abas com CSS puro; perfundo, para criar lightboxes com CSS puro e; npkill, para deletar diretórios node_modules inúteis.
CSS e o Contexto de Formatação de Bloco (Block Formatting Context)
Conheça Block Formatting Context de CSS, como ele pode impactar em layouts e, se bem usado, até ajudar a alcançar determinados resultados.
dpw expo #28 – simplePARALLAX, Gitfolio, CSS Border Animations
simplePARALLAX, para efeitos parallax variados; Gitfolio, para gerar um portfolio a partir de seu GitHub e; CSS Border Animations, exemplos de animação CSS.
hack flex-grow 9999: o hack de Flexbox que você precisa conhecer
Flexbox guarda muitas surpresas. Conheça o hack flex-grow 9999 e pergunte-se como você conseguiu trabalhar com Flexbox por tanto tempo sem saber disso!
CSS Grid: o jeito certo
Para se dar bem em CSS Grid, use nomes ao invés de números; use fr como unidade flexível; não use um grid system. Quer saber mais? Então vem com a gente!
dpw expo #24 – Animista, Static Site Boilerplate, Humanize Duration
Animista, para animações CSS; Static Site Boilerplate, workflow completo para sites estáticos e; Humanize Duration, JS que converte para milissegundos.
A mentalidade CSS
Veja dicas para auxiliar a formar sua mentalidade CSS e ajudar a chegada do seu momento “Aha!”, em que finalmente a ficha do CSS vai cair!
dpw expo #21 – freezeframe.js, Spotlight.js, Microjs
freezeframe.js, que controla gifs animados; Spotlight.js, um novo modal/galeria que está chegando nas webs e; Microjs, buscador de recursos JavaScript.
Como criar templates com CSS Grid
CSS Grid é o primeiro sistema de layout efetivo para a Web. Neste artigo, veja como criar templates com CSS Grid.
dpw expo #20 – Transfonter, Specificity Calculator, ms
Transfonter, conversor de fonte para @font-face; Specificity Calculator, para cálculo de especificidade CSS e; ms, que converte tempo para milissegundos.
font-display: controle de exibição de fontes para ajuste em performance
Conheça font-display, a nova propriedade CSS font face para ajuste fino de carregamento/exibição de fontes para aprimoramento da performance em sites!
Flexbox: como passar para a próxima linha fácil
Quebrar linha com Flexbox às vezes pode ser um desafio… Leia o artigo e conheça uma técnica simples para quebra de linha com Flexbox.
Como detectar touch com CSS puro
Como identificar touch com CSS puro é uma questão antiga no mundo webdev. Leia este artigo e saiba mais sobre como Interaction Media Features podem ajudar.
Planejamento com imagens responsivas
Aprenda a fazer um planejamento com imagens responsivas através de técnicas como CSS Grid, direção de arte e resolution switching.
Variáveis CSS são melhores que loops de Sass?
Variáveis CSS são melhores que loops de Sass? Não necessariamente, mas veja este exemplo prático com as 2 tecnologias para atingir o mesmo objetivo em CSS.
Jumps: o novo steps() em Web Animation
Conheça “jumps”, os novos valores de CSS steps() para controle de animação web que vão facilitar animações e fazer cálculos mais complexos automaticamente.
Combinação de seletores CSS
Saber fazer combinação de seletores CSS é importante para se formar uma regra CSS eficaz. Veja maneiras de se fazer combinações de seletores e não erre mais!
Variáveis CSS: um guia prático
Guia prático sobre variáveis CSS, mostrando suas principais vantagens, exemplos, formas de uso, macetes e interações com outras tecnologias.
Hifenização de CSS (CSS hyphenation) em 2019
Saiba como está o suporte à hifenização de CSS (CSS hyphenation) nos principais browsers em 2019 e como é possível ter controle sobre hifens em textos.
Como encontrar CSS morto e otimizar estilos
Conheça uma técnica simples e de baixíssimo custo para identificar CSS morto e otimizar o código e performance de projetos web. Você vai se surpreender!
Diquinhas marotas de CSS Grid (parte 2)
Último artigo da série com dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid para aprimorar as habilidades em layouts para web.
O poder de flex-grow em Flexbox
Conheça uma maneira de usar flex-grow, uma das propriedades de Flexbox, para a solução de um problema comum de front-end.
CSS Blocks: introdução à API
Veja neste artigo uma introdução à API de CSS Blocks e comece a entender porque este é um dos melhores compiladores CSS da atualidade.
LinkedIn anuncia CSS Blocks, o novo otimizador de CSS
Saiba mais sobre CSS Blocks, o novo projeto open source da LinkedIn de um otimizador CSS que promete contribuir muito para o desenvolvimento front-end.
Diquinhas marotas de CSS Grid (parte 1)
Conheça dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid e aprimore suas habilidades no melhor que o front-end tem a oferecer para layouts.
A maneira 100% correta de fazer breakpoints em CSS
Depois de anos usando breakpoints, será que a maioria dos desenvolvedores front-end realmente já pararam para pensar se estão fazendo do jeito certo?
Curso “Flexbox: o guia completo”
Aprenda Flexbox e domine uma das melhores tecnologias CSS para criação de layouts modernos e elementos de UI responsivos!
Porque CSS Grid é melhor que Bootstrap para criar layouts
Com o advento de CSS Grid, o framework front-end Bootstrap pode não ser mais tão necessário… Saiba mais sobre os poderes de CSS Grid para layouts.
Responsive Components: uma solução para container queries
Conheça Responsive Components, uma solução para componentes responsivos que resolve o problema de Container Queries e pode ser usada imediatamente!
Minicurso grátis “Sass placeholders: o jeito certo”
Saiba mais sobre o minicurso grátis para aprender a usar placeholder selectors do jeito certo e construir uma biblioteca de utilitários CSS.
Curso “CSS Grid: o sistema definitivo de layouts”
Aprenda CSS Grid Layout e desenvolva layouts de maneira surpreendente!
16 dicas de Sass para facilitar sua vida (parte 1)
Conheça dicas Sass que podem mudar sua maneira de usar o melhor pré-processador CSS da atualidade
Curso “CSS: um passo adiante”
Eleve seu CSS ao próximo nível com CSSOO, SMACSS, BEM, Pré-processadores CSS, Namespaces CSS e Task Runners!
Motion UI: 4 formas de usar animação funcional
Interfaces animadas/Motion UI são ponto imprescindível para UX. Conheça 4 formas de usar animação funcional em projetos web.
Você não precisa de um framework CSS Grid
Com o advento de CSS Grid Layout, não demorou muito para surgirem frameworks de Grid. Mas há considerações importantes a serem feitas.
Imagem de largura total em layout com limite de largura
Conheça a solução mais simples e eficiente para ter imagem de largura total em layout com largura limitada.
CSS @supports: detecção nativa de suporte a propriedades CSS
Saiba mais sobre CSS @supports, diretiva CSS que permite detectar o suporte de navegador para propriedade de estilo. Ideal para progressive enhancement.
Desmistificando o CSS crítico “acima da borda”
Usar CSS crítico inline “acima da borda” é uma técnica infalível? Leia mais para saber que a melhor resposta para dilemas web continua sendo “depende”.
Unidades de viewport: controle de tipografia em web design responsivo
Saiba como ter controle absoluto de tipografia em web design responsivo através de unidades de viewport.
UX em validação de formulários com HTML e CSS
Conheça técnicas simples de HTML e CSS que podem incrementar (e muito!) a UX em validação de formulários.
Livro “CSS Eficiente”
O livro “CSS Eficiente” traz conceitos imprescindíveis ao dia-a-dia e apresenta técnicas para construir uma Arquitetura CSS profissional.
Imagens responsivas com srcset e sizes
Conheça mais sobre srcset e sizes, seus novos amigos na hora de implementar imagens responsivas
Flexbox
Use Flexbox para levar a criação de layouts CSS ao próximo nível: saiba mais sobre Flexbox através de explicações detalhadas e exemplos de código.
Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch
Conheças as unidades de CSS moderno (rem, vh, vw, vmin, vmax, ex, ch) e saiba como e quando aplicá-las no CSS ao criar sites.
Pré-processadores CSS e Chrome DevTools
Aprenda como usar o potencial máximo da DevTools ao trabalhar com pré-processadores CSS.
UIkit: framework front-end modular responsivo
UIkit é um framework responsivo modular de front-end projetado para ser leve e simples de se usar. Veja mais informações e conheça seus componentes.
Webshims Lib: Polyfills de recursos de HTML5 e CSS3
Conheça a Webshims Lib e saiba como ter polyfills de recursos de HTML5 e CSS3 carregados sob demanda!
Filtros CSS3
Saiba como é possível usar os incríveis filtros CSS3 para efeitos como blur, greyscale, brilho, matiz, saturação e mais. Conheça o poder dos novos filtros CSS3!
Como melhorar a performance do site limpando HTML, CSS e imagens
Aprenda como melhorar a performance e tempo de carregamento do site limpando HTML, CSS e imagens e fazendo um bom planejamento de recursos.
Escrevendo CSS eficiente
Escrever CSS performático e de qualidade é algo que nem todos desenvolvedores front-end sabem fazer. Se você se encaixa neste grupo, leia o artigo!
Usando Modernizr para detectar features de HTML5 e CSS3
Conheça e aprenda a usar Modernizr, biblioteca JavaScript que permite detectar features de HTML5 e CSS3 do navegador e prover soluções, caso necessário.
Não use IDs como seletores CSS
À primeira vista, pode parecer estranho não usar IDs como seletores em CSS, mas, através argumentos bem embasados, entenda porque isso é verdade.
URLs longas apresentadas corretamente com CSS
Apresentar corretamente URLs e outros textos longos é essencial para um layout consistente e de qualidade. Saiba como fazer isso lendo este artigo!
Diferenças entre IDs e Classes
Aprenda a diferença entre IDs e classes, usados em XHTML, CSS e javascript. Saber a diferença entre classes e IDs evita erros básicos e permite desenvolver sites melhores
CSS float: considerações, dicas e macetes para bons layouts na web
Aprenda sobre CSS float e veja dicas e macetes para fazer bons layouts para a web usando tableless