Git Product home page Git Product logo

exchange-js-hows-the-vue's Introduction

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.

  1. 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.
  2. Open the in-browser print dialog (CMD+P).
  3. Change the Destination setting to Save as PDF.
  4. Change the Layout to Landscape.
  5. Change the Margins to None.
  6. Enable the Background graphics option.
  7. Click Save.

Chrome Print Settings

Alternatively you can use the decktape project.

Installation

Full setup

  1. Install Node.js

  2. Install Grunt

  3. Install dependencies

    $ npm install
  4. Serve the presentation and monitor source files for changes

    $ grunt serve
  5. 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

Copyright (C) 2016 Ben Zittlau, http://benzittlau.com

exchange-js-hows-the-vue's People

Contributors

hakimel avatar vonc avatar mischah avatar lordsutch avatar davidbanham avatar owenversteeg avatar rmurphey avatar dandv avatar benzittlau avatar asmod3us avatar farosas avatar burnpanck avatar gturri avatar technicalpickles avatar webpro avatar nschonni avatar tkaczmarzyk avatar xiaomipatchrom avatar mahemoff avatar commadelimited avatar olivierbloch avatar danielmitd avatar akiersky avatar theone1984 avatar jasonkarns avatar ericweikl avatar rajgoel avatar ob1 avatar navateja avatar russellbeattie avatar

Watchers

Mark Bennett avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.