2020-05-29

Styling

For web content we use different R-centric frameworks and components in ABM:

  • shinydashboard (based on Admin LTE)
  • shinythemes for the “outer shell”
  • flexdashboard (web-content) for the “inner frame”

We also use “ktheme” for ggplot2 (static images / plots / visuals), which can be used to style Rmarkdown content and PDF output.

kth-style vs ktheme vs bootswatch-kth

What is the difference?

  • ktheme is for theming plots, visuals, graphs esp if made with ggplot2
  • kth-style is primarily for central KTH web apps built with Node / React JS-stacks and provides the KTH official Bootstrap 4 styles
  • bootswatch-kth provides a Bootstrap v3 variant of the Bootswatch “Flatly” theme adapted to use KTH colors and fonts and which works better with R-centric stacks which favor BS3 styles in many cases

Using ktheme

Styling flexdashboard web content

One approach for integrating a KTH-like style into the R web frameworks used is to generate a bootswatch-like CSS for KTH and then tell the R web frameworks to use that CSS. It needs to use Bootstrap 3.4+ but not Bootstrap 4 styling.

This can be accomplished by cloning the https://github.com/thomaspark/bootswatch.git - and checking out the “v3” branch. A set of LESS-files are then needed.

A repository is available at https://github.com/KTH-Library/bootswatch-kth which does this customizations and provides the resulting CSS files. Use the v3 bootstrap.css in the flexdashboard with the parameter “css”.

Further, there is https://rmarkdown.rstudio.com/flexdashboard/using.html#css_styles which describes that bootswatch css can be used but in addition to flexdashboard-specifics here: https://github.com/rstudio/flexdashboard/tree/master/inst/rmarkdown/templates/flex_dashboard/resources

Example

Modifying the styles

Resources

e-Book: “Outstanding User Interfaces with Shiny”