Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/elazar/deck.js-base

A base installation of deck.js with some bells and whistles added
https://github.com/elazar/deck.js-base

Last synced: 2 months ago
JSON representation

A base installation of deck.js with some bells and whistles added

Awesome Lists containing this project

README 

        
# Introduction



This repo provides a starting point for a slide deck based on [deck.js](http://imakewebthings.com/deck.js/ "deck.js"). It includes the following:



* Core deck.js files including the Swiss theme ([stable branch](https://github.com/imakewebthings/deck.js/tree/latest "imakewebthings/deck.js at latest") as of 2015-04-26)

* deck.menu extension

* [rainbow](https://github.com/ccampbell/rainbow/) library (1.1.9) with the [github theme](https://github.com/ccampbell/rainbow/blob/master/themes/github.css) and PHP and HTML [languages](https://github.com/ccampbell/rainbow/tree/master/js/language)

* [rainbow.linenumbers extension](https://github.com/Sjeiti/rainbow.linenumbers)



Like deck.js itself, this project is licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php "Open Source Initiative OSI - The MIT License").



# Basic Setup



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](http://jquery.com "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](http://imakewebthings.com/deck.js/introduction/ "Getting Started with deck.js") for more information on how to format slide markup. You can use SyntaxHighlighter to [add source code highlighting](http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html#pre__method "SyntaxHighlighter - Installation").



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.



    



# Customization



Here are a few things you can do to tailor this base to your liking:



* Change the deck.js [theme or transition](https://github.com/imakewebthings/deck.js/tree/stable/themes "makewebthings/deck.js at stable")

* Remove or add deck.js extensions

* Change the rainbow [theme](https://github.com/ccampbell/rainbow/tree/master/themes) or [languages](https://github.com/ccampbell/rainbow/tree/master/js/language)

* Hack in some custom JS - the [deck.js docs](http://imakewebthings.com/deck.js/docs/ "Docs - deck.js") might be handy for this

* Try upgrading dependencies, like [Modernizr](http://www.modernizr.com/ "Modernizr") or [jQuery](http://jquery.com "jQuery") - this could break things, so back up the current versions first



If this project gets behind the current stable branch of [deck.js](https://github.com/imakewebthings/deck.js "imakewebthings/deck.js"), just clone the deck.js repo, check out the stable branch, and update the relevant files:



```bash

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

```



# Contributing



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.