HTML CSS JavaScript
Latest commit c17e376 Feb 19, 2017 @jlantunez committed on GitHub 0.1.1
misspelling: shortcuts
Permalink
Failed to load latest commit information.
demos Initialize webslides Feb 12, 2017
static ID param is not longer needed Feb 12, 2017
CHANGELOG.md 0.1.1 Feb 11, 2017
LICENSE Initial commit Jan 8, 2017
README.md 0.1.1 Feb 19, 2017
error.html 404 page. Feb 11, 2017
index.html Initialize webslides Feb 11, 2017

README.md

WebSlides = Good Karma

Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — https://webslides.tv/demos.

A new release (at least) every 8th day of the month. Version 0.1: Jan 8, 2017.

Why WebSlides?

Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.

Features

  • Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe.
  • Slide counter.
  • Permalinks: go to a specific slide.
  • 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 <section> in the #webslides element is an individual slide.
<article id="webslides">
    <section>
        <h1>Slide 1</h1>
    </section>
    <section class="bg-black aligncenter">
    <!-- .wrap = container 1200px -->
        <div class="wrap">
            <h1>Slide 2</h1>
        </div>
    </section>
</article>

Vertical Sliding

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

How it works

You need to add the follow javascript to initialize the webslides object.

var slide = jQuery('#webslides').webslides();

Now you can use the slide with these functions:

// Moving to next slide
slide.nextSlide();
// Moving to previous slide
slide.previousSlide();
// Moving to a specific slide
slide.goToSlide(n);

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.

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

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:

License

WebSlides is licensed under the MIT License. Use it to make something cool.

Credits