Creating a Design System for Shiny and RMarkdown
summary
Creates a reusable R package that bundles a CSS file, JavaScript, and an R wrapper so Shiny and R Markdown elements render consistently across apps, replacing eight inconsistent buttons with one primary_btn. Shows how to attach classes with tagListAppendAttribute and include assets via htmlDependency, demonstrates a ripple effect, hover and focus states, a documented design kit (output plus code) and working examples that render and style correctly.
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
21mDesigning for people is hard
32mIntroduction to Design Systems
17mWe CAN have nice Shiny apps: What's new in Shiny's UI & UX
19mHarnessing React to Build Consistently Designed Applications
27mFoundations of Design Systems
29mDesign at scale with Web Components (and ducks)