index

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

---
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).

HTML theming - Sass Variables

---
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).

/*-- scss:defaults --*/

/*-- scss:rules --*/

How to change colors

/*-- 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;
}

How to change fonts

/*-- 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;
}

How to change sizes

/*-- 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’);

$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;
}

Who are you?

Imagine

The most with little effort

How do you write a theme?

HTML documents

HTML theming - Sass Variables

How to change colors

How to change fonts

How to change sizes

✨✨ Difference ✨✨

You did it!

Quarto Templates

Creating a Template

Make pretty things!