Css

Showing of

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/

Nick Strayer

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

shiny	Search all fields
title:shiny	Title only
date:>2025-01-01	After a date
(a OR b) AND c	Group with parens

Css

Nick Strayer || Part IV: Styling a Shiny Wordle App with CSS || RStudio

Top 3 Coding Best Practices from the Shiny Contest

New Shiny article: Style your apps with CSS

No items found