Frameworks

Interactive Docs, UseR 2014

Ramnath Vaidyanathan

A framework is a collection of stylesheets, javascripts and layouts that control the style and appearance of a slide deck.

Edit Home Comment 
---
title: Frameworks
framework: revealjs
mode: selfcontained
---

## Slide 1

Some content

--- 

## Slide 2

Some content

---
title: Frameworks
framework: revealjs
mode: selfcontained
---

## Slide 1

Some content

--- 

## Slide 2

Some content
Edit Home Comment

Using Frameworks

Example

  1. Open demos/frameworks/index.Rmd
  2. Run slidify("index.Rmd") and Open index.html

Intermediate

Change the framework property in index.Rmd and run slidify

  1. deckjs
  2. shower
Edit Home Comment

A theme is a collection of stylesheets that provides different skins for slide decks generated using the framework.

Edit Home Comment 
---
title: Frameworks
framework: revealjs
revealjs: {theme: solarized, transition: cube}
mode: selfcontained
url: {lib: ../libraries}
---

## Slide 1

Some content

--- 

## Slide 2

Some content
Edit Home Comment

Using Themes

Example

  1. Open demos/frameworks/solarized/index.Rmd
  2. Run slidify("index.Rmd") and Open index.html

Intermediate

Different frameworks support different themes and transitions.

revealjs

  • theme: solarized, moon, sky, simple, serif, night, moon, default, beige
  • transition: default, cube, page, concave, zoom, linear, fade, none

deckjs

  • theme: web-2.0, neon, swiss
  • transition: fade, horizontal-slide, vertical-slide
Edit Home Comment

Vertical Slides

---
title: Frameworks
framework: revealjs
mode: selfcontained
url: {lib: ../libraries}
--- &vertical

## Slide 1

Some content

*** 

## Sub Slide 1

***

## Sub Slide 2
Edit Home Comment
Edit Home Comment

ImpressJS

Edit Home Comment 
---
title: Testing ImpressJS
framework: impressjs
mode: draft
--- .slide x:-1000 y:-1500

<q>Aren't you just **bored** with all those slides-based presentations?</q>

--- .slide x:0 y:-1500

<q>Don't you think that presentations given **in modern browsers** shouldn't **copy the limits** of 'classic' slide decks?</q>

--- .slide x:1000 y:-1500

<q>Would you like to **impress your audience** with **stunning visualization** of your talk?</q>

--- #title x:0 y:0 scale:4

<span class="try">then you should try</span>
# impress.js^*
<span class="footnote">^* no rhyme intended</span>
Edit Home Comment