October 21, 2018

336 words 2 mins read



Create HTML presentations in seconds

repo name webslides/WebSlides
repo link https://github.com/webslides/WebSlides
homepage https://webslides.tv/
language JavaScript
size (curr.) 2479 kB
stars (curr.) 5026
created 2017-01-08
license MIT License

WebSlides = Create stories with Karma

MIT License Release codecov Donate Twitter

Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos.


Simply choose a demo and customize it in seconds. Latest version: webslides.tv/webslides-latest.zip.

What’s in the download?

The download includes demos and images (devices and logos). All content is for demo purposes only. Images are property of their respective owners.

├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/


  • Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
  • Slide counter.
  • Permalinks: go to a specific slide.
  • Autoslide.
  • Click to nav.
  • Simple CSS alignments. Put content wherever you want (vertical centering…)
  • 40+ components: background images/videos, quotes, cards, covers…
  • Flexible blocks with auto-fill and equal height.
  • Fonts: Roboto, Maitree (Serif), and San Francisco.
  • Vertical rhythm (use multiples of 8).


  • Code is clean and scalable. It uses intuitive markup with popular naming conventions. There’s no need to overuse classes or nesting.
  • Each parent <section> in the #webslides element is an individual slide.
<article id="webslides">
        <h1>Slide 1</h1>
    <section class="bg-black aligncenter">
    <!-- .wrap = container 1200px -->
        <div class="wrap">
            <h1>Slide 2</h1>

Vertical Sliding

<article id="webslides" class="vertical">

CSS Syntax (classes)

  • Typography: .text-landing, .text-data, .text-intro
  • Background Colors: .bg-primary, .bg-apple, .bg-blue
  • Background Images: .background,.background-center-bottom
  • Cards: .card-50, .card-40
  • Flexible Blocks: .flexblock.clients, .flexblock.metrics


You can add:

Dive In!


comments powered by Disqus