Ben's Base Reveal Project

This is my base project for creating presentations in reveal.js

Instructions

External Markdown

Slide content is written in markdown in the slides.md file.

Element Attributes

Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.

<section data-markdown>
	<script type="text/template">
		- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
		- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
	</script>
</section>

Presentation Size

All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.

See below for a list of configuration options related to sizing, including default values:

Reveal.initialize({

	...

	// The "normal" size of the presentation, aspect ratio will be preserved
	// when the presentation is scaled to fit different resolutions. Can be
	// specified using percentage units.
	width: 960,
	height: 700,

	// Factor of the display size that should remain empty around the content
	margin: 0.1,

	// Bounds for smallest/largest possible scale to apply to content
	minScale: 0.2,
	maxScale: 1.5

});

Overview mode

Press "Esc" or "o" keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides, as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:

Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );

// Toggle the overview mode programmatically
Reveal.toggleOverview();

Fullscreen mode

Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.

PDF Export

Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use Google Chrome or Chromium. Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.

Open your presentation with print-pdf included anywhere in the query string. This triggers the default index HTML to load the PDF print stylesheet (css/print/pdf.css). You can test this with lab.hakim.se/reveal-js?print-pdf.
Open the in-browser print dialog (CMD+P).
Change the Destination setting to Save as PDF.
Change the Layout to Landscape.
Change the Margins to None.
Enable the Background graphics option.
Click Save.

Alternatively you can use the decktape project.

Installation

Full setup

Install Node.js
Install Grunt
Install dependencies
```
$ npm install
```
Serve the presentation and monitor source files for changes
```
$ grunt serve
```
Open http://localhost:8000 to view your presentation

You can change the port by using grunt serve --port 8001.

Folder Structure

css/ Core styles without which the project does not function
js/ Like above but for JavaScript
plugin/ Components that have been developed as extensions to reveal.js
lib/ All other third party assets (JavaScript, CSS, fonts)

Hosting

The project is configured to be hostable on heroku out of the box, simply push to a heroku application.

$ heroku apps:create <appname>
$ git push heroku

License

MIT licensed

benzittlau / exchange-js-hows-the-vue