Styling Quarto Presentations

Themes!

There are 11 built-in themes provided for Reveal presentations! The default, dark, and simple themes use fairly classic typography and color schemes and are a good place to start.


The default theme is used automatically — use the theme option to switch to an alternate theme.

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---



Link to default themes available

Incrementing

Lists

Locally

::: {.incremental}

- item 1
- item 2
- item 3

:::


  • item 1
  • item 2
  • item 3

Globally

format:
  revealjs:
    incremental: true

Pauses

If you don’t have a list of things, but you want to increment components of your slide…


content before the pause

. . .

content after the pause


content before the pause

content after the pause

Fragments

If you have columns and you would like to increment when and how columns appear…


Fade out

Fade in then GROW then fade semi out

Slide up while fading in

Implementation

::: columns
::: {.column width="30%"}
::: {.fragment .fade-in-then-out}
Fade out
:::
:::

::: {.column width="3%"}
:::

::: {.column width="30%"}
::: {.fragment .fade-in}
::: {.fragment .grow}
::: {.fragment .semi-fade-out}
Fade in then GROW then fade semi out
:::
:::
:::
:::

::: {.column width="3%"}
:::

::: {.column width="30%"}
::: {.fragment .fade-up}
Slide up while fading in
:::
:::
:::


Learn more about fragments here!

Callouts

If you want to remind your audience of something important…


Same format!

Remember, you can use the same format to get a callout in a presentation!

::: {.callout-tip}

:::

Tabsets

are quite useful for displaying content side-by-side…


converts all letters in the strings to lowercase


my_vector_of_strings <- c("Hello,", "my name is", "Bond", "James Bond")
str_to_lower(my_vector_of_strings)
[1] "hello,"     "my name is" "bond"       "james bond"

converts all letters in the strings to uppercase


str_to_upper(my_vector_of_strings)
[1] "HELLO,"     "MY NAME IS" "BOND"       "JAMES BOND"

converts the first letter of the strings to uppercase


str_to_title(my_vector_of_strings)
[1] "Hello,"     "My Name Is" "Bond"       "James Bond"


Learn more about tabsets here!

Code Output

When you are interested in outputting both your code and its output in your presentation, you can control where the output goes!

```{r}
#| label: starwars-heights-default-output
#| tbl-cap: "A table of maximum and minimum heights for each homeworld in Starwars."

starwars %>% 
  group_by(homeworld) %>% 
  summarize(max_height = max(height), 
            min_height = min(height)
            ) %>% 
  slice_max(order_by = max_height, n = 5) %>% 
  gt::gt() %>% 
  gt::cols_label(homeworld = "Homeworld", 
             max_height = "Maximum Height", 
             min_height = "Minimum Height")
```
A table of maximum and minimum heights for each homeworld in Starwars.
Homeworld Maximum Height Minimum Height
Quermia 264 264
Kashyyyk 234 228
Kamino 229 183
Naboo 224 96
Kalee 216 216

Fragment!

```{r}
#| label: starwars-heights-fragment-output
#| tbl-cap: "A table of maximum and minimum heights for each homeworld in Starwars."
#| output-location: fragment

starwars %>% 
  group_by(homeworld) %>% 
  summarize(max_height = max(height), 
            min_height = min(height)
            ) %>% 
  slice_max(order_by = max_height, n = 5) %>% 
  gt::gt() %>% 
  gt::cols_label(homeworld = "Homeworld", 
             max_height = "Maximum Height", 
             min_height = "Minimum Height")
```
A table of maximum and minimum heights for each homeworld in Starwars.
Homeworld Maximum Height Minimum Height
Quermia 264 264
Kashyyyk 234 228
Kamino 229 183
Naboo 224 96
Kalee 216 216

Column!

```{r}
#| label: starwars-heights-column-output
#| tbl-cap: "A table of maximum and minimum heights for each homeworld in Starwars."
#| output-location: column

starwars %>% 
  group_by(homeworld) %>% 
  summarize(max_height = max(height), 
            min_height = min(height)
            ) %>% 
  slice_max(order_by = max_height, n = 5) %>% 
  gt::gt() %>% 
  gt::cols_label(homeworld = "Homeworld", 
             max_height = "Maximum Height", 
             min_height = "Minimum Height")
```
A table of maximum and minimum heights for each homeworld in Starwars.
Homeworld Maximum Height Minimum Height
Quermia 264 264
Kashyyyk 234 228
Kamino 229 183
Naboo 224 96
Kalee 216 216

Column fragment!

```{r}
#| label: starwars-heights-column-fragment-output
#| tbl-cap: "A table of maximum and minimum heights for each homeworld in Starwars."
#| output-location: column-fragment

starwars %>% 
  group_by(homeworld) %>% 
  summarize(max_height = max(height), 
            min_height = min(height)
            ) %>% 
  slice_max(order_by = max_height, n = 5) %>% 
  gt::gt() %>% 
  gt::cols_label(homeworld = "Homeworld", 
             max_height = "Maximum Height", 
             min_height = "Minimum Height")
```
A table of maximum and minimum heights for each homeworld in Starwars.
Homeworld Maximum Height Minimum Height
Quermia 264 264
Kashyyyk 234 228
Kamino 229 183
Naboo 224 96
Kalee 216 216

Slide!

```{r}
#| label: starwars-heights-column-slide-output
#| tbl-cap: "A table of maximum and minimum heights for each homeworld in Starwars."
#| output-location: slide

starwars %>% 
  group_by(homeworld) %>% 
  summarize(max_height = max(height), 
            min_height = min(height)
            ) %>% 
  slice_max(order_by = max_height, n = 5) %>% 
  gt::gt() %>% 
  gt::cols_label(homeworld = "Homeworld", 
             max_height = "Maximum Height", 
             min_height = "Minimum Height")
```



Learn more about code output locations here!

USCOTS Quarto Workshop

Slide!

A table of maximum and minimum heights for each homeworld in Starwars.
Homeworld Maximum Height Minimum Height
Quermia 264 264
Kashyyyk 234 228
Kamino 229 183
Naboo 224 96
Kalee 216 216