endor.js: the simplest and fastest HTML5 presentation framework

https://endorjs.github.io

Keyboard navigation:

Next slide: [arrow down] || [arrow right] || [next page]
Previous slide: [arrow up] || [arrow left] || [previous page]

Background

Tired of bloated HTML presentation frameworks relying upon many «obsolete» JavaScript frameworks such as jQuery that can be easily replaced by the standard Web APIs?

Then try out endor.js!

Characteristics

Use of the semantic structure from the HTML5 elements. No need to tag the presentation slides with the class="slide" attribute (see usage section).
Theme creation via structured Sass variables.
Minimum set of external dependencies (at the moment, our framework depends only on hightlight.js for code highlighting).
Fonts via Google Fonts

We have included them so that the framework can also work when the presentation must be done off-line. Of course you can re-configure your sass files to generate full access to online versions of the dependencies.

Download

From npm:
```
$ npm install [-g] endor.js
```
You can find all what you need to start your presentation under the dist directory.
From GitHub as a direct download.
Copy the structure of the index_cdn.html file, which links the corresponding dependencies from the CDN at RawGit.

Usage (I)

Start with the following skeleton for your HTML5 presentation:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Presentation Title</title>
    <link rel="stylesheet" href="css/main.min.css" type="text/css">
    <link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <script type="application/javascript" src="highlight/highlight.pack.js"></script>
</head>
<body>
    <article>
        <!-- -->
    </article>
    <script type="application/javascript" src="scripts/endor.min.js"></script>
    <script type="application/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>

Usage (II)

Then wrap your slides within the article element. Add within your article a single header section, which will contain an h1 heading. That will be the front page of your presentation. All the section elements within the article will be presented as slides. Every section should contain an h2 heading.

The footer section within the article contains the running footer for the presentation, including the slides counter. Just replace the copyright information with your data.

Usage (III)

<article>
    <header>
        <h1>Presentation Title</h1>
        <p>Bla</p>
    </header>
    <section>
        <h2>Slide #1</h2>
        <p>Bla</p>
    </section>
    <!-- -->
    <footer>
        <address>
            © 2016 endor.js
        </address>
        <div id="counter">
            Slide <span id="slide_counter"></span> of
            <span id="slides_total"></span>
        </div>
    </footer>
</article>

Show me what can I do with the library ...

You can create simple unordered lists

Foo item
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
- Stet clita kasd gubergren
Bar item
1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
2. Stet clita kasd gubergren

... or ordered lists

Foo item
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
- Stet clita kasd gubergren
Bar item
1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
2. Stet clita kasd gubergren

You can split the content in 2 equally spaced areas

Left column

Right column

You can include cites through the `blockquote` element

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

You can add code snippets in different programming languages

... through the hightlight.js library

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <article>
        <!-- ... -->
    </article>
</body>
</html>

And of course, you can incorporate images and videos in your presentation

References

https://endorjs.github.io/
endorjs/endor
#endorjs