DEV Community

Andrew B. Collier
Andrew B. Collier

Posted on • Originally published at datawookie.dev on

{emayili} Managing CSS

{emayili} Managing CSS

I love the clean simplicity of an R Markdown document. But sometimes it can feel a little bare and utilitarian. This is especially the case if it’s rendered into the body of an email. How about injecting a little more pizzazz?

library(emayili)

msg <- envelope()
Enter fullscreen mode Exit fullscreen mode

(In|Ex)cluding Rendered CSS

By default the knitting process for an R Markdown document will inject CSS from Bootstrap and highlightjs. When you render() an R Markdown document in {emayili} these CSS will be included in the <head> of the HTML document. This actually results in quite a lot of content, often more than contained in the <body> of the document.

If you want to generate a more lightweight message then you can use include_css option to turn off the CSS.

msg %>%
  # Do include rendered CSS (default).
  render("styling.Rmd", include_css = TRUE)

msg %>%
  # Don't include rendered CSS.
  render("styling.Rmd", include_css = FALSE)
Enter fullscreen mode Exit fullscreen mode

Let’s take a look at those two options. This is what it looks like in Thunderbird when the rendered CSS is included.

And this is it without the rendered CSS.

Custom CSS

Now, what about including some custom CSS? Use the css_files argument to specify one or more CSS files that will get baked into the message.

msg %>%
  render("styling.Rmd", include_css = FALSE, css_files = "styling.css")
Enter fullscreen mode Exit fullscreen mode

Here’s the contents of styling.css:

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

h2 {
  font-family: 'Pacifico', cursive;
}

p {
  font-family: 'Roboto', sans-serif;
}

body {
  background-color: grey;
  color: white;
  margin: 0 30px;
}

hr {
  height: 1px;
  background-color: white;
  border: none;
}
Enter fullscreen mode Exit fullscreen mode

We’re pulling in some custom Google Fonts, changing the background colour of the page and adding in some margins, along with a few other tweaks.

And this is what it looks like. I can’t claim to have any aesthetic sense at all. Sorry. I’m sure that you can do a lot better!

With these options at your disposal there’s really no excuse for creating “ordinary” emails. Now’s your chance to be extra-ordinary.

Discussion (0)