Styling and Templating Quarto Documents

worried about styling taking too much time?

In 20 minutes you won’t anymore

Emil hvitfeldt @ posit::conf 2023

Who are you?

You are a Quarto user or quarturious
Can create documents of various types (because Quarto is awesome)
Haven’t ventured beyond into styling

Imagine

You are doing

weekly reports

at work

and the

higher ups

want you to use the

corporate design

styling can be daunting

but it doesn’t have to

I have

the

opposite

problem

I spend

too much

time

writing slides

The most with little effort

you can go far

with styling using

minimal changes

colors

fonts

sizes

How do you write a theme?

It will depend on format

latex - html - powerpoint - other?

Done differently for different formats

we are assuming

that you know

what you want

HTML documents

index.qmd

---
title: "HTML document"
format: html
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

::: {.cell}

```{.r .cell-code}
1 + 1
```

::: {.cell-output .cell-output-stdout}
```
[1] 2
```
:::
:::

You can add options to executable code like this

::: {.cell}
::: {.cell-output .cell-output-stdout}
```
[1] 4
```
:::
:::

The `echo: false` option disables the printing of code (only output is displayed).

index.html

HTML theming - Sass Variables

index.qmd

---
title: "HTML document"
format: html
theme:
  - styles.scss
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

::: {.cell}

```{.r .cell-code}
1 + 1
```

::: {.cell-output .cell-output-stdout}
```
[1] 2
```
:::
:::

You can add options to executable code like this

::: {.cell}
::: {.cell-output .cell-output-stdout}
```
[1] 4
```
:::
:::

The `echo: false` option disables the printing of code (only output is displayed).

styles.scss

/*-- scss:defaults --*/

/*-- scss:rules --*/

How to change colors

styles.scss

/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-teal: #50847B;
$theme-blue: #76AADB;

$body-bg: $theme-white;
$body-color: $theme-black;
$link-color: $theme-teal;
$code-color: $theme-teal;

/*-- scss:rules --*/
h1 {
color: darken($theme-blue, 50%);
}

h2, h3, h4 {
color: $theme-blue;
}

index.html

How to change fonts

styles.scss

/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-teal: #50847B;
$theme-blue: #76AADB;

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400;1,600&display=swap’);
@import url(‘https://fonts.googleapis.com/css2?family=Source+Code_Pro&display=swap’);

$body-bg: $theme-white;
$body-color: $theme-black;
$link-color: $theme-teal;
$code-color: $theme-teal;

$font-family-sans-serif: ‘Montserrat’, sans-serif;
$font-family-monospace: ‘Source Code Pro’, monospace;

/*-- scss:rules --*/
h1 {
color: darken($theme-blue, 50%);
}

h2, h3, h4 {
color: $theme-blue;
}

index.html

How to change sizes

styles.scss

/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-teal: #50847B;
$theme-blue: #76AADB;

$font-size-root: 20px;
$h1-font-size: $font-size-root * 3;

$body-bg: $theme-white;
$body-color: $theme-black;
$link-color: $theme-teal;
$code-color: $theme-teal;

$font-family-sans-serif: ‘Montserrat’, sans-serif;
$font-family-monospace: ‘Source Code Pro’, monospace;

pre, pre.sourceCode {
font-size: 1.175em;
}

/*-- scss:rules --*/
h1 {
color: darken($theme-blue, 50%);
}

h2, h3, h4 {
color: $theme-blue;
}

index.html

✨✨ Difference ✨✨

index.html

You did it!

Quarto Templates

When you need the same styling 3 times, write a Quarto Template

Creating a Template

Create Github repository

Rename file template.qmd

hidden files not copied

use .quartoignore

zsh

corp-theme-html/
├── .Rhistory
├── .Rproj.user/
├── .git/
├── .gitignore
├── corp-theme-html.Rproj
├── index.qmd template.qmd
└── styles.scss

quarto use template <gh-organization>/<extension>

Make pretty things!

quarto.org

Github quarto-template

Slidecraft 101

EmilHvitfeldt