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:

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)

## table {
##   text-align: center;
##   font-size: 20px;
## }
## 
## th {
##   background-color: lightgreen;
##   height: 30px;
## }

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.

#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)

## table,
## td {
##   text-align: center;
##   font-size: 20px;
## }
## 
## th {
##   background-color: lightgreen;
##   height: 30px;
## }

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

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

## table td {
##   text-align: center;
##   font-size: 20px;
## }

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

mycss <- make_css(list('table td:hover', 'background-color', 'lightyellow'))
print(mycss)

## table td:hover {
##   background-color: lightyellow;
## }

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

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)

## .myclass,
## .myclass2,
## #myid,
## .myclass[type="text"] {
##   padding: 15px;
##   margin-bottom: 15px;
##   background-color: rgba(0,0,0,0.5);
##   box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
## }

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:

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):

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. As a fast example we create a css file using make_css:

#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')

#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!

- make_css and shiny