Layouts com CSS Grid e minmax()
Aprenda sobre layouts responsivos usando CSS Grid com minmax(), auto-fit ou auto-fill para fazer layouts responsivos e eficientes usando CSS moderno.
CSS Logical Properties
Descubra como CSS Logical Properties, o módulo de CSS, pode ajudar a adaptar qualquer layout para diferentes línguas/idiomas.
9 regras para web design responsivo
Conheça 9 regras básicas para um web design responsivo mais fácil de ser feito, que deixa o código mais rápido e facilita a manutenção.
CSS Style Queries
Depois de Container Queries, conheça as Style Queries! Veja o que são style queries, exemplos práticos e como elas mudam o web design responsivo.
CSS min-content, max-content e fit-content
Aprenda sobre os valores de CSS min-content, max-content e fit-content através de exemplos práticos e saiba como melhorar seus layouts Web.
prefers-reduced-data: como funciona a nova media query
Conheça prefers-reduced-data, a nova media query para controle de dados. Veja casos de uso práticos em que ela será bastante útil.
As novas viewports: Large, Small e Dynamic
Estão chegando novas viewports: Large, Small e Dynamic. Com a evolução do web design responsivo, esta será uma adição ao CSS muito bem vinda.
O novo web design responsivo
Uma nova era de web design responsivo começou. Quer saber mais a respeito? Leia para saber as novidades e como elas mudam tudo!
Textos responsivos com CSS clamp()
Textos responsivos com CSS é algo importante. Conheça a nova função clamp() e como deixar o texto responsivo com CSS.
Bordas personalizadas responsivas com CSS background-repeat
Relembre background-repeat e saiba como atingir o inimaginável com essa propriedade: bordas personalizadas responsivas!
Como fazer menu off canvas da maneira mais fácil
Sabe como fazer um menu off-canvas? E um menu off canvas da maneira mais simples e eficiente possível? São coisas bem diferentes, hã? ;)
O básico sobre Media Queries
Conheça o básico sobre Media Queries para usá-las com mais consciência (e saber a diferença entre media query e breakpoint).
O macete para unidades de viewport em mobile
O macete para unidades de viewport em mobile para conseguir 100vh real na tela!
Você deve saber isso sobre 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.
dpw expo #37 – roughViz.js, free-for.dev, Swiper
roughViz.js, lib JS para gráficos “à mão”; free-for.dev, lista de recursos free tier e; Swiper, moderno touch slider para mobile.
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.
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.
iframes responsivos
iframes responsivos geralmente são uma questão de choro e ranger de dentes entre frontenders. Neste artigo, veja como fazer iframe responsivo na prática.
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!
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.
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.
10 dicas para menus responsivos
Lidar com menus responsivos pode ser uma tarefa árdua. Neste artigo, conheça 10 dicas para menus responsivos para fazer da experiência mobile algo melhor.
Retrospectiva 2018
Retrospectiva com os melhores artigos de 2018 do seu, do meu, do nosso desenvolvimento para web! ;-)
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.
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?
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!
Retrospectiva 2017
Retrospectiva com os melhores artigos de 2017 do seu, do meu, do nosso desenvolvimento para web!
Mitos de interface mobile – Mito 2: sites móveis requerem menos features
Segunda parte da série sobre mitos de interface mobile, abordando o mito: sites móveis requerem menos features.
Mitos de interface mobile – Mito 1: usuários móveis estão sempre com pressa
Primeira parte da série sobre mitos de interface mobile, abordando o mito: usuários móveis estão sempre com pressa.
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.
Redução Progressiva e Decaimento de Experiência
Redução Progressiva e Decaimento de Experiência: saiba mais sobre estas novas técnicas de UX para personalizar a UI de aplicações web.
A Zona do Polegar: projetando interfaces para polegares
Conheça a Zona do Polegar e como ela ajuda a projetar interfaces para dispositivos móveis mais eficientes e profissionais.
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.
Menu Cortina (Curtain Menu): novo menu mobile
Conheça o Menu Cortina (Curtain Menu), menu de navegação mobile com resultados surpreendentes garantidos pela Nielsen Norman Group!
Retrospectiva 2015
Retrospectiva dos melhores artigos de 2015 para fechar o ano em grande estilo!
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.
Device-Agnostic ou Web Design Responsivo Independente de Dispositivo
Conheça a abordagem de web design responsivo Device-Agnostic e saiba mais sobre suas características e limitações.
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.
Web design responsivo com DevTools Device Mode
Conheça as novidades da Device Mode da DevTools e saiba como tirar proveito para desenvolvimento com web design responsivo.
Genymotion: emulador de Android
Genymotion é um emulador Android simples e fácil de usar. Veja como o Genymotion emula dispositivos Android para testes de maneira simples e rápida!
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.
Imagens em web design responsivo: atributo srcset e elemento picture
A solução oficial W3C para imagens responsivas está perto de chegar! Conheça mais sobre o atributo srcset e o elemento picture para sites com web design responsivo.
Media queries e download de imagens
Media queries e download de imagens: veja os resultados de uma bateria de testes feitos para testar qual o comportamento de vários navegadores.