Giter Club home page Giter Club logo

deck.js-base's Introduction

Introduction

This repo provides a starting point for a slide deck based on deck.js. It includes the following:

Like deck.js itself, this project is licensed under 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 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">

Customization

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

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

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.

deck.js-base's People

Contributors

elazar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  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.