HTML5/CSS3/Javascript Game Engines

The Short List

The Markup

Slides are just HTML elements with a class of slide.

<section class="slide">
   <h2>How to Make a Deck</h2>
   <ol>
      <li>
         <h3>Write Slides</h3>
         <p>Slide content is simple HTML.</p>
      </li>
      <li>
         <h3>Choose Themes</h3>
         <p>One for slide styles and one for deck transitions.</p>
      </li>
      …
   </ol>
</section>

Style Themes

Customizes the colors, typography, and layout of slide content.

<link rel="stylesheet" href="/path/to/css/style-theme.css">

Transition Themes

Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But you aren’t using those browsers to give your presentations, are you…

<link rel="stylesheet" href="/path/to/css/transition-theme.css">

Extensions

Core gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this deck:

Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML files. For a complete list of extension modules included in deck.js, check out the documentation.

Nested Slides

That last slide had a few steps. To create substeps in slides, just nest them:

<section class="slide">
  <h2>Extensions</h2>
  <p>Core gives you basic slide functionality...</p>		
  <ul>
     <li class="slide">
        <h3>deck.goto</h3>
        <p>Adds a shortcut key to jump to any slide number...</p>
     </li>
     <li class="slide">...</li>	
     <li class="slide">...</li>
     <li class="slide">...</li>
  </ul>
</section>

Other Elements: Images

Kitties
<img src="http://placekitten.com/600/375" alt="Kitties">

Other Elements: Blockquotes

Food is an important part of a balanced diet.

Fran Lebowitz

<blockquote cite="http://example.org">
  <p>Food is an important part of a balanced diet.</p>
  <p><cite>Fran Lebowitz</cite></p>
</blockquote>

Other Elements: Video Embeds

Embed videos from your favorite online video service or with an HTML5 video element.

<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>

Digging Deeper

If you want to learn about making your own themes, extending deck.js, and more, check out the documentation.

/

#