sistema de design do rastrillo

Uma visão geral de tudo o que o sistema de design oferece. Tema: day. Idioma: Português.

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, estados ocupados e fecho leve. 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 de ficheiro das várias peças.

• tokens.cssEstrutura: todas as classes de componentes, todas as escalas e nenhum literal de cor. O mesmo ficheiro em qualquer tema.122033 bytes
• 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().10828 bytes
• 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().10286 bytes
• 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().11083 bytes
• rastrillo.jsA camada de melhoria progressiva: sondagem de fragmentos, estados ocupados e fecho leve. Toda app gerada a recebe.16364 bytes
• select.jsA combobox pesquisável do field-select. Inerte até um select aderir com data-rst-select, e apagável por si só.11919 bytes
• 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ó.76584 bytes
• 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.22725 bytes

Uma app nova recebe 260453 bytes de CSS e JavaScript no total: 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=day 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 = "day"

Usá-lo sem a framework

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

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.