In rstudio/bootstraplib: Custom 'Bootstrap' 'Sass' Themes for 'shiny' and 'rmarkdown'

Sass is an CSS extension language that helps reduce complexity and increase composability when styling a website. Bootstrap Sass is just one example of a Sass-based project that exposes Sass variables to allow users to easily customize CSS styles.

TODO: do a better job here

When a bs_theme() is used with Shiny or R Markdown, the {sass} object underlying the theme object is compiled into CSS at run-time. Compared to custom theming by overlaying additional CSS rules (which, historically, has been the only way to implement custom themes), there are at least a few huge benefits in taking the Sass based approach:

• Sass variables (e.g., $border-radius) provide a useful abstraction to not only reduce the amount of code you need to write, but it also protects you from future changes in HTML/CSS markup that may end up breaking your CSS rules.

• The Sass language itself provides many useful tools for writing CSS more elegantly (i.e., variables, functions, and mixins) as well as many useful utiltiles for computing with CSS values (e.g., color

• Sass variables not only generate a custom build of Bootstrap CSS (thus, avoiding duplicated CSS rules), but it also gives 3rd party components the opportunity to provide better default styles based on underlying {sass} object (thanks to {bslib}'s theming tools for custom components).

  • This shift in approach allows sophisticated, custom, components like shiny::sliderInput(), shiny::dateRangeInput(), DT::datatable(), etc. "just work" with custom and dynamically updating themes.

rstudio/bootstraplib documentation built on June 17, 2024, 9:42 a.m.