Web Design Responsivo

Range Syntax em Media Queries

A sintaxe de intervalos (Range Syntax) em media queries é mais legível, fácil de depurar e bem suportada. Saiba por que vale substituir min-width e max-width.

Layouts com CSS Grid e minmax()

CSS Logical Properties

CSS Style Queries

CSS min-content, max-content e fit-content

prefers-reduced-data: como funciona a nova media query

As novas viewports: Large, Small e Dynamic

O novo web design responsivo

Textos responsivos com CSS clamp()

Bordas personalizadas responsivas com CSS background-repeat

Como fazer menu off canvas da maneira mais fácil

O básico sobre Media Queries

O macete para unidades de viewport em mobile

Você deve saber isso sobre unidades de viewport

dpw expo #37 - roughViz.js, free-for.dev, Swiper

dpw expo #36 - React Bolt, Butter Cake, Browserhacks

9 dicas básicas de web design responsivo

iframes responsivos

hack flex-grow 9999: o hack de Flexbox que você precisa conhecer

Como criar templates com CSS Grid

Como detectar touch com CSS puro

Planejamento com imagens responsivas

10 dicas para menus responsivos

Retrospectiva 2018

Diquinhas marotas de CSS Grid (parte 2)

O poder de flex-grow em Flexbox

Diquinhas marotas de CSS Grid (parte 1)

A maneira 100% correta de fazer breakpoints em CSS

Curso "Flexbox: o guia completo"

Porque CSS Grid é melhor que Bootstrap para criar layouts

Responsive Components: uma solução para container queries

Retrospectiva 2017

Mitos de interface mobile - Mito 2: sites móveis requerem menos features

Curso "CSS Grid: o sistema definitivo de layouts"

Mitos de interface mobile - Mito 1: usuários móveis estão sempre com pressa

Você não precisa de um framework CSS Grid

Imagem de largura total em layout com limite de largura

Redução Progressiva e Decaimento de Experiência

A Zona do Polegar: projetando interfaces para polegares

Unidades de viewport: controle de tipografia em web design responsivo

Menu Cortina (Curtain Menu): novo menu mobile

Retrospectiva 2015

Imagens responsivas com srcset e sizes

Flexbox

Device-Agnostic ou Web Design Responsivo Independente de Dispositivo

Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch

Web design responsivo com DevTools Device Mode

Genymotion: emulador de Android

Tipografia responsiva: melhores artigos e tutoriais

UIkit: framework front-end modular responsivo

Imagens em web design responsivo: atributo srcset e elemento picture

Media queries e download de imagens