1
0
Fork 0
why-cant-we-deploy-today/README.md

105 lines
4.0 KiB
Markdown
Raw Normal View History

2011-12-05 03:21:15 +01:00
# reveal.js
2011-06-07 22:38:22 +02:00
2011-12-27 06:34:53 +01:00
A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't _rely_ on any external libraries but [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/) is included by default for code highlighting.
Note that this requires a browser with support for CSS 3D transforms and ``classList``. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. You could also use a polyfill for ``classList`` to make this work in < iOS 5 and < Safari 5.1, [here's one](https://github.com/remy/polyfills/blob/master/classList.js) from [@remy](https://github.com/remy).
2011-12-05 03:21:15 +01:00
Curious about how this looks in action? [Check out the demo page](http://lab.hakim.se/reveal-js/).
2011-12-23 05:36:42 +01:00
# Examples
* http://lab.hakim.se/reveal-js/ (original)
2012-03-02 08:05:06 +01:00
* http://www.ideapolisagency.com/ by [@achrafkassioui](http://twitter.com/achrafkassioui)
* http://lucienfrelin.com/ by [@lucienfrelin](http://twitter.com/lucienfrelin)
2012-01-02 11:18:08 +01:00
* http://creatorrr.github.com/ThePoet/
2012-03-02 08:05:06 +01:00
* http://moduscreate.com/ by [@ModusCreate](https://twitter.com/ModusCreate)
* [Webapp Development Stack & Tooling](http://dl.dropbox.com/u/39519/talks/jquk-tooling%2Bappstack/index.html) by [@paul_irish](https://twitter.com/paul_irish)
* http://idea.diwank.name/ by [Diwank Singh](http://diwank.name/)
* http://concurrencykit.org/presentations/lockfree_introduction/ by Samy Al Bahra
* http://www.thecssninja.com/talks/not_your_average_dnd/ by [@ryanseddon](http://twitter.com/ryanseddon)
2011-12-23 05:36:42 +01:00
[Send me a link](http://hakim.se/about/contact) if you used reveal.js for a project or presentation.
2012-01-15 03:20:52 +01:00
# Usage
Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides.
At the end of your page, after ``<script src="js/reveal.js"></script>``, you need to initialize reveal. Note that all config values are optional.
```
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// If true; each slide will be pushed to the browser history
history: true,
2012-01-15 04:22:27 +01:00
// Flags if mouse wheel navigation should be enabled
mouseWheel: true,
2012-01-15 03:20:52 +01:00
// Apply a 3D roll to links on hover
rollingLinks: true,
// UI style
theme: 'default', // default/neon
// Transition style
transition: 'default' // default/cube/page/concave/linear(2d)
});
```
2011-12-05 03:21:15 +01:00
# History
2012-01-15 03:20:52 +01:00
#### 1.2 (master)
- Big changes to DOM structure:
- Previous #main wrapper is now called #reveal
- Slides were moved one level deeper, into #reveal .slides
- Controls and progress bar were moved into #reveal
- CSS is now much more explicit, rooted at #reveal, to prevent conflicts
- Config option for disabling updates to URL, defaults to true
- Anchors with image children no longer rotate in 3D on hover
2012-01-15 04:22:27 +01:00
- Support for mouse wheel navigation ([naugtur](https://github.com/naugtur))
2012-01-15 03:20:52 +01:00
#### 1.1
2011-12-22 09:11:57 +01:00
- Added an optional presentation progress bar
- Images wrapped in anchors no longer unexpectedly flip in 3D
2011-12-26 09:04:11 +01:00
- Slides that contain other slides are given the 'stack' class
- Added 'transition' option for specifying transition styles
- Added 'theme' option for specifying UI styles
- New transitions: 'box' & 'page'
- New theme: 'neon'
2011-12-22 09:11:57 +01:00
2012-01-15 03:20:52 +01:00
#### 1.0
2011-12-05 03:21:15 +01:00
- New and improved style
- Added controls in bottom right which indicate where you can navigate
- Reveal views in iteratively by giving them the .fragment class
- Code sample syntax highlighting thanks to [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/)
- Initialization options (toggling controls, toggling rolling links, transition theme)
2012-01-15 03:20:52 +01:00
#### 0.3
2011-12-05 03:21:15 +01:00
- Added licensing terms
- Fixed broken links on touch devices
2012-01-15 03:20:52 +01:00
#### 0.2
2011-12-05 03:21:15 +01:00
- Refactored code and added inline documentation
- Slides now have unique URL's
- A basic API to invoke navigation was added
2012-01-15 03:20:52 +01:00
#### 0.1
2011-12-05 03:21:15 +01:00
- First release
2012-01-15 03:20:52 +01:00
- Transitions and a white theme
2011-06-07 22:38:22 +02:00
2011-06-09 21:21:54 +02:00
# License
MIT licensed
Copyright (C) 2011 Hakim El Hattab, http://hakim.se