garrick
/
xaringanthemer
mirror da https://github.com/gadenbuie/xaringanthemer.git
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Rilasci 10 Wiki Attività
Sfoglia il codice sorgente

Restructure pkgdown 

- Moved images to assets branch
- Moved rmd fragments to man/fragments
tags/v0.3.0
Garrick Aden-Buie 6 anni fa
parent
d87c8580b6
commit
513572e4e3
32 ha cambiato i file con 67 aggiunte e 444 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. +7
    -6
      README.Rmd
  2. +13
    -13
      README.md
  3. +4
    -3
      index.Rmd
  4. +0
    -15
      make.R
  5. +0
    -0
      man/fragments/_fonts.Rmd
  6. +0
    -0
      man/fragments/_installation.Rmd
  7. +4
    -21
      man/fragments/_quick-intro.Rmd
  8. +5
    -0
      man/fragments/_tagline-gif.Rmd
  9. +0
    -0
      man/fragments/_thanks.Rmd
  10. +11
    -12
      man/fragments/_themes.Rmd
  11. +14
    -7
      pkgdown/_pkgdown.yml
  12. +0
    -269
      vignettes/css-help.md
  13. BIN
      vignettes/images/example-rstudio-completion.gif
  14. BIN
      vignettes/images/example_default.png
  15. BIN
      vignettes/images/example_duo.png
  16. BIN
      vignettes/images/example_duo_accent.png
  17. BIN
      vignettes/images/example_duo_accent_inverse.png
  18. BIN
      vignettes/images/example_mono_accent.png
  19. BIN
      vignettes/images/example_mono_accent_inverse.png
  20. BIN
      vignettes/images/example_mono_dark.png
  21. BIN
      vignettes/images/example_mono_light.png
  22. BIN
      vignettes/images/example_mono_light_1c5253.png
  23. BIN
      vignettes/images/example_solarized_dark.png
  24. BIN
      vignettes/images/example_solarized_light.png
  25. BIN
      vignettes/images/examples.gif
  26. BIN
      vignettes/images/rmarkdown-template-screenshot.png
  27. +0
    -11
      vignettes/rmdchunks/_tagline-gif.Rmd
  28. +1
    -1
      vignettes/singles/fonts.Rmd
  29. +1
    -1
      vignettes/singles/themes.Rmd
  30. +3
    -1
      vignettes/template-variables.Rmd
  31. +0
    -80
      vignettes/template-variables.md
  32. +4
    -4
      vignettes/xaringanthemer.Rmd

+ 7
- 6
README.Rmd Vedi File

IS_README <- TRUE IS_README <- TRUE
library(xaringanthemer) library(xaringanthemer)
``` ```

# xaringanthemer # xaringanthemer




```{r child="vignettes/rmdchunks/_tagline-gif.Rmd"}
```{r child="man/fragments/_tagline-gif.Rmd"}
``` ```


```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE} ```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE}


## Installation ## Installation


```{r child="vignettes/rmdchunks/_installation.Rmd"}
```{r child="man/fragments/_installation.Rmd"}
``` ```


## Quick Intro ## Quick Intro
[theme-settings]: #theme-settings [theme-settings]: #theme-settings
[template-variables]: vignettes/template-variables.md [template-variables]: vignettes/template-variables.md


```{r child="vignettes/rmdchunks/_quick-intro.Rmd"}
```{r child="man/fragments/_quick-intro.Rmd"}
``` ```


## Themes ## Themes


```{r child="vignettes/rmdchunks/_themes.Rmd"}
```{r child="man/fragments/_themes.Rmd"}
``` ```


## Theme Settings ## Theme Settings


[adding-custom-css]: #adding-custom-css [adding-custom-css]: #adding-custom-css


```{r child="vignettes/rmdchunks/_fonts.Rmd"}
```{r child="man/fragments/_fonts.Rmd"}
``` ```


```{r child="vignettes/rmdchunks/_thanks.Rmd"}
```{r child="man/fragments/_thanks.Rmd"}
``` ```


```{r include=FALSE} ```{r include=FALSE}

+ 13
- 13
README.md Vedi File

style with **xaringanthemer** within your `slides.Rmd` file without style with **xaringanthemer** within your `slides.Rmd` file without
(much) CSS. (much) CSS.


<img src="vignettes/images/examples.gif" width="100%" />
<img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes" />


- [Installation](#installation) - [Installation](#installation)
- [Quick Intro](#quick-intro) - [Quick Intro](#quick-intro)
``` ```
```` ````


<img src="vignettes/images/example_mono_light_1c5253.png" width="100%" />
<img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light_1c5253.png" alt="Example title and normal slides using a green xaringanthemer theme" />


### Tab Completion ### Tab Completion


variables](vignettes/template-variables.md) that you can adjust in each variables](vignettes/template-variables.md) that you can adjust in each
of the themes\! of the themes\!


<img src="vignettes/images/example-rstudio-completion.gif" width="100%" />
<img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" />


### R Markdown Template in RStudio ### R Markdown Template in RStudio




<center> <center>


<img src="vignettes/images/rmarkdown-template-screenshot.png" width="350px" />
<img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" />


</center> </center>


style_mono_light(base_color = "#23395b") style_mono_light(base_color = "#23395b")
``` ```


<img src="vignettes/images/example_mono_light.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png)


#### `style_mono_dark()` #### `style_mono_dark()`


style_mono_dark(base_color = "#cbf7ed") style_mono_dark(base_color = "#cbf7ed")
``` ```


<img src="vignettes/images/example_mono_dark.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png)


#### `style_mono_accent()` #### `style_mono_accent()`


style_mono_accent(base_color = "#43418A") style_mono_accent(base_color = "#43418A")
``` ```


<img src="vignettes/images/example_mono_accent.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png)


#### `style_mono_accent_inverse()` #### `style_mono_accent_inverse()`


style_mono_accent_inverse(base_color = "#3C989E") style_mono_accent_inverse(base_color = "#3C989E")
``` ```


<img src="vignettes/images/example_mono_accent_inverse.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png)


### Duotone ### Duotone


style_duo(primary_color = "#1F4257", secondary_color = "#F97B64") style_duo(primary_color = "#1F4257", secondary_color = "#F97B64")
``` ```


<img src="vignettes/images/example_duo.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png)


#### `style_duo_accent()` #### `style_duo_accent()`


style_duo_accent(primary_color = "#006747", secondary_color = "#CFC493") style_duo_accent(primary_color = "#006747", secondary_color = "#CFC493")
``` ```


<img src="vignettes/images/example_duo_accent.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png)


#### `style_duo_accent_inverse()` #### `style_duo_accent_inverse()`


style_duo_accent_inverse(primary_color = "#006747", secondary_color = "#CFC493") style_duo_accent_inverse(primary_color = "#006747", secondary_color = "#CFC493")
``` ```


<img src="vignettes/images/example_duo_accent_inverse.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png)


### Solarized ### Solarized


style_solarized_light() style_solarized_light()
``` ```


<img src="vignettes/images/example_solarized_light.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png)


#### `style_solarized_dark()` #### `style_solarized_dark()`


style_solarized_dark() style_solarized_dark()
``` ```


<img src="vignettes/images/example_solarized_dark.png" width="100%" />
![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png)


To do this, your YAML header should look more-or-less like this: To do this, your YAML header should look more-or-less like this:



+ 4
- 3
index.Rmd Vedi File

) )
library(xaringanthemer) library(xaringanthemer)
``` ```

# xaringanthemer # xaringanthemer




```{r child="vignettes/rmdchunks/_tagline-gif.Rmd"}
```{r child="man/fragments/_tagline-gif.Rmd"}
``` ```


## Installation ## Installation


```{r child="vignettes/rmdchunks/_installation.Rmd"}
```{r child="man/fragments/_installation.Rmd"}
``` ```


## Usage ## Usage
[theme-settings]: articles/xaringanthemer.html#theme-settings [theme-settings]: articles/xaringanthemer.html#theme-settings
[template-variables]: articles/template-variables.html [template-variables]: articles/template-variables.html


```{r child="vignettes/rmdchunks/_quick-intro.Rmd"}
```{r child="man/fragments/_quick-intro.Rmd"}
``` ```

+ 0
- 15
make.R Vedi File

message("Writing documentation") message("Writing documentation")
devtools::document() devtools::document()



setwd(here::here("vignettes"))
message("Rendering vignettes/template-variables.Rmd for GitHub")
rmarkdown::render("template-variables.Rmd", output_format = rmarkdown::github_document(), quiet = TRUE)
unlink("template-variables.html")

message("Rendering vignettes/css-help.Rmd for GitHub")
rmarkdown::render("css-help.Rmd", output_format = rmarkdown::github_document(), quiet = TRUE)
unlink("css-help.html")

setwd(here::here()) setwd(here::here())
message("Rendering README.Rmd for GitHub") message("Rendering README.Rmd for GitHub")
rmarkdown::render("README.Rmd", quiet = TRUE) rmarkdown::render("README.Rmd", quiet = TRUE)
unlink("README.html") unlink("README.html")


pkgdown::build_site()
message("Copying images to pkgdown docs/")
file.copy(here::here("vignettes/images/"), here::here("docs/articles/"),
recursive = TRUE)

message("Building and Installing Package with Vignettes") message("Building and Installing Package with Vignettes")
devtools::install(build_vignettes = TRUE) devtools::install(build_vignettes = TRUE)

vignettes/rmdchunks/_fonts.Rmd → man/fragments/_fonts.Rmd Vedi File


vignettes/rmdchunks/_installation.Rmd → man/fragments/_installation.Rmd Vedi File


vignettes/rmdchunks/_quick-intro.Rmd → man/fragments/_quick-intro.Rmd Vedi File

``` ```
```` ````


```{r echo=FALSE}
if (exists('IS_README') && IS_README) {
knitr::include_graphics("vignettes/images/example_mono_light_1c5253.png")
} else {
knitr::include_graphics(here::here("vignettes/images/example_mono_light_1c5253.png"))
}
```
<img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light_1c5253.png" alt="Example title and normal slides using a green xaringanthemer theme" />


### Tab Completion ### Tab Completion


**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore][theme-settings] the [template variables][template-variables] that you can adjust in each of the themes! **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore][theme-settings] the [template variables][template-variables] that you can adjust in each of the themes!


```{r}
if (exists('IS_README') && IS_README) {
knitr::include_graphics("vignettes/images/example-rstudio-completion.gif")
} else {
knitr::include_graphics(here::here("vignettes/images/example-rstudio-completion.gif"))
}
```

<img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" />


### R Markdown Template in RStudio ### R Markdown Template in RStudio


You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio. You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio.


<center> <center>
```{r out.width="350px"}
if (exists('IS_README') && IS_README) {
knitr::include_graphics("vignettes/images/rmarkdown-template-screenshot.png")
} else {
knitr::include_graphics(here::here("vignettes/images/rmarkdown-template-screenshot.png"))
}
```
<img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" />
</center> </center>

+ 5
- 0
man/fragments/_tagline-gif.Rmd Vedi File

[xaringan]: https://github.com/yihui/xaringan

Give your [xaringan] slides some style with **xaringanthemer** within your `slides.Rmd` file without (much) CSS.

<img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes" />

vignettes/rmdchunks/_thanks.Rmd → man/fragments/_thanks.Rmd Vedi File


vignettes/rmdchunks/_themes.Rmd → man/fragments/_themes.Rmd Vedi File



```{r include=FALSE} ```{r include=FALSE}
IS_README <- exists("IS_README") && IS_README IS_README <- exists("IS_README") && IS_README
include_graphic <- function(img_path, is_readme = IS_README) {
if (is_readme) knitr::include_graphics(img_path)
else knitr::include_graphics(here::here(img_path))
include_graphic <- function(img_path) {
glue::glue("![](https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/{img_path})")
} }
``` ```


demo_function_call(style_mono_light, 1) demo_function_call(style_mono_light, 1)
``` ```


`r include_graphic("vignettes/images/example_mono_light.png")`
`r include_graphic("example_mono_light.png")`


#### `style_mono_dark()` #### `style_mono_dark()`


demo_function_call(style_mono_dark, 1) demo_function_call(style_mono_dark, 1)
``` ```


`r include_graphic("vignettes/images/example_mono_dark.png")`
`r include_graphic("example_mono_dark.png")`


#### `style_mono_accent()` #### `style_mono_accent()`


demo_function_call(style_mono_accent, 1) demo_function_call(style_mono_accent, 1)
``` ```


`r include_graphic("vignettes/images/example_mono_accent.png")`
`r include_graphic("example_mono_accent.png")`


#### `style_mono_accent_inverse()` #### `style_mono_accent_inverse()`


demo_function_call(style_mono_accent_inverse, 1) demo_function_call(style_mono_accent_inverse, 1)
``` ```


`r include_graphic("vignettes/images/example_mono_accent_inverse.png")`
`r include_graphic("example_mono_accent_inverse.png")`




### Duotone ### Duotone
demo_function_call(style_duo, 2) demo_function_call(style_duo, 2)
``` ```


`r include_graphic("vignettes/images/example_duo.png")`
`r include_graphic("example_duo.png")`


#### `style_duo_accent()` #### `style_duo_accent()`


demo_function_call(style_duo_accent, 2) demo_function_call(style_duo_accent, 2)
``` ```


`r include_graphic("vignettes/images/example_duo_accent.png")`
`r include_graphic("example_duo_accent.png")`


#### `style_duo_accent_inverse()` #### `style_duo_accent_inverse()`


demo_function_call(style_duo_accent_inverse, 2) demo_function_call(style_duo_accent_inverse, 2)
``` ```


`r include_graphic("vignettes/images/example_duo_accent_inverse.png")`
`r include_graphic("example_duo_accent_inverse.png")`


### Solarized ### Solarized


demo_function_call(style_solarized_light, 0) demo_function_call(style_solarized_light, 0)
``` ```


`r include_graphic("vignettes/images/example_solarized_light.png")`
`r include_graphic("example_solarized_light.png")`


#### `style_solarized_dark()` #### `style_solarized_dark()`


demo_function_call(style_solarized_dark, 0) demo_function_call(style_solarized_dark, 0)
``` ```


`r include_graphic("vignettes/images/example_solarized_dark.png")`
`r include_graphic("example_solarized_dark.png")`




To do this, your YAML header should look more-or-less like this: To do this, your YAML header should look more-or-less like this:

+ 14
- 7
pkgdown/_pkgdown.yml Vedi File

- starts_with("style_mono") - starts_with("style_mono")
- starts_with("style_duo") - starts_with("style_duo")
- starts_with("style_solarized") - starts_with("style_solarized")
- title: Google Fonts
desc: Helper functions for using Google Fonts in your slide styles.
contents:
- starts_with("google_")
- title: ggplot2 Themes - title: ggplot2 Themes
desc: Plot themes for ggplot2 to match xaringan slide styles.
desc: Plot themes for ggplot2 to match your xaringanthemer slide styles.
contents: contents:
- starts_with("theme_xaringan")
- theme_xaringan
- theme_xaringan_inverse
- theme_xaringan_base
- theme_xaringan_set_defaults
- starts_with("scale_xaringan")
- title: Helper functions - title: Helper functions
desc: Helpers for Google fonts and color adjustments. desc: Helpers for Google fonts and color adjustments.
contents: contents:
- theme_xaringan_get_value - theme_xaringan_get_value
- contains("color")
- ends_with("color")
- apply_alpha - apply_alpha
- choose_dark_or_light - choose_dark_or_light
- contains("google")
navbar: navbar:
left: left:
home: home:
intro: intro:
text: Get started text: Get started
href: articles/xaringanthemer.html href: articles/xaringanthemer.html
reference:
text: Reference
href: reference/index.html
themes: themes:
text: Themes text: Themes
href: articles/singles/themes.html href: articles/singles/themes.html
css-help: css-help:
text: CSS Help text: CSS Help
href: articles/css-help.html href: articles/css-help.html
reference:
text: Reference
href: reference/index.html
right: right:
github: github:
icon: fa-github fa-lg icon: fa-github fa-lg

+ 0
- 269
vignettes/css-help.md Vedi File

xaringanthemer CSS Help
================

Jump to: [Colors](#colors), [Sizes](#sizes), [Positioning](#positioning)

## About this vignette

This vignette cover some basic CSS, in particular to give an idea about
the possible values you can use with the various arguments to the
xaringan theme functions. See `vignette("template-variables", package =
"xaringanthemer")` for a full list of the theme functions.

Because we are setting the CSS properties from R, we can either give
**xaringanthemer** function arguments a character string or we can call
an R function or variable that returns a character string. For example,
we can create an R variable with a specific color that is used in
several places in a theme

``` r
firebrick <- "#CD2626"
style_xaringan(
header_color = firebrick,
link_color = firebrick
)
```

or we can directly give the character string

``` r
style_xaringan(
header_color = "#CD2626",
link_color = "#CD2626"
)
```

in both cases, we get CSS like the following that sets the link color

``` css
a, a > code {
color: #CD2626;
}
```

Note that when a string is given to the theme function, the outer quotes
are removed.

In the sections below, R code is represented without quotes – like
`rgb(0.8, 0.15, 0.15)` – and CSS code is represented inside quotes –
like `"rgb(205, 38, 38)"` – to differentiate between R and CSS functions
with the same or similar names.

## Colors

In CSS, text colors are specified with the `color:` property, background
colors use `background-color:`, and border colors use `border-color:`.

In **xaringanthemer**, template variables that set

- text color end with `_color`;
- background color end with `_background_color`;
- border color end with `_border_color`;

### Setting colors

In CSS, there are a number of ways to specify a color:

- You can use a [color
keyword](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords),
such as `"darkslategray"` or `"red"`.

- You can use the [RGB color
specification](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb\(\)_and_rgba\(\))
either via
- the hexadecimal representation
- `"#CD2626"` or
- `"#CD262680"` (50% transparency)
- or the rgb function notation
- `"rgb(255, 38, 38)"` or
- `"rgba(255, 38, 28, 0.5)"` (50% transparency).

- You can use the [HSL color
specification](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl\(\)_and_hsla\(\))
via the functions
- `"hsl(270,60%,70%)"` or
- `"hsl(270, 60%, 50%, .15)"` (15% transparency).

In R, there are a number of ways to specify a color:

- Use `rgb(205, 38, 38, maxColorValue = 255)` as an equivalent to the
CSS `"rgb()"` function.
- Without the `maxColorValue` argument, the `rgb()` function
expects decimal numbers in the range \[0, 1\], like
`rgb(0.8039, 0.1490, 0.1490)`.
- The `rgb()` function also sets transparency via the `alpha`
argument (in the \[0, 1\] range).

- You can get the hexadecimal representation of a built-in R color
using the `col2rgb()` function together with the `rgb()` function:
``` r
rgb(t(col2rgb("red")), maxColorValue = 255)
#> [1] "#FF0000"
```

## Sizes

In **xaringanthemer**, any template variable that accepts a CSS size (or
length unit) ends with `_size`. Sizes are also used for positioning and
those template variables end include `position` in their name.

There are many units available in CSS sizes, but the three most common
and easiest to use are pixels (`"px"`), percentage (`"%"`), and em units
(`"em"`). Mozilla’s devloper portal has a [full list of CSS length
units](https://developer.mozilla.org/en-US/docs/Web/CSS/length).

These sizes are either *absolute* or *relative* values. Relative values
are set relative to the size of the parent element, but absolute values
ignore the parent element.

- Pixels `"px"`
Pixels are an *absolute* size unit, traditionally representing one
device pixel. E.g. `"16px"` or `"23px"`.
- Percentage `"%"`
Percentages are relative to the size of the parent element, scaled
linearly. E.g. `"75%"` or `"150%"`.
- em Units `"em"`
em Units are just like percentages, except expressed as decimals.
E.g. `"0.75em"` or `"1.5em"`.

To make this more concrete, here is a simple “page” containing a section
header and two paragraphs.

``` html
<div class="page">
<h1>Section 1</h1>
<p>This is paragraph 1...</p>
<p>This is paragraph 2...</p>
</div>
```

Intuitively, you might want the section header to have a somewhat bigger
font size than the paragraph text, but you don’t want to have to set the
text size for each and every paragraph or header.

To do this, we can set the base size of any element inside the `<div
class="page">`, and adjust the header size relatively.

``` css
.page {
font-size: 16px;
}
h1 {
font-size: 2em;
}
```

Now our paragraph font will be 16 pixels tall, and the level 1 headers
will be twice as big. If we later decide to change the base font size,
say to `"15px"`, the header text will still be twice as big as the
paragraph text.

## Positioning

If you’re reading this, you’re probably wondering how you make an
element be *where you want it to be*.

There are 3 items that **xaringanthemer** can help you position:

- `background_position` (background image position)
- `title_slide_background_position` (title slide background image
position)
- `footnote_position_bottom` (footnote location from bottom of screen)

### Footnote Position

**xaringanthemer** provides one template variable to adjust the position
of the footnote element. Footnotes can be insterted into a slide using
the `.footnote[Here's my quick footnote]` syntax.

The `footnote_position_bottom` argument adjust how far from the bottom
of the slide the footnote appears. The default value is `"3em"`, but you
can adjust this value up or down to get the footnote where you want.

### Background Position

The background position is set using the theme function arguments that
end with `background_position`. See [this article on
background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#Syntax)
from Mozilla for more information.

Try any of the following values to get started:

``` r
background_position = "center"
background_position = "top"
background_position = "left"
background_position = "bottom"
background_position = "25% 75%" # X-value (from left) Y-value (from top)
background_position = "bottom 10px right 20px" # 10px from bottom, 20px from right
background_position = "top left 10px" # at top but adjusted left 10px
```

### General Positioning

Read this section if you want to put a slide element at a specific spot
on your slide.

The `position` CSS element is used to specify where an element is
located on the screen. Mozilla provides a [very good reference on
positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
that I’ve summarized here.

An element can be `"relative"`-ly positioned, `"absolute"`-ly
positioned, `"fixed"`, `"sticky"` or `"static"` (default). For an
element with a computed position (i.e. not `"static"`), you can also
specify the `top`, `right`, `bottom`, and `left` CSS properties for that
element. The `top`/`bottom` parameters specify vertical displacement,
and the `right`/`left` specify horizontal displacement.

- Relatively positioned `position: relative`
For relatively positioned elements, the element position is adjusted
relative to where it *would have been* if it were `static`.
- Absolutely positioned `position: absolute` or `position: fixed`
Absolutely positioned elements are positioned relative to the block
that contains the element (called a containing block). A `fixed`
element won’t move with scrolling (but `fixed` is not recommended
for remarkjs slides).

If you want something to appear in a specific position on your slide,
you’ll need to use the `extra_css` argument of the **xaringanthemer**
functions. For example, lets say you want a 300px by 300px box to appear
on the right side of your slide, you’ll need to create a special css
class:

``` r
style_xaringan(
extra_css = list(
".box-right" = list(
"height" = "300px",
"width" = "300px",
"position" = "absolute",
"top" = "33%",
"left" = "65%"
)
)
)
```

This creates CSS like this:

``` css
.box-right {
height: 300px;
width: 300px;
position: absolute;
top: 33%;
left: 65%;
}
```

which you can then use in your slides by wrapping the slide content in
`.box-right[]`.

.box-right[
Stuff inside the box
]

BIN
vignettes/images/example-rstudio-completion.gif Vedi File

Before After
Width: 926  |  Height: 250  |  Size: 849KB

BIN
vignettes/images/example_default.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 215KB

BIN
vignettes/images/example_duo.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 200KB

BIN
vignettes/images/example_duo_accent.png Vedi File

Before After
Width: 1350  |  Height: 338  |  Size: 191KB

BIN
vignettes/images/example_duo_accent_inverse.png Vedi File

Before After
Width: 1350  |  Height: 338  |  Size: 189KB

BIN
vignettes/images/example_mono_accent.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 174KB

BIN
vignettes/images/example_mono_accent_inverse.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 204KB

BIN
vignettes/images/example_mono_dark.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 207KB

BIN
vignettes/images/example_mono_light.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 204KB

BIN
vignettes/images/example_mono_light_1c5253.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 67KB

BIN
vignettes/images/example_solarized_dark.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 190KB

BIN
vignettes/images/example_solarized_light.png Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 199KB

BIN
vignettes/images/examples.gif Vedi File

Before After
Width: 900  |  Height: 338  |  Size: 349KB

BIN
vignettes/images/rmarkdown-template-screenshot.png Vedi File

Before After
Width: 583  |  Height: 474  |  Size: 65KB

+ 0
- 11
vignettes/rmdchunks/_tagline-gif.Rmd Vedi File

[xaringan]: https://github.com/yihui/xaringan

Give your [xaringan] slides some style with **xaringanthemer** within your `slides.Rmd` file without (much) CSS.

```{r echo=FALSE}
if (exists('IS_README') && IS_README) {
knitr::include_graphics("vignettes/images/examples.gif")
} else {
knitr::include_graphics(here::here("vignettes/images/examples.gif"))
}
```

+ 1
- 1
vignettes/singles/fonts.Rmd Vedi File

tvv <- template_variables$variable tvv <- template_variables$variable
``` ```


```{r child="../rmdchunks/_fonts.Rmd"}
```{r child="../../man/fragments/_fonts.Rmd"}
``` ```

+ 1
- 1
vignettes/singles/themes.Rmd Vedi File

knitr::opts_chunk$set(results = "asis", echo=FALSE) knitr::opts_chunk$set(results = "asis", echo=FALSE)
``` ```


```{r child="../rmdchunks/_themes.Rmd"}
```{r child="../../man/fragments/_themes.Rmd"}
``` ```

+ 3
- 1
vignettes/template-variables.Rmd Vedi File

source("../R/theme_settings.R") source("../R/theme_settings.R")
template_variables$variable <- glue::glue_data(template_variables, "`{variable}`") template_variables$variable <- glue::glue_data(template_variables, "`{variable}`")
template_variables$default <- gsub("[{}]", "", template_variables$default) template_variables$default <- gsub("[{}]", "", template_variables$default)
template_variables$default <- glue::glue_data(template_variables, "`{default}`")
template_variables <- template_variables[, c(
"variable", "description", "element", "default"
)]
knitr::kable(template_variables) knitr::kable(template_variables)
``` ```



+ 0
- 80
vignettes/template-variables.md Vedi File

Template Variables
================

The following table shows the template variables, their default values
in the standard `xaringan` theme, the primary element to which the
property is applied, and a brief description of the template variable.

For example, `background_color` by default sets the `background-color`
CSS property of the `.remark-slide-content` class to `#FFF`.

Use this table to find the template variable you would like to modify.
You can also use this table to find the CSS class or element associated
with a particular template item.

Note that themes, like `mono_accent()`, have additional parameters, but
with any theme function you can override the theme by directly setting
the arguments below when calling the theme function. For example, to use
`mono_accent()` with a different slide background color, you can call
`mono_accent(background_color = "#abc123")`.

| variable | default | element | description |
| :-------------------------------------- | :------------------------------------------------------------------------------ | :------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text_color` | `#000` | body | Text Color |
| `header_color` | `#000` | h1, h2, h3 | Header Color |
| `background_color` | `#FFF` | .remark-slide-content | Slide Background Color |
| `link_color` | `rgb(249, 38, 114)` | a, a \> code | Link Color |
| `text_bold_color` | `NULL` | strong | Bold Text Color |
| `text_slide_number_color` | `inverse_background_color` | .remark-slide-number | Slide Number Color |
| `padding` | `1rem 4rem 1rem 4rem` | .remark-slide-content | Slide Padding in `top right [bottom left]` format |
| `background_image` | `NULL` | .remark-slide-content | Background image applied to each *and every* slide. Set `title_slide_background_image = "none"` to remove the background image from the title slide |
| `background_size` | `NULL` | .remark-slide-content | Background image size, requires `background_image` to be set. If `background_image` is set, `background_size` will default to `cover` so the backround fills the screen. If both `background_image` and `background_position` are set, will default to 100 percent |
| `background_position` | `NULL` | .remark-slide-content | Background image position, requires `background_image` to be set, and it is recommended to adjust `background_size` |
| `code_highlight_color` | `rgba(255,255,0,0.5)` | .remark-code-line-highlighted | Code Line Highlight |
| `code_inline_color` | `#000` | .remark-inline-code | Inline Code Color |
| `code_inline_background_color` | `NULL` | .remark-inline-code | Inline Code Background Color |
| `code_inline_font_size` | `1em` | .remark-inline-code | Inline Code Text Font Size |
| `inverse_background_color` | `#272822` | .inverse | Inverse Background Color |
| `inverse_text_color` | `#d6d6d6` | .inverse | Inverse Text Color |
| `inverse_text_shadow` | `FALSE` | .inverse | Enables Shadow on text of inverse slides |
| `inverse_header_color` | `#f3f3f3` | .inverse h1, .inverse h2, .inverse h3 | Inverse Header Color |
| `title_slide_text_color` | `inverse_text_color` | .title-slide | Title Slide Text Color |
| `title_slide_background_color` | `inverse_background_color` | .title-slide | Title Slide Background Color |
| `title_slide_background_image` | `NULL` | .title-slide | Title Slide Background Image URL |
| `title_slide_background_size` | `NULL` | .title-slide | Title Slide Background Image Size, defaults to “cover” if background image is set |
| `title_slide_background_position` | `NULL` | .title-slide | Title Slide Background Image Position |
| `footnote_color` | `NULL` | .footnote | Footnote text color (if `NA`, then it will be the same color as `text_color`) |
| `footnote_font_size` | `0.9em` | .footnote | Footnote font size |
| `footnote_position_bottom` | `3em` | .footnote | Footnote location from bottom of screen |
| `left_column_subtle_color` | `#777` | .left-column h2, .left-column h3 | Left Column Text (not last) |
| `left_column_selected_color` | `#000` | .left-column h2:last-of-type, .left-column h3:last-child | Left Column Current Selection |
| `blockquote_left_border_color` | `lightgray` | blockquote | Blockquote Left Border Color |
| `table_border_color` | `#666` | table: border-top, border-bottom | Table top/bottom border |
| `table_row_border_color` | `#ddd` | table thead th: border-bottom | Table row inner bottom border |
| `table_row_even_background_color` | `#eee` | thead, tfoot, tr:nth-child(even) | Table Even Row Background Color |
| `text_font_size` | `20px` | .remark-slide-content | Slide Body Text Font Size |
| `header_h1_font_size` | `55px` | .remark-slide-content h1 | h1 Header Text Font Size |
| `header_h2_font_size` | `45px` | .remark-slide-content h2 | h2 Header Text Font Size |
| `header_h3_font_size` | `35px` | .remark-slide-content h3 | h3 Header Text Font Size |
| `header_background_auto` | `FALSE` | | Add background under slide title automatically for h1 header elements. If not enabled, use `class: header_background` to enable |
| `header_background_color` | `header_color` | .remark-slide-content h1 | Background Color for h1 Header with Background |
| `header_background_text_color` | `background_color` | .remark-slide-content h1 | Text Color for h1 Header with Background |
| `header_background_padding` | `2rem 4rem 1.5rem 4rem` | .remark-slide-content h1 | Padding for h1 Header with Background |
| `header_background_content_padding_top` | `7rem` | .remark-slide-content | Top Padding for Content in Slide with Header with Background |
| `header_background_ignore_classes` | `c('normal', 'inverse', 'title', 'middle', 'bottom')` | .remark-slide-content | Slide Classes Where Header with Background will not be Applied |
| `text_slide_number_font_size` | `0.9em` | .remark-slide-number | Slide Number Text Font Size |
| `text_font_google` | `NULL` | body | Use `google_font()` to specify body font |
| `text_font_family` | `'Droid Serif'` | body | Body Text Font Family |
| `text_font_weight` | `normal` | body | Body Text Font Weight |
| `text_font_url` | `https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic` | @import url() | Body Text Font URL(s) |
| `text_font_family_fallback` | `'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC'` | body | Body Text Font Fallbacks |
| `text_font_base` | `serif` | body | Body Text Base Font (Total Failure Fallback) |
| `header_font_google` | `NULL` | body | Use `google_font()` to specify header font |
| `header_font_family` | `'Yanone Kaffeesatz'` | h1, h2, h3 | Header Font Family |
| `header_font_weight` | `normal` | h1, h2, h3 | Header Font Weight |
| `header_font_url` | `https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz` | @import url | Header Font URL |
| `code_font_google` | `NULL` | body | Use `google_font()` to specify code font |
| `code_font_family` | `'Source Code Pro'` | .remark-code, .remark-inline-code | Code Font Family |
| `code_font_size` | `0.9em` | .remark-inline | Code Text Font Size |
| `code_font_url` | `https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700` | @import url | Code Font URL |
| `code_font_family_fallback` | `'Lucida Console', Monaco` | .remark-code, .remark-inline-code | Code Font Fallback |

+ 4
- 4
vignettes/xaringanthemer.Rmd Vedi File

[theme-settings]: #theme-settings [theme-settings]: #theme-settings
[template-variables]: template-variables.html [template-variables]: template-variables.html


```{r child="rmdchunks/_quick-intro.Rmd"}
```{r child="../man/fragments/_quick-intro.Rmd"}
``` ```


## Themes ## Themes


```{r child="rmdchunks/_themes.Rmd"}
```{r child="../man/fragments/_themes.Rmd"}
``` ```


## Theme Settings ## Theme Settings


[adding-custom-css]: #adding-custom-css [adding-custom-css]: #adding-custom-css


```{r child="rmdchunks/_fonts.Rmd"}
```{r child="../man/fragments/_fonts.Rmd"}
``` ```


```{r child="rmdchunks/_thanks.Rmd"}
```{r child="../man/fragments/_thanks.Rmd"}
``` ```

Write Preview
Loading…
Annulla
Salva