sistema de diseño de rastrillo

Un resumen de todo lo que ofrece el sistema de diseño. Tema: plain. Idioma: Español.

Las apps de rastrillo reciben todo esto desde el primer día, pero cualquiera puede usar el sistema de diseño. Mejorado progresivamente con JavaScript, aunque no hace falta JavaScript.

Las hojas de estilo

tokens.css es la estructura: las clases de los componentes, la maquetación y las escalas de tipografía, espaciado y radio. Los valores son referencias, definidas en otro sitio. themes/<name>.css es el color, la familia tipográfica y la forma: un único bloque :root donde cada color se declara una vez como par light-dark().

Los scripts

rastrillo.js es la capa de mejora progresiva: sondeo de fragmentos, estados ocupados y cierre ligero. select.js y datetime.js son mejoras: cada una inerte hasta que un control se apunta, cada una borrable por separado.

Cuánto pesa cada archivo

Tamaños de archivo de las distintas piezas.

• tokens.cssEstructura: todas las clases de componentes, todas las escalas y ningún literal de color. El mismo archivo bajo cualquier tema.122033 bytes
• theme-day.cssColor, familia tipográfica y forma del tema day: un único bloque :root donde cada color se declara una vez como par light-dark().10828 bytes
• theme-plain.cssColor, familia tipográfica y forma del tema plain: un único bloque :root donde cada color se declara una vez como par light-dark().10286 bytes
• theme-signal.cssColor, familia tipográfica y forma del tema signal: un único bloque :root donde cada color se declara una vez como par light-dark().11083 bytes
• rastrillo.jsLa capa de mejora progresiva: sondeo de fragmentos, estados ocupados y cierre ligero. La recibe toda app generada.16364 bytes
• select.jsEl combobox con búsqueda de field-select. Inerte hasta que un select se apunta con data-rst-select, y borrable por separado.11919 bytes
• datetime.jsLa entrada en lenguaje natural de los campos de fecha. Inerte hasta que un campo se apunta con data-rst-date o data-rst-time, y borrable por separado.76584 bytes
• calendar.jsLa cuadrícula del mes que abre el botón de calendario de ese campo. Inerte hasta que datetime.js le pide un panel, y borrable por separado: sin ella, el botón recurre al selector propio del navegador.22725 bytes

Una app nueva recibe 259911 bytes de CSS y JavaScript en total: tokens.css, un tema y los scripts.

En una app nueva de rastrillo

rastrillo new escribe esto en el directorio static de la app y lo enlaza desde el layout, tokens.css primero. Desde ese momento son tuyos: edítalos, o borra lo que no uses.

rastrillo new --theme=plain myapp

El tema se fija dos veces. --theme decide qué tema incluido se copia a static/theme.css, y queda registrado al generar la app.

const vendoredTheme = "plain"

Usarlo sin el framework

Los nombres de arriba son enlaces. Coge tokens.css y un tema y ya tienes todo el sistema visual: clases llanas, HTML corriente, sin paso de compilación.

Actualizar

La trampa que conviene conocer antes de que te cueste una tarde: tokens.css se copia al directorio static de la app al generarla y queda congelado ahí, mientras que los partials que estiliza siguen actualizándose con el módulo. Una app puede acabar ejecutando marcado nuevo contra CSS viejo sin decir nada. Vuelve a copiar tokens.css al actualizar, y con él el tema y los scripts.

rastrillo doctor comparará los archivos congelados de una app con los del módulo y ofrecerá volver a copiarlos.