Tom Mock & Shannon Haggerty | Theming Shiny and RMarkdown with {thematic} & {bslib}

Transcript#

This transcript was generated automatically and may contain errors.

Alright, thank you so much, Sam. Shannon and I are going to be talking a little bit about the thematic and bootstrap lib package today. In short, these are new packages to theme shiny as well as RMarkdown and traditional web content. And we're really excited about kind of the breadth of what this can do for theming and kind of the ease of use to get started.

So first off, introducing these packages bootstrap lib, or we're calling bslib is really just simplified theming of web content via bootstrap. Now web content meaning could be shiny could be RMarkdown and, you know, bootstrap as well as for traditional web pages. So there's a lot of power there. Thematic, on the other hand, is kind of a complementary package to bslib, which is simplified theming of our plots, meaning ggplot, lattice, base and plotly. That is kind of works in conjunction with bslib. Both of these have packaged down websites where you can find out a lot more info about them. Thematic is on CRAN already and bootstrap lib is kind of waiting in the CRAN queue. So it should hopefully be the next few days. If you want to get started with them today, you can always install the dev versions from GitHub, as you see here with this code. And a big thanks to Carson Seaver who let me adapt some of his slides for today's presentation. He's one of the core devs working on both bootstrap lib and thematic as part of our Shiny team.

Bootstrap and bslib basics

So first off, for some folks, you may have been using Shiny before, you may have been using RMarkdown before, but less people are kind of aware of using bootstrap natively. And what this is, is really just a lot of CSS and JavaScript plugins for front end web development. You can dive deeper into bootstrap and we're going to have a great presentation about SAS, which is kind of using these variables right after this presentation. But in short, this is kind of working behind the scenes in bslib and other packages and kind of provides you all these niceties without you having to know about it.

So bootstrap lib is a wrapper around custom bootstrap themes and makes it really easy to theme your documents and use things like SAS variables without having to write all this custom CSS out of the box. Now, if you do know those skills and if you gain those skills from someone like Absalon or have them working with you, they can further extend your applications with CSS or SAS variables. But again, this is really kind of a R interface and functions where you don't have to know all of it to get started. And again, you've been using components of this through Shiny and R Markdown for years, you just probably didn't know it.

So to start using bslib, it's really just a one function call. So we have a very basic Shiny up here for the UI component and we're also going to load the bslib package. So we could call a fluid page, although it could really be any component of Shiny. And this theme argument will take bs underscore theme as the argument. So this will provide kind of an interface to bslib and all the different theming components you could do like background, foreground, fonts, changing all these different components in bulk on the page without having to write individual CSS for each item. So fluid page, navbar page, bootstrap page, all these different things have the same kind of theme equals bs theme argument. And again, you may have been using this theme argument of something like Shiny themes or writing your own custom bootstrap CSS bootstrap theme is more powerful kind of in our minds because you are providing, you know, again, SAS variables and all the niceties of bootstrap in there. Again, either the power or the ease of use kind of both balanced together.

Now, something to note here is that for bootstrap users, this is moving from bootstrap three to bootstrap four, which is a more modern, more recent implementation of bootstrap. So there is some compatibility layers here that should help most shiny apps just work out of the box and upgrade to bootstrap four. However, if you have some legacy applications, you could always try version equals three here in the BS theme argument if it is kind of messing with you with your overall theming. But for new applications, just stick to bootstrap four. It's, again, a more recent version, and that'll be the good recommendation.

Now, in terms of what bootstrap three versus bootstrap four looks like, really, it's hard to tell the difference. You might see it here in terms of like this blue is slightly lighter. The fonts are a little bit different, maybe not as bold. Really, most of the benefits are behind the scenes, like just switching conversion in three to four might give you this more slightly modern looking feel, but it's not going to change the core of your application just with the base theme. But there are, again, lots of things built in there that it's worth upgrading to four.

Previewing and customizing themes

To preview a theme and actually get into some of the bulk of what these themes can do for you, you can call this new function for BS lib BS underscore theme underscore preview. This will take BS theme as an argument, and you can provide either custom themes that you built yourself or full boot swatch themes, which are essentially open source free themes that other people have created. So you can see with essentially one line of code, we've taken this basic shiny application and themed every component of it. So the fonts are different. This is perpetuated into all of the dropdowns. So the date, the select input, state ranges, the slider bars, all of those will respect the right colors, the right fonts, and other components that you're changing as well as the kind of pop ups or action buttons.

So primary, secondary warnings, danger buttons, accent colors. Again, all of this is changing kind of in bulk and together in a unified interface. So if you want to just use one of these boots, watch themes out of the box, they're going to be very powerful and should be very pretty. A lot of them have been kind of used for front end development for years, but you can also kind of customize wide portions of your app with things like SAS variables or other functions built into Bootstrap.

So again, while I've kind of hit on this a couple of times, I really want to protect people in terms of don't be scared if there's things in here that you haven't seen before. If you want to learn those, you'll be even more powerful, but they're not necessary to use it. So if you did want to dive deeper into SAS, again, there's going to be a presentation right after this about it. And there is some documentation about the SAS R wrapper for R packages that will let you kind of learn how to use those. In short, I'm not going to read this whole thing, but SAS is really a meta language on top of CSS. So if you think of CSS as changing individual components, SAS would kind of provide a more elegant or systematic syntax, letting you change multiple things at one time. This usually leads to more manageable style sheets or styling in general.

So I mentioned earlier that you can create your own theme. So we showed a pre-built boot swatch theme. Now we're using essentially the same argument. So bootstrap theme, but we're kind of mandating what specific components we want to change. So again, this theme may not be the most pretty thing to you. I kind of made it a little bit garish just to pop out. But you can see the background is gray. The foreground is black. So we have a background of gray and then the font will be in black. The primary color is this lovely purple, which goes along with our ladies. And I really do like it, maybe not with this great theme. And then we changed the base font to Francis, which is kind of, again, a very different font. And you can see that the font is perpetuated into each of the different sections.

You might also notice that I didn't have to load externally a different font. I just said, you know, pull in this Google font process and I could change it to anything I want. And it will automatically pull in the style CSS and the Google font, download it and load it in your application. So making it really easy to import Google fonts. And there's hundreds of different ones you could use here, as well as the most common ones used in web dev.

If we switch over to probably a better palette in terms of not one I created randomly, but one that's based off something like Material Dark, you can again see that we've changed all the components at once. So the background's changed, the foreground is still this lovely purple. And then we have a new font, this time Fira Sans, which is one font that I actually really do like. And again, it's perpetuating this into the sliders, into all the different components all at once. And with minimal code, I'm able to create a robustly themed application.

And with minimal code, I'm able to create a robustly themed application.

We'll go over a demo of like what all these different things are. In short, like this screenshot shows you the bulk of it. But you can use Bootstrap Preview with this to show what plots would look like, what tables would look like, notifications, different fonts. And you can actually customize it live inside the Shiny application, which is really cool. And so I will show you that right now in terms of what the preview looks like.

So why this matters, it's because it's going to help you to create really cohesive, beautiful R Markdown and Shiny applications after you've spent all that time customizing the look of your applications, of your R Markdown report, thematic is going to let you easily apply those settings to your plots to, again, make everything look really nice and cohesive.