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.
Slanted shapes (formas diagonais) com CSS
Aprenda a fazer slanted shapes (formas diagonais ou Razor-Blade shape) com CSS através de uma variedade de técnicas possíveis.
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.
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.
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!
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.
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!
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.
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.
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.
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.
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.
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.
Retrospectiva 2015
Retrospectiva dos melhores artigos de 2015 para fechar o ano em grande estilo!
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.
Prevenindo “layout thrashing” com FastDom
Saiba o que é “layout thrashing”, suas consequências e como é possível evitar usando a biblioteca FastDom.
Tipografia responsiva: melhores artigos e tutoriais
Veja uma compilação dos melhores artigos e tutoriais sobre tipografia responsiva e saiba mais sobre como a responsividade tipográfica pode ser útil em seus projetos web
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.
5 armadilhas de web design responsivo a evitar
Conheça 5 armadilhas de web design responsivo que você deve evitar e veja mais dicas sobre responsividade na web para desenvolver projetos responsivos melhores.
As novas regras da web responsiva
Conheça as novas regras da web responsiva e saiba que é preciso acompanhar as mudanças para desenvolver uma web melhor.
Elementos de design aplicados à Web
Conheça princípios de web design que contribuem para projetos Web mais eficientes e funcionais.
Wireframes para web: guia completo de desenvolvimento
Leia este Guia e tire todas as suas dúvidas sobre wireframes: conceitos, produção, teorias, programas, conceitos e conselhos.
10 erros básicos de web design
Conheça 10 erros básicos de web design e aprenda como evitá-los para tornar seus projetos web mais profissionais
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!
Ferramentas para criação de wireframes
Conheça ferramentas para criação de wireframes e mockups, gratuitas e pagas, que irão ajudar na prototipação de conceitos para web sites e sistemas virtuais
7 ferramentas para web designs melhores
Conheça 7 ferramentas para ajudá-lo a elaborar web designs melhores e a ser mais relevante com os respectivos públicos-alvo de seus projetos
4 elementos de design para um bom call to action
Aprenda os 4 elementos para fazer call to actions mais eficientes, que agradam mais seus visitantes aumentam as taxas de conversão de suas páginas
User Interface em dicas rápidas
User Interface em dicas rápidas para aprender dicas sobre o desenvolvimento de interfaces para uma melhor experiência do usuário. Aumente a usabilidade de seu site através dessas dicas rápidas