Design Responsivo,
Flex Box & Grid e
TailwindCSS

O Design Responsivo é uma abordagem de web design onde o conteúdo se ajusta aos diferentes tamanhos de tela e janelas de uma variedade de dispositivos.

A grade como
fundamento do
design responsivo

Uma grade consiste em um conjunto distinto de relações baseadas em alinhamento que atuam como guias para a distribuição de elementos em um formato. Cada grade contém as mesmas partes básicas, não importa o quão complexa se torne. Cada parte cumpre uma função específica e as peças podem ser combinadas conforme necessário ou omitidas da estrutura geral a critério do designer, dependendo de como eles interpretam os requisitos de informação do material.

Timothy Samara em "Grid - Construção e desconstrução"

Mobile First.
Será?

O box model

Display:
As alternativas
tradicionais

Display: Block

Display: Inline

O negrito é um inline em duas linhas

Display: Inline-Block

Flex-box:
O conteúdo no comando

O
conteúdo
no
comando

Grid:
A estrutura no comando

A
estrutura
no
comando

TailwindCSS
Nomes de classe semânticas
ou utility-first CSS?

Obrigado

Bonus tracks