Creating a Design System for Shiny and RMarkdown
summary
A reusable R package bundles CSS, JS and R wrappers so Shiny, Quarto and RMarkdown share one visual language: a primary_btn component (CSS rules for normal/hover/focus/disabled), JavaScript ripple effects, and accessible color-contrast rules. Code uses tagListAppendAttribute plus htmltools::htmlDependency and lives in inst/css+js so assets ship with the package. The uploaded design kit includes rendered output and the exact source so components are documented, reproducible and consistent across apps.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:32What is a design system
- 2:58Color and spacing rules
- 4:06Reusable Shiny components
- 5:10HTML vs Bootstrap buttons
- 6:18Custom button with CSS
- 7:26Custom classes and dependencies
- 8:27Button states and pseudo selectors
- 9:10JavaScript for interactivity
- 9:31Design kit walkthrough
- 10:33Micro interactions and UI kit
- 11:15Resources and closing
related talks
12mCreating a Design System for Shiny and RMarkdown
18mDesign of Everyday Shiny Apps
17mWe CAN have nice Shiny apps: What's new in Shiny's UI & UX
19mHarnessing React to Build Consistently Designed Applications
35mDesign system - From a Developer Point-of-View
32mIntroduction to Design Systems
29mDesign at scale with Web Components (and ducks)
22mDesign Systems, when and how much? — Diana Mounter