Espaço e layout

O respiro é o recurso principal do Roque. A seção dá o espaço; a grade e as pilhas organizam; os componentes respondem ao próprio tamanho com container queries.

Espaço

Base de 4 e 8 px, de 2 a 160. O nome do token é o valor: --rq-e-24 vale 24 px.

Respiro de seção

.rq-secao · --respiro-p · --respiro-g

Fluido, sem saltos: --rq-respiro-p de 56 a 96 px, -m (padrão) de 80 a 144 e -g de 96 a 200. O grande é para abertura e fecho; o pequeno, para seções que continuam o assunto da anterior.

Seção, wrap e grade

A seção recebe o tema e o respiro. O wrap limita a largura (1328 px, larga 1600, texto 46rem). A grade tem 12 colunas; cada filho diz onde fica com --col. Abaixo de 760 px tudo ocupa a linha, salvo --col-m.

Grade

.rq-grade · style="--col: 1 / span 7"

1 / span 7

8 / span 5

1 / span 4

5 / span 4

9 / span 4

1 / -1

Pilha e fila

Pilha empilha com espaço igual (--p 8, padrão 16, --m 24, --g 40, --respiro). Fila alinha na horizontal e quebra quando falta espaço (--entre, --fim, --base). Ou style="--rq-gap: …".

Fila

--entre

Pilha --m

Dois

Três

Divisão

Mídia e texto lado a lado, 7 por 5. --invertida troca os lados, --meio divide 50/50, --sangrada leva a mídia até a borda. Empilha quando o próprio bloco tem menos de 760 px. Com data-rq="troca", a inversão vira a troca: veja em Motion.

Cavalo de xadrez saltando sobre o tabuleiro

Tráfego sem método vira custo.

Na aceleração, cada marca tem um squad dedicado. Ele planeja, produz e otimiza as campanhas.

Bento

Peças de tamanhos diferentes numa grade de 6 colunas (Frentes da home). Cada peça diz --larg (colunas) e --alt (linhas). Uma coluna abaixo de 760 px do próprio bloco.

4 × 2

2 × 1

3 × 1

Raio, filete e elevação

Pouco raio: 4 px na foto, 8 no controle e no painel, 16 no modal e na folha, pílula na ação. Filete de 1 px. Sombra só no que flutua sobre a página; a cor da sombra segue o tema.

Raios

--rq-raio-0 · -p · -m · -g · -pilula

0 · mídia sangrada

p · 4 px · foto

m · 8 px · controle

g · 16 px · modal

pílula · ação

Elevação

--rq-sombra-1 … -4

1 · controle sobre controle

2 · menu e popover

3 · gaveta e folha

4 · modal e toast

Filete

.rq-filete · --forte · --vertical

Acima do filete

Abaixo do filete

Antes

Depois

Proporções

Para foto e vídeo: aspect-ratio: var(--rq-prop-retrato).

21:9 cinema

16:9 vídeo

3:2 foto

1:1

3:4

4:5 retrato

celular

Densidade e controles

data-densidade="compacta" em qualquer ancestral aperta controles, células de tabela e o espaço entre campos. Para painel, tabela e formulário longo. O site fica na densidade normal.

Camadas

Ordem fixa de sobreposição. Nunca um número solto: sempre o token.