deck.js Modern HTML Presentations Download or to learn more. - - PowerPoint PPT Presentation

deck.js

Modern HTML Presentations

Download

• r → to learn more.

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

How Does It Work?

<div class="deck­container"> <section class="slide"> <h1>My Presentation</h1> </section> <section class="slide"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

Use arrow keys to navigate deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

How Does It Work?

Slides are basic HTML.

<div class="deck­container"> <section class="slide"> <h1>My Presentation</h1> </section> <section class="slide"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

How Does It Work?

Slides are basic HTML. The deck.core module keeps track of slide states

<div class="deck­container"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck­next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

How Does It Work?

Slides are basic HTML. The deck.core module keeps track of slide states and deck states

<div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck­next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

How Does It Work?

Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state look like…

<div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck­next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

How Does It Work?

Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state look like… …and how to transition between them.

<div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck­next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

How Does It Work?

Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state look like… …and how to transition between them. Extensions use core events and methods to add goodies

<div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck­next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

deck.js

Getting Started Docs GitHub

8 / 15

deck.status 1.1.0 A project of I Make Web Things

How Does It Work?

Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state look like… …and how to transition between them. Extensions use core events and methods to add goodies, giving presenters the freedom to add what they want

<div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck­next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

Go to slide:

deck.goto

←

deck.navigation

→

deck.navigation

deck.js

Getting Started Docs GitHub

9 / 15

deck.status 1.1.0 A project of I Make Web Things

How Does It Work?

Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state look like… …and how to transition between them. Extensions use core events and methods to add goodies, giving presenters the freedom to add what they want and leave out what they don’t.

<div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> <ul> <li>Point 1</li> <li>Point 2</li> <li>Point 3</li> </ul> </section> <section class="slide deck­next"> <h2>Another Slide</h2> <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> <p><cite>Cicero</cite></p> </blockquote> </section> </div>

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

• Great. Now What?

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

Only Know HTML?

Use included premade themes and templates to start making your deck immediately. Get Started

• Great. Now What?

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

CSS+JS Badass?

Make custom decks with the API exposed by the core and extensions. View Docs

Only Know HTML?

Use included premade themes and templates to start making your deck immediately. Get Started

• Great. Now What?

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

Something In-between?

Take a little from both worlds. Tweak a theme, hack an extension,

• r write some of your own.

Only Know HTML?

Use included premade themes and templates to start making your deck immediately. Get Started

CSS+JS Badass?

Make custom decks with the API exposed by the core and extensions. View Docs

• Great. Now What?

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things

Only Know HTML?

Use included premade themes and templates to start making your deck immediately. Get Started

CSS+JS Badass?

Make custom decks with the API exposed by the core and extensions. View Docs

Something In-between?

Take a little from both worlds. Tweak a theme, hack an extension,

• r write some of your own.

Download

• Great. Now What?

deck.js

Getting Started Docs GitHub

1.1.0 A project of I Make Web Things