├── .gitignore ├── README.html ├── README.md ├── _site.R ├── _site.yml ├── advanced ├── _footer.html ├── example.Rmd ├── important_data.csv └── my_script.R ├── basic_workflow.Rmd ├── basic_workflow.html ├── first_observations.Rmd ├── first_observations.html ├── getting_sophisticated.Rmd ├── getting_sophisticated.html ├── getting_sophisticated_files └── figure-html │ ├── plot iris-1.png │ ├── plot-1.png │ └── source gdp script-1.png ├── images ├── Rmd_cheatsheet.png ├── Rmd_output_formats.png ├── fork.png ├── gh-pages.png ├── markdown_rmarkdownlesson-2.png ├── markdown_rmarkdownlesson-8.png ├── practicalDev_changingstuff.jpg ├── practicalDev_googleErrorMessage.jpg └── r4ds_r-markdown.png ├── index.Rmd ├── index.html ├── rmarkdown-website-tutorial.Rproj ├── site_libs ├── bootstrap-3.3.5 │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.css.map │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ ├── cerulean.min.css │ │ ├── cosmo.min.css │ │ ├── flatly.min.css │ │ ├── fonts │ │ │ ├── Lato.ttf │ │ │ ├── LatoBold.ttf │ │ │ ├── LatoItalic.ttf │ │ │ ├── NewsCycle.ttf │ │ │ ├── NewsCycleBold.ttf │ │ │ ├── OpenSans.ttf │ │ │ ├── OpenSansBold.ttf │ │ │ ├── OpenSansBoldItalic.ttf │ │ │ ├── OpenSansItalic.ttf │ │ │ ├── OpenSansLight.ttf │ │ │ ├── OpenSansLightItalic.ttf │ │ │ ├── Raleway.ttf │ │ │ ├── RalewayBold.ttf │ │ │ ├── Roboto.ttf │ │ │ ├── RobotoBold.ttf │ │ │ ├── RobotoLight.ttf │ │ │ ├── RobotoMedium.ttf │ │ │ ├── SourceSansPro.ttf │ │ │ ├── SourceSansProBold.ttf │ │ │ ├── SourceSansProItalic.ttf │ │ │ ├── SourceSansProLight.ttf │ │ │ └── Ubuntu.ttf │ │ ├── journal.min.css │ │ ├── lumen.min.css │ │ ├── paper.min.css │ │ ├── readable.min.css │ │ ├── sandstone.min.css │ │ ├── simplex.min.css │ │ ├── spacelab.min.css │ │ ├── united.min.css │ │ └── yeti.min.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ ├── js │ │ ├── bootstrap.js │ │ ├── bootstrap.min.js │ │ └── npm.js │ └── shim │ │ ├── html5shiv.min.js │ │ └── respond.min.js ├── highlight │ ├── default.css │ ├── highlight.js │ └── textmate.css ├── highlightjs-1.1 │ ├── default.css │ ├── highlight.js │ └── textmate.css ├── highlightjs-9.12.0 │ ├── default.css │ ├── highlight.js │ └── textmate.css ├── jquery-1.11.3 │ └── jquery.min.js ├── jqueryui-1.11.4 │ ├── README │ ├── images │ │ ├── ui-icons_444444_256x240.png │ │ ├── ui-icons_555555_256x240.png │ │ ├── ui-icons_777620_256x240.png │ │ ├── ui-icons_777777_256x240.png │ │ ├── ui-icons_cc0000_256x240.png │ │ └── ui-icons_ffffff_256x240.png │ ├── index.html │ ├── jquery-ui.css │ ├── jquery-ui.js │ ├── jquery-ui.min.css │ ├── jquery-ui.min.js │ ├── jquery-ui.structure.css │ ├── jquery-ui.structure.min.css │ ├── jquery-ui.theme.css │ └── jquery-ui.theme.min.css ├── navigation-1.1 │ ├── codefolding.js │ ├── sourceembed.js │ └── tabsets.js └── tocify-1.9.1 │ ├── jquery.tocify.css │ └── jquery.tocify.js ├── your_turn.Rmd └── your_turn.html /.gitignore: -------------------------------------------------------------------------------- 1 | # History files 2 | .Rhistory 3 | .Rapp.history 4 | 5 | # Session Data files 6 | .RData 7 | 8 | # Example code in package build process 9 | *-Ex.R 10 | 11 | # Output files from R CMD build 12 | /*.tar.gz 13 | 14 | # Output files from R CMD check 15 | /*.Rcheck/ 16 | 17 | # RStudio files 18 | .Rproj.user/ 19 | 20 | # produced vignettes 21 | vignettes/*.html 22 | vignettes/*.pdf 23 | 24 | # OAuth2 token, see https://github.com/hadley/httr/releases/tag/v0.3 25 | .httr-oauth 26 | 27 | # knitr and R markdown default cache directories 28 | /*_cache/ 29 | /cache/ 30 | 31 | # Temporary files created by R markdown 32 | *.utf8.md 33 | *.knit.md 34 | .Rproj.user 35 | 36 | # also 37 | README.html 38 | -------------------------------------------------------------------------------- /README.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 32 | 41 | 42 | 43 | 44 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 97 | 98 | 99 | 132 | 133 | 150 | 151 | 152 |
153 | 154 | 155 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 199 | 200 | 206 | 207 | 208 |
209 |

rmarkdown-website-tutorial

210 |

A tutorial for creating websites using R Markdown.

211 |

To build the website, run rmarkdown::render_site(), which knits each Rmarkdown (*.Rmd) based on parameters in _site.yml before pushing the files back to Github.

212 |
213 | 214 | 215 | 216 | 217 |
218 | 219 | 231 | 232 | 233 | 241 | 242 | 243 | 244 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rmarkdown-website-tutorial 2 | [A tutorial for creating websites using R Markdown](https://jules32.github.io/rmarkdown-website-tutorial/). 3 | 4 | To build the website, run [`rmarkdown::render_site()`](http://rmarkdown.rstudio.com/rmarkdown_websites.html), which knits each Rmarkdown (*.Rmd) based on parameters in `_site.yml` before pushing the files back to Github. 5 | -------------------------------------------------------------------------------- /_site.R: -------------------------------------------------------------------------------- 1 | ## packages I want loaded for all pages of my site 2 | suppressPackageStartupMessages({ 3 | library(tidyverse) 4 | library(stringr) 5 | }) 6 | 7 | ## variables I need for my site 8 | data <- readr::read_csv('important_data.csv') 9 | 10 | 11 | ## knitr options I want set as default for all ('global') code chunks 12 | knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE) 13 | 14 | -------------------------------------------------------------------------------- /_site.yml: -------------------------------------------------------------------------------- 1 | name: "R Markdown Websites Tutorial" 2 | navbar: 3 | title: "HOME" 4 | left: 5 | - text: "First Observations" 6 | href: first_observations.html 7 | - text: "Basic Workflow" 8 | href: basic_workflow.html 9 | - text: "Getting Sophisticated" 10 | href: getting_sophisticated.html 11 | - text: "Your Turn" 12 | href: your_turn.html 13 | output_dir: "." 14 | output: 15 | html_document: 16 | theme: yeti 17 | highlight: textmate 18 | # include: 19 | # after_body: _footer.html 20 | -------------------------------------------------------------------------------- /advanced/_footer.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /advanced/example.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "important_example" 3 | author: "Julie" 4 | date: "December 13, 2016" 5 | output: html_document 6 | --- 7 | 8 | ```{r setup, include=FALSE} 9 | knitr::opts_chunk$set(echo = TRUE) 10 | ``` 11 | 12 | This text comes from a separate R Markdown file -- how would you ever know that this is a separate file! 13 | 14 | Here is an example of inline R code: if you round `r pi` you get `r round(pi)`. 15 | 16 | This is the end of this separate and important R Markdown child file. -------------------------------------------------------------------------------- /advanced/important_data.csv: -------------------------------------------------------------------------------- 1 | site,value 2 | x,1 3 | y,2 4 | z,3 -------------------------------------------------------------------------------- /advanced/my_script.R: -------------------------------------------------------------------------------- 1 | ## Function to calculate GDP in the Gapminder dataset. 2 | 3 | ## Imagine this was a huge analysis. 4 | 5 | ## setup 6 | library(tidyverse) # install.packages('tidyverse') 7 | library(gapminder) # install.packages('gapminder') 8 | 9 | calc_gdp = function(my_country){ 10 | 11 | ## add gdp column with gdp calc 12 | d <- gapminder %>% 13 | mutate(gdp = pop * gdpPercap) %>% 14 | filter(country == my_country) 15 | 16 | return(d) 17 | 18 | } 19 | 20 | 21 | -------------------------------------------------------------------------------- /basic_workflow.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Basic workflow" 3 | --- 4 | 5 | Building websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable. 6 | 7 | 1. add content (text, code, images, etc) in an RMarkdown file 8 | 1. knit the RMarkdown file to view 9 | 1. update `_site.yml` (perhaps, if it is a new file) 10 | 1. build the website 11 | - Build tab > Build Website or 12 | - in the console: `rmarkdown::render_site()` 13 | 1. repeat, repeat, repeat 14 | 1. commit and push your website to github, it's live! 15 | 1. repeat all of the above 16 | 17 | Let's see what this looks like. We are not going to have time to learn all of the capabilities of R Markdown today, but the purpose here is to give you familiarlity with the workflow and confidence to explore further on your own. 18 | 19 | ---- 20 | 21 | ## RStudio landscape 22 | 23 | Here is what you'll see when you've opened our `rmarkdown-website-tutorial` project in RStudio. 24 | 25 | The 'Build tab' in the top right corner will show up once RStudio knows you're making a website, don't worry if you don't have it yet. 26 | 27 | If we open `index.Rmd` we will see that it's all text with a bit of formatting. This top part is called the 'front matter'. 28 | 29 | ![](https://docs.google.com/drawings/d/1ff_I5VJAtmF0FYZOIFE6ZW_-8sfwfoOij2AR0eyFs00/pub?w=960&h=720) 30 | 31 |
32 | 33 | ## Markdown Syntax 34 | 35 | Now let's look explore the first few webpages/R Markdown files to get familiar with Markdown syntax: 36 | 37 | - `index.Rmd` 38 | - `first_observations.Rmd` 39 | - `basic_workflow.Rmd` 40 | 41 | These first few pages have simple formatting (**bold**, *italics*), headers, bullet points, links, and images. These are the majority of things you'll do in Markdown. See a full list of options at [**RStudio's Markdown basics**](http://rmarkdown.rstudio.com/authoring_basics.html) or go to Help > Markdown Quick Reference. Also, check out their [R Markdown cheatsheet](https://www.rstudio.com/resources/cheatsheets/). 42 | 43 | Notice that you can insert images locally (from the /images folder), or from online e.g. Google Drawings! 44 | 45 | From [rmarkdown.rstudio.com lesson 8](http://rmarkdown.rstudio.com/lesson-8.html): 46 | 47 | ![](images/markdown_rmarkdownlesson-8.png) 48 | 49 | 50 | 51 |
52 | 53 | ## Build your website! 54 | 55 | Let's make a few changes to this file and knit it to inspect. Try adding some new Markdown formatted text. 56 | 57 | Also, now is a good time to make sure you have the the Build tab; you may need to install `rmarkdown` if you haven't already (below). 58 | 59 | Click `Build Website` in the Build tab (or type `rmarkdown::render_site()` in the Console) and inspect your Website! Commit and push to see it live online. 60 | 61 |
62 | 63 | ## Other 64 | 65 | ### Tips for learning Markdown 66 | 67 | **In Markdown, spaces can be tricky**. 68 | To start a new line here, I needed 2 spaces after `tricky. ` above. 69 | As you can see, a simple carriage return doesn't cut it. 70 | 71 | To force carriage returns, use the `
` html tag... 72 | 73 |
74 |
75 | 76 | ...like this. 77 | 78 | Also, this bulleted list won't render properly: 79 | - because there is no carriage return between the line above 80 | - and where the bullet points start. 81 | 82 | To have the bullet points render nicely: 83 | 84 | - you must have a full blank line 85 | - following "To have the bullet points render nicely:" 86 | 87 |
88 | 89 | ### Building a website from scratch 90 | 91 | If you want to build a website from scratch (i.e. not fork this one), follow RStudio's instructions here: [R Markdown Websites 92 | ](https://rmarkdown.rstudio.com/rmarkdown_websites.html). 93 | 94 | **Troubleshooting:** 95 | 96 | We recently had trouble having our nicely built website display online: the website's url only showed the README (nicely formatted though!). We solved it by adding: 97 | 98 | ``` 99 | output_dir: "." 100 | ``` 101 | 102 | to the `_site.yml`. This knits all the .html files in place in the home directory instead of in a `_site` folder, and this solved our problem! 103 | 104 | ### Install the `rmarkdown` package 105 | 106 | You can do this by: 107 | 108 | 1. paste this code in the Console and hit enter 109 | 110 | ``` 111 | install.packages('rmarkdown') 112 | library(rmarkdown) 113 | ``` 114 | 1. from the menu bar select: Tools > Install Packages... "rmarkdown" 115 | 1. from the bottom right pane, click on the Packages tab, click on Install, "rmarkdown" 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /basic_workflow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Basic workflow 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 32 | 41 | 42 | 43 | 44 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 97 | 98 | 99 | 132 | 133 | 150 | 151 | 152 |
153 | 154 | 155 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 199 | 200 | 207 | 208 | 209 |

Building websites uses the same reproducible workflow you can use for your analyses and collaborations. It is very iterative. You can do it all from RStudio, with a combination of clicking or typing commands as you feel comfortable.

210 |
    211 |
  1. add content (text, code, images, etc) in an RMarkdown file
    2. 212 |
  2. knit the RMarkdown file to view
    3. 213 |
  3. update _site.yml (perhaps, if it is a new file)
    4. 214 |
  4. build the website 215 |
      216 |
    • Build tab > Build Website or
      • 217 |
    • in the console: rmarkdown::render_site()
      • 218 |
    5. 219 |
  5. repeat, repeat, repeat
    6. 220 |
  6. commit and push your website to github, it’s live!
    7. 221 |
  7. repeat all of the above
    8. 222 |
223 |

Let’s see what this looks like. We are not going to have time to learn all of the capabilities of R Markdown today, but the purpose here is to give you familiarlity with the workflow and confidence to explore further on your own.

224 |
225 |
226 |

RStudio landscape

227 |

Here is what you’ll see when you’ve opened our rmarkdown-website-tutorial project in RStudio.

228 |

The ‘Build tab’ in the top right corner will show up once RStudio knows you’re making a website, don’t worry if you don’t have it yet.

229 |

If we open index.Rmd we will see that it’s all text with a bit of formatting. This top part is called the ‘front matter’.

230 |
231 | 232 | 233 |
234 |


235 |
236 |
237 |

Markdown Syntax

238 |

Now let’s look explore the first few webpages/R Markdown files to get familiar with Markdown syntax:

239 | 244 |

These first few pages have simple formatting (bold, italics), headers, bullet points, links, and images. These are the majority of things you’ll do in Markdown. See a full list of options at RStudio’s Markdown basics or go to Help > Markdown Quick Reference. Also, check out their R Markdown cheatsheet.

245 |

Notice that you can insert images locally (from the /images folder), or from online e.g. Google Drawings!

246 |

From rmarkdown.rstudio.com lesson 8:

247 |
248 | 249 | 250 |
251 |


252 |
253 |
254 |

Build your website!

255 |

Let’s make a few changes to this file and knit it to inspect. Try adding some new Markdown formatted text.

256 |

Also, now is a good time to make sure you have the the Build tab; you may need to install rmarkdown if you haven’t already (below).

257 |

Click Build Website in the Build tab (or type rmarkdown::render_site() in the Console) and inspect your Website! Commit and push to see it live online.

258 |


259 |
260 |
261 |

Other

262 |
263 |

Tips for learning Markdown

264 |

In Markdown, spaces can be tricky.
265 | To start a new line here, I needed 2 spaces after tricky. above. As you can see, a simple carriage return doesn’t cut it.

266 |

To force carriage returns, use the <br> html tag…

267 |



268 |

…like this.

269 |

Also, this bulleted list won’t render properly: - because there is no carriage return between the line above - and where the bullet points start.

270 |

To have the bullet points render nicely:

271 |
    272 |
  • you must have a full blank line
    • 273 |
  • following “To have the bullet points render nicely:”
    • 274 |
275 |


276 |
277 |
278 |

Building a website from scratch

279 |

If you want to build a website from scratch (i.e. not fork this one), follow RStudio’s instructions here: R Markdown Websites.

280 |

Troubleshooting:

281 |

We recently had trouble having our nicely built website display online: the website’s url only showed the README (nicely formatted though!). We solved it by adding:

282 | 
output_dir: "."
283 |

to the _site.yml. This knits all the .html files in place in the home directory instead of in a _site folder, and this solved our problem!

284 |
285 |
286 |

Install the rmarkdown package

287 |

You can do this by:

288 |
    289 |

  1. paste this code in the Console and hit enter

    290 | 
    install.packages('rmarkdown')
291 | library(rmarkdown)
    2. 292 |
  2. from the menu bar select: Tools > Install Packages… “rmarkdown”
    3. 293 |

  3. from the bottom right pane, click on the Packages tab, click on Install, “rmarkdown”

    4. 294 |
295 | 296 |
297 |
298 | 299 | 300 | 301 | 302 |
303 | 304 | 316 | 317 | 318 | 326 | 327 | 328 | 329 | -------------------------------------------------------------------------------- /first_observations.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "First observations" 3 | --- 4 | 5 | With this tutorial, we have a working example website that we will explore together. We'll learn a few rules and look for patterns to get an understanding of what things do. And you can continue to use this website as a reference after the tutorial, along with [**RStudio's instructions for R Markdown websites**](http://rmarkdown.rstudio.com/rmarkdown_websites.html). 6 | 7 | We'll start our exploration online looking at the website architecture, then we'll clone the repo to our local computers. Locally, we will explore further by going back and forth between the R Markdown editor and built webpages, and make modifications. Pushing to Github will make our modifications live! 8 | 9 | 10 | 11 | ---- 12 | 13 | ## Exploring online 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | ### The website itself 22 | 23 | This website has 5 pages: 24 | 25 | - Home 26 | - First Observations 27 | - Basic Workflow 28 | - Getting Sophisticated 29 | - Your Turn 30 | 31 | 32 | `github.io` means that there is a Github repo behind this website, and we also know the username and repo name: 33 | 34 | **** <=> **** 35 | 36 | (Note: you can have github websites point to different urls if you don't want the `github.io`.) 37 | 38 |
39 | 40 | ### The website's repo 41 | 42 | Let's go to ****. 43 | 44 | **First, note the `gh-pages` branch** - this is critical for building free webpages. You can usually name branches whatever you want, but the `gh-pages` name means it can be built as a website. [I set it as my default branch](https://help.github.com/articles/setting-the-default-branch/). 45 | 46 | ![](images/gh-pages.png) 47 | 48 |
49 | 50 | **Now let's look at the filenames**. We can recognize the names of the webpages we've seen, and there is also a `_site.yml` file, which is the website's configuration file. The simplest website possible would have 2 files only: `_site.yml` and `index.Rmd` 51 | 52 | ![](https://docs.google.com/drawings/d/1jnXfeJ3i-fwd-t49S5FyeMAX3cJSoCYbyZLLTqFZd7w/pub?w=960&h=720) 53 | 54 |
55 | 56 | ## Fork to your account, clone to your computer 57 | 58 | Let's start digging deeper and playing with this. 59 | 60 | 1. Fork the [jules32/rmarkdown-website-tutorial](https://github.com/jules32/rmarkdown-website-tutorial) repo into your own account. 61 | 62 | 2. Edit the URL for the website by replacing `jules32` with your GitHub username 63 | 64 | 3. Clone to your local computer using RStudio (preferred) the [Desktop App](https://desktop.github.com/), or the command line. 65 | 66 | ![](https://docs.google.com/drawings/d/1yy2VFQy4QqxfOzt-XtTSNA91qoCI7jPo0ob7Pm89SBg/pub?w=960&h=720) 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /first_observations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | First observations 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 32 | 41 | 42 | 43 | 44 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 97 | 98 | 99 | 132 | 133 | 150 | 151 | 152 |
153 | 154 | 155 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 199 | 200 | 207 | 208 | 209 |

With this tutorial, we have a working example website that we will explore together. We’ll learn a few rules and look for patterns to get an understanding of what things do. And you can continue to use this website as a reference after the tutorial, along with RStudio’s instructions for R Markdown websites.

210 |

We’ll start our exploration online looking at the website architecture, then we’ll clone the repo to our local computers. Locally, we will explore further by going back and forth between the R Markdown editor and built webpages, and make modifications. Pushing to Github will make our modifications live!

211 |
212 |
213 |

Exploring online

214 |


215 | 216 | 217 |
218 |

The website itself

219 |

This website has 5 pages:

220 |
    221 |
  • Home
    • 222 |
  • First Observations
    • 223 |
  • Basic Workflow
    • 224 |
  • Getting Sophisticated
    • 225 |
  • Your Turn
    • 226 |
227 |

github.io means that there is a Github repo behind this website, and we also know the username and repo name:

228 |

http://jules32.github.io/rmarkdown-website-tutorial <=> https://github.com/jules32/rmarkdown-website-tutorial

229 |

(Note: you can have github websites point to different urls if you don’t want the github.io.)

230 |


231 |
232 |
233 |

The website’s repo

234 |

Let’s go to https://github.com/jules32/rmarkdown-website-tutorial.

235 |

First, note the gh-pages branch - this is critical for building free webpages. You can usually name branches whatever you want, but the gh-pages name means it can be built as a website. I set it as my default branch.

236 |
237 | 238 | 239 |
240 |


241 |

Now let’s look at the filenames. We can recognize the names of the webpages we’ve seen, and there is also a _site.yml file, which is the website’s configuration file. The simplest website possible would have 2 files only: _site.yml and index.Rmd

242 |
243 | 244 | 245 |
246 |


247 |
248 |
249 |
250 |

Fork to your account, clone to your computer

251 |

Let’s start digging deeper and playing with this.

252 |
    253 |

  1. Fork the jules32/rmarkdown-website-tutorial repo into your own account.

    2. 254 |

  2. Edit the URL for the website by replacing jules32 with your GitHub username

    3. 255 |

  3. Clone to your local computer using RStudio (preferred) the Desktop App, or the command line.

    4. 256 |
257 |
258 | 259 | 260 |
261 |
262 | 263 | 264 | 265 | 266 |
267 | 268 | 280 | 281 | 282 | 290 | 291 | 292 | 293 | -------------------------------------------------------------------------------- /getting_sophisticated.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Time to get sophisticated" 3 | output: 4 | html_document: 5 | toc: true 6 | toc_float: true 7 | --- 8 | 9 | There are a lot of ways to get sophisticated here, and we're only covering a few possibilites here. See [RStudio's R Markdown lessons](http://rmarkdown.rstudio.com/lesson-1.html) for other R Markdown capabilities. Plus, R Markdown can render styling from Cascading Style Sheets (CSS) and Hyper Text Markup Language (HTML), which is what non-R Markdown websites use. 10 | 11 | So, Googling what you want to do and trying it in your R Markdown files is a good way to learn. Disclaimer: that's how I've learned the following, so there are most definitely better and more elegant ways to do this. But here are some ideas of what you may want to do with your website. 12 | 13 | ---- 14 | 15 | ## R Markdown options 16 | 17 | These are options that you can do from the Front Matter. 18 | 19 |
20 | 21 | ### Table of Contents 22 | 23 | Note that on this page: 24 | 25 | 1. there is a Table of Contents (TOC) there on the left, and 26 | 1. it is floating (i.e. it follows you as you scroll down and expands/collapses nicely as you click) 27 | 1. This is all done in the front matter: 28 | ``` 29 | output: 30 | html_document: 31 | toc: true 32 | toc_float: true 33 | ``` 34 | 35 | 36 |
37 | 38 | ### Themes 39 | 40 | We can change the website's theme in `_site.yml`. Explore options here: : 41 | 42 | >Valid themes include "default", "cerulean", "journal", "flatly", "readable", "spacelab", "united", "cosmo", "lumen", "paper", "sandstone", "simplex", and "yeti". 43 | 44 | 45 | 46 | ---- 47 | 48 | ## Simple styling 49 | 50 | 51 | ### images 52 | 53 | By default, images are displayed left-aligned. 54 | 55 | **Resize** an image using HTML tags (side note: check out [RStudio's R Markdown Cheatsheet](https://www.rstudio.com/resources/cheatsheets/)): 56 | 57 | Here's a big image: 58 | `` 59 | 60 | 61 | And a small image: 62 | `` 63 | 64 | 65 | 66 | **Align** an image using HTML tags: 67 | 68 | Small image centered: 69 | `
` 70 | 71 |
72 | 73 | Small image right-aligned: 74 | `
` 75 | 76 |
77 | 78 |
79 | 80 | 81 | ### columns 82 | 83 | 85 | 92 | 93 | 94 |
95 | **Column 1** 96 | 97 | - note `
` and `
` 98 | - what beautiful bullet points 99 |
100 |
101 | 102 | **Column 2** 103 | 104 | - I have 3 bullet points here 105 | - which means to align with the left column 106 | - I added a `
` there 107 |
108 | 109 |
110 | 111 |
112 | `
**Here the text is centered. Here are good resources:**
` 113 | **Here the text is centered. Here are good resources:** 114 | 115 | • [w3schools.com - HTML references](http://www.w3schools.com/tags/) • [w3schools.com - CSS tutorial](http://www.w3schools.com/css/) • 116 |
117 | 118 |
119 | 120 | ### colored text 121 | 122 | `Text here!` 123 | 124 | This is red text size 3! 125 | This is blue text size 2! 126 | This is green text in verdana! 127 | 128 | ---- 129 | 130 | ## `R` code 131 | 132 | You can execute R code each time you build your website. Even if you don't yet know R, this is a little taste of the types of things you can do. There are two ways you'll see R code; in-line and in a code chunk. This is from the [R Markdown chapter in R for Data Science](http://r4ds.had.co.nz/r-markdown.html). 133 | 134 | 135 | ![](images/r4ds_r-markdown.png) 136 | 137 |
138 | 139 | ### in line 140 | 141 | Here is an example inline. The date when I last built the website is `r Sys.Date()`. My favorite number is `r pi + 10`. There are `r length(list.files())` files and folders in our repo. This is not just text; his is executable R code that is `r 10 * 10`% awesome! 142 | 143 |
144 | 145 | ### in a code chunk 146 | 147 | And here is an example of a code chunk. Let's plot the first bit of an `iris` variable (which is a dataset that comes with base R). 148 | 149 | ```{r plot iris} 150 | x <- iris$Sepal.Length[1:15] 151 | plot(x) 152 | ``` 153 | 154 | ### calling another file 155 | 156 | #### `R` script 157 | 158 | You can source an R script. This is a super powerful way to avoid copy-pasting your analyses. For example: 159 | 160 | ```{r source gdp script, echo=T, warning=FALSE, message=F} 161 | ## source an external script 162 | source("advanced/my_script.R") 163 | 164 | ## use the calc_gdp() function `my_script.R` 165 | my_data <- calc_gdp(my_country <- 'Slovenia') 166 | 167 | ggplot(data = my_data, aes(x = year, y = pop)) + 168 | geom_point() + 169 | labs(title = my_data$country) 170 | ``` 171 | 172 |
173 | 174 | #### A specific R script: `_site.R` 175 | 176 | This is something that R Markdown websites will look for; when it exists it will give you 'global variables' that will be available for all pages across your site. 177 | 178 | ```{r _site.R, eval=FALSE, warning=FALSE, message=F} 179 | source("_site.R") 180 | ``` 181 | 182 |
183 | 184 | #### R Markdown file 185 | 186 | You can insert separate R Markdown files too; text and code will be incorporated seamlessly into this page. This R Markdown file is considered the 'parent' file, and the one that is incorporated is the 'child' file. In the code chunk below, we'll say `{r, child='advanced/important_example.Rmd'}`. 187 | 188 | ```{r child, child='advanced/example.Rmd'} 189 | ``` 190 | 191 |
192 | 193 | ## Troubleshooting 194 | 195 | You'll get errors as you work; this is how you learn. These are a few things you may encounter: 196 | 197 | 1. If when running `rmarkdown::render_site()` you get this error: 198 | 199 | ``` 200 | Error in object[seq_len(ile)] : 201 | object of type 'symbol' is not subsettable 202 | ``` 203 | Go to *Session > Restart R* and try again. 204 | 205 | 2. When knitting, if you get this error: 206 | 207 | ``` 208 | Error in parse_block(g[-1], g[1], params.src) : duplicate label 'setup' 209 | Calls: ... process_file -> split_file -> lapply -> FUN -> parse_block 210 | Execution halted 211 | ``` 212 | Here you have 2 `R` code chunks named the same thing (in this case 'setup'), you must change one of them because there cannot be two code chunks with the same name. 213 | 214 | 215 | 3. When you get an error message you don't understand: Copy-paste it into Google. 216 | 217 |
218 | 219 | 220 | -------------------------------------------------------------------------------- /getting_sophisticated.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Time to get sophisticated 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 35 | 44 | 45 | 46 | 47 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 100 | 101 | 102 | 135 | 136 | 153 | 154 | 155 |
156 | 157 | 158 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 195 | 196 | 253 | 254 | 255 |
256 |
257 |
258 |
259 |
260 | 261 |
262 | 263 | 264 | 265 | 266 | 297 | 298 | 305 | 306 | 307 |

There are a lot of ways to get sophisticated here, and we’re only covering a few possibilites here. See RStudio’s R Markdown lessons for other R Markdown capabilities. Plus, R Markdown can render styling from Cascading Style Sheets (CSS) and Hyper Text Markup Language (HTML), which is what non-R Markdown websites use.

308 |

So, Googling what you want to do and trying it in your R Markdown files is a good way to learn. Disclaimer: that’s how I’ve learned the following, so there are most definitely better and more elegant ways to do this. But here are some ideas of what you may want to do with your website.

309 |
310 |
311 |

R Markdown options

312 |

These are options that you can do from the Front Matter.

313 |


314 |
315 |

Table of Contents

316 |

Note that on this page:

317 |
    318 |
  1. there is a Table of Contents (TOC) there on the left, and
    2. 319 |
  2. it is floating (i.e. it follows you as you scroll down and expands/collapses nicely as you click)
    3. 320 |

  3. This is all done in the front matter:

    321 | 
    output:  
322 |   html_document:  
323 |     toc: true  
324 |     toc_float: true
    325 |
    4. 326 |
327 |


328 |
329 |
330 |

Themes

331 |

We can change the website’s theme in _site.yml. Explore options here: http://rmarkdown.rstudio.com/html_document_format.html#appearance_and_style:

332 |
333 |

Valid themes include “default”, “cerulean”, “journal”, “flatly”, “readable”, “spacelab”, “united”, “cosmo”, “lumen”, “paper”, “sandstone”, “simplex”, and “yeti”.

334 |
335 |
336 |
337 |
338 |
339 |

Simple styling

340 |
341 |

images

342 |

By default, images are displayed left-aligned.

343 |

Resize an image using HTML tags (side note: check out RStudio’s R Markdown Cheatsheet):

344 |

Here’s a big image:
345 | <img src="images/Rmd_cheatsheet.png" width="350px">
346 |

347 |

And a small image:
348 | <img src="images/Rmd_cheatsheet.png" width="150px">
349 |

350 |

Align an image using HTML tags:

351 |

Small image centered:
352 | <center><img src="images/Rmd_cheatsheet.png" width="150px"></center>

353 |
354 | 355 |
356 |

Small image right-aligned:
357 | <div align="right"><img src="images/Rmd_cheatsheet.png" width="150px"></div>

358 |
359 | 360 |
361 |


362 |
363 |
364 |

columns

365 | 367 | 374 |
375 |

Column 1

376 |
    377 |
  • note <div class="col2"> and </div>
    • 378 |
  • what beautiful bullet points

    • 379 |
380 |

Column 2

381 |
    382 |
  • I have 3 bullet points here
    • 383 |
  • which means to align with the left column
    • 384 |
  • I added a <br> there
    • 385 |
386 |
387 |


388 |
389 |

<center>**Here the text is centered. Here are good resources:**</center>
390 | Here the text is centered. Here are good resources:

391 | • w3schools.com - HTML references • w3schools.com - CSS tutorial • 392 |
393 |


394 |
395 |
396 |

colored text

397 |

<font size="3" color="red">Text here!</font>

398 |

This is red text size 3!
399 | This is blue text size 2!
400 | This is green text in verdana!

401 |
402 |
403 |
404 |
405 |

R code

406 |

You can execute R code each time you build your website. Even if you don’t yet know R, this is a little taste of the types of things you can do. There are two ways you’ll see R code; in-line and in a code chunk. This is from the R Markdown chapter in R for Data Science.

407 |
408 | 409 | 410 |
411 |


412 |
413 |

in line

414 |

Here is an example inline. The date when I last built the website is 2018-02-22. My favorite number is 13.1415927. There are 19 files and folders in our repo. This is not just text; his is executable R code that is 100% awesome!

415 |


416 |
417 |
418 |

in a code chunk

419 |

And here is an example of a code chunk. Let’s plot the first bit of an iris variable (which is a dataset that comes with base R).

420 | 
x <- iris$Sepal.Length[1:15]
421 | plot(x)
422 |

423 |
424 |
425 |

calling another file

426 |
427 |

R script

428 |

You can source an R script. This is a super powerful way to avoid copy-pasting your analyses. For example:

429 | 
## source an external script 
430 | source("advanced/my_script.R")
431 | 
432 | ## use the calc_gdp() function `my_script.R`
433 | my_data <- calc_gdp(my_country <- 'Slovenia')
434 | 
435 | ggplot(data = my_data, aes(x = year, y = pop)) + 
436 |   geom_point() + 
437 |   labs(title = my_data$country)
438 |

439 |


440 |
441 |
442 |

A specific R script: _site.R

443 |

This is something that R Markdown websites will look for; when it exists it will give you ‘global variables’ that will be available for all pages across your site.

444 | 
source("_site.R")
445 |


446 |
447 |
448 |

R Markdown file

449 |

You can insert separate R Markdown files too; text and code will be incorporated seamlessly into this page. This R Markdown file is considered the ‘parent’ file, and the one that is incorporated is the ‘child’ file. In the code chunk below, we’ll say {r, child='advanced/important_example.Rmd'}.

450 |

This text comes from a separate R Markdown file – how would you ever know that this is a separate file!

451 |

Here is an example of inline R code: if you round 3.1415927 you get 3.

452 |

This is the end of this separate and important R Markdown child file.

453 |


454 |
455 |
456 |
457 |
458 |

Troubleshooting

459 |

You’ll get errors as you work; this is how you learn. These are a few things you may encounter:

460 |
    461 |

  1. If when running rmarkdown::render_site() you get this error:

    462 | 
    Error in object[seq_len(ile)] : 
463 | object of type 'symbol' is not subsettable
    464 |

    Go to Session > Restart R and try again.

    2. 465 |

  2. When knitting, if you get this error:

    466 | 
    Error in parse_block(g[-1], g[1], params.src) : duplicate label 'setup'
467 | Calls: <Anonymous> ... process_file -> split_file -> lapply -> FUN -> parse_block
468 | Execution halted
    469 |

    Here you have 2 R code chunks named the same thing (in this case ‘setup’), you must change one of them because there cannot be two code chunks with the same name.

    3. 470 |

  3. When you get an error message you don’t understand: Copy-paste it into Google.

    4. 471 |
472 |
473 | 474 |
475 |
476 | 477 | 478 | 479 |
480 |
481 | 482 |
483 | 484 | 496 | 497 | 498 | 506 | 507 | 508 | 509 | -------------------------------------------------------------------------------- /getting_sophisticated_files/figure-html/plot iris-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/getting_sophisticated_files/figure-html/plot iris-1.png -------------------------------------------------------------------------------- /getting_sophisticated_files/figure-html/plot-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/getting_sophisticated_files/figure-html/plot-1.png -------------------------------------------------------------------------------- /getting_sophisticated_files/figure-html/source gdp script-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/getting_sophisticated_files/figure-html/source gdp script-1.png -------------------------------------------------------------------------------- /images/Rmd_cheatsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/Rmd_cheatsheet.png -------------------------------------------------------------------------------- /images/Rmd_output_formats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/Rmd_output_formats.png -------------------------------------------------------------------------------- /images/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/fork.png -------------------------------------------------------------------------------- /images/gh-pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/gh-pages.png -------------------------------------------------------------------------------- /images/markdown_rmarkdownlesson-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/markdown_rmarkdownlesson-2.png -------------------------------------------------------------------------------- /images/markdown_rmarkdownlesson-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/markdown_rmarkdownlesson-8.png -------------------------------------------------------------------------------- /images/practicalDev_changingstuff.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/practicalDev_changingstuff.jpg -------------------------------------------------------------------------------- /images/practicalDev_googleErrorMessage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/practicalDev_googleErrorMessage.jpg -------------------------------------------------------------------------------- /images/r4ds_r-markdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/images/r4ds_r-markdown.png -------------------------------------------------------------------------------- /index.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Making free websites with RStudio's R Markdown" 3 | author: "[Julie Lowndes](https://github.com/jules32) at [NCEAS](https://www.nceas.ucsb.edu/), 12/14/16" 4 | output: 5 | html_document: 6 | fig_width: 1 7 | --- 8 | 9 | ---- 10 | 11 | It's possible to create well-designed websites for free using [RStudio's R Markdown](http://rmarkdown.rstudio.com/) and hosting them on [Github](http://github.com). This is very new and incredibly cool. It is a really powerful way to communicate science using the same reproducible workflow you use for your analyses and collaborations. 12 | 13 | ***Creating websites with R Markdown can be done without knowing R or HTML, CSS, etc,*** and that's where we'll start. However, R Markdown integrates with these tools so the more you know the more complex and beautiful your website can be. This tutorial borrows heavily from a lot of great tutorials and resources you should check out too -- there are links throughout. 14 | 15 | The best way to learn is to follow along with your own laptop, but all are welcome. We'll spend half the time with the tutorial and half the time for you to work on your own website and get help. If you bring your laptop please do this beforehand: 16 | 17 | 1. install [RStudio](https://www.rstudio.com/products/rstudio/download/) 18 | 1. create a [GitHub]((http://github.com)) account ([advice](http://happygitwithr.com/github-acct.html)) 19 | 1. set up your computer to talk to GitHub 20 | - have RStudio linked directly (preferred) ([instructions sections 8-14](http://happygitwithr.com/hello-git.html)) 21 | - or install the [Desktop App](https://desktop.github.com/) 22 | - or be familiar with git commands for the command line ([tutorial](https://try.github.io/levels/1/challenges/1)) 23 | 24 | ---- 25 | 26 | 27 | **Examples:** 28 | 29 | We have been using R Markdown for the Ocean Health Index: [**ohi-science.org/ohi-global**](http://ohi-science.org/ohi-global). 30 | And R Markdown is much more than just websites -- here's a [**one-minute video about R Markdown**](http://rmarkdown.rstudio.com/lesson-1.html) to get you excited. 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Making free websites with RStudio’s R Markdown 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 33 | 42 | 43 | 44 | 45 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 98 | 99 | 100 | 133 | 134 | 151 | 152 | 153 |
154 | 155 | 156 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 200 | 201 | 209 | 210 | 211 |
212 |

It’s possible to create well-designed websites for free using RStudio’s R Markdown and hosting them on Github. This is very new and incredibly cool. It is a really powerful way to communicate science using the same reproducible workflow you use for your analyses and collaborations.

213 |

Creating websites with R Markdown can be done without knowing R or HTML, CSS, etc, and that’s where we’ll start. However, R Markdown integrates with these tools so the more you know the more complex and beautiful your website can be. This tutorial borrows heavily from a lot of great tutorials and resources you should check out too – there are links throughout.

214 |

The best way to learn is to follow along with your own laptop, but all are welcome. We’ll spend half the time with the tutorial and half the time for you to work on your own website and get help. If you bring your laptop please do this beforehand:

215 |
    216 |
  1. install RStudio
    2. 217 |
  2. create a GitHub account (advice)
    3. 218 |
  3. set up your computer to talk to GitHub 219 |
    4. 224 |
225 |
226 |

Examples:

227 |

We have been using R Markdown for the Ocean Health Index: ohi-science.org/ohi-global.
228 | And R Markdown is much more than just websites – here’s a one-minute video about R Markdown to get you excited.

229 | 230 | 231 | 232 | 233 |
234 | 235 | 247 | 248 | 249 | 257 | 258 | 259 | 260 | -------------------------------------------------------------------------------- /rmarkdown-website-tutorial.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | 15 | BuildType: Website 16 | -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/bootstrap-theme.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.5 (http://getbootstrap.com) 3 | * Copyright 2011-2015 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */.btn-danger,.btn-default,.btn-info,.btn-primary,.btn-success,.btn-warning{text-shadow:0 -1px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)}.btn-danger.active,.btn-danger:active,.btn-default.active,.btn-default:active,.btn-info.active,.btn-info:active,.btn-primary.active,.btn-primary:active,.btn-success.active,.btn-success:active,.btn-warning.active,.btn-warning:active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-danger.disabled,.btn-danger[disabled],.btn-default.disabled,.btn-default[disabled],.btn-info.disabled,.btn-info[disabled],.btn-primary.disabled,.btn-primary[disabled],.btn-success.disabled,.btn-success[disabled],.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-danger,fieldset[disabled] .btn-default,fieldset[disabled] .btn-info,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-success,fieldset[disabled] .btn-warning{-webkit-box-shadow:none;box-shadow:none}.btn-danger .badge,.btn-default .badge,.btn-info .badge,.btn-primary .badge,.btn-success .badge,.btn-warning .badge{text-shadow:none}.btn.active,.btn:active{background-image:none}.btn-default{text-shadow:0 1px 0 #fff;background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#dbdbdb;border-color:#ccc}.btn-default:focus,.btn-default:hover{background-color:#e0e0e0;background-position:0 -15px}.btn-default.active,.btn-default:active{background-color:#e0e0e0;border-color:#dbdbdb}.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#e0e0e0;background-image:none}.btn-primary{background-image:-webkit-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-o-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));background-image:linear-gradient(to bottom,#337ab7 0,#265a88 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#245580}.btn-primary:focus,.btn-primary:hover{background-color:#265a88;background-position:0 -15px}.btn-primary.active,.btn-primary:active{background-color:#265a88;border-color:#245580}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#265a88;background-image:none}.btn-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641));background-image:linear-gradient(to bottom,#5cb85c 0,#419641 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#3e8f3e}.btn-success:focus,.btn-success:hover{background-color:#419641;background-position:0 -15px}.btn-success.active,.btn-success:active{background-color:#419641;border-color:#3e8f3e}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#419641;background-image:none}.btn-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#2aabd2));background-image:linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#28a4c9}.btn-info:focus,.btn-info:hover{background-color:#2aabd2;background-position:0 -15px}.btn-info.active,.btn-info:active{background-color:#2aabd2;border-color:#28a4c9}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#2aabd2;background-image:none}.btn-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#eb9316));background-image:linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#e38d13}.btn-warning:focus,.btn-warning:hover{background-color:#eb9316;background-position:0 -15px}.btn-warning.active,.btn-warning:active{background-color:#eb9316;border-color:#e38d13}.btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled.focus,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled].focus,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#eb9316;background-image:none}.btn-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c12e2a));background-image:linear-gradient(to bottom,#d9534f 0,#c12e2a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#b92c28}.btn-danger:focus,.btn-danger:hover{background-color:#c12e2a;background-position:0 -15px}.btn-danger.active,.btn-danger:active{background-color:#c12e2a;border-color:#b92c28}.btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled.focus,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled].focus,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#c12e2a;background-image:none}.img-thumbnail,.thumbnail{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{background-color:#e8e8e8;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{background-color:#2e6da4;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}.navbar-default{background-image:-webkit-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-o-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f8f8f8));background-image:linear-gradient(to bottom,#fff 0,#f8f8f8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075)}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.open>a{background-image:-webkit-linear-gradient(top,#dbdbdb 0,#e2e2e2 100%);background-image:-o-linear-gradient(top,#dbdbdb 0,#e2e2e2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dbdbdb),to(#e2e2e2));background-image:linear-gradient(to bottom,#dbdbdb 0,#e2e2e2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.075);box-shadow:inset 0 3px 9px rgba(0,0,0,.075)}.navbar-brand,.navbar-nav>li>a{text-shadow:0 1px 0 rgba(255,255,255,.25)}.navbar-inverse{background-image:-webkit-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-o-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a{background-image:-webkit-linear-gradient(top,#080808 0,#0f0f0f 100%);background-image:-o-linear-gradient(top,#080808 0,#0f0f0f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#080808),to(#0f0f0f));background-image:linear-gradient(to bottom,#080808 0,#0f0f0f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.25);box-shadow:inset 0 3px 9px rgba(0,0,0,.25)}.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav>li>a{text-shadow:0 -1px 0 rgba(0,0,0,.25)}.navbar-fixed-bottom,.navbar-fixed-top,.navbar-static-top{border-radius:0}@media (max-width:767px){.navbar .navbar-nav .open .dropdown-menu>.active>a,.navbar .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}}.alert{text-shadow:0 1px 0 rgba(255,255,255,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05)}.alert-success{background-image:-webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));background-image:linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);background-repeat:repeat-x;border-color:#b2dba1}.alert-info{background-image:-webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#b9def0));background-image:linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);background-repeat:repeat-x;border-color:#9acfea}.alert-warning{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#f8efc0));background-image:linear-gradient(to bottom,#fcf8e3 0,#f8efc0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);background-repeat:repeat-x;border-color:#f5e79e}.alert-danger{background-image:-webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));background-image:linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);background-repeat:repeat-x;border-color:#dca7a7}.progress{background-image:-webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#f5f5f5));background-image:linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x}.progress-bar{background-image:-webkit-linear-gradient(top,#337ab7 0,#286090 100%);background-image:-o-linear-gradient(top,#337ab7 0,#286090 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#286090));background-image:linear-gradient(to bottom,#337ab7 0,#286090 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);background-repeat:repeat-x}.progress-bar-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));background-image:linear-gradient(to bottom,#5cb85c 0,#449d44 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);background-repeat:repeat-x}.progress-bar-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#31b0d5));background-image:linear-gradient(to bottom,#5bc0de 0,#31b0d5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);background-repeat:repeat-x}.progress-bar-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#ec971f));background-image:linear-gradient(to bottom,#f0ad4e 0,#ec971f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);background-repeat:repeat-x}.progress-bar-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c9302c));background-image:linear-gradient(to bottom,#d9534f 0,#c9302c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);background-repeat:repeat-x}.progress-bar-striped{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.list-group{border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{text-shadow:0 -1px 0 #286090;background-image:-webkit-linear-gradient(top,#337ab7 0,#2b669a 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2b669a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2b669a));background-image:linear-gradient(to bottom,#337ab7 0,#2b669a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);background-repeat:repeat-x;border-color:#2b669a}.list-group-item.active .badge,.list-group-item.active:focus .badge,.list-group-item.active:hover .badge{text-shadow:none}.panel{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}.panel-default>.panel-heading{background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.panel-primary>.panel-heading{background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}.panel-success>.panel-heading{background-image:-webkit-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#d0e9c6));background-image:linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);background-repeat:repeat-x}.panel-info>.panel-heading{background-image:-webkit-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#c4e3f3));background-image:linear-gradient(to bottom,#d9edf7 0,#c4e3f3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);background-repeat:repeat-x}.panel-warning>.panel-heading{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#faf2cc));background-image:linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);background-repeat:repeat-x}.panel-danger>.panel-heading{background-image:-webkit-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-o-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#ebcccc));background-image:linear-gradient(to bottom,#f2dede 0,#ebcccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);background-repeat:repeat-x}.well{background-image:-webkit-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#e8e8e8),to(#f5f5f5));background-image:linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x;border-color:#dcdcdc;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)} -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/Lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/Lato.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/LatoBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/LatoBold.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/LatoItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/LatoItalic.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/NewsCycle.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/NewsCycle.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/NewsCycleBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/NewsCycleBold.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/OpenSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/OpenSans.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/OpenSansBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/OpenSansBold.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/OpenSansBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/OpenSansBoldItalic.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/OpenSansItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/OpenSansItalic.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/OpenSansLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/OpenSansLight.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/OpenSansLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/OpenSansLightItalic.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/Raleway.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/Raleway.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/RalewayBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/RalewayBold.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/Roboto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/Roboto.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/RobotoBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/RobotoBold.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/RobotoLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/RobotoLight.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/RobotoMedium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/RobotoMedium.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/SourceSansPro.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/SourceSansPro.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/SourceSansProBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/SourceSansProBold.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/SourceSansProItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/SourceSansProItalic.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/SourceSansProLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/SourceSansProLight.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/css/fonts/Ubuntu.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/css/fonts/Ubuntu.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jules32/rmarkdown-website-tutorial/eaf8be0f6e2d55658e3e5e75bdc382a620c8a7b7/site_libs/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/js/npm.js: -------------------------------------------------------------------------------- 1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment. 2 | require('../../js/transition.js') 3 | require('../../js/alert.js') 4 | require('../../js/button.js') 5 | require('../../js/carousel.js') 6 | require('../../js/collapse.js') 7 | require('../../js/dropdown.js') 8 | require('../../js/modal.js') 9 | require('../../js/tooltip.js') 10 | require('../../js/popover.js') 11 | require('../../js/scrollspy.js') 12 | require('../../js/tab.js') 13 | require('../../js/affix.js') -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/shim/html5shiv.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | // Only run this code in IE 8 5 | if (!!window.navigator.userAgent.match("MSIE 8")) { 6 | !function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.2",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b)}(this,document); 7 | }; 8 | -------------------------------------------------------------------------------- /site_libs/bootstrap-3.3.5/shim/respond.min.js: -------------------------------------------------------------------------------- 1 | /*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl 2 | * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT 3 | * */ 4 | 5 | // Only run this code in IE 8 6 | if (!!window.navigator.userAgent.match("MSIE 8")) { 7 | !function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b'); 25 | if (show) 26 | div.addClass('in'); 27 | var id = 'rcode-643E0F36' + currentIndex++; 28 | div.attr('id', id); 29 | $(this).before(div); 30 | $(this).detach().appendTo(div); 31 | 32 | // add a show code button right above 33 | var showCodeText = $('' + (show ? 'Hide' : 'Code') + ''); 34 | var showCodeButton = $(''); 35 | showCodeButton.append(showCodeText); 36 | showCodeButton 37 | .attr('data-toggle', 'collapse') 38 | .attr('data-target', '#' + id) 39 | .attr('aria-expanded', show) 40 | .attr('aria-controls', id); 41 | 42 | var buttonRow = $('
'); 43 | var buttonCol = $('
'); 44 | 45 | buttonCol.append(showCodeButton); 46 | buttonRow.append(buttonCol); 47 | 48 | div.before(buttonRow); 49 | 50 | // update state of button on show/hide 51 | div.on('hidden.bs.collapse', function () { 52 | showCodeText.text('Code'); 53 | }); 54 | div.on('show.bs.collapse', function () { 55 | showCodeText.text('Hide'); 56 | }); 57 | }); 58 | 59 | } 60 | -------------------------------------------------------------------------------- /site_libs/navigation-1.1/sourceembed.js: -------------------------------------------------------------------------------- 1 | 2 | window.initializeSourceEmbed = function(filename) { 3 | $("#rmd-download-source").click(function() { 4 | var src = $("#rmd-source-code").html(); 5 | var a = document.createElement('a'); 6 | a.href = "data:text/x-r-markdown;base64," + src; 7 | a.download = filename; 8 | document.body.appendChild(a); 9 | a.click(); 10 | document.body.removeChild(a); 11 | }); 12 | }; 13 | -------------------------------------------------------------------------------- /site_libs/navigation-1.1/tabsets.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /** 4 | * jQuery Plugin: Sticky Tabs 5 | * 6 | * @author Aidan Lister 7 | * adapted by Ruben Arslan to activate parent tabs too 8 | * http://www.aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/ 9 | */ 10 | (function($) { 11 | "use strict"; 12 | $.fn.rmarkdownStickyTabs = function() { 13 | var context = this; 14 | // Show the tab corresponding with the hash in the URL, or the first tab 15 | var showStuffFromHash = function() { 16 | var hash = window.location.hash; 17 | var selector = hash ? 'a[href="' + hash + '"]' : 'li.active > a'; 18 | var $selector = $(selector, context); 19 | if($selector.data('toggle') === "tab") { 20 | $selector.tab('show'); 21 | // walk up the ancestors of this element, show any hidden tabs 22 | $selector.parents('.section.tabset').each(function(i, elm) { 23 | var link = $('a[href="#' + $(elm).attr('id') + '"]'); 24 | if(link.data('toggle') === "tab") { 25 | link.tab("show"); 26 | } 27 | }); 28 | } 29 | }; 30 | 31 | 32 | // Set the correct tab when the page loads 33 | showStuffFromHash(context); 34 | 35 | // Set the correct tab when a user uses their back/forward button 36 | $(window).on('hashchange', function() { 37 | showStuffFromHash(context); 38 | }); 39 | 40 | // Change the URL when tabs are clicked 41 | $('a', context).on('click', function(e) { 42 | history.pushState(null, null, this.href); 43 | showStuffFromHash(context); 44 | }); 45 | 46 | return this; 47 | }; 48 | }(jQuery)); 49 | 50 | window.buildTabsets = function(tocID) { 51 | 52 | // build a tabset from a section div with the .tabset class 53 | function buildTabset(tabset) { 54 | 55 | // check for fade and pills options 56 | var fade = tabset.hasClass("tabset-fade"); 57 | var pills = tabset.hasClass("tabset-pills"); 58 | var navClass = pills ? "nav-pills" : "nav-tabs"; 59 | 60 | // determine the heading level of the tabset and tabs 61 | var match = tabset.attr('class').match(/level(\d) /); 62 | if (match === null) 63 | return; 64 | var tabsetLevel = Number(match[1]); 65 | var tabLevel = tabsetLevel + 1; 66 | 67 | // find all subheadings immediately below 68 | var tabs = tabset.find("div.section.level" + tabLevel); 69 | if (!tabs.length) 70 | return; 71 | 72 | // create tablist and tab-content elements 73 | var tabList = $('
    '); 74 | $(tabs[0]).before(tabList); 75 | var tabContent = $('
    '); 76 | $(tabs[0]).before(tabContent); 77 | 78 | // build the tabset 79 | var activeTab = 0; 80 | tabs.each(function(i) { 81 | 82 | // get the tab div 83 | var tab = $(tabs[i]); 84 | 85 | // get the id then sanitize it for use with bootstrap tabs 86 | var id = tab.attr('id'); 87 | 88 | // see if this is marked as the active tab 89 | if (tab.hasClass('active')) 90 | activeTab = i; 91 | 92 | // remove any table of contents entries associated with 93 | // this ID (since we'll be removing the heading element) 94 | $("div#" + tocID + " li a[href='#" + id + "']").parent().remove(); 95 | 96 | // sanitize the id for use with bootstrap tabs 97 | id = id.replace(/[.\/?&!#<>]/g, '').replace(/\s/g, '_'); 98 | tab.attr('id', id); 99 | 100 | // get the heading element within it, grab it's text, then remove it 101 | var heading = tab.find('h' + tabLevel + ':first'); 102 | var headingText = heading.html(); 103 | heading.remove(); 104 | 105 | // build and append the tab list item 106 | var a = $('' + headingText + ''); 107 | a.attr('href', '#' + id); 108 | a.attr('aria-controls', id); 109 | var li = $('
  • '); 110 | li.append(a); 111 | tabList.append(li); 112 | 113 | // set it's attributes 114 | tab.attr('role', 'tabpanel'); 115 | tab.addClass('tab-pane'); 116 | tab.addClass('tabbed-pane'); 117 | if (fade) 118 | tab.addClass('fade'); 119 | 120 | // move it into the tab content div 121 | tab.detach().appendTo(tabContent); 122 | }); 123 | 124 | // set active tab 125 | $(tabList.children('li')[activeTab]).addClass('active'); 126 | var active = $(tabContent.children('div.section')[activeTab]); 127 | active.addClass('active'); 128 | if (fade) 129 | active.addClass('in'); 130 | 131 | if (tabset.hasClass("tabset-sticky")) 132 | tabset.rmarkdownStickyTabs(); 133 | } 134 | 135 | // convert section divs with the .tabset class to tabsets 136 | var tabsets = $("div.section.tabset"); 137 | tabsets.each(function(i) { 138 | buildTabset($(tabsets[i])); 139 | }); 140 | }; 141 | 142 | -------------------------------------------------------------------------------- /site_libs/tocify-1.9.1/jquery.tocify.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jquery.tocify.css 1.9.1 3 | * Author: @gregfranko 4 | */ 5 | 6 | /* The Table of Contents container element */ 7 | .tocify { 8 | width: 20%; 9 | max-height: 90%; 10 | overflow: auto; 11 | margin-left: 2%; 12 | position: fixed; 13 | border: 1px solid #ccc; 14 | webkit-border-radius: 6px; 15 | moz-border-radius: 6px; 16 | border-radius: 6px; 17 | } 18 | 19 | /* The Table of Contents is composed of multiple nested unordered lists. These styles remove the default styling of an unordered list because it is ugly. */ 20 | .tocify ul, .tocify li { 21 | list-style: none; 22 | margin: 0; 23 | padding: 0; 24 | border: none; 25 | line-height: 30px; 26 | } 27 | 28 | /* Top level header elements */ 29 | .tocify-header { 30 | text-indent: 10px; 31 | } 32 | 33 | /* Top level subheader elements. These are the first nested items underneath a header element. */ 34 | .tocify-subheader { 35 | text-indent: 20px; 36 | display: none; 37 | } 38 | 39 | /* Makes the font smaller for all subheader elements. */ 40 | .tocify-subheader li { 41 | font-size: 12px; 42 | } 43 | 44 | /* Further indents second level subheader elements. */ 45 | .tocify-subheader .tocify-subheader { 46 | text-indent: 30px; 47 | } 48 | 49 | /* Further indents third level subheader elements. You can continue this pattern if you have more nested elements. */ 50 | .tocify-subheader .tocify-subheader .tocify-subheader { 51 | text-indent: 40px; 52 | } 53 | 54 | /* Twitter Bootstrap Override Style */ 55 | .tocify .tocify-item > a, .tocify .nav-list .nav-header { 56 | margin: 0px; 57 | } 58 | 59 | /* Twitter Bootstrap Override Styles */ 60 | .tocify .tocify-item a, .tocify .list-group-item { 61 | padding: 5px; 62 | } 63 | 64 | .tocify .nav-pills > li { 65 | float: none; 66 | } 67 | 68 | /* We don't override the bootstrap colors because this gives us the 69 | wrong selection colors when using bootstrap themes 70 | 71 | .tocify .list-group-item:hover, .tocify .list-group-item:focus { 72 | background-color: #f5f5f5; 73 | } 74 | 75 | .tocify .list-group-item.active:hover, .tocify .list-group-item.active:focus { 76 | background-color: #428bca; 77 | } 78 | */ 79 | 80 | /* End Twitter Bootstrap Override Styles */ 81 | -------------------------------------------------------------------------------- /your_turn.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Now it's your turn" 3 | output: 4 | html_document: 5 | toc: true 6 | toc_float: true 7 | --- 8 | 9 |
    10 | 11 |
    12 | 13 | 14 | Try changing a few things and reknitting a single page or rebuilding the whole site. Do your own thing, or here are a few things to try: 15 | 16 |
    17 | 18 | ### Add a new page 19 | 20 | You'll need to add it to the nav bar in `_site.yml` too. 21 | 22 |
    23 | 24 | ### Add a footer 25 | 26 | 1. move `./advanced/_footer.html` to `./_footer.html` (or create a new one) 27 | 2. uncomment the footer in `_site.yml` 28 | 29 |
    30 | 31 | ### Add three columns 32 | 33 | How would you approach this? See what we did for 3 columns, or Google it. 34 | 35 |
    36 | 37 | ### What else did you learn? 38 | 39 | [Submit a pull request](https://help.github.com/articles/creating-a-pull-request/) to [this tutorial](https://github.com/jules32/rmarkdown-website-tutorial) and we can update it with what you learn! 40 | -------------------------------------------------------------------------------- /your_turn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Now it’s your turn 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 35 | 44 | 45 | 46 | 47 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 100 | 101 | 102 | 135 | 136 | 153 | 154 | 155 |
    156 | 157 | 158 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 195 | 196 | 253 | 254 | 255 |
    256 |
    257 |
    258 |
    259 |
    260 | 261 |
    262 | 263 | 264 | 265 | 266 | 297 | 298 | 305 | 306 | 307 |


    308 |
    309 | 310 |
    311 |

    Try changing a few things and reknitting a single page or rebuilding the whole site. Do your own thing, or here are a few things to try:

    312 |


    313 |
    314 |

    Add a new page

    315 |

    You’ll need to add it to the nav bar in _site.yml too.

    316 |


    317 |
    318 | 326 |
    327 |

    Add three columns

    328 |

    How would you approach this? See what we did for 3 columns, or Google it.

    329 |


    330 |
    331 |
    332 |

    What else did you learn?

    333 |

    Submit a pull request to this tutorial and we can update it with what you learn!

    334 |
    335 | 336 | 337 | 338 |
    339 |
    340 | 341 |
    342 | 343 | 355 | 356 | 357 | 365 | 366 | 367 | 368 | --------------------------------------------------------------------------------