This page demonstrates the use of the "fit" extension for deck.js.
Use left/right arrow keys to browse the presentation.

Getting started with deck.js:
fit extension
use right arrow to move on

“fit”: What It Does

  • Before anything

    please resize the slides by dragging the bottom right corner of the dark-red frame
  • More on the next slide

Designing for “fit”

  • You decide on a design dimension
    (default: 800x600)
  • You write all your slides
    as if they were exactly of this size

  • You put your slides in a container of any size
  • You decide how they should adapt (e.g., center)

  • And “fit” handles it!

Playing with “fit” demo

  • Resize the red box
  • Change the “fitMode”
    with the select on the top-right of this page
  • Press the 's' key to make the slides fit to the window

Browser support

  • Did it work for you? :)
  • Should be ok on good browsers

Notes about the demo

  • The 8 yellow boxes are to test background elements. You may use them into your slides, e.g., for footer, logos, …
  • The red border just helps understanding where the “deck-container” is
  • The white border just helps understanding where each “slide” is
  • The white border also illustrates the “fitMarginX” and “fitMarginY” options that can be used for adding a margin around the slides

Digging Deeper

If you want to learn more, you can: