WebSlides

Create HTML presentations in seconds —

Presentation
webslides/WebSlideswebslides.tv/

README

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.

Download

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.

  1. ```
  2. webslides/
  3. ├── index.html
  4. ├── css/
  5. │   ├── base.css
  6. │   └── colors.css
  7. │   └── svg-icons.css (optional)
  8. ├── js/
  9. │   ├── webslides.js
  10. │   └── svg-icons.js (optional)
  11. └── demos/
  12. └── images/
  13. ```

Features


- 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).

Markup


- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
- Each parent `
` in the `#webslides` element is an individual slide.

  1. ``` html
  2. <article id="webslides">
  3.     <section>
  4.         <h1>Slide 1</h1>
  5.     </section>
  6.     <section class="bg-black aligncenter">
  7.     
  8.         <div class="wrap">
  9.             <h1>Slide 2</h1>
  10.         </div>
  11.     </section>
  12. </article>
  13. ```

Vertical Sliding


  1. ``` html
  2. <article id="webslides" class="vertical">
  3. ```

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...

Extensions


You can add:

- Unsplash photos
- animate.css
- particles.js
- Animate on scroll (Useful for longform articles)
- pt

Dive In!


- Do not miss our demos.
- Want to get techie? Read our wiki:
  - FAQ
  - Core API
  - Plugin Docs
  - Plugin Development

Credits


- WebSlides was created by @jlantunez using Cactus.
- Javascript: @Belelros and @LuisSacristan.
- Based on SimpleSlides, by @JennSchiffer.