---
title: "make_css"
author: "Theo Boutaris"
date: "`r Sys.Date()`"
output: 
  html_document
vignette: >
  %\VignetteIndexEntry{make_css and shiny}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

In this tutorial we can see how to use `make_css` to create a css file. We can then use this file
in our web application (including shiny) or html file. Initially, we can see how to use this 
function on its own and then the ways we can combine it with shiny.

A simple example of how to use `make_css` would be:

```{r basic, echo = TRUE}
library(tableHTML)
mycss <- make_css(list('table', c('text-align', 'font-size'), c('center', '20px')),
                  list('th', c('background-color', 'height'), c('lightgreen', '30px')))
print(mycss)

```

As seen from the above example `make_css` takes an arbitrary number of lists as arguments. 
The number of lists provided depends on the user and how big the css file will be according to their
needs. Each list needs to have a length of three and needs to follow a specific format i.e.:

* The first element of each list will be the selector. If a vector is provided then the selectors
  will be comma separated.
* The second element of each list will be the style definitions. This can be a vector as well.
* The third element of each list will be the values of the style definitions. This needs to be
  of the same lenght as the second element.
  
```{r example 1}
#another example
mycss <- make_css(list(c('table', 'td'), c('text-align', 'font-size'), c('center', '20px')),
                  list('th', c('background-color', 'height'), c('lightgreen', '30px')))
print(mycss)
```

You can use any selector that you would normally use in a css file:

```{r example 2}
#adding a special selector
mycss <- make_css(list('table td', c('text-align', 'font-size'), c('center', '20px')))
print(mycss)
```

You can even use selectors like hover using the following way:

```{r example 3}
mycss <- make_css(list('table td:hover', 'background-color', 'lightyellow'))
print(mycss)
```

And a more complicated example that uses some of the above:

```{r example 4}
mycss <- make_css(list(c('.myclass', '.myclass2', '#myid', '.myclass[type="text"]'), 
                       c('padding', 'margin-bottom', 'background-color', 'box-shadow'),
                       c('15px', '15px', 'rgba(0,0,0,0.5)', '0 1px 2px #ccc, inset 0 1px 0 #fff')))
print(mycss)
```

The way we used `make_css` above will create a string of the css. In order to save that to a file
we need to use the file argument in the following way:

```{r saving to file, eval = FALSE}
make_css(list(c('table', 'td'), c('text-align', 'font-size'), c('center', '20px')),
         list('th', c('background-color', 'height'), c('lightgreen', '30px')),
         file = 'mycss.css')
```

# make_css and shiny
 
There are two ways to use `make_css` with shiny. 

### Directly in the ui.R

The first one would be directly in the ui.R using `tags$style` (which is what `includeCSS` uses 
behind the scenes after it loads the file):

```{r shiny css, eval = FALSE}
library(shiny)
#ui.R
shinyApp(
 ui = fluidPage(
   fluidRow(
    #leave some spacing
    br(),
    tags$style(make_css(list('tr:hover', 'background-color', 'lightyellow'))),
    column(width = 1),
    uiOutput("mytable"))
 ), 
 server = function(input, output) {
  output$mytable <- renderUI( 
   tableHTML(mtcars, second_headers = list(c(3, 4, 5), c('col1', 'col2', 'col3')))
 )}
)
```

### Creating a file and loading it with includeCSS

The second way is the standard way i.e. creating a file with all the css and then loading it in 
shiny using `includeCSS` in the way it was described in the 
[tableHTML tutorial](https://cran.r-project.org/package=tableHTML/vignettes/tableHTML.html#shiny-and-css). As a fast example we 
create a css file using `make_css`:

```{r shiny css 2, eval = FALSE}
#when working on shiny the css file is best placed in the www/ folder of the shiny app.
#This will then be read by includeCSS in the normal way.
#check the above link for more info.
make_css(list('tr:hover', 'background-color', 'lightyellow'), file = 'www/mycss.css')
```

```{r shiny app with includeCSS, eval = FALSE}
#ui.R
shinyUI(
 fluidPage(
  fluidRow(
   #leave some spacing
   br(),
   column(width = 1),
   #include css file in shiny
   includeCSS('www/mycss.css'),
   uiOutput("mytable"))
 )
)

#server.R
shinyServer(
function(input, output) {
   output$mytable <- renderUI( 
    tableHTML(mtcars, second_headers = list(c(3, 4, 5), c('col1', 'col2', 'col3')))
   )}
)
```

This would complete our tutorial on the `make_css` function!