Create a lightweight presentation using HTML and Web Components.
DeckDeckGo is build with Stencil and could be use in any modern framework or even without any.
-
✏️ Create without effort your presentation using HTML and CSS
-
📰 Use predefined templates
-
🌈 Style your presentation quickly
-
🌅 Create a lightweight presentation where images are lazy loaded
-
📱 Ship your presentation as a Progressive Web App
-
🎁 Free and open source
DeckDeckGo offers also a starter kit kit which lets you additionally:
-
🚀 Publish your presentation as a Progressive Web App with a offline support
-
🦄 Use Ionic components and icons to create the content or even add extra features
Cherry on the cake 🍒🎂 DeckDeckGo comes with its Progressive Web App that allows you to remote control your presentation 🚀
DeckDeckGo provides a CLI and a starter kit.
To get started and to create your presentation, run the following command and follow the prompt:
npm init deckdeckgoOnce your presentation created, go to your new project's folder and start editing src/index.html to prepare your slides and content for your talk 😉
The DeckDeckGo presentation tool could also be use without any tooling. If you wish import the component in your web project, have a look to the installation documentation to learn how to install and include it.
DeckDeckGo is a deck of slides where each slide has its own layout and behaviour. Their content could be edited and structured using the provided slots and other attributes.
The deck should be declared using the tag <deckgo-deck/> and each slide should be added to its children.
<deckgo-deck>
<deckgo-slide-title>
<h1 slot="title">The first slide</h1>
<p slot="content">
Hello World 🚀
</p>
</deckgo-slide-title>
<deckgo-slide-content>
<h1 slot="title">The second slide</h1>
</deckgo-slide-content>
</deckgo-deck>
The 👉 extended documentation 👈 displays all templates and options available for each slides.
DeckDeckGo also offers a couple of components which could be used in almost every templates, these are documented in a separate chapter of the documentation.
Furthermore than the default swiping, the DeckDeckGo deck expose some asynchronous methods in case you would like to add navigation features to your presentation.
These features are described in the separate documentation about navigation.
Finally DeckDeckGo offers extra features, as for example a print feature or a full screen toggler, which could be added to your presentation too.
These features are described in the separate documentation about extra features.
In order to lazy load the images of your presentation, provide their url using the attribute data-src instead of src. DeckDeckGo will then take care of loading them only when needed.
<img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"/>
DeckDeckGo offers various theming options which could be set using CSS variables and which are described in their respective slides' templates documentation.
Note: If you would miss or need further theming options, don't hesitate to open an issue and/or submit a PR, it would be my pleasure to add more theming flexibility and options
A collection of talks where DeckDeckGo was used:
| Title | Event | Author and repo | Available online |
|---|---|---|---|
| Ionic v4, web components, shadow dom and beyond | 2018/10/16 Pantalks, Zürich | Peterpeterparker | |
| Ionic v4 and web components | 2018/10/26 Web Zürich October, Zürich | Peterpeterparker |
If you would publish online a talk you would have built with DeckDeckGo, reach me out, I would be super duper happy to list these ❤️
I had the opportunity to talk about Web Components and Ionic. While I was developing my presentation it came to my mind that I was not really following what I was about to present, that's why I wrapped up together DeckDeckGo, this new tool to create lightweight presentation using HTML, Web Components and Ionic.
MIT © David Dal Busco
