simpre

0.7.5 • Public • Published

SimPre - a 10KB HTML presentation framework

I've always wanted a minimalistic presentation framework that formats my slides correctly. SimPre scales and positions my content, using all the available space. In addition, it comes with a syntax highlighter and progress indicator.

Move on and see how to use it.

Usage

It's just a single HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SimPre - The Simplest Presentation HTML Framework</title>
  <link rel="stylesheet" href="https://simpre.vercel.app/assets/styles.css" />
  <script src="https://simpre.vercel.app/assets/simpre.js"></script>
</head>
<body>
  <section>
    <h1>Hey 👋</h1>
  </section>
  <div id="progress"></div>
</body>
</html>

Every <section> tag is a slide:

<section>
  <p>Slide with text</p>
</section>

All the code lives outside the framework. Create a file, add the code inside and load the file via the following <script> tag:

<section>
  <script
    src="https://simpre.vercel.app/assets/is.js"
    data-file="<path to a file>">
  </script>
<section>

There is "smart" selection mode. When showing code, I often want to emphasize or hide part of it. To help myself in this direction, I did a little feature that you can turn on and off via the Shift key. Select part of the text on this page and press the Shift key to see how it works.

Install

npm i simpre

DownloadsWeekly Downloads

11

Version

0.7.5

License

MIT

Unpacked Size

1.86 MB

Total Files

24

Last publish

Collaborators

  • krasimir