Nick Strayer || Part IV: Styling a Shiny Wordle App with CSS || RStudio
00:00 Introduction
00:44 Switching from verbatimTextOutput to uiOutput
01:42 Switching from renderText to HTML DOM elements
03:17 In-line styling with divs
07:30 Converting individual letters from block elements to adjacent grids with CSS grid
08:56 Adding CSS at the head of the UI variable in Shiny with tags$head (and wrapping with HTML!)
10:36 CSS targeting of the background color
12:24 Link: Complete Guide to CSS Grid
14:05 Moving text position within each individual div using CSS classes
16:48 Creating a gap between grid elements
17:13 Rounding border edges for letter grids
19:00 Formatting letter grid background color to indicate result "correctness"
21:30 Increasing font size
23:37 Updating the legend to use color, not text indicators
26:40 Adjusting padding to improve app aesthetic
28:08 Formatting the app UI with justified centering
31:56 Adjusting the text input and Go button
34:07 Why Flexbox is the right tool for this task
35:09 Exploring Flexbox Dev Tools in Chrome
39:14 Adjusting the colors of letter grids using Inspect Element
40:40 Making text bold with font-weight
41:04 Hint on how to approach formatting the keyboard
In final installment of this four-part series, RStudio's Nick Strayer walks through using CSS to stylize our Shiny Wordle app.
Code + word list: https://github.com/wch/shiny-wordle
Check out the full Shiny app here: https://winston.shinyapps.io/wordle/
You can learn more about Shiny here: https://shiny.rstudio.com/
Got questions? The RStudio Community site is a great place to get assistance: https://community.rstudio.com/
Content: Nick Strayer (@NicholasStrayer)
Animation, design, and editing: Jesse Mostipak (@kierisi)
Music: Lakal by Blue Dot Sessions
Wordle: https://www.powerlanguage.co.uk/wordle/
rstudio
Shiny
shinyapps
RStudio
Data Science
Machine Learning
Python
Stats
Tidyverse
Data Visualization
Data Viz
Ggplot
Technology
Coding
Connect
Server Pro
Shiny
RMarkdown
Package Manager
CRAN
Interoperability
Serious Data Science
Dplyr
Forcats
Ggplot2
Tibble
Readr
Stringr
Tidyr
Purrr
Github
Data Wrangling
Tidy Data
Odbc
Rayshader
Plumber
Blogdown
Gt
Lazy Evaluation
Tidymodels
Statistics
Debugging
Programming Education
RStats
Open Source
OSS
Reticulate
Css
Wordle
Nick Strayer
