bslib R Package

The bslib package provides a modern UI toolkit for Shiny and R Markdown based on Bootstrap. Key capabilities include:

• Shiny Dashboards: Creation of customizable dashboards using components like cards, value boxes, and sidebars.
• Custom Theming: Theming for Shiny apps and R Markdown documents, including support for real-time interactive theming.
• Modern Bootstrap & Bootswatch: Access to modern versions of Bootstrap and Bootswatch themes, bypassing the older Bootstrap 3 defaults often found in Shiny and R Markdown.

The Shiny for Python framework provides several production-ready UI components for building interactive web applications. Key components include:

• Navigation: Use ui.page_navbar() to implement the primary navigation structure for organizing content across multiple views.
• Containers: Use ui.card() as a content container system to manage various input and output elements.
• Metrics: Use ui.value_box() for displaying key metrics.
• Layout: Use ui.layout_column_wrap() to organize components into structured, responsive layouts that adapt to different screen sizes.

# Example component usage (conceptual)
ui.page_navbar(
    ui.nav_panel("Home", ui.card("Content")),
    ui.nav_panel("Metrics", ui.value_box("Metric", "Value")),
    ui.layout_column_wrap(ui.card("Card 1"), ui.card("Card 2"))
)

Bootswatch themes are designed to be modified. Each theme is composed of two primary files (available in both LESS and SASS):

1. variables.[less|scss]: This file is included by default in Bootstrap and allows you to customize standard Bootstrap settings.
2. bootswatch.[less|scss]: This file introduces more extensive structural changes to the theme.

For detailed instructions on building custom themes, refer to the official Bootswatch Help page.

You can integrate Bootswatch themes into your existing styles using CSS preprocessors.

LESS

Import the Bootstrap LESS files followed by the theme's variables and main LESS file:

@import "bootstrap/less/bootstrap.less";
@import "bootswatch/theme/variables.less";
@import "bootswatch/theme/bootswatch.less";

SASS

Import the theme variables, the official Bootstrap SASS files, and then the theme's SASS file:

@import "bootswatch/theme/variables";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "bootswatch/theme/bootswatch";

The Bootstrap documentation is built with Hugo. To run the documentation on your local machine, follow these steps:

1. Install dependencies: Run npm install to install Node.js dependencies (including Hugo).
2. Build assets: Run npm run test (or the relevant npm script) to rebuild distributed CSS, JavaScript, and documentation assets.
3. Start the server: Run npm start to compile files and generate the docs.
4. Access the site: Open http://localhost:9001/ in your browser.

To use the Shiny framework for building interactive web applications with R, install the shiny package from CRAN and load it into your session.

install.packages("shiny")
library(shiny)

You can install bootstrap-sass using standard package managers:

Bower:

bower install bootstrap-sass

npm / Node.js:

npm install bootstrap-sass

To avoid running individual update scripts in a specific order, use the tools/main.R script to perform a comprehensive upgrade of the package components.

Rscript tools/main.R

You can install Bootstrap 5 using various package managers depending on your environment:

• npm: npm install bootstrap@v5.3.8
• yarn: yarn add bootstrap@v5.3.8
• Bun: bun add bootstrap@v5.3.8
• Composer: composer require twbs/bootstrap:5.3.8
• NuGet:
  • For CSS: Install-Package bootstrap
  • For Sass: Install-Package bootstrap.sass

Alternatively, you can download the latest release as a ZIP file or clone the repository directly via Git.

To use Bootswatch in a Ruby project, add it to your Gemfile:

gem "bootswatch", github: "thomaspark/bootswatch"

Then run bundle install.

Rails Configuration

For Ruby on Rails users, add the Bootswatch load paths to your asset paths in an initializer (e.g., config/initializers/bootswatch.rb):

Rails.application.config.assets.paths += Gem.loaded_specs["bootswatch"].load_paths

Once configured, you can import themes via Sass using the following order:

@import "[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "[theme]/bootswatch";

If you are using Sass (SCSS), you can import theme-specific files to allow for variable overrides. To ensure correct behavior, you must import Bootstrap's bootstrap.scss between the theme's _variables.scss and _bootswatch.scss files.

Follow this import order:

1. Your custom variable overrides.
2. The theme's _variables.scss.
3. Bootstrap's bootstrap.scss.
4. The theme's _bootswatch.scss.

// Your variable overrides go here, e.g.:
// $h1-font-size: 3rem;

@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";