This repo provides a starting point for a slide deck based on deck.js. It includes the following:
- Core deck.js files including the Swiss theme (stable branch as of 2015-04-26)
- deck.menu extension
- rainbow library (1.1.9) with the github theme and PHP and HTML languages
- rainbow.linenumbers extension
Like deck.js itself, this project is licensed under the MIT License.
Open index.html
in your preferred text editor. Update the title
tag value and meta
tag attribute values at the top. Scroll down to within the body
tag and find the div
tag with the id
attribute value of title-slide
. Within that div
tag, update the h1
and h2
tags.
At this point, you can open index.html
in a browser and see your title slide. If you want to add any custom CSS, you can do it in css/deck.custom.css
. It's already included by index.html
. The same applies to js/deck.custom.js
for custom JS. index.html
also includes the version of jQuery bundled with deck.js (currently 1.10.2) as well as the SyntaxHighlighter library.
To create new slides, copy and paste the div
block below the one for the title slide (it has id="new-slide"
), change the div
tag id
attribute value and the h2
tag value, and add your content. See the deck.js introduction for more information on how to format slide markup. You can use SyntaxHighlighter to add source code highlighting.
I typically create an img
directory on the same level as the css
and js
directories and store any image files there, then reference them using relative paths as in the example below. You'll have to create the directory yourself as git doesn't support tracking empty directories.
<img src="img/filename.png">
Here are a few things you can do to tailor this base to your liking:
- Change the deck.js theme or transition
- Remove or add deck.js extensions
- Change the rainbow theme or languages
- Hack in some custom JS - the deck.js docs might be handy for this
- Try upgrading dependencies, like Modernizr or jQuery - this could break things, so back up the current versions first
If this project gets behind the current stable branch of deck.js, just clone the deck.js repo, check out the stable branch, and update the relevant files:
cp deck.js/core/deck.core.css deck.js-base/css/deck.core.css
cp deck.js/extensions/menu/deck.menu.css deck.js-base/css/extensions/deck.menu.css
cp deck.js/themes/style/swiss.css deck.js-base/css/style/swiss.css
cp deck.js/themes/transition/horizontal-slide.css deck.js-base/css/transition/horizontal-slide.css
cp deck.js/modernizr.custom.js deck.js-base/js/modernizr.custom.js
cp deck.js/jquery.min.js deck.js-base/js/jquery.min.js
cp deck.js/core/deck.core.js deck.js-base/js/deck.core.js
cp deck.js/extensions/menu/deck.menu.js deck.js-base/js/extensions/deck.menu.js
I'm certainly open to improving this deck.js base. If you have suggestions, feel free to message me on GitHub or send me a pull request. Thanks in advance for your contribution.