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

deck.js Getting Started Docs GitHub deck.js Modern HTML Presentations Download or → to learn more. 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub 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> Use arrow keys to navigate <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> 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub How Does It Work? <div class="deck­container"> <section class="slide"> <h1>My Presentation</h1> </section> Slides are basic HTML. <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> 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub How Does It Work? <div class="deck­container"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> Slides are basic HTML. <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> The deck.core module keeps track of slide states <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> 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub How Does It Work? <div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> Slides are basic HTML. <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> The deck.core module keeps track of slide states <ul> and deck states <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> 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub How Does It Work? <div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> Slides are basic HTML. <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> The deck.core module keeps track of slide states <ul> and deck states, leaving CSS to define what each <li>Point 1</li> <li>Point 2</li> state look like… <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> 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub How Does It Work? <div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> Slides are basic HTML. <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> The deck.core module keeps track of slide states <ul> and deck states, leaving CSS to define what each <li>Point 1</li> <li>Point 2</li> state look like… <li>Point 3</li> </ul> </section> …and how to transition between them. <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> 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub How Does It Work? <div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> Slides are basic HTML. <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> The deck.core module keeps track of slide states <ul> and deck states, leaving CSS to define what each <li>Point 1</li> <li>Point 2</li> state look like… <li>Point 3</li> </ul> </section> …and how to transition between them. <section class="slide deck­next"> <h2>Another Slide</h2> Extensions use core events and methods to add <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> goodies <p><cite>Cicero</cite></p> </blockquote> </section> </div> 8 / 15 deck.status 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub How Does It Work? <div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> Slides are basic HTML. <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> The deck.core module keeps track of slide states <ul> and deck states, leaving CSS to define what each <li>Point 1</li> <li>Point 2</li> state look like… <li>Point 3</li> </ul> </section> …and how to transition between them. <section class="slide deck­next"> <h2>Another Slide</h2> Extensions use core events and methods to add <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> goodies, giving presenters the freedom to add <p><cite>Cicero</cite></p> </blockquote> what they want </section> </div> deck.goto deck.navigation deck.navigation Go to slide: ← → G o 9 / 15 deck.status 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub How Does It Work? <div class="deck­container on­slide­1"> <section class="slide deck­previous"> <h1>My Presentation</h1> </section> Slides are basic HTML. <section class="slide deck­current"> <h2>Slide Header</h2> <p>Here is a list of points:</p> The deck.core module keeps track of slide states <ul> and deck states, leaving CSS to define what each <li>Point 1</li> <li>Point 2</li> state look like… <li>Point 3</li> </ul> </section> …and how to transition between them. <section class="slide deck­next"> <h2>Another Slide</h2> Extensions use core events and methods to add <blockquote cite="http://example.com"> <p>Lorem ipsum dolor sit amet.</p> goodies, giving presenters the freedom to add <p><cite>Cicero</cite></p> </blockquote> what they want and leave out what they don’t. </section> </div> 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub Great. Now What? 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub Great. Now What? Only Know HTML? Use included premade themes and templates to start making your deck immediately. Get Started 1.1.0 A project of I Make Web Things

deck.js Getting Started Docs GitHub Great. Now What? Only Know HTML? CSS+JS Badass? Use included premade themes and Make custom decks with the API templates to start making your exposed by the core deck immediately. and extensions. Get Started View Docs 1.1.0 A project of I Make Web Things