# Customize-Shiny-with-HTML-CSS

**Repository Path**: Alexhaoge/Customize-Shiny-with-HTML-CSS

## Basic Information

- **Project Name**: Customize-Shiny-with-HTML-CSS
- **Description**: Customize Shiny UI and Rmarkdown with HTML and CSS
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-19
- **Last Updated**: 2022-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Customize Shiny with HTML/CSS
This repository contains the codes and slides of computational tutorial *Customize Shiny UI with HTML and CSS* at [Latent Structural Lab](https://krisrs1128.github.io/LSLab/), Department of Statistics, UW-Madison, 01/24/2022.

## Table of Contents
- [Embedding HTML/CSS into Markdown for Customization](https://alexhaoge.xyz/data/mdcustom.html)
- [HTML Basics](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#6)
- [Using HTML in Shiny](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#10)
  - With `htmltools` -  [example](http://www.alexhaoge.xyz:3838/htmlcss/)
  - HTML Templates - [example1](http://www.alexhaoge.xyz:3838/htmltemplateexp1/) [example2](http://www.alexhaoge.xyz:3838/htmltemplateexp2/)
- [CSS Basics](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#14)
- [Using CSS in Shiny](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#25) - [example](http://www.alexhaoge.xyz:3838/htmlcss/)
- [Importing External CSS and JavaScript Dependencies](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#26)
  - [Example](http://www.alexhaoge.xyz:3838/jscssimport/)
- [Bootstrap - Easy Way to Write Beautiful UI](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#27)
  - [bslib - Change Boostrap Version and Customize Theme](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#30)
  - [Video](https://www.youtube.com/watch?v=YJCgUe5SS9M)
- [An even easier solution!](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#33)
  - [Example](http://www.alexhaoge.xyz:3838/easysol/) and [Video](https://www.youtube.com/watch?v=w-TnXXt9d2k)
- [Browser Developer Tools](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#35)
- [Reference](https://alexhaoge.github.io/Customize-Shiny-with-HTML-CSS/#37)