Primeiros passos

As apps rastrillo recebem tudo isto no primeiro dia, mas qualquer pessoa pode usar o sistema de design. Melhorado progressivamente com JavaScript, mas sem exigir JavaScript.

As folhas de estilo

O tokens.css é a estrutura: as classes dos componentes, o layout e as escalas de tipo, espaçamento e raio. Os valores são referências, definidas noutro sítio. O themes/<name>.css é cor, família tipográfica e forma: um único bloco :root onde cada cor é declarada uma vez como par light-dark().

Os scripts

rastrillo.js é a camada de melhoria progressiva: sondagem de fragmentos, fecho leve e o arrastar do interruptor. busy.js é a regra de ocupado. anchor.js mantém os menus suspensos dentro do ecrã onde o CSS não consegue. select.js e datetime.js são melhorias, cada uma inerte até um controlo aderir, cada uma apagável por si só.

Quanto pesa cada ficheiro

Tamanhos em KiB. O que um visitante descarrega é a versão com gzip.

tokens.cssEstrutura: todas as classes de componentes, todas as escalas e nenhum literal de cor. O mesmo ficheiro em qualquer tema.281 tal como está escrito · 73 com gzip · 21 com gzip e sem comentários
theme-day.cssCor, família tipográfica e forma do tema day: um único bloco :root onde cada cor é declarada uma vez como par light-dark().27 tal como está escrito · 7,3 com gzip · 1,7 com gzip e sem comentários
theme-plain.cssCor, família tipográfica e forma do tema plain: um único bloco :root onde cada cor é declarada uma vez como par light-dark().18 tal como está escrito · 4,2 com gzip · 1,1 com gzip e sem comentários
theme-signal.cssCor, família tipográfica e forma do tema signal: um único bloco :root onde cada cor é declarada uma vez como par light-dark().18 tal como está escrito · 4,6 com gzip · 1,2 com gzip e sem comentários
shell.cssO deslize entre páginas no telemóvel, para os invólucros sidebar e console. Apagável juntamente com o shell.js.4,2 tal como está escrito · 1,1 com gzip · 0,5 com gzip e sem comentários
rastrillo.jsA camada de melhoria progressiva: sondagem de fragmentos, fecho leve e o arrastar do interruptor. Toda app gerada a recebe.19 tal como está escrito · 7,2 com gzip · 2,6 com gzip e sem comentários
busy.jsA regra de ocupado: enquanto um formulário é enviado, o seu botão mostra um indicador de carregamento durante pelo menos 650 ms e recusa um segundo envio; ao voltar atrás, é reposto. Toda app gerada a recebe.15 tal como está escrito · 5,3 com gzip · 1,3 com gzip e sem comentários
live.jsPáginas em direto: secções que se atualizam quando o servidor diz que os seus dados mudaram, e formulários que guardam no próprio sítio. Inerte até uma página trazer a etiqueta meta rastrillo-live, e apagável por si só.29 tal como está escrito · 10,0 com gzip · 5,0 com gzip e sem comentários
light.jsA luz que os estilos de profundidade leem: sombras iluminadas conforme a hora, e um brilho no botão sob o ponteiro. Apague-o para o design parado.11 tal como está escrito · 4,1 com gzip · 2,1 com gzip e sem comentários
anchor.jsMantém o menu de um dropdown dentro do ecrã em navegadores sem posicionamento por âncora de CSS. Não faz nada onde o têm: apague-o quando todos os navegadores que suporta o tiverem.3,2 tal como está escrito · 1,4 com gzip · 0,6 com gzip e sem comentários
shell.jsA navegação no telemóvel dos invólucros sidebar e console: o deslize entre páginas, um Voltar que reutiliza o histórico e o foco devolvido à secção que deixou. Apagável por si só.8,0 tal como está escrito · 3,2 com gzip · 1,4 com gzip e sem comentários
transition.jsImpede o registo de um erro quando uma transição de página é ignorada nas páginas column, stage e topbar. As páginas sidebar e console não precisam dele.0,9 tal como está escrito · 0,4 com gzip · 0,4 com gzip e sem comentários
select.jsA combobox pesquisável do field-select. Inerte até um select aderir com data-rst-select, e apagável por si só.55 tal como está escrito · 18 com gzip · 8,0 com gzip e sem comentários
datetime.jsA entrada em linguagem natural dos campos de data. Inerte até um campo aderir com data-rst-date ou data-rst-time, e apagável por si só.76 tal como está escrito · 24 com gzip · 11 com gzip e sem comentários
calendar.jsA grelha do mês que o botão de calendário desse campo abre. Inerte até o datetime.js lhe pedir um painel, e apagável por si só: sem ela, o botão recorre ao seletor do próprio navegador.22 tal como está escrito · 7,1 com gzip · 3,1 com gzip e sem comentários

Uma app nova recebe 543 KiB de CSS e JavaScript tal como está escrito, 160 KiB com gzip: o tokens.css, um tema e os scripts.

Numa app nova de rastrillo

O rastrillo new escreve isto no diretório static da app e liga-o a partir do layout, o tokens.css primeiro. A partir daí são seus: edite-os, ou apague o que não usar.

rastrillo new --theme=signal myapp

O tema é fixado duas vezes. O --theme decide qual dos temas entregues é copiado para static/theme.css, e isso fica registado no momento em que a app é gerada.

const vendoredTheme = "signal"

Usá-lo sem a framework

Os nomes acima são links. Pegue no tokens.css e num tema e tem o sistema visual inteiro: atributos sobre HTML comum, sem passo de build.

Ligue-os por esta ordem, tokens.css primeiro:

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="theme-signal.css">

Atualizar

A armadilha que vale a pena conhecer antes de lhe custar uma tarde: o tokens.css é copiado para o diretório static da app no momento em que ela é gerada e fica congelado ali, enquanto os partials que ele estiliza continuam a atualizar com o módulo. Uma app pode correr marcação nova contra CSS antigo sem dizer nada. Volte a copiar o tokens.css ao atualizar, e com ele o tema e os scripts.

O rastrillo doctor vai comparar os ficheiros congelados de uma app com os do módulo e propor voltar a copiá-los.