Primeros pasos

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, cierre ligero y el arrastre del interruptor. busy.js es la regla de ocupado. anchor.js mantiene los menús desplegables dentro de la pantalla donde CSS no puede. 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 en KiB. Lo que descarga un visitante es la versión con gzip.

• tokens.cssEstructura: todas las clases de componentes, todas las escalas y ningún literal de color. El mismo archivo bajo cualquier tema.281 tal como está escrito · 73 con gzip · 21 con gzip y sin comentarios
• 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().27 tal como está escrito · 7,3 con gzip · 1,7 con gzip y sin comentarios
• 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().18 tal como está escrito · 4,2 con gzip · 1,1 con gzip y sin comentarios
• 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().18 tal como está escrito · 4,6 con gzip · 1,2 con gzip y sin comentarios
• shell.cssEl deslizamiento entre páginas en el móvil, para los shells sidebar y console. Borrable junto con shell.js.4,2 tal como está escrito · 1,1 con gzip · 0,5 con gzip y sin comentarios
• rastrillo.jsLa capa de mejora progresiva: sondeo de fragmentos, cierre ligero y el arrastre del interruptor. La recibe toda app generada.19 tal como está escrito · 7,2 con gzip · 2,6 con gzip y sin comentarios
• busy.jsLa regla de ocupado: mientras un formulario se envía, su botón muestra un indicador de carga durante al menos 650 ms y rechaza un segundo envío; al volver atrás se restablece. La recibe toda app generada.15 tal como está escrito · 5,3 con gzip · 1,3 con gzip y sin comentarios
• live.jsPáginas en vivo: secciones que se actualizan cuando el servidor avisa de que sus datos cambiaron, y formularios que guardan en el sitio. Inerte hasta que una página lleva la etiqueta meta rastrillo-live, y borrable por separado.29 tal como está escrito · 10,0 con gzip · 5,0 con gzip y sin comentarios
• light.jsLa luz que leen los estilos de profundidad: sombras iluminadas según la hora, y un brillo en el botón bajo el puntero. Bórralo para el diseño estático.11 tal como está escrito · 4,1 con gzip · 2,1 con gzip y sin comentarios
• anchor.jsMantiene el menú de un desplegable dentro de la pantalla en navegadores sin posicionamiento por anclaje de CSS. No hace nada donde lo tienen: bórralo cuando todos los navegadores que admites lo tengan.3,2 tal como está escrito · 1,4 con gzip · 0,6 con gzip y sin comentarios
• shell.jsLa navegación en el móvil de los shells sidebar y console: el deslizamiento entre páginas, un Atrás que reutiliza el historial y el foco devuelto a la sección que dejaste. Borrable por separado.8,0 tal como está escrito · 3,2 con gzip · 1,4 con gzip y sin comentarios
• transition.jsEvita que una transición de página omitida registre un error en las páginas column, stage y topbar. Las páginas sidebar y console no lo necesitan.0,9 tal como está escrito · 0,4 con gzip · 0,4 con gzip y sin comentarios
• select.jsEl combobox con búsqueda de field-select. Inerte hasta que un select se apunta con data-rst-select, y borrable por separado.55 tal como está escrito · 18 con gzip · 8,0 con gzip y sin comentarios
• 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.76 tal como está escrito · 24 con gzip · 11 con gzip y sin comentarios
• 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.22 tal como está escrito · 7,1 con gzip · 3,1 con gzip y sin comentarios

Una app nueva recibe 552 KiB de CSS y JavaScript tal como está escrito, 162 KiB con gzip: 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=day 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 = "day"

Usarlo sin el framework

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

Enlázalos en este orden, primero tokens.css:

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

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.