Browse Source

Prepping for 0.1.0

- Update license, description
- Add documentation, images and gifs
tags/v0.1.1
Garrick Aden-Buie 8 years ago
parent
commit
3749b88b39
17 changed files with 336 additions and 49 deletions
  1. +1
    -0
      .Rbuildignore
  2. +12
    -7
      DESCRIPTION
  3. +2
    -0
      LICENSE
  4. +21
    -0
      LICENSE.md
  5. +140
    -19
      README.Rmd
  6. +160
    -23
      README.md
  7. BIN
      docs/example_default.png
  8. BIN
      docs/example_duo.png
  9. BIN
      docs/example_duo_accent.png
  10. BIN
      docs/example_duo_accent_inverse.png
  11. BIN
      docs/example_mono_accent.png
  12. BIN
      docs/example_mono_accent_inverse.png
  13. BIN
      docs/example_mono_dark.png
  14. BIN
      docs/example_mono_light.png
  15. BIN
      docs/example_solarized_dark.png
  16. BIN
      docs/example_solarized_light.png
  17. BIN
      docs/examples.gif

+ 1
- 0
.Rbuildignore View File

^.*\.Rproj$ ^.*\.Rproj$
^\.Rproj\.user$ ^\.Rproj\.user$
^README\.Rmd$ ^README\.Rmd$
^LICENSE\.md$

+ 12
- 7
DESCRIPTION View File

Package: xaringanthemer Package: xaringanthemer
Type: Package Type: Package
Title: What the Package Does (Title Case)
Title: Xaringan CSS Theme Generator
Version: 0.0.0.9000 Version: 0.0.0.9000
Author: Who wrote it
Maintainer: The package maintainer <yourself@somewhere.net>
Description: More about what it does (maybe more than one line)
Use four spaces when indenting paragraphs within the Description.
License: What license is it under?
Date: 2018-04-16
Authors@R: person("Garrick", "Aden-Buie", email = "g.adenbuie@gmail.com", role = c("aut", "cre"))
Description: Create and edit your xaringan CSS files from within your R
R Markdown slide source. More technically, this package actually creates
valid remarkjs CSS themes that are easily used by xarangan.
License: MIT + file LICENSE
URL: https://github.com/gadenbuie/xaringanthemer
BugReports: https://github.com/gadenbuie/xaringanthemer/issues
Encoding: UTF-8 Encoding: UTF-8
LazyData: true LazyData: true
RoxygenNote: 6.0.1 RoxygenNote: 6.0.1
Roxygen: list(markdown = TRUE) Roxygen: list(markdown = TRUE)
Suggests: Suggests:
testthat
testthat,
xaringan,
here
Imports: Imports:
purrr, purrr,
tibble, tibble,

+ 2
- 0
LICENSE View File

YEAR: 2018
COPYRIGHT HOLDER: Garrick Aden-Buie

+ 21
- 0
LICENSE.md View File

# MIT License

Copyright (c) 2018 Garrick Aden-Buie

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

+ 140
- 19
README.Rmd View File



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


Easily style your [xaringan] slides with **xaringanthemer**
Easily style your [xaringan] slides with **xaringanthemer**.

![](docs/examples.gif)

```{r toc, results='asis', echo=FALSE, message=FALSE}
devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R')
x <- render_toc("README.Rmd", toc_depth = 3)
gsub(" -", "-", sub("^-.+?\n", "", x))
```


## Installation ## Installation


Currently, this is a work in progress.
Try it yourself:
**xaringanthemer** lives here on GitHub.


```r ```r
# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanthemer") devtools::install_github("gadenbuie/xaringanthemer")
``` ```


## Make it work
## Quick Intro


To make it work, add `css: xaringan-themed.css` to your xaringan slides YAML header under `xaringan::moonreader:`
First, add `css: xaringan-themed.css` to your xaringan slides YAML header under `xaringan::moonreader:`.


```yaml ```yaml
output: output:
css: xaringan-themed.css css: xaringan-themed.css
``` ```


Then, in the first knitr chunk, try this:
Then, in the first knitr chunk, load **xaringanthemer** and try one of the [theme functions](#themes).


````markdown ````markdown
```{r setup}`r ""`
```{r setup, include = FALSE}`r ""`
options(htmltools.dir.version = FALSE) options(htmltools.dir.version = FALSE)
library(xaringanthemer) library(xaringanthemer)
mono_light( mono_light(
base_color = "#1c5253", base_color = "#1c5253",
header_font_google = google_font("Josefin Sans"), header_font_google = google_font("Josefin Sans"),
text_font_google = google_font("Montserrat", "300", "300i"),
code_font_google = google_font("Droid Mono")
text_font_google = google_font("Montserrat", "300", "300i"),
code_font_google = google_font("Droid Mono")
) )
``` ```
```` ````


![](docs/example_mono_light_1c5253.png) ![](docs/example_mono_light_1c5253.png)


## Monotone Themes
**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) the themes!

## Themes

### Monotone


Use these functions to automatically create a consistent color palette for your slides, based around a single color. Use these functions to automatically create a consistent color palette for your slides, based around a single color.


- `mono_light()`: A light theme based around a single color
#### `mono_light()`

A light theme based around a single color

![](docs/example_mono_light.png)


- `mono_dark()`: A dark theme based around a single color
#### `mono_dark()`


- `mono_accent()`: The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.)
A dark theme based around a single color


- `mono_accent_inverse()`: An "inverted" default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.)
![](docs/example_mono_dark.png)


## Duotone Themes
#### `mono_accent()`

The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.)

![](docs/example_mono_accent.png)

#### `mono_accent_inverse()`

An "inverted" default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.)

![](docs/example_mono_accent_inverse.png)

### Duotone


These themes build from two (ideally) complementary colors. These themes build from two (ideally) complementary colors.


- `duo()`: A two-colored theme based on a primary and secondary color.
#### `duo()`

A two-colored theme based on a primary and secondary color.


- `duo_accent()`: The default Xaringan theme with two accent colors.
![](docs/example_duo.png)


- `duo_accent_inverse()`: An "inverted" default Xaringan theme with two accent colors.
#### `duo_accent()`


## Solarized
The default Xaringan theme with two accent colors.

![](docs/example_duo_accent.png)

#### `duo_accent_inverse()`

An "inverted" default Xaringan theme with two accent colors.

![](docs/example_duo_accent_inverse.png)

### Solarized


There are also two themes based around the [solarized color palette](http://ethanschoonover.com/solarized), `solarized_light()` and `solarized_dark()`. There are also two themes based around the [solarized color palette](http://ethanschoonover.com/solarized), `solarized_light()` and `solarized_dark()`.
For both themes, it is advisted to change the syntax highlighting theme to `solarized-light` or `solarized-dark` (looks great paired or constrasted). For both themes, it is advisted to change the syntax highlighting theme to `solarized-light` or `solarized-dark` (looks great paired or constrasted).


#### `solarized_light()`

![](docs/example_solarized_light.png)

#### `solarized_dark()`

![](docs/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:


```yaml ```yaml
highlightLines: true highlightLines: true
countIncrementalSlides: false countIncrementalSlides: false
``` ```

### Fully Customized

The theme functions listed above are just wrappers around the central function of this package, `write_xaringan_theme()`.
If you want to start from the default **xaringan** theme and make a few modifications, start there.

All of the theme template variables are repeated in each of the theme functions (instead of relying on `...`) so that you can use autocompletion to find and change the defaults for any theme function.
To override the default value of any theme functions, set the appropriate argument in the theme function.

As an example, try loading `xaringanthemer`, type out `duo_theme(` and then press <kbd>Tab</kbd> to see all of the theme options.

All of the theme options are named so that you first think of the element you want to change, then the property of that element.

Here are some of the `text_` theme options:

```{r, results='asis', echo=FALSE}
source("R/theme_settings.R")
tvv <- template_variables$variable
cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n")
cat("- *and more ...*")
```

And here are the title slide theme options:

```{r results='asis', echo=FALSE}
cat(paste0("- `", tvv[grepl("^title_slide_", tvv)], "`"), sep = "\n")
```

## Fonts

[google-fonts]: https://fonts.google.com

Yihui picked out great fonts for the default **xaringan** theme, but sometimes you want something new and interesting.

**xaringanthemer** makes it easy to use [Google Fonts][google-fonts] in your presentations (well, as long as you have an internet connection) or to fully specify your font files.

To use [Google Fonts][google-fonts], set the `_font_google` theme arguments --
```{r results='asis', echo=FALSE}
cat(paste0("`", tvv[grepl("_font_google$", tvv)], "`", collapse = ", "))
```
--- using the `google_font()` helper.
See `?google_font` for more info.

```r
mono_light(
header_font_google = google_font("Josefin Slab", "600"),
text_font_google = google_font("Work Sans", "300", "300i"),
code_font_google = google_font("IBM Plex Mono")
)
```

If you set an `xxx_font_google` theme arguments, then `xxx_font_family`, `xxx_font_weight` and `xxx_font_url` are overwritten -- where `xxx` in `{header, text, code}`.
Of course, you can manually set `header_font_url`, etc., and ignore the `header_font_google` argument.

For example, suppose you want to use a ligature font for the code font, such as [Fira Code](https://github.com/yihui/xaringan/issues/83).
Just set `code_font_family` and `code_font_url`!

```r
solarized_dark(
code_font_family = "Fira Code",
code_font_url = "https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css"
)
```

***

**xaringanthemer** was built by [Garrick Aden-Buie](https://www.garrickadenbuie.com) ([&commat;grrrck](https://twitter.com/grrrck)).

Big thank you to [Yihui Xie](https://yihui.name), especially for [xaringan].

Feel free to [file an issue](https://github.com/gadenbuie/xaringanthemer/issues) if you find a bug or have a theme suggestion -- or better yet, submit a pull request!

+ 160
- 23
README.md View File

# xaringanthemer # xaringanthemer


Easily style your [xaringan](https://github.com/yihui/xaringan) slides Easily style your [xaringan](https://github.com/yihui/xaringan) slides
with **xaringanthemer**
with **xaringanthemer**.

![](docs/examples.gif)

- [Installation](#installation)
- [Quick Intro](#quick-intro)
- [Themes](#themes)
- [Monotone](#monotone)
- [Duotone](#duotone)
- [Solarized](#solarized)
- [Fully Customized](#fully-customized)
- [Fonts](#fonts)


## Installation ## Installation


Currently, this is a work in progress. Try it yourself:
**xaringanthemer** lives here on GitHub.


``` r ``` r
# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanthemer") devtools::install_github("gadenbuie/xaringanthemer")
``` ```


## Make it work
## Quick Intro


To make it work, add `css: xaringan-themed.css` to your xaringan slides
YAML header under `xaringan::moonreader:`
First, add `css: xaringan-themed.css` to your xaringan slides YAML
header under `xaringan::moonreader:`.


``` yaml ``` yaml
output: output:
css: xaringan-themed.css css: xaringan-themed.css
``` ```


Then, in the first knitr chunk, try this:
Then, in the first knitr chunk, load **xaringanthemer** and try one of
the [theme functions](#themes).


```` markdown ```` markdown
```{r setup}
```{r setup, include = FALSE}
options(htmltools.dir.version = FALSE) options(htmltools.dir.version = FALSE)
library(xaringanthemer) library(xaringanthemer)
mono_light( mono_light(
base_color = "#1c5253", base_color = "#1c5253",
header_font_google = google_font("Josefin Sans"), header_font_google = google_font("Josefin Sans"),
text_font_google = google_font("Montserrat", "300", "300i"),
code_font_google = google_font("Droid Mono")
text_font_google = google_font("Montserrat", "300", "300i"),
code_font_google = google_font("Droid Mono")
) )
``` ```
```` ````


![](docs/example_mono_light_1c5253.png) ![](docs/example_mono_light_1c5253.png)


## Monotone Themes
**xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to
explore](#fully-customized) the themes\!

## Themes

### Monotone


Use these functions to automatically create a consistent color palette Use these functions to automatically create a consistent color palette
for your slides, based around a single color. for your slides, based around a single color.


- `mono_light()`: A light theme based around a single color
#### `mono_light()`

A light theme based around a single color

![](docs/example_mono_light.png)

#### `mono_dark()`


- `mono_dark()`: A dark theme based around a single color
A dark theme based around a single color


- `mono_accent()`: The default xaringan theme with a single color used
for color accents on select elements (headers, bold text, etc.)
![](docs/example_mono_dark.png)


- `mono_accent_inverse()`: An “inverted” default xaringan theme with a
single color used for color accents on select elements (headers,
bold text, etc.)
#### `mono_accent()`


## Duotone Themes
The default xaringan theme with a single color used for color accents on
select elements (headers, bold text, etc.)

![](docs/example_mono_accent.png)

#### `mono_accent_inverse()`

An “inverted” default xaringan theme with a single color used for color
accents on select elements (headers, bold text, etc.)

![](docs/example_mono_accent_inverse.png)

### Duotone


These themes build from two (ideally) complementary colors. These themes build from two (ideally) complementary colors.


- `duo()`: A two-colored theme based on a primary and secondary color.
#### `duo()`

A two-colored theme based on a primary and secondary color.


- `duo_accent()`: The default Xaringan theme with two accent colors.
![](docs/example_duo.png)


- `duo_accent_inverse()`: An “inverted” default Xaringan theme with
two accent colors.
#### `duo_accent()`


## Solarized
The default Xaringan theme with two accent colors.

![](docs/example_duo_accent.png)

#### `duo_accent_inverse()`

An “inverted” default Xaringan theme with two accent colors.

![](docs/example_duo_accent_inverse.png)

### Solarized


There are also two themes based around the [solarized color There are also two themes based around the [solarized color
palette](http://ethanschoonover.com/solarized), `solarized_light()` and palette](http://ethanschoonover.com/solarized), `solarized_light()` and
highlighting theme to `solarized-light` or `solarized-dark` (looks great highlighting theme to `solarized-light` or `solarized-dark` (looks great
paired or constrasted). paired or constrasted).


#### `solarized_light()`

![](docs/example_solarized_light.png)

#### `solarized_dark()`

![](docs/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:


``` yaml ``` yaml
highlightLines: true highlightLines: true
countIncrementalSlides: false countIncrementalSlides: false
``` ```

### Fully Customized

The theme functions listed above are just wrappers around the central
function of this package, `write_xaringan_theme()`. If you want to start
from the default **xaringan** theme and make a few modifications, start
there.

All of the theme template variables are repeated in each of the theme
functions (instead of relying on `...`) so that you can use
autocompletion to find and change the defaults for any theme function.
To override the default value of any theme functions, set the
appropriate argument in the theme function.

As an example, try loading `xaringanthemer`, type out `duo_theme(` and
then press <kbd>Tab</kbd> to see all of the theme options.

All of the theme options are named so that you first think of the
element you want to change, then the property of that element.

Here are some of the `text_` theme options:

- `text_color`
- `text_bold_color`
- `text_slide_number_color`
- `text_size`
- `text_size_h1`
- *and more …*

And here are the title slide theme options:

- `title_slide_text_color`
- `title_slide_background_color`
- `title_slide_background_image`

## Fonts

Yihui picked out great fonts for the default **xaringan** theme, but
sometimes you want something new and interesting.

**xaringanthemer** makes it easy to use [Google
Fonts](https://fonts.google.com) in your presentations (well, as long as
you have an internet connection) or to fully specify your font files.

To use [Google Fonts](https://fonts.google.com), set the `_font_google`
theme arguments – `text_font_google`, `header_font_google`,
`code_font_google` — using the `google_font()` helper. See
`?google_font` for more info.

``` r
mono_light(
header_font_google = google_font("Josefin Slab", "600"),
text_font_google = google_font("Work Sans", "300", "300i"),
code_font_google = google_font("IBM Plex Mono")
)
```

If you set an `xxx_font_google` theme arguments, then `xxx_font_family`,
`xxx_font_weight` and `xxx_font_url` are overwritten – where `xxx` in
`{header, text, code}`. Of course, you can manually set
`header_font_url`, etc., and ignore the `header_font_google` argument.

For example, suppose you want to use a ligature font for the code font,
such as [Fira Code](https://github.com/yihui/xaringan/issues/83). Just
set `code_font_family` and `code_font_url`\!

``` r
solarized_dark(
code_font_family = "Fira Code",
code_font_url = "https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css"
)
```

-----

**xaringanthemer** was built by [Garrick
Aden-Buie](https://www.garrickadenbuie.com)
([@grrrck](https://twitter.com/grrrck)).

Big thank you to [Yihui Xie](https://yihui.name), especially for
[xaringan](https://github.com/yihui/xaringan).

Feel free to [file an
issue](https://github.com/gadenbuie/xaringanthemer/issues) if you find a
bug or have a theme suggestion – or better yet, submit a pull request\!

BIN
docs/example_default.png View File

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

BIN
docs/example_duo.png View File

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

BIN
docs/example_duo_accent.png View File

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

BIN
docs/example_duo_accent_inverse.png View File

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

BIN
docs/example_mono_accent.png View File

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

BIN
docs/example_mono_accent_inverse.png View File

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

BIN
docs/example_mono_dark.png View File

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

BIN
docs/example_mono_light.png View File

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

BIN
docs/example_solarized_dark.png View File

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

BIN
docs/example_solarized_light.png View File

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

BIN
docs/examples.gif View File

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

Loading…
Cancel
Save