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.

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.