EVOLUTION-MANAGER
Edit File: bs_bundle.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>R: Add low-level theming customizations</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="R.css" /> </head><body> <table width="100%" summary="page for bs_add_variables {bslib}"><tr><td>bs_add_variables {bslib}</td><td style="text-align: right;">R Documentation</td></tr></table> <h2>Add low-level theming customizations</h2> <h3>Description</h3> <p>Compared to higher-level theme customization available in <code><a href="bs_theme.html">bs_theme()</a></code>, these functions are a more direct interface to Bootstrap Sass, and therefore, do nothing to ensure theme customizations are portable between major Bootstrap versions. </p> <h3>Usage</h3> <pre> bs_add_variables( theme, ..., .where = "defaults", .default_flag = identical(.where, "defaults") ) bs_add_rules(theme, rules) bs_add_functions(theme, functions) bs_add_mixins(theme, mixins) bs_bundle(theme, ...) </pre> <h3>Arguments</h3> <table summary="R argblock"> <tr valign="top"><td><code>theme</code></td> <td> <p>a <code><a href="bs_theme.html">bs_theme()</a></code> object.</p> </td></tr> <tr valign="top"><td><code>...</code></td> <td> <ul> <li> <p><code>bs_add_variables()</code>: Should be named Sass variables or values that can be passed in directly to the <code>defaults</code> argument of a <code><a href="../../sass/html/sass_layer.html">sass::sass_layer()</a></code>. </p> </li> <li> <p><code>bs_bundle()</code>: Should be arguments that can be handled by <code><a href="../../sass/html/sass_layer.html">sass::sass_bundle()</a></code> to be appended to the <code>theme</code> </p> </li></ul> </td></tr> <tr valign="top"><td><code>.where</code></td> <td> <p>Whether to place the variable definitions before other Sass <code>"defaults"</code>, after other Sass <code>"declarations"</code>, or after other Sass <code>"rules"</code>.</p> </td></tr> <tr valign="top"><td><code>.default_flag</code></td> <td> <p>Whether or not to add a <code>!default</code> flag (if missing) to variable expressions. It's recommended to keep this as <code>TRUE</code> when <code>.where = "defaults"</code>.</p> </td></tr> <tr valign="top"><td><code>rules</code></td> <td> <p>Sass rules. Anything understood by <code><a href="../../sass/html/as_sass.html">sass::as_sass()</a></code> may be provided (e.g., a list, character vector, <code><a href="../../sass/html/sass_import.html">sass::sass_file()</a></code>, etc)</p> </td></tr> <tr valign="top"><td><code>functions</code></td> <td> <p>A character vector or <code><a href="../../sass/html/sass_import.html">sass::sass_file()</a></code> containing functions definitions.</p> </td></tr> <tr valign="top"><td><code>mixins</code></td> <td> <p>A character vector or <code><a href="../../sass/html/sass_import.html">sass::sass_file()</a></code> containing mixin definitions.</p> </td></tr> </table> <h3>Value</h3> <p>a modified <code><a href="bs_theme.html">bs_theme()</a></code> object. </p> <h3>Functions</h3> <ul> <li> <p><code>bs_add_variables</code>: Add Bootstrap Sass <a href="https://getbootstrap.com/docs/4.4/getting-started/theming/#variable-defaults">variable defaults</a> </p> </li> <li> <p><code>bs_add_rules</code>: Add additional <a href="https://sass-lang.com/documentation/style-rules">Sass rules</a> </p> </li> <li> <p><code>bs_add_functions</code>: Add additional <a href="https://rstudio.github.io/sass/articles/sass.html#functions-1">Sass functions</a> </p> </li> <li> <p><code>bs_add_mixins</code>: Add additional <a href="https://rstudio.github.io/sass/articles/sass.html#mixins-1">Sass mixins</a> </p> </li> <li> <p><code>bs_bundle</code>: Add additional <code><a href="../../sass/html/sass_layer.html">sass::sass_bundle()</a></code> objects to an existing <code>theme</code>. </p> </li></ul> <h3>References</h3> <p><a href="https://getbootstrap.com/docs/4.4/getting-started/theming/">https://getbootstrap.com/docs/4.4/getting-started/theming/</a> </p> <p><a href="https://rstudio.github.io/sass/articles/sass.html#layering">https://rstudio.github.io/sass/articles/sass.html#layering</a> </p> <h3>Examples</h3> <pre> # Function to preview the styling a (primary) Bootstrap button library(htmltools) button <- tags$a(class = "btn btn-primary", href = "#", role = "button", "Hello") preview_button <- function(theme) { if (interactive()) { browsable(tags$body(bs_theme_dependencies(theme), button)) } } # Here we start with a theme based on a Bootswatch theme, # then override some variable defaults theme <- bs_add_variables( bs_theme(bootswatch = "sketchy", primary = "orange"), "body-bg" = "#EEEEEE", "font-family-base" = "monospace", "font-size-base" = "1.4rem", "btn-padding-y" = ".16rem", "btn-padding-x" = "2rem" ) preview_button(theme) # If you need to set a variable based on another Bootstrap variable theme <- bs_add_variables(theme, "body-color" = "$success", .where = "declarations") preview_button(theme) # Start a new global theme and add some custom rules that # use Bootstrap variables to define a custom styling for a # 'person card' person_rules <- system.file("custom", "person.scss", package = "bslib") theme <- bs_add_rules(bs_theme(), sass::sass_file(person_rules)) # Include custom CSS that leverages bootstrap Sass variables person <- function(name, title, company) { tags$div( class = "person", h3(class = "name", name), div(class = "title", title), div(class = "company", company) ) } if (interactive()) { browsable(shiny::fluidPage( theme = theme, person("Andrew Carnegie", "Owner", "Carnegie Steel Company"), person("John D. Rockefeller", "Chairman", "Standard Oil") )) } </pre> <hr /><div style="text-align: center;">[Package <em>bslib</em> version 0.4.0 <a href="00Index.html">Index</a>]</div> </body></html>